Cypress E2E testing

cypress/integration/app.spec.ts

@@ -0,0 +1,59 @@
+/// <reference types="cypress" />
+
+import faker from "faker";
+
+beforeEach(() => {
+    cy.visit("/");
+});
+
+it("switches page correctly on inputs change", () => {
+    cy.findByRole("textbox", { name: /query/i })
+        .type("palabra");
+    cy.findByText("word")
+        .url()
+        .should("include", "/auto/en/palabra");
+    cy.findByRole("combobox", { name: /source/i })
+        .select("es")
+        .url()
+        .should("include", "/es/en/palabra");
+    cy.findByRole("combobox", { name: /target/i })
+        .select("ca");
+    cy.findByText("paraula")
+        .url()
+        .should("include", "/es/ca/palabra");
+});
+
+it("switches first loaded page on language change", () => {
+    const query = faker.random.words();
+    cy.visit(`/auto/en/${query}`);
+
+    cy.findByRole("textbox", { name: /query/i })
+        .should("have.value", query);
+    cy.findByRole("combobox", { name: /source/i })
+        .select("eo")
+        .url()
+        .should("include", `/eo/en/${encodeURIComponent(query)}`);
+});
+
+it("doesn't switch initial page on language change", () => {
+    cy.findByRole("combobox", { name: /source/i })
+        .select("eo")
+        .url()
+        .should("not.include", "/eo");
+});
+
+it("language switching button is disable on 'auto', but enables when other", () => {
+    cy.findByRole("button", { name: /switch languages/i })
+        .as("btnSwitch")
+        .should("be.disabled");
+    cy.findByRole("combobox", { name: /source/i })
+        .as("source")
+        .select("eo")
+        .get("@btnSwitch")
+        .should("be.enabled")
+        .click();
+    cy.findByRole("combobox", { name: /target/i })
+        .should("have.value", "eo")
+        .get("@source")
+        .should("have.value", "en");
+});

cypress/support/commands.js

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

cypress/support/index.js

@@ -0,0 +1 @@
+import './commands';

cypress/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": false,
+    "types": [
+      "cypress",
+      "@testing-library/cypress"
+    ]
+  },
+  "include": [
+    "../node_modules/cypress",
+    "./*/*.ts"
+  ]
+}