Introduce testing library with cypress

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"