feat(qwik-nx): add e2e project

[sebastiandg7]

Fix #9

What is it?

• [x] Feature / enhancement
• [ ] Bug
• [ ] Docs / tests

Description

Add support to generate E2E testing projects for a qwik-nx generated qwik application. Following Qwik's default e2e testing approach, qwik-nx deafult's E2E test runner will also be playwright while providing the option to opt for cypress.

Added new application generator schema property:

name: e2eTestRunner type: enum values: playwright, cypress, none default value: playwright

Playwright is supported via @nxkit/playwright Cypress is supported via @nrwl/cypress

Use cases and why

• 1. Generate a new qwik application with a playwright e2e testing project:

nx g qwik-nx:app myapp
# or...
nx g qwik-nx:app myapp --e2eTestRunner playwright

• 2. Generate a new qwik application with a cypress e2e testing project:

nx g qwik-nx:app myapp --e2eTestRunner cypress

• 3. Generate a new qwik application without an e2e testing project:

nx g qwik-nx:app myapp --e2eTestRunner none

Screenshots/Demo

Generated playwright and cypress projects:

Playwright tests result:

➜ npx nx e2e qwik-pw-e2e

> nx run qwik-pw-e2e:e2e

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Running 3 tests using 3 workers

  3 passed (5s)

To open last HTML report run:

  npx playwright show-report dist/apps/qwik-pw-e2e/playwright-report

Playwright tests ran for qwik-pw-e2e project

 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Successfully ran target e2e for project qwik-pw-e2e (6s)

Cypress tests result:

➜ npx nx e2e qwik-cy-e2e 

> nx run qwik-cy-e2e:e2e

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
====================================================================================================
  (Run Starting)
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        12.3.0                                                                         │
  │ Browser:        Electron 106 (headless)                                                        │
  │ Node Version:   v18.13.0 (/Users/sduque/.volta/tools/image/node/18.13.0/bin/node)              │
  │ Specs:          1 found (app.cy.ts)                                                            │
  │ Searched:       src/**/*.cy.{js,jsx,ts,tsx}                                                    │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  app.cy.ts                                                                       (1 of 1)

  qwik-cy
    ✓ should display welcome message (565ms)
  1 passing (574ms)
  (Results)
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      1                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     app.cy.ts                                                                        │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
  (Video)
  -  Started processing:  Compressing to 32 CRF                                                     
  -  Finished processing: /Users/sduque/dev/sebastiandg7/qwik-nx/tmp/nx-e2e/proj/dist    (0 seconds)
                          /cypress/apps/qwik-cy-e2e/videos/app.cy.ts.mp4                            
====================================================================================================
  (Run Finished)
       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  app.cy.ts                                572ms        1        1        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        572ms        1        1        -        -        -  

 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Successfully ran target e2e for project qwik-cy-e2e (6s)

Checklist:

• [x] My code follows the developer guidelines of this project
• [x] I have performed a self-review of my own code
• [x] I have made corresponding changes to the documentation
• [x] Added new tests to cover the fix / functionality

[shairez]

Thanks @sebastiandg7 !

[dmitry-stepanenko]

@shairez please add @sebastiandg7 to contributors 🙂

[shairez]

@all-contributors please add @sebastiandg7 for code, ideas, tests

[allcontributors[bot]]

@shairez

I've put up a pull request to add @sebastiandg7! :tada: