chore: 🤖 migrate cypress to use typescript

cypress/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: "./tsconfig.json",
+  },
+};

cypress/integration/about/about.spec.ts

@@ -0,0 +1,11 @@
+describe("About", () => {
+  it("should not have broken links", () => {
+    cy.visit(`${Cypress.env("hostUrl")}/sobre`);
+
+    cy.getByDataTest("accordion-container").within(() => {
+      cy.findAllByRole("link").each((link) => {
+        cy.request(link.prop("href")).its("status").should("eq", 200);
+      });
+    });
+  });
+});

cypress/integration/header/header.spec.ts

@@ -0,0 +1,11 @@
+describe("Header", () => {
+  it("should not have broken links", () => {
+    cy.visit(Cypress.env("hostUrl"));
+
+    cy.getByDataTest("header-container").within(() => {
+      cy.findAllByRole("link").each((link) => {
+        cy.request(link.prop("href")).its("status").should("eq", 200);
+      });
+    });
+  });
+});

cypress/integration/home/filter.spec.ts

@@ -0,0 +1,68 @@
+import { streamsRegex, tagsRegex, vodsRegex } from "../../consts/urlRegexes";
+
+describe("Home > Filter", () => {
+  beforeEach(() => {
+    cy.intercept(streamsRegex, {
+      statusCode: 200,
+      fixture: "streams",
+    }).as("streams");
+    cy.intercept(tagsRegex, {
+      statusCode: 200,
+      fixture: "tags",
+    }).as("tags");
+    cy.intercept(vodsRegex, {
+      statusCode: 200,
+      fixture: "vods",
+    }).as("vods");
+  });
+
+  it("should filter out streams by tags change the URL", () => {
+    const PROGRAMMING_TEXT = "Programação";
+    const JAVASCRIPT_TEXT = "JavaScript";
+    const LGBTQIA_TEXT = "LGBTQIA+";
+
+    cy.visit(Cypress.env("hostUrl"));
+    cy.wait(["@streams", "@tags", "@vods"]);
+
+    cy.getByDataTest("card-online").should("have.length", 13);
+
+    cy.filterByTag(PROGRAMMING_TEXT);
+    cy.shouldUrlContainTags(PROGRAMMING_TEXT);
+    cy.getByDataTest("card-online").should("have.length", 2);
+
+    cy.unFilterByTag(PROGRAMMING_TEXT);
+    cy.getByDataTest("card-online").should("have.length", 13);
+
+    cy.filterByTag(PROGRAMMING_TEXT);
+    cy.filterByTag(JAVASCRIPT_TEXT);
+    cy.shouldUrlContainTags(PROGRAMMING_TEXT, JAVASCRIPT_TEXT);
+    cy.getByDataTest("card-online").should("have.length", 1);
+
+    cy.filterByTag(LGBTQIA_TEXT);
+    cy.shouldUrlContainTags(PROGRAMMING_TEXT, JAVASCRIPT_TEXT, LGBTQIA_TEXT);
+    cy.getByDataTest("card-online").should("have.length", 0);
+
+    cy.unFilterByTag(LGBTQIA_TEXT);
+    cy.getByDataTest("card-online").should("have.length", 1);
+
+    cy.unFilterByTag(JAVASCRIPT_TEXT);
+    cy.getByDataTest("card-online").should("have.length", 2);
+
+    cy.unFilterByTag(PROGRAMMING_TEXT);
+    cy.getByDataTest("card-online").should("have.length", 13);
+  });
+
+  it("should accept the tag query string to filter out streams", () => {
+    const JAVASCRIPT_TEXT = "JavaScript";
+
+    cy.visit(`http://localhost:3000/?tags=${JAVASCRIPT_TEXT}`);
+    cy.wait(["@streams", "@tags", "@vods"]);
+
+    cy.getByDataTest("tag-filter")
+      .contains(JAVASCRIPT_TEXT)
+      .should("have.css", "backgroundColor", "rgb(139, 61, 255)")
+      .should("have.length", 1);
+
+    cy.getByDataTest("card-online").should("have.length", 3);
+  });
+});

cypress/integration/home/raid.spec.js → cypress/integration/home/raid.spec.ts

@@ -1,7 +1,7 @@
 import { streamsRegex, tagsRegex, vodsRegex } from "../../consts/urlRegexes";
 
 describe("Home > Raid", () => {
-  it("Copy raid command to clipboard", () => {
+  it("should copy raid command to clipboard", () => {
     const COPIED_TEXT = "/raid emersongarrido";
 
     cy.intercept(streamsRegex, {
@@ -41,11 +41,13 @@ describe("Home > Raid", () => {
 
     cy.wait(["@streams", "@tags", "@vods"]);
 
-    cy.getByData("raid-button").first().click();
-    cy.window().its("navigator.clipboard").invoke("readText").should("equal", COPIED_TEXT);
+    cy.getByDataTest("card-online")
+      .first()
+      .within(() => {
+        cy.findByRole("button", { name: "Raid" }).click();
+        cy.window().its("navigator.clipboard").invoke("readText").should("equal", COPIED_TEXT);
+      });
 
-    cy.get(".chakra-alert").within(() => {
-      cy.get(".chakra-alert__title").contains(`Comando "${COPIED_TEXT}" copiado!`);
-    });
+    cy.findByRole("alert", { name: `Comando "${COPIED_TEXT}" copiado!` }).should("have.length", 1);
   });
 });

cypress/integration/home/refetch.spec.js → cypress/integration/home/refetch.spec.ts

@@ -18,7 +18,7 @@ describe("Home > Refetch", () => {
     cy.visit(Cypress.env("hostUrl"));
     cy.wait(["@streams", "@tags", "@vods"]);
 
-    cy.getByData("card-online").should("have.length", 13);
+    cy.getByDataTest("card-online").should("have.length", 13);
 
     cy.intercept(streamsRegex, {
       statusCode: 200,
@@ -27,6 +27,6 @@ describe("Home > Refetch", () => {
     cy.tick(120 * 1000)
     cy.wait(["@streams", "@tags", "@vods"]);
 
-    cy.getByData("card-online").should("have.length", 2);
+    cy.getByDataTest("card-online").should("have.length", 2);
   });
-});
+});

cypress/integration/home/simultaneous.spec.js → cypress/integration/home/simultaneous.spec.ts

@@ -17,10 +17,12 @@ describe("Home > Simultaneous", () => {
     cy.visit(Cypress.env("hostUrl"));
     cy.wait(["@streams", "@tags", "@vods"]);
 
-    cy.getByData("simultaneous-button").click();
-    cy.getByData("start-simultaneous-button").click();
-    cy.get(".chakra-toast")
-      .should("have.length", 1)
-      .contains("Você deve selecionar pelo menos duas streams");
+    cy.getByDataTest("simultaneous-button").click();
+    cy.getByDataTest("start-simultaneous-button").click();
+
+    cy.findByRole("alert", { name: "Você deve selecionar pelo menos duas streams" }).should(
+      "have.length",
+      1,
+    );
   });
 });

cypress/plugins/index.ts

@@ -0,0 +1,10 @@
+module.exports = (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
+  on("task", {
+    log(message) {
+      console.log(message);
+      return null;
+    },
+  });
+
+  return config;
+};

cypress/support/@types/selectors.d.ts

@@ -0,0 +1,7 @@
+export type Selectors = 
+| "accordion-container"
+| "card-online"
+| "header-container"
+| "simultaneous-button"
+| "start-simultaneous-button"
+| "tag-filter"