Add cypress

cypress/e2e/calculator.cy.js

@@ -0,0 +1,38 @@
+describe("Claculator", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  it("shows default calculation", () => {
+    cy.get("[data-test=matrix] input").should("have.length", 16);
+    cy.get("[data-test=kernel] input").should("have.length", 9);
+    cy.get("[data-test=result] input").should("have.length", 16);
+  });
+
+  it("shows result when matrix changes", () => {
+    cy.get("[data-test=matrix] input").first().type(2);
+    cy.get("[data-test=result] input").first().should("have.value", 5);
+  });
+
+  it("shows result when kernel changes", () => {
+    cy.get("[data-test=kernel] input").first().type(2);
+    cy.get("[data-test=result] input").last().should("have.value", 5);
+  });
+
+  it("can change matrix size", () => {
+    cy.get("[data-test=matrix-size] input").first().type(2);
+    cy.get("[data-test=matrix-size] input").last().type(2);
+    cy.get("[data-test=matrix] input").should("have.length", 4);
+  });
+
+  it("can change kernel size", () => {
+    cy.get("[data-test=kernel-size] input").first().type(2);
+    cy.get("[data-test=kernel-size] input").last().type(2);
+    cy.get("[data-test=kernel] input").should("have.length", 4);
+  });
+
+  it("can toggle padding", () => {
+    cy.get("[data-test=padding]").click();
+    cy.get("[data-test=result] input").should("have.length", 4);
+  });
+});

cypress/e2e/theme.cy.js

@@ -0,0 +1,45 @@
+const visit = (darkAppearance) =>
+  cy.visit("/", {
+    onBeforeLoad(win) {
+      cy.stub(win, "matchMedia")
+        .withArgs("(prefers-color-scheme: dark)")
+        .returns({
+          matches: darkAppearance,
+          addEventListener: () => {},
+          removeEventListener: () => {},
+        });
+    },
+  });
+
+const isDarkMode = () => {
+  cy.get("html").should("have.attr", "theme", "dark");
+  cy.get("html").should("have.css", "background-color", "rgb(51, 51, 51)");
+  cy.get("html").should("have.css", "color", "rgb(238, 238, 238)");
+};
+
+const isLightMode = () => {
+  cy.get("html").should("have.attr", "theme", "light");
+  cy.get("html").should("have.css", "background-color", "rgb(255, 255, 255)");
+  cy.get("html").should("have.css", "color", "rgb(51, 51, 51)");
+};
+
+describe("Theme", () => {
+  it("is dark by default", () => {
+    cy.visit("/");
+    isDarkMode();
+  });
+
+  it("is light if user has set it in the browser", () => {
+    visit(false);
+    isLightMode();
+  });
+
+  it("can toggle", () => {
+    visit(true);
+    isDarkMode();
+    cy.get("[data-test=toggle-theme]").click();
+    isLightMode();
+    cy.get("[data-test=toggle-theme]").click();
+    isDarkMode();
+  });
+});