Introduce testing library with cypress (#1284)

Related to
RaspberryPiFoundation/digital-editor-issues#878

We're already using https://github.com/testing-library for our react
unit tests code, the library for cypress brings the same benefits. It
will allow us to write end to end tests that better mimic user behaviour
by interacting with elements based on their role/text/labels rather than
their classes. As well as making the specs easier to follow and
de-coupled from our class names, it helps to ensure our site is
accessible (e.g. form elements have labels).

To demonstrate this I've written added a new test to work with multiple
files. If we like this approach, we can change over other specs as we
write or update them.

Note that cypress testing library doesn't seem to have direct support
for the Shadow DOM yet (see
testing-library/dom-testing-library#413 ) but
we still works if we load the shadow DOM using the cypress finder. One
quirk I found is that `findByLabelText` doesn't work from the root
shadow DOM element which is why I've called it on `children()`.

This branch is based off of `update-cypress`. If we're happy I will
merge to main after that branch.

---

Feedback wanted:

- Do we think there's a benefit to using testing library for our cypress
specs?
- Are we happy to migrate them over gradually? Alternatively we could
invest a bit of time to do them all at once (perhaps with the help of a
coding agent).

Author: zetter-rpf

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Changed
 
+- Introduce @testing-library for cypress
 - Update cypress (#1283)
 
 ### Fixed

cypress.config.mjs

@@ -6,7 +6,6 @@ dotenv.config();
 export default defineConfig({
   e2e: {
     chromeWebSecurity: false,
-    supportFile: false,
     defaultCommandTimeout: 10000,
     video: false,
     defaultBrowser: "chrome",

cypress/e2e/spec-wc-pyodide.cy.js

@@ -34,6 +34,7 @@ describe("Running the code with pyodide", () => {
         configurable: true,
       });
     });
+    cy.get("editor-wc").shadow().children().as("editor");
   });
 
   it("runs a simple program", () => {
@@ -151,6 +152,35 @@ describe("Running the code with pyodide", () => {
       .should("contain", "3");
   });
 
+  it("runs a program with muiltiple files", () => {
+    cy.get("@editor")
+      .findByLabelText('editor text input')
+      .invoke("text", `from my_number import NUMBER\nprint(NUMBER)\n`);
+
+    cy.get("@editor").findByRole('button', { name: 'Add file' }).click()
+
+    cy.get("@editor")
+      .findByLabelText(/Name your file/)
+      .type("my_number.py");
+
+    cy.get("@editor")
+      .findByRole('dialog')
+      .findByRole('button', { name: 'Add file' }).click()
+
+    cy.get("@editor")
+      .findByLabelText('editor text input')
+      .invoke("text", `NUMBER = 42\n`);
+
+    cy.get("@editor")
+      .findByRole('button', { name: 'Run' }).click();
+
+    cy.get("@editor")
+      .find(".pyodiderunner")
+      .findByLabelText('Text output')
+      .should("contain", "42");
+  });
+
+
   it("runs a simple program with a built-in pyodide module", () => {
     runCode(
       "import simplejson as json\nprint(json.dumps(['foo', {'bar': ('baz', None, 1.0, 2)}]))",

cypress/support/e2e.js

@@ -0,0 +1 @@
+import '@testing-library/cypress/add-commands'

package.json

@@ -114,6 +114,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
     "@react-three/test-renderer": "8.2.1",
     "@svgr/webpack": "5.5.0",
+    "@testing-library/cypress": "^10.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "14.3.1",
     "@testing-library/user-event": "^12.1.10",

yarn.lock

@@ -1620,6 +1620,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.14.6":
+  version: 7.28.4
+  resolution: "@babel/runtime@npm:7.28.4"
+  checksum: 934b0a0460f7d06637d93fcd1a44ac49adc33518d17253b5a0b55ff4cb90a45d8fe78bf034b448911dbec7aff2a90b918697559f78d21c99ff8dbadae9565b55
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.25.7, @babel/template@npm:^7.3.3":
   version: 7.25.7
   resolution: "@babel/template@npm:7.25.7"
@@ -2966,6 +2973,7 @@ __metadata:
     "@sentry/tracing": 7.16.0
     "@svgr/webpack": 5.5.0
     "@szhsin/react-menu": ^3.2.0
+    "@testing-library/cypress": ^10.1.0
     "@testing-library/jest-dom": ^5.16.5
     "@testing-library/react": 14.3.1
     "@testing-library/user-event": ^12.1.10
@@ -3707,6 +3715,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/cypress@npm:^10.1.0":
+  version: 10.1.0
+  resolution: "@testing-library/cypress@npm:10.1.0"
+  dependencies:
+    "@babel/runtime": ^7.14.6
+    "@testing-library/dom": ^10.1.0
+  peerDependencies:
+    cypress: ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0
+  checksum: 0a5a433fff11c35244d87f2a1d5974d5ef4478212a94245062b4dce5459bc367b26faa9f436cf11f2cb956927658b9849506735a93f64247fffc8690fc603fcb
+  languageName: node
+  linkType: hard
+
+"@testing-library/dom@npm:^10.1.0":
+  version: 10.4.1
+  resolution: "@testing-library/dom@npm:10.4.1"
+  dependencies:
+    "@babel/code-frame": ^7.10.4
+    "@babel/runtime": ^7.12.5
+    "@types/aria-query": ^5.0.1
+    aria-query: 5.3.0
+    dom-accessibility-api: ^0.5.9
+    lz-string: ^1.5.0
+    picocolors: 1.1.1
+    pretty-format: ^27.0.2
+  checksum: 3887fe95594b6d9467a804e2cc82e719c57f4d55d7d9459b72a949b3a8189db40375b89034637326d4be559f115abc6b6bcfcc6fec0591c4a4d4cdde96751a6c
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^9.0.0":
   version: 9.3.4
   resolution: "@testing-library/dom@npm:9.3.4"
@@ -5224,6 +5260,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-query@npm:5.3.0":
+  version: 5.3.0
+  resolution: "aria-query@npm:5.3.0"
+  dependencies:
+    dequal: ^2.0.3
+  checksum: 305bd73c76756117b59aba121d08f413c7ff5e80fa1b98e217a3443fcddb9a232ee790e24e432b59ae7625aebcf4c47cb01c2cac872994f0b426f5bdfcd96ba9
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:^5.0.0":
   version: 5.3.2
   resolution: "aria-query@npm:5.3.2"
@@ -8227,6 +8272,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dequal@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "dequal@npm:2.0.3"
+  checksum: 8679b850e1a3d0ebbc46ee780d5df7b478c23f335887464023a631d1b9af051ad4a6595a44220f9ff8ff95a8ddccf019b5ad778a976fd7bbf77383d36f412f90
+  languageName: node
+  linkType: hard
+
 "destroy@npm:1.2.0":
   version: 1.2.0
   resolution: "destroy@npm:1.2.0"
@@ -15500,20 +15552,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"picocolors@npm:1.1.1, picocolors@npm:^1.0.0, picocolors@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "picocolors@npm:1.1.1"
+  checksum: e1cf46bf84886c79055fdfa9dcb3e4711ad259949e3565154b004b260cd356c5d54b31a1437ce9782624bf766272fe6b0154f5f0c744fb7af5d454d2b60db045
+  languageName: node
+  linkType: hard
+
 "picocolors@npm:^0.2.1":
   version: 0.2.1
   resolution: "picocolors@npm:0.2.1"
   checksum: 3b0f441f0062def0c0f39e87b898ae7461c3a16ffc9f974f320b44c799418cabff17780ee647fda42b856a1dc45897e2c62047e1b546d94d6d5c6962f45427b2
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0, picocolors@npm:^1.1.0":
-  version: 1.1.1
-  resolution: "picocolors@npm:1.1.1"
-  checksum: e1cf46bf84886c79055fdfa9dcb3e4711ad259949e3565154b004b260cd356c5d54b31a1437ce9782624bf766272fe6b0154f5f0c744fb7af5d454d2b60db045
-  languageName: node
-  linkType: hard
-
 "picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"