Hey <@U9UUY3CU9> what am I doing wrong here that I...
# pact-js
d
Hey @Matt (pactflow.io / pact-js / pact-go) what am I doing wrong here that I'm getting the missing requests errors? I've tried the fixes mentioned in previous posts and no luck 😞 Below are the images for the service making the call, the pact config file, the pact test I'm running, and the error. This is an angular app running on Mac using the jest-pact package.
y
Not used Angular before, but that looking at the logs, your mock server is started up and listening on the correct port you are expecting to send your request to I thought jest-pact uses a random port now, and you passes the mock server base url that you inject into your api client code. looking at that, mock server log though, it's not getting a request, so is that subscribe method actually calling that line in your hello world program to make the request
d
So I threw a console log in the service and it does look like the subscribe is calling the service. Here are some more logs. Hoping they look familiar and you know more about how to move forward from here 🙏
y
looks like there are no interactions loaded in the mock provider
any chance you could stick an example repo up on GH?
d
yeah, I'll push the code up now and share link for GH one sec
let me know if you have any issues accessing the repo
y
Can access it, can't install pact, using v3, as it pins peer deps to v24-v26 or jest https://github.com/pact-foundation/jest-pact/blob/a7b39380473e10b6939c89cbf8bd701f85bd513c/package.json#L61
will drop the jest version down in the dev dep which should sort it and get me installed 🙂
d
Yeah that works. I ran into that error as well and it was a lot of changing versions around so they would play nice together lol sorry about that
y
it's okay buddy. quick question, does your unit test work
might just be failing due to changing the port in the setupJest file, will grab a brew and spend 20 minutes having a poke around anyway
d
The unit test does pass but its a false positive. You can change the expected value to anything and it will still be a success. This is a separate issue I'm looking into as I didn't think it was related/affected the pact test.
Thank you I appreciate you taking a look 🙏 There aren't any recent angular/cypress/jest/nx monorepo content out there so I'm hoping to get this working and write an article.
Also, I have a nestJS api that I run locally to get that test to pass. Let me see if I can push it up in the GH as well. I initially thought I needed an API running for pact but the more I read it looked like there was no need for an api running locally. It was the pact mock server that would be returned the data essentially
y
monorepo stuff sounds cool, loads of people are asking for support for monorepos on my cypress plugins, and keep mentioning nx. I've got a group of various related plugins that I am planning on migrating a smaller subset of repos, because it's a pain maintaining them atm
d
So I don't actually need pact for nestJS 😞 I'm not sure what the overlap is but my company needs pact testing on the Frontend - Angular app inside an nx monorepo that uses Jest and Cypress. We don't have any nestJS apps it was more me thinking I needed an API to provide data to get the pact tests to work.
From my understanding though you stub some data and then feed that into Pact so when the Pact test hits the Pact mock server it returns the stubbed data I fed it.
y
correct, but the pact mock service, will check when it receives the request, was it the type of request you explicitly stated in your test, if so, it will return the prescribed data, for your client code to unmarshall, and for you to test the response of your clients code result (not that of the providing api)
d
Yup that's exactly how I understood it. So there isn't a need for a providing api which would be the localhost:3333 endpoint you're seeing in the unit test. Is there some overlap between the unit test you ran and the pact test that is run with the "npm run test:pact" command?
I assumed they had nothing to do with each other really. That they're two completely separate concerns with no dependency on each other. Is that correct?
y
so your unit test, effectively is a component integration test, with a mock of the provider. Pact is used within your unit test framework. You wouldn't use Pact in all your test cases, but a select few
d
I'm not quite sure I follow 😓 The unit test that's currently in there can be disregarded no? We can just delete it if it's causing any confusion. I had only created it thinking it was needed for the Pact test.
y
Yeah I don't think it's needed. this shows it quite nicely https://github.com/pact-foundation/jest-pact#usage I just started there, to ensure that we were mocking the call in the unit test correctly to whichever endpoint our api client service (in this case HelloWorldService) The non pact test doesn't look right as I can expect the result to be anything, and it passes. (as you said)
d
Oh I see what you're saying about ensuring we're mocking the call correctly. Yeah I had just thrown a console log in there to make sure the .subscribe() method actually called the service which it did. I'm also assuming the get request in the helloworldservice works correctly as well since if I run the api locally it does indeed return data when I call that service
So this is the pickle I'm in now, I'm not sure why Pact isn't picking up the fact that we're making a request. My only theory is that there is something wrong in the config as far as where we're pointing that request/endpoint.
I've tried passing in the entire pact mock server endpoint in the get request - e.g. http://localhost:8181/hello and http://127.0.0.1:8181/hello as well as passing in just the path - e.g. '/hello'
Nothing seems to work 😭
y
I don't think you are mocking things out correctly in angular
The pact bit might add more complexity, but looking the the angular docs https://angular.io/api/common/http/testing/TestRequest#flush flush should resolve the request by returning whatever you put in you have
req.flush(expectedResult);
but in your service.helloWorld subscriber, you can expect the result to be anything.
everything is voodoo with automagic dependency injection
d
I push up the new changes to the GH that include what you mentioned. It looks like I'm still getting the same error 😞
y
message has been deleted
message has been deleted
I removed the v3 version of pact and installed these
Copy code
"@pact-foundation/pact": "^9.17.3",
    "jest-pact": "^0.9.3",
npm i -d @pact-foundation/pact jest-pact
let me fork your repo and drop a PR
d
Omg dude you're the best!! Curious if this was an issue with the Url I was stubbing or the versioning? I had moved over to the the beta version due to an error in the console saying v2 wasn't supported for x thing. I can't quite remember off the top of my head.
y
the only reason you can't use v3 at the moment, is it fixed jest deps to v26 or lower, and if I drop your jest dep, I need to tweak your tests
will put on my radar to update the pact v3 branch so it tested with jest 27 and released
the real clincher is the injection of the url, jest-pact spins you up a mock server on a random port, so inject that into your api client and boom 👍 look forward to your article fella
💯 1
🙌 1
d
Dude awesome thank you so much! I'm going to start writing the initial article now that gets angular/jest working with Pact. From there I'll move onto Cypress and then finally tie it all up into a monorepo env. Can't thank you enough for getting me over this initial hill ❤️
y
Sounds awesome matey, and my pleasure my friend. I have a cypress example with mocks provided by msw and pacts generated with our adapter. Quick start guide is here (hot off the press) https://docs.pactflow.io/docs/bi-directional-contract-testing/tools/msw/ We also have a cypress adapter https://github.com/pactflow/pact-cypress-adapter And an example repo that uses it. https://docs.pactflow.io/docs/examples/bi-directional/consumer/cypress/ Would love to get an angular recipe on the pact docs site at some point https://docs.pact.io/recipes and give this page some general love
❤️ 1