Upgraded Cypress from 8.6.0 to 13.3.0

JasonLandbridge commented 9 months ago

Hi there,

Motivation

The Cypress version is horribly outdated and I saw the intention here to upgrade: https://github.com/thefrontside/simulacrum/issues/234, so I went for it.

There was also a bug I fixed where:

const ClientPort = Number(process.env.PORT || 4000);

caused a process is undefined so I replaced that with a Cypress.env('PORT'), which works. I think process is not available anymore in the newer Cypress versions.

Approach

Major upgrade and migration of Cypress in the @simulacrum/auth0-cypress package

Alternate Designs

Explain what other alternatives you considered and why you chose this option.

Not using this awesome @simulacrum/auth0-cypress package?

Possible Drawbacks or Risks

Those updating @simulacrum/auth0-cypress will need to migrate their Cypress as well

TODO in this PR

[ ] Update the @simulacrum/auth0-cypress README with the new setup / usage process
[ ] Update the repo README with a reference to @simulacrum/auth0-cypress
[ ] Locally import into an auth0/auth0-vue and test it out, otherwise integrate
[ ] Ensure Auth0 cookies are persisted troughout tests in Cypress (see Auth0 Cypress)
[x] Look at upgrading all NPM packages in @simulacrum/auth0-cypress

Future TODOs

[ ] Post this plugin at https://docs.cypress.io/plugins (how to)

Learning

https://docs.cypress.io/guides/references/migration-guide

Screenshots

netlify[bot] commented 9 months ago

Deploy Preview for simulacrum canceled.

Name	Link
Latest commit	08dc19823416101e6a4f14a65d1df45e7152880f
Latest deploy log	https://app.netlify.com/sites/simulacrum/deploys/652529ed2dfcd100080e8a9f

JasonLandbridge commented 9 months ago

Awesome work. Thank you! Most needed.

My pleasure! Could you please test it out and answer the questions when you have time?

Thanks!

dagda1 commented 9 months ago

My pleasure! Could you please test it out and answer the questions when you have time?

@JasonLandbridge I have not worked with auth0 for a while now so my memory is a wee bit sketchy and I am a wee bit out of the loop with cookies.

The documentation is the README here.

I'm happy to let you drive whatever changes you feel appropriate and if I can help in any way, then please ask.

JasonLandbridge commented 9 months ago

Thanks for the confidence :+1:

I have updated the PR description with TODO's which I will work on Monday evening, I will keep you updated!

dagda1 commented 9 months ago

Thanks for the confidence :+1:

Sir, I am thanking you. This package needs a bit of love. It was very useful when it was first created

JasonLandbridge commented 9 months ago

Fully agree! I worked on it today and made some progress but I just keep getting stuck on the auth0-simulator not working at all. So it can be run, it boots and shows the GraphQL and once I do the following mutation:

mutation CreateSimulation {
 createSimulation(simulator: "auth0",
  options: {
    options:{
      audience: "http://thefrontside.auth0.com/api/v1/",
      scope: "openid profile email offline_access",
      clientID: ""
    },
    services:{
      auth0:{
        port: 4000
      }
    }
  }) {
    id
    status
    services {
      url
      name
    }
  }
}

I get the following error:

Error [ERR_SERVER_NOT_RUNNING]: Server is not running.
    at new NodeError (node:internal/errors:406:5)
    at Server.close (node:net:2213:12)
    at Object.onceWrapper (node:events:628:28)
    at Server.emit (node:events:514:28)
    at emitCloseNT (node:net:2273:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:81:21) {
  effectionTrace: [
    { id: 339, type: 'future', labels: {}, state: 'erroring' },
    {
      id: 313,
      type: 'generator function',
      labels: {},
      state: 'erroring'
    },
    { id: 307, type: 'resource', labels: [Object], state: 'erroring' },
    { id: 304, type: 'resource', labels: [Object], state: 'erroring' },
    { id: 270, type: 'resource', labels: [Object], state: 'erroring' },
    {
      id: 267,
      type: 'generator function',
      labels: [Object],
      state: 'erroring'
    }
  ]
}

Can you confirm Auth-simulator is working as is?

dagda1 commented 9 months ago

Can you confirm Auth-simulator is working as is?

My guess is that you are starting the simulation server as the same PORT as the auth0 server. They are actually 2 separate express servers. We need the documentation clear on this. I could not find much on mkcert in the docs but there is a very clear error message.

I've videoed myself starting the auth0 server

First of all, I start the simulation server in the packages/auth0 directory

PORT=4000 npm start

Then run the mutation with the auth0 port as 4400

Then I ran the mutation and all was good.

I've also included the subscription you can run to get more debug info.

Let me know if this is unclear.

https://github.com/thefrontside/simulacrum/assets/118328/6ba6b58d-1b58-4614-9654-29bb66645f4d

JasonLandbridge commented 9 months ago

@dagda1 Thank you very much! I could indeed resolve my issue with your very clear instructions, I will continue working on this PR this weekend

dagda1 commented 9 months ago

@dagda1 Thank you very much! I could indeed resolve my issue with your very clear instructions, I will continue working on this PR this weekend

Don't be afraid to ask again. I don't think the instructions on how to use the auth0 simulator are clear and that has harmed adoption.

I believe this tool could be very useful and there is nothing else like it that I know of.

JasonLandbridge commented 9 months ago

Don't be afraid to ask again. I don't think the instructions on how to use the auth0 simulator are clear and that has harmed adoption.

Thanks, I'm updating the README as I figure out the things that were unclear for me. And I would be more than happy to post this plugin at https://docs.cypress.io/plugins (how to). This was the first place I looked, and there was unfortunately nothing that did what I needed. Then I came across the article describing the concept and here I am.

I believe this tool could be very useful and there is nothing else like it that I know of.

Definitely, I searched as well and couldn't find anything like it and it can be revived. Like an old car that needs some maintenance before it can be used again!

So as of now I have it working again and both example projects are working with everything upgraded in this PR. There is a minor bug in the nextjs-auth0 example project where in the console it returns 401's for http://localhost:3000/api/auth/me 401 (Unauthorized). I think it might be related to the packages being outdated in the example projects but I will make a separate PR for that.

Steps for now:

Cleanup this PR
Create a Vue.js/Vite example project and add Auth0-Vue integration in a separate PR
Test everything with a real life application
Upgrade the other example projects
Go through README's

Plugins | Cypress Documentation
Plugins provide a way to support and extend the behavior of Cypress. Follow

JasonLandbridge commented 9 months ago

@dagda1 It's done! :tada:
I changed, fixed and refactored a lot of things but it's now fully working with all 3 example apps and every package is now upgraded as well. I've updated the README with the new way of doing things, most breaking changes will come from upgrading Cypress anyway. Fixed many bugs, probably added a few new ones, so I hope if you have time that you can check it out.

Tommorrow (Sunday), I will create a new PR branching from this one where I will do the Vue/vite integration with example projects :+1:

Cheers!

dagda1 commented 9 months ago

I think this is great. Excellent work

@jbolda does this project still use covector to publish?

JasonLandbridge commented 9 months ago

I think this is great. Excellent work

@jbolda does this project still use covector to publish?

Thanks! Today I got a chance to test this project at work and the packaging is I think not working correctly (I'm linking it locally) due to the project structure change, but I'm still investigating why it's not working. This PR can be merged and then we can continue in the other #271 PR where I did the Vue integration and am submitting my fixes. Then a new version would be greatly appreciated once that PR is merged. After which, I will make separate bug fixes for any bugs I may find :+1:

jbolda commented 9 months ago

@dagda1 aye, npx covector add (or equivalent package manager) to add a change file.

JasonLandbridge commented 9 months ago

Due to the high necessity of this PR for my work, and the overall huge chaos this PR has become due to my own doing, I have decided to create my own JasonLandbridge/Cypress-Auth0-Simulator with all the changes where I will continue the work. I will work towards removing everything except the plugin and examples. Then I can publish it as a NPM package and will keep maintaining that.

It is not my intention to steal all the work everyone here has done, so I will make sure to reference this repo and credit where I can. I did flatten the repo only so I can start from a "blank slate" but I do intend to keep using the simulacrum packages. It will basically be only do the Cypress integration plugin part.

@dagda1, Thank you very much for your time and help! I'm closing this PR now to avoid taking up more of your time in going through this PR.

thefrontside / simulacrum