Add e2e CLI test for blitz new

[flybayer]

What do you want and why?

We currently have a few blitz new tests, but not a complete e2e test for the new app.

We want to:

1. Test the following for each form option
2. Test blitz build success inside new app
3. Test yarn test success inside new app
   1. Need to remove the .skip from app/pages/index.test.tsx to ensure that test passes
4. Test yarn lint has no errors or warnings
5. Start app (use blitz start --production since we already ran blitz build above)
   6. Test user sign up
   7. Test user log out
   8. Test user duplicate email signup (correct message displayed)
   8. Test user log in

Possible implementation(s)

Add Cypress to our CLI testing setup. See the Redwood CLI cypress test for a great example/starting point.

Other

You don't have to add all the above tests in one PR. You can just add as much as you have time/energy for. First person needs to add cypress and very basic initial test.

[wafuwafu13]

@flybayer
Hi :)
I try this now at blitz-js/blitz#1846 .
Could you check it?

[markhughes]

@flybayer was this issue resolved in blitz-js/blitz#1846?

[flybayer]

@markhughes no, that PR just added an empty cypress set up (no tests)

[wafuwafu13]

I want to test blitz new, so I study cypress and read redwood test (and commit redwoodjs/redwood#1780).
But it is too difficult for me to test blitz new:(

• How to blitz new in this repository
  shell srcipt is written in redwood https://github.com/redwoodjs/redwood/blob/main/tasks/test-tutorial
  and copy template
  https://github.com/redwoodjs/redwood/blob/4cd6c74da3b7ba0c169a5dcfce2c9e75bf2e368f/tasks/test-tutorial#L21
  but I have no idea to copy someting in blitz.
• How to mock formChoices.
  mockImplementation is used in new.test.ts
  https://github.com/blitz-js/blitz/blob/e2383fbb5f52a59042640dcf4cb67d2c8344de06/packages/cli/test/commands/new.test.ts#L30-L36
  but I have no idea to mock in Cypress (or shell script).

[flybayer]

Ah, responding to prompts is a good question. Probably we should add flags like --final-form, --hook-form, etc. That will help with testing and is a good idea anyways.

[flybayer]

I think we shouldn't have to copy the template. Running blitz new within our repo will automatically use the correct template

[wafuwafu13]

Probably we should add flags like --final-form, --hook-form, etc. That will help with testing and is a good idea anyways.

I agree with it.
I think it is bettter to do it before blitz new test if can't find a good way to mock formChoices.

[markhughes]

@wafuwafu13 If you get stuck with this one, i'm happy to help you out!

[wafuwafu13]

Thank you :)
I can't find a good way to mock formChoices, so could you help me ?

[markhughes]

@wafuwafu13 can you push up the branch in your fork so I can see your current progress and then I'll be able to make a suggestion :)

[wafuwafu13]

Sorry, I'm very busy lately, so I don't have any current progress :-(

[flybayer]

@markhughes go ahead and work on this if you want

[maybebored]

Happy to take this and work on it, went through the earlier discussion and PR, seems there's a set up for cypress without any tests. I'd like to add some test cases if someone can point at what is to be tested.

[beerose]

Hey @maybebored, as Brandon mentioned in the issue, this is roughly what needs to be tested (you can only cover some of those, and that would be a huge help already!):

1. Test the following for each form option
2. Test blitz build success inside new app
3. Test yarn test success inside new app
   1. Need to remove the .skip from app/pages/index.test.tsx to ensure that test passes
4. Test yarn lint has no errors or warnings
5. Start app (use blitz start --production since we already ran blitz build above)
   6. Test user sign up
   7. Test user log out
   8. Test user duplicate email signup (correct message displayed)
   8. Test user log in.

Here's the code of the blitz new command: https://github.com/blitz-js/blitz/blob/canary/packages/cli/src/commands/new.ts, and here you can find the Cypress setup: https://github.com/blitz-js/blitz/tree/canary/packages/cli/test/e2e/cypress.

[Redaloukil]

Hi @flybayer, I want to work on 2.Test blitz build success inside new app
I've been following the discussion and reading some of the links that you posted above, It's still unclear what are the steps to follow and how to reproduce those steps in cypress and test results. In my understanding, the testing flow for 2.Test blitz build success inside new app would be :

1. Create a new app running blitz new app
2. CD inside the newly created app.
3. Run blitz build.
4. Test build result.

I would like to get a help to know how to create a new app by the test. Can you provide more explanation please ?

[beerose]

Hey @Redaloukil, here are a few links that can be helpful:

1. Cypress' exec command that you can use to run CLI commands https://docs.cypress.io/api/commands/exec#Usage. You can probably use this for 1. and 3. points. You'd also probably need to pass flags for forms, package manager etc, so that the command doesn't prompt to ask questions.
2. An example of the testing flow including exec usage: https://github.com/redwoodjs/redwood/blob/c0980353d5726e37c55c4f01cc3bbfa4b5ef268e/tasks/e2e/cypress/integration/tutorial/tutorial.js.
3. Our existing blitz new tests, which might be helpful to take a look at: https://github.com/blitz-js/blitz/blob/canary/packages/cli/test/commands/new.test.ts.

Let us know if you have any more questions!