Add Cypress test runner instructions to UI readme

hooroomoo → changed the visibility of the branch 3465241-test-instructions to hidden.

hooroomoo → changed the visibility of the branch 3465241-test-instructions to hidden.

hooroomoo → changed the visibility of the branch 3465241-test-instructions to active.

Wim Leers → closed merge request !150

Assumptions/context

1. I run & develop Drupal using a no-abstractions development environment, which anybody can get using this guide: https://getgrav.org/blog/macos-sonoma-apache-multiple-php-versions
2. I have never run a Cypress test locally. I have never seen how one should run it either. I have never even read any docs on it.

Running unit/component tests

If I follow the instructions here, I get:

$ npm run cy:component

> vite-template-redux@0.0.0 cy:component
> cypress run --component --browser electron

Cypress cannot run because this binary file does not have executable permissions here:

/Users/wim.leers/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/MacOS/Cypress

Reasons this may happen:

- node was installed as 'root' or with 'sudo'
- the cypress npm package as 'root' or with 'sudo'

Please check that you have the appropriate user permissions.

You can also try clearing the cache with 'cypress cache clear' and reinstalling.

----------

Platform: darwin-arm64 (22.3.0)
Cypress Version: 13.12.0

Which baffled me because I don't recall doing that. Apparently that file exists since June 18. But … how? 🤔 I get the same error after rm -rf node_modules and then npm install — which makes sense, because it's outside node_modules.

So, how did I get that file then?

• Not npm, because:
  

  $ npm list -g
  /Users/wim.leers/.nvm/versions/node/v18.16.1/lib
  ├── @mermaid-js/mermaid-cli@10.9.1
  ├── corepack@0.28.1
  ├── cspell@8.10.4
  ├── glob-run@0.1.7
  └── npm@9.5.1
  

• Not brew, because:
  

  $ brew list | grep cypress
  

🤔😅

So I did npm install cypress not npm install, which resulted in:

changed 1 package, and audited 1010 packages in 43s

Huh?! 🤪

This did not modify that file:

 ls -al /Users/wim.leers/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/MacOS/Cypress
-rw-------@ 1 wim.leers  staff  69536 Jun 18 19:23 /Users/wim.leers/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/MacOS/Cypress

(Still June 18!)

BUT, now I get:

$ npm run cy:component

> vite-template-redux@0.0.0 cy:component
> cypress run --component --browser electron

It looks like this is your first time using Cypress: 13.13.2

✔  Verified Cypress! /Users/wim.leers/Library/Caches/Cypress/13.13.2/Cypress.app

Opening Cypress...

DevTools listening on ws://127.0.0.1:51313/devtools/browser/4847d411-cc4b-4a4b-8816-cedd82d516f1
(node:6511) ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:6511) ExperimentalWarning: The Node.js specifier resolution flag is experimental. It could change or be removed at any time.
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        13.13.2                                                                        │
  │ Browser:        Electron 118 (headless)                                                        │
  │ Node Version:   v18.16.1 (/Users/wim.leers/.nvm/versions/node/v18.16.1/bin/node)               │
  │ Specs:          3 found (configurationSlice.cy.js, layoutslice.cy.js, uiSlice.cy.js)           │
  │ Searched:       ../tests/src/Cypress/cypress/component/**/*.cy.{js,ts,jsx,tsx}, ../tests/src/C │
  │                 ypress/cypress/unit/**/*.cy.{js,ts,jsx,tsx}                                    │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
<<<SNIP>>>
  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  configurationSlice.cy.js                  33ms        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  layoutslice.cy.js                        103ms        6        6        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  uiSlice.cy.js                             45ms        4        4        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        181ms       11       11        -        -        -  

🤷‍♂️

This makes no sense. But I got it working. And it feels like npm weirdness? 🤔 Anyway, captured here for posterity in case somebody else runs into it!

Running E2E tests

1. Created the .env file per the instructions:
   

   BASE_URL='http://core.test'
   DB_URL='mysql://root:root@localhost/core'
   # VITE_SERVER_ORIGIN='http://localhost:5173'
   

2. Executed
   

   , and discovered that keeps sending output to the terminal. So … I suggest recommending that this is done in a <em>separate</em> terminal. That app launches — can't wait to see my E2E tests running in there 🤓
   <li>Executed <code>npm run cy:run

   … and it passed:

   <<<SNIP>>>
   ====================================================================================================
   
     (Run Finished)
   
   
          Spec                                              Tests  Passing  Failing  Pending  Skipped  
     ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
     │ ✔  a11y.cy.js                               00:19        4        4        -        -        - │
     ├────────────────────────────────────────────────────────────────────────────────────────────────┤
     │ ✔  canary.cy.js                             00:17        2        2        -        -        - │
     ├────────────────────────────────────────────────────────────────────────────────────────────────┤
     │ ✔  xb-general.cy.js                         00:20        4        4        -        -        - │
     └────────────────────────────────────────────────────────────────────────────────────────────────┘
       ✔  All specs passed!                        00:58       10       10        -        -        -  
   

3. ⚠️ But it did not show anything in the Cypress app/UI! 😬 So what's going on here?
4. I did see that there was a "What's new"-esque splash screen. Maybe that was blocking it? I clicked through it. Did npm run cy:run again. Still nothing. 😬
5. So … okay, I click "E2E" testing: . I then have to choose a browser. I pick Chrome. (I thought it was going to use that automatically?! 🤷‍♂️) Then I can click … so I click that.
6. Now I see: 🤔
7. WTH is this? I thought this was just going to show the tests I was running through npm run cy:run?!
8. What happens if I click xb-general.cy.js? 🤔
9. Victory:

Conclusion

Despite all that … it took me <20 minutes to get it all up and running and write this comment (which is ~50% of the time).

This just needs a clarification IMHO: one should choose between either npm run cy:open or npm run cy:run. Suggestion: https://git.drupalcode.org/project/experience_builder/-/merge_requests/1...

That would probably be obvious to anybody familiar with Cypress, but not to anybody new to it, like me 😇

@bnjmnm should merge this to confirm/incorporate or reject/clarify my suggestion 🙏

Cool!

Now this just needs @hooroomoo's sign-off 😊

Automatically closed - issue fixed for 2 weeks with no activity.