Run eslint on our cypress tests

My editor was reformatting them by default, rather than configure the settings of my eslint extension, I thought we should apply the same linting rules the tests as our other code.

Author: zetter-rpf

.eslintrc.json

@@ -43,5 +43,14 @@
         "arrowParens": "always"
       }
     ]
-  }
+  },
+  "overrides": [
+    {
+      "files": ["cypress/**/*.js"],
+      "globals": {
+        "cy": "readonly",
+        "Cypress": "readonly"
+      }
+    }
+  ]
 }

cypress/e2e/missionZero-wc.cy.js

@@ -38,7 +38,7 @@ it("sets initial criteria correctly", () => {
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.get("#results").should(
     "contain",
-    '"noInputEvents":true,"readColour":false,"readHumidity":false,"readPressure":false,"readTemperature":false,"usedLEDs":false'
+    '"noInputEvents":true,"readColour":false,"readHumidity":false,"readPressure":false,"readTemperature":false,"usedLEDs":false',
   );
 });
 
@@ -57,7 +57,7 @@ it("checks temperature has been read correctly", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      "from sense_hat import SenseHat\nSenseHat().get_temperature()"
+      "from sense_hat import SenseHat\nSenseHat().get_temperature()",
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.get("#results").should("contain", '"readTemperature":true');
@@ -69,7 +69,7 @@ it("checks humidity has been read correctly", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      "from sense_hat import SenseHat\nSenseHat().get_humidity()"
+      "from sense_hat import SenseHat\nSenseHat().get_humidity()",
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.get("#results").should("contain", '"readHumidity":true');
@@ -81,7 +81,7 @@ it("checks pressure has been read correctly", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      "from sense_hat import SenseHat\nSenseHat().get_pressure()"
+      "from sense_hat import SenseHat\nSenseHat().get_pressure()",
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.get("#results").should("contain", '"readPressure":true');
@@ -93,7 +93,7 @@ it("resets criteria correctly", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      "from sense_hat import SenseHat\nsense = SenseHat()\nsense.get_pressure()\nsense.get_humidity()\nsense.get_temperature()"
+      "from sense_hat import SenseHat\nsense = SenseHat()\nsense.get_pressure()\nsense.get_humidity()\nsense.get_temperature()",
     );
   cy.get("editor-wc").shadow().find(".btn--run").contains("Run").click();
   cy.get("#results").should("contain", '"readPressure":true');
@@ -104,7 +104,7 @@ it("resets criteria correctly", () => {
   cy.get("editor-wc").shadow().find(".btn--run").contains("Run").click();
   cy.get("#results").should(
     "contain",
-    '"noInputEvents":true,"readColour":false,"readHumidity":false,"readPressure":false,"readTemperature":false,"usedLEDs":false'
+    '"noInputEvents":true,"readColour":false,"readHumidity":false,"readPressure":false,"readTemperature":false,"usedLEDs":false',
   );
 });
 
@@ -114,7 +114,7 @@ it("confirms LEDs used when single led set", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      "from sense_hat import SenseHat\nSenseHat().set_pixel(0, 0, 100, 100, 100)"
+      "from sense_hat import SenseHat\nSenseHat().set_pixel(0, 0, 100, 100, 100)",
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.get("#results").should("contain", '"usedLEDs":true');
@@ -126,7 +126,7 @@ it("confirms LEDs used when display set", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      "from sense_hat import SenseHat\nsense = SenseHat()\nsense.set_pixels([[100,0,0]] * 64)"
+      "from sense_hat import SenseHat\nsense = SenseHat()\nsense.set_pixels([[100,0,0]] * 64)",
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.scrollTo("bottom");
@@ -162,7 +162,7 @@ it("picks up calls to wait for motion", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      "from sense_hat import SenseHat\nsense = SenseHat()\nsense.motion.wait_for_motion()"
+      "from sense_hat import SenseHat\nsense = SenseHat()\nsense.motion.wait_for_motion()",
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.get("#results").should("contain", '"noInputEvents":false');
@@ -183,7 +183,7 @@ it("does not return null duration if no change in focus", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")'
+      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")',
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.get("#results").should("not.contain", '"duration":null');
@@ -195,7 +195,7 @@ it("does not return null duration if focus changed before code run", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")'
+      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")',
     );
   cy.window().blur();
   cy.window().focus();
@@ -209,7 +209,7 @@ it("returns duration of null if focus is lost", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")'
+      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")',
     );
   cy.get("editor-wc")
     .shadow()
@@ -228,7 +228,7 @@ it("does not return duration of null if code rerun after focus lost", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")'
+      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")',
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.window().blur();

cypress/e2e/spec-html.cy.js

@@ -36,9 +36,9 @@ beforeEach(() => {
   cy.intercept(
     "GET",
     `${Cypress.env(
-      "REACT_APP_API_ENDPOINT"
+      "REACT_APP_API_ENDPOINT",
     )}/api/projects/blank-html-starter?locale=en`,
-    defaultHtmlProject
+    defaultHtmlProject,
   );
 });
 
@@ -55,7 +55,7 @@ it("blocks access to localStorage authKey", () => {
   localStorage.setItem("authKey", "secret")
   const authKey = localStorage.getItem("authKey")
   document.getElementById("authKey").innerHTML = \`\${authKey}\`
-</script>`
+</script>`,
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   getIframeBody().find("p").should("include.text", "authKey: null");
@@ -74,7 +74,7 @@ it("blocks access to localStorage OIDC keys", () => {
   localStorage.setItem("oidc.user:https://auth-v1.raspberrypi.org:editor-api", "token")
   const oidcUser = localStorage.getItem("oidc.user:https://auth-v1.raspberrypi.org:editor-api")
   document.getElementById("oidcUser").innerHTML = \`\${oidcUser}\`
-</script>`
+</script>`,
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   getIframeBody().find("p").should("include.text", "oidcUser: null");
@@ -93,7 +93,7 @@ it("allows access to other localStorage keys", () => {
   localStorage.setItem("foo", "bar")
   const foo = localStorage.getItem("foo")
   document.getElementById("foo").innerHTML = \`\${foo}\`
-</script>`
+</script>`,
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   getIframeBody().find("p").should("include.text", "foo: bar");
@@ -138,7 +138,7 @@ it("blocks non-permitted external links", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      '<a href="https://raspberrypi.org/en/">some external link</a>'
+      '<a href="https://raspberrypi.org/en/">some external link</a>',
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   getIframeBody().find("a").click();

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

@@ -154,76 +154,71 @@ describe("Running the code with pyodide", () => {
 
   it("runs a program with muiltiple files", () => {
     cy.get("@editor")
-      .findByLabelText('editor text input')
+      .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").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()
+      .findByRole("dialog")
+      .findByRole("button", { name: "Add file" })
+      .click();
 
     cy.get("@editor")
-      .findByLabelText('editor text input')
+      .findByLabelText("editor text input")
       .invoke("text", `NUMBER = 42\n`);
 
-    cy.get("@editor")
-      .findByRole('button', { name: 'Run' }).click();
+    cy.get("@editor").findByRole("button", { name: "Run" }).click();
 
     cy.get("@editor")
       .find(".pyodiderunner")
-      .findByLabelText('Text output')
+      .findByLabelText("Text output")
       .should("contain", "42");
   });
 
-
   it("reloads imported local files between code runs", () => {
     cy.get("@editor")
-      .findByLabelText('editor text input')
-      .invoke("text",
-        `from helper import b\nb()`
-      );
+      .findByLabelText("editor text input")
+      .invoke("text", `from helper import b\nb()`);
 
-    cy.get("@editor").findByRole('button', { name: 'Add file' }).click()
+    cy.get("@editor").findByRole("button", { name: "Add file" }).click();
 
     cy.get("@editor")
       .findByLabelText(/Name your file/)
       .type("helper.py");
 
     cy.get("@editor")
-      .findByRole('dialog')
-      .findByRole('button', { name: 'Add file' }).click()
+      .findByRole("dialog")
+      .findByRole("button", { name: "Add file" })
+      .click();
 
     cy.get("@editor")
-      .findByLabelText('editor text input')
+      .findByLabelText("editor text input")
       .invoke("text", `def b():\n  print('one')`);
 
-    cy.get("@editor")
-      .findByRole('button', { name: 'Run' }).click();
+    cy.get("@editor").findByRole("button", { name: "Run" }).click();
 
     cy.get("@editor")
       .find(".pyodiderunner")
-      .findByLabelText('Text output')
+      .findByLabelText("Text output")
       .should("contain", "one");
-    
+
     cy.get("@editor")
-      .findByLabelText('editor text input')
+      .findByLabelText("editor text input")
       .invoke("text", `def b():\n  print('two')`);
 
-    cy.get("@editor")
-      .findByRole('button', { name: 'Run' }).click();
+    cy.get("@editor").findByRole("button", { name: "Run" }).click();
 
     cy.get("@editor")
       .find(".pyodiderunner")
-      .findByLabelText('Text output')
+      .findByLabelText("Text output")
       .should("contain", "two");
   });
 
-
   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/e2e/spec-wc-skulpt.cy.js

@@ -52,7 +52,7 @@ describe("Running the code with skulpt", () => {
 
   it("runs a simple p5 program", () => {
     runCode(
-      "from p5 import *\n\ndef setup():\n\tsize(400, 400)\ndef draw():\n\tfill('cyan')\n\trect(0, 0, 400, 250)\nrun(frame_rate=2)"
+      "from p5 import *\n\ndef setup():\n\tsize(400, 400)\ndef draw():\n\tfill('cyan')\n\trect(0, 0, 400, 250)\nrun(frame_rate=2)",
     );
     cy.get("editor-wc")
       .shadow()
@@ -69,14 +69,14 @@ describe("Running the code with skulpt", () => {
 
   it("runs a simple py5 program", () => {
     runCode(
-      "import py5\ndef setup():\n\tpy5.size(400, 400)\ndef draw():\n\tpy5.background(255)\npy5.run_sketch()"
+      "import py5\ndef setup():\n\tpy5.size(400, 400)\ndef draw():\n\tpy5.background(255)\npy5.run_sketch()",
     );
     cy.get("editor-wc").shadow().find(".p5Canvas").should("exist");
   });
 
   it("Interrupts py5 draws when stop button clicked", () => {
     runCode(
-      "import py5\ndef setup():\n\tpy5.size(400, 400)\ndef draw():\n\tpy5.background(255)\npy5.run_sketch()"
+      "import py5\ndef setup():\n\tpy5.size(400, 400)\ndef draw():\n\tpy5.background(255)\npy5.run_sketch()",
     );
     cy.wait(1000);
     cy.get("editor-wc").shadow().find(".btn--stop").click();
@@ -93,7 +93,7 @@ describe("Running the code with skulpt", () => {
 
   it("Py5 imported mode runs sketch without explicit run call", () => {
     runCode(
-      "# Py5: imported mode\ndef setup():\n\tsize(400,400)\n\ndef draw():\n\tprint('hello world')"
+      "# Py5: imported mode\ndef setup():\n\tsize(400,400)\n\ndef draw():\n\tprint('hello world')",
     );
     cy.get("editor-wc")
       .shadow()
@@ -103,7 +103,7 @@ describe("Running the code with skulpt", () => {
 
   it("runs a simple sense_hat program", () => {
     runCode(
-      "from sense_hat import SenseHat\nsense = SenseHat()\nprint(sense.get_humidity())"
+      "from sense_hat import SenseHat\nsense = SenseHat()\nprint(sense.get_humidity())",
     );
     cy.get("editor-wc")
       .shadow()
@@ -150,7 +150,7 @@ describe("Running the code with skulpt", () => {
 
   it("runs a simple turtle program", () => {
     runCode(
-      "import turtle\nskk = turtle.Turtle()\nfor i in range(4):\n\tskk.forward(50)\n\tskk.left(90)\nturtle.done()"
+      "import turtle\nskk = turtle.Turtle()\nfor i in range(4):\n\tskk.forward(50)\n\tskk.left(90)\nturtle.done()",
     );
     cy.get("editor-wc")
       .shadow()
@@ -172,7 +172,7 @@ describe("Running the code with skulpt", () => {
       .find(".error-message__content")
       .should(
         "contain.text",
-        "ImportError: No module named matplotlib on line 2 of main.py. You should check your code for typos. If you are using p5, py5, sense_hat or turtle, matplotlib might not work - read this article for more information."
+        "ImportError: No module named matplotlib on line 2 of main.py. You should check your code for typos. If you are using p5, py5, sense_hat or turtle, matplotlib might not work - read this article for more information.",
       );
   });
 });

cypress/support/e2e.js

@@ -1 +1 @@
-import '@testing-library/cypress/add-commands'
+import "@testing-library/cypress/add-commands";

package.json

@@ -89,8 +89,8 @@
     "build": "NODE_ENV=production BABEL_ENV=production webpack build -c ./webpack.config.js",
     "build:dev": "yarn install --check-cache && yarn run build-storybook",
     "build-storybook": "cd ./storybook && yarn install && yarn run build-storybook -- -o ../public/storybook --loglevel warn",
-    "lint": "eslint \"src/**/*.{js,jsx,json}\"",
-    "lint:fix": "eslint --fix \"src/**/*.{js,jsx,json}\"",
+    "lint": "eslint 'src/**/*.{js,jsx,json}' cypress/**/*.js",
+    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,json}' cypress/**/*.js",
     "stylelint": "stylelint src/**/*.scss",
     "test": "node scripts/test.js --transformIgnorePatterns 'node_modules/(?!three)/'",
     "storybook": "cd storybook && rm -rf ./node_modules/.cache/storybook && yarn run storybook",