Merge pull request #222 from ElioDiNino/refactor/v4

refactor: v4 of the website

.github/workflows/dependency-review.yml

@@ -15,6 +15,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout Repository'
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v2
+        uses: actions/dependency-review-action@v4

website/.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+build
+coverage
+node_modules

website/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

website/applitools.config.cjs

@@ -2,30 +2,29 @@
 // It applies to all tests in this project.
 
 module.exports = {
+  // Concurrency refers to the number of visual checkpoints Applitools will perform in parallel.
+  testConcurrency: 5,
 
-    // Concurrency refers to the number of visual checkpoints Applitools will perform in parallel.
-    testConcurrency: 5,
+  // To connect visual test results to your account,
+  // you must set the `APPLITOOLS_API_KEY` environment variable to your Applitools API key.
+  // To find it: https://applitools.com/tutorials/getting-started/setting-up-your-environment.html
+  // If you don't explicitly set the API key here,
+  // then the SDK will automatically read the `APPLITOOLS_API_KEY` environment variable to fetch it.
+  apiKey: 'APPLITOOLS_API_KEY',
 
-    // To connect visual test results to your account,
-    // you must set the `APPLITOOLS_API_KEY` environment variable to your Applitools API key.
-    // To find it: https://applitools.com/tutorials/getting-started/setting-up-your-environment.html
-    // If you don't explicitly set the API key here,
-    // then the SDK will automatically read the `APPLITOOLS_API_KEY` environment variable to fetch it.
-    apiKey: 'APPLITOOLS_API_KEY',
+  // A batch is the collection of visual checkpoints for a test suite.
+  // Batches are displayed in the Eyes Test Manager, so use meaningful names.
+  batchName: 'Full Site Evaluation',
 
-    // A batch is the collection of visual checkpoints for a test suite.
-    // Batches are displayed in the Eyes Test Manager, so use meaningful names.
-    batchName: 'Full Site Evaluation',
+  // Applitools can run checkpoints for snapshots against any browser in the Ultrafast Grid.
+  // This setting defines 5 unique browser configurations to test.
+  browser: [
+    { width: 3840, height: 2160, name: 'chrome' },
+    { width: 1600, height: 1200, name: 'firefox' },
+    { width: 1024, height: 768, name: 'safari' },
 
-    // Applitools can run checkpoints for snapshots against any browser in the Ultrafast Grid.
-    // This setting defines 5 unique browser configurations to test.
-    browser: [
-        {width: 3840, height: 2160, name: 'chrome'},
-        {width: 1600, height: 1200, name: 'firefox'},
-        {width: 1024, height: 768, name: 'safari'},
-
-        {deviceName: 'iPhone 11', screenOrientation: 'portrait'},
-        {deviceName: 'Pixel 2', screenOrientation: 'landscape'},
-        {deviceName: 'Galaxy S22', screenOrientation: 'portrait'},
-    ]
-}
+    { deviceName: 'iPhone 11', screenOrientation: 'portrait' },
+    { deviceName: 'Pixel 2', screenOrientation: 'landscape' },
+    { deviceName: 'Galaxy S22', screenOrientation: 'portrait' },
+  ],
+};

website/cypress.config.ts

@@ -1,11 +1,13 @@
-import { defineConfig } from "cypress";
-import eyesPlugin from '@applitools/eyes-cypress'
+import { defineConfig } from 'cypress';
+import eyesPlugin from '@applitools/eyes-cypress';
 
-export default eyesPlugin(defineConfig({
-  e2e: {
-    baseUrl: 'http://localhost:3000',
-    setupNodeEvents(on, config) {
-      // implement node event listeners here
+export default eyesPlugin(
+  defineConfig({
+    e2e: {
+      baseUrl: 'http://localhost:3000',
+      setupNodeEvents(on, config) {
+        // implement node event listeners here
+      },
     },
-  },
-}));
+  }),
+);

website/cypress/e2e/contact.cy.ts

@@ -1,28 +1,34 @@
 /// <reference types="cypress" />
 
 describe('Contact Page', () => {
-    beforeEach(() => {
-        cy.visit('/contact')
-    })
+  beforeEach(() => {
+    cy.visit('/contact');
+  });
 
-    it('Contact Page Layout', () => {
-        cy.eyesOpen({
-            appName: 'Personal Website',
-            testName: Cypress.currentTest.title,
-        })
-        cy.eyesCheckWindow({
-            tag: "Contact Page",
-            target: 'window',
-            fully: true,
-        });
+  it('Contact Page Layout', () => {
+    cy.eyesOpen({
+      appName: 'Personal Website',
+      testName: Cypress.currentTest.title,
+    });
+    cy.eyesCheckWindow({
+      tag: 'Contact Page',
+      target: 'window',
+      fully: true,
+    });
 
-        cy.contains('Submit')
-        cy.eyesClose()
-    })
+    cy.contains('Submit');
+    cy.eyesClose();
+  });
 
-    it('Contact Page Form', () => {
-        cy.get('input[name="user_name"]').type('Elio Di Nino').should('have.value', 'Elio Di Nino')
-        cy.get('input[name="user_email"]').type('[email protected]').should('have.value', '[email protected]')
-        cy.get('textarea[name="message"]').type('This is a test message').should('have.value', 'This is a test message')
-    })
-})
+  it('Contact Page Form', () => {
+    cy.get('input[name="user_name"]')
+      .type('Elio Di Nino')
+      .should('have.value', 'Elio Di Nino');
+    cy.get('input[name="user_email"]')
+      .type('[email protected]')
+      .should('have.value', '[email protected]');
+    cy.get('textarea[name="message"]')
+      .type('This is a test message')
+      .should('have.value', 'This is a test message');
+  });
+});

website/cypress/e2e/home.cy.ts

@@ -1,29 +1,29 @@
 /// <reference types="cypress" />
 
 describe('Home Page', () => {
-    beforeEach(() => {
-        cy.visit('/')
+  beforeEach(() => {
+    cy.visit('/');
 
-        cy.eyesOpen({
-            appName: 'Personal Website',
-            testName: Cypress.currentTest.title,
-        })
-    })
+    cy.eyesOpen({
+      appName: 'Personal Website',
+      testName: Cypress.currentTest.title,
+    });
+  });
 
-    it('Home Page Layout', () => {
-        cy.contains('Resume')
-        cy.contains('Links')
-        cy.contains('GitHub')
+  it('Home Page Layout', () => {
+    cy.contains('Resume');
+    cy.contains('Links');
+    cy.contains('GitHub');
 
-        cy.eyesCheckWindow({
-            tag: "Home Page",
-            target: 'window',
-            fully: true,
-            matchLevel: 'Layout'
-        });
-    })
+    cy.eyesCheckWindow({
+      tag: 'Home Page',
+      target: 'window',
+      fully: true,
+      matchLevel: 'Layout',
+    });
+  });
 
-    afterEach(() => {
-        cy.eyesClose()
-    })
-})
+  afterEach(() => {
+    cy.eyesClose();
+  });
+});

website/cypress/e2e/links.cy.ts

@@ -1,38 +1,38 @@
 /// <reference types="cypress" />
 
 describe('Links Page', () => {
-    beforeEach(() => {
-        cy.visit('/links')
-        // Wait up to 10 seconds for the background image to load
-        cy.get('.background', { timeout: 10000 })
-          .should('be.visible')
-          .then($el => {
-            const url = $el.css('background-image').match(/url\("(.*)"\)/)[1]
-            cy.request({url, failOnStatusCode: false})
-              .its('status')
-              .should('eq', 200)
-          })
-          .wait(1000)
+  beforeEach(() => {
+    cy.visit('/links');
+    // Wait up to 10 seconds for the background image to load
+    cy.get('.background', { timeout: 10000 })
+      .should('be.visible')
+      .then(($el) => {
+        const url = $el.css('background-image').match(/url\("(.*)"\)/)[1];
+        cy.request({ url, failOnStatusCode: false })
+          .its('status')
+          .should('eq', 200);
+      })
+      .wait(1000);
 
-        cy.eyesOpen({
-            appName: 'Personal Website',
-            testName: Cypress.currentTest.title,
-        })
-    })
+    cy.eyesOpen({
+      appName: 'Personal Website',
+      testName: Cypress.currentTest.title,
+    });
+  });
 
-    it('Links Page Layout', () => {
-        cy.eyesCheckWindow({
-            tag: "Links Page",
-            target: 'window',
-            fully: true,
-        });
+  it('Links Page Layout', () => {
+    cy.eyesCheckWindow({
+      tag: 'Links Page',
+      target: 'window',
+      fully: true,
+    });
 
-        cy.contains('Website')
-        cy.contains('Contact')
-        cy.contains('Resume')
-    })
+    cy.contains('Website');
+    cy.contains('Contact');
+    cy.contains('Resume');
+  });
 
-    afterEach(() => {
-        cy.eyesClose()
-    })
-})
+  afterEach(() => {
+    cy.eyesClose();
+  });
+});

website/cypress/support/commands.ts

@@ -34,4 +34,4 @@
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
+// }

website/cypress/support/e2e.ts

@@ -13,11 +13,10 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-import '@applitools/eyes-cypress/commands'
-
+import '@applitools/eyes-cypress/commands';
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

website/cypress/support/index.d.ts

@@ -1 +1 @@
-import "@applitools/eyes-cypress"
+import '@applitools/eyes-cypress';

website/cypress/tsconfig.json

@@ -1,8 +1,8 @@
 {
-    "compilerOptions": {
-      "target": "es5",
-      "lib": ["es5", "dom"],
-      "types": ["cypress", "node"]
-    },
-    "include": ["**/*.ts"]
-  }
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"]
+  },
+  "include": ["**/*.ts"]
+}