TMP

.github/workflows/workflow.yml

@@ -1,4 +1,4 @@
-name: Deploy static content to Pages
+name: tests and deploy
 
 on: [push]
 
@@ -8,11 +8,11 @@ permissions:
   id-token: write
 
 concurrency:
-  group: 'pages'
+  group: "pages"
   cancel-in-progress: true
 
 jobs:
-  test:
+  vitest:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -21,14 +21,27 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: 'npm'
+          cache: "npm"
       - name: Install dependencies
         run: npm install
       - name: Run tests
         run: npm test
 
+  cypress-run:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      # Install npm dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          start: npm run cy:e2e:run
   deploy:
-    needs: test
+    needs:
+      - vitest
+      - cypress-run
     if: github.ref == 'refs/heads/main'
     environment:
       name: github-pages
@@ -41,7 +54,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: 'npm'
+          cache: "npm"
       - name: Install dependencies
         run: npm install
       - name: Build
@@ -51,7 +64,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          path: './dist'
+          path: "./dist"
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v1

cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  video: false,
+  screenshotOnRunFailure: false,
+  e2e: {
+    baseUrl: "http://localhost:8261",
+  },
+});

cypress/e2e/url_parameters_to_simulator.cy.ts

@@ -0,0 +1,259 @@
+describe("simulator loads", () => {
+  it("successfully loads the home page", () => {
+    cy.visit("/"); // change URL to match your dev URL
+    cy.contains("h4", " Remote freelancer from Portugal 🇵🇹");
+  });
+});
+
+describe("pass income through url parameters", () => {
+  it("successfully loads the home page", () => {
+    cy.visit("/"); // change URL to match your dev URL
+    cy.contains("h4", " Remote freelancer from Portugal 🇵🇹");
+  });
+
+  it("successfully uses income from url", () => {
+    cy.visit("/?income=50000"); // change URL to match your dev URL
+    cy.get('[data-cy="income"]').should("have.value", "50 000");
+  });
+
+  it("doesn't update income if incorrect from url", () => {
+    cy.visit("/?income=-50000"); // change URL to match your dev URL
+    cy.get('[data-cy="income"]').should("have.value", "");
+  });
+
+  it("doesn't update income if 0 from url", () => {
+    cy.visit("/?income=0"); // change URL to match your dev URL
+    cy.get('[data-cy="income"]').should("have.value", "");
+  });
+});
+describe("pass incomeFrequency through url parameters", () => {
+  it("successfully uses incomeFrequency from url", () => {
+    cy.visit("/?income=50000&incomeFrequency=day"); // change URL to match your dev URL
+    cy.get('[data-cy="frequency-dropdown"]>input').should("have.value", "day");
+  });
+  it("doesn't update incomeFrequency if incorrect from url", () => {
+    cy.visit("/?income=50000&incomeFrequency=aaaaa"); // change URL to match your dev URL
+    cy.get('[data-cy="frequency-dropdown"]>input').should("have.value", "year");
+  });
+});
+
+describe("pass displayFrequency through url parameters", () => {
+  it("successfully uses displayFrequency from url", () => {
+    cy.visit("/?income=50000&displayFrequency=day"); // change URL to match your dev URL
+    cy.get('[data-cy="frequency-button"].bg-secondary').should(
+      "have.text",
+      "Day"
+    );
+  });
+  it("doesn't update displayFrequency if incorrect from url", () => {
+    cy.visit("/?income=50000&displayFrequency=aaaaa"); // change URL to match your dev URL
+    cy.get('[data-cy="frequency-button"].bg-secondary').should(
+      "have.text",
+      "Month"
+    );
+  });
+});
+
+describe("pass nrMonthsDisplay through url parameters", () => {
+  it("successfully uses nrMonthsDisplay from url", () => {
+    cy.visit("/?income=50000&nrMonthsDisplay=13"); // change URL to match your dev URL
+    cy.get('[data-cy="nr-months-display"] input:first-of-type').should(
+      "have.value",
+      "13"
+    );
+  });
+  it("doesn't update nrMonthsDisplay if incorrect from url", () => {
+    cy.visit("/?income=50000&nrMonthsDisplay=-1"); // change URL to match your dev URL
+    cy.get('[data-cy="nr-months-display"] input:first-of-type').should(
+      "have.value",
+      "12"
+    );
+  });
+});
+
+describe("pass ssDiscount through url parameters", () => {
+  it("successfully uses ssDiscount from url", () => {
+    cy.visit("/?income=50000&ssDiscount=-0.15"); // change URL to match your dev URL
+    cy.get('[data-cy="ss-discount"]').should("have.text", "-15%");
+  });
+  it("doesn't update ssDiscount if incorrect from url", () => {
+    cy.visit("/?income=50000&ssDiscount=-0.45"); // change URL to match your dev URL
+    cy.get('[data-cy="ss-discount"]').should("have.text", "0%");
+  });
+});
+
+describe("pass expenses through url parameters", () => {
+  it("successfully uses positive expenses from url", () => {
+    cy.visit("/?income=50000&expenses=1534"); // change URL to match your dev URL
+    cy.get('[data-cy="expenses"] input:first-of-type').should(
+      "have.value",
+      "1 534"
+    );
+  });
+
+  it("successfully uses 0 expenses from url", () => {
+    cy.visit("/?income=50000&expenses=0"); // change URL to match your dev URL
+    cy.get('[data-cy="expenses"] input:first-of-type').should(
+      "have.value",
+      "0"
+    );
+  });
+
+  it("doesn't update expenses if incorrect from url", () => {
+    cy.visit("/?income=50000&expenses=-1534"); // change URL to match your dev URL
+    cy.get('[data-cy="expenses"] input:first-of-type').should(
+      "have.value",
+      "0"
+    );
+  });
+});
+
+describe("pass currentTaxRankYear through url parameters", () => {
+  it("successfully uses currentTaxRankYear from url", () => {
+    cy.visit("/?income=50000&currentTaxRankYear=2024"); // change URL to match your dev URL
+    cy.get('[data-cy="tax-rank-years-dropdown"] input:first-of-type').should(
+      "have.value",
+      "2024"
+    );
+  });
+
+  it("doesn't update currentTaxRankYear if invalid year from url", () => {
+    cy.visit("/?income=50000&currentTaxRankYear=2025"); // change URL to match your dev URL
+    cy.get('[data-cy="tax-rank-years-dropdown"] input:first-of-type').should(
+      "have.value",
+      "2023"
+    );
+  });
+
+  it("doesn't update currentTaxRankYear if incorrect type from url", () => {
+    cy.visit("/?income=50000&currentTaxRankYear=aaaaa"); // change URL to match your dev URL
+    cy.get('[data-cy="tax-rank-years-dropdown"] input:first-of-type').should(
+      "have.value",
+      "2023"
+    );
+  });
+});
+
+describe("pass ssFirstYear through url parameters", () => {
+  it("successfully uses true ssFirstYear from url", () => {
+    cy.visit("/?income=50000&ssFirstYear=true"); // change URL to match your dev URL
+    cy.get('[data-cy="ss-first-year"] input:first-of-type').should(
+      "have.value",
+      "true"
+    );
+  });
+
+  it("successfully uses false ssFirstYear from url", () => {
+    cy.visit("/?income=50000&ssFirstYear=false"); // change URL to match your dev URL
+    cy.get('[data-cy="ss-first-year"] input:first-of-type').should(
+      "have.value",
+      "false"
+    );
+  });
+
+  it("doesn't update ssFirstYear if string type from url", () => {
+    cy.visit("/?income=50000&ssFirstYear=yes"); // change URL to match your dev URL
+    cy.get('[data-cy="ss-first-year"] input:first-of-type').should(
+      "have.value",
+      "false"
+    );
+  });
+
+  it("doesn't update ssFirstYear if number type from url", () => {
+    cy.visit("/?income=50000&ssFirstYear=1"); // change URL to match your dev URL
+    cy.get('[data-cy="ss-first-year"] input:first-of-type').should(
+      "have.value",
+      "false"
+    );
+  });
+});
+
+describe("pass firstYear through url parameters", () => {
+  it("successfully uses true firstYear from url", () => {
+    cy.visit("/?income=50000&firstYear=true"); // change URL to match your dev URL
+    cy.get('[data-cy="first-year"] input:first-of-type').should(
+      "have.value",
+      "true"
+    );
+  });
+
+  it("successfully uses false firstYear from url", () => {
+    cy.visit("/?income=50000&firstYear=false"); // change URL to match your dev URL
+    cy.get('[data-cy="first-year"] input:first-of-type').should(
+      "have.value",
+      "false"
+    );
+  });
+
+  it("doesn't update firstYear if string type from url", () => {
+    cy.visit("/?income=50000&firstYear=yes"); // change URL to match your dev URL
+    cy.get('[data-cy="first-year"] input:first-of-type').should(
+      "have.value",
+      "false"
+    );
+  });
+
+  it("doesn't update firstYear if number type from url", () => {
+    cy.visit("/?income=50000&firstYear=1"); // change URL to match your dev URL
+    cy.get('[data-cy="first-year"] input:first-of-type').should(
+      "have.value",
+      "false"
+    );
+  });
+});
+
+describe("pass secondYear through url parameters", () => {
+  it("successfully uses true secondYear from url", () => {
+    cy.visit("/?income=50000&secondYear=true"); // change URL to match your dev URL
+    cy.get('[data-cy="second-year"] input:first-of-type').should(
+      "have.value",
+      "true"
+    );
+  });
+
+  it("successfully uses false secondYear from url", () => {
+    cy.visit("/?income=50000&secondYear=false"); // change URL to match your dev URL
+    cy.get('[data-cy="second-year"] input:first-of-type').should(
+      "have.value",
+      "false"
+    );
+  });
+
+  it("doesn't update secondYear if string type from url", () => {
+    cy.visit("/?income=50000&secondYear=yes"); // change URL to match your dev URL
+    cy.get('[data-cy="second-year"] input:first-of-type').should(
+      "have.value",
+      "false"
+    );
+  });
+
+  it("doesn't update secondYear if number type from url", () => {
+    cy.visit("/?income=50000&secondYear=1"); // change URL to match your dev URL
+    cy.get('[data-cy="second-year"] input:first-of-type').should(
+      "have.value",
+      "false"
+    );
+  });
+});
+
+describe("pass rnh through url parameters", () => {
+  it("successfully uses true rnh from url", () => {
+    cy.visit("/?income=50000&rnh=true"); // change URL to match your dev URL
+    cy.get('[data-cy="rnh"] input:first-of-type').should("have.value", "true");
+  });
+
+  it("successfully uses false rnh from url", () => {
+    cy.visit("/?income=50000&rnh=false"); // change URL to match your dev URL
+    cy.get('[data-cy="rnh"] input:first-of-type').should("have.value", "false");
+  });
+
+  it("doesn't update rnh if string type from url", () => {
+    cy.visit("/?income=50000&rnh=yes"); // change URL to match your dev URL
+    cy.get('[data-cy="rnh"] input:first-of-type').should("have.value", "false");
+  });
+
+  it("doesn't update rnh if number type from url", () => {
+    cy.visit("/?income=50000&rnh=1"); // change URL to match your dev URL
+    cy.get('[data-cy="rnh"] input:first-of-type').should("have.value", "false");
+  });
+});

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')