Cypress Tests for Projects + Lint configuration

.github/workflows/cypress.yaml

@@ -11,7 +11,7 @@ jobs:
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:
-          start: npm run test:ci
+          start: npm run cy:ci
           wait-on: 'http://localhost:5173'
           record: true
           parallel: true

.github/workflows/lint.yaml

@@ -0,0 +1,20 @@
+name: Lint
+
+on:
+  pull_request:
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Run ESLint
+        run: npm run lint:ci

README.md

@@ -24,6 +24,7 @@ You’ll find these technologies reflected throughout the codebase, with more de
 
 ### Current Test Results
 Cypress Cloud Results can be found here, where you can see history of runs through local development and from the CI/CD Pipeline
+
 [![jakekohl.github.io](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/detailed/kz76nf&style=for-the-badge&logo=cypress)](https://cloud.cypress.io/projects/kz76nf/runs)
 
 

cypress.config.js

@@ -1,7 +1,11 @@
-import { defineConfig } from 'cypress'
+import { defineConfig } from 'cypress';
 
 export default defineConfig({
   projectId: 'kz76nf',
+  retries: { runMode: 1, openMode: 0 },
+  defaultBrowser: 'electron',
+  viewportWidth: 1920,
+  viewportHeight: 1080,
   e2e: {
     specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
     baseUrl: 'http://localhost:5173',
@@ -13,4 +17,4 @@ export default defineConfig({
       bundler: 'vite',
     },
   },
-})
+});

cypress/e2e/workflow/home.cy.js

@@ -1,5 +1,4 @@
 describe('Home Page', () => {
-
   beforeEach(() => {
     cy.visit('/');
   });
@@ -15,7 +14,8 @@ describe('Home Page', () => {
       { dataTest: 'social-github', link: 'https://github.com/jakekohl' },
       { dataTest: 'social-linkedin', link: 'https://linkedin.com/in/jacob-jp-kohl' },
     ];
-    const sections = [ 'hero-section', 'stats-section', 'skills-section', 'cta-section' ];
+    const sections = ['hero-section', 'stats-section', 'skills-section', 'cta-section'];
+
     cy.verifyTopNavMenubar(brandText, menuItems, socialLinks);
     sections.forEach((section) => {
       cy.verifySectionVisibility(section);
@@ -46,7 +46,7 @@ describe('Home Page', () => {
 
   it('should showcase the user\'s years of experience in different domains', () => {
     const stats = [
-      { 
+      {
         dataTest: 'quality-assurance',
         value: 5,
         label: 'Quality Assurance',
@@ -77,14 +77,16 @@ describe('Home Page', () => {
         label: 'Infrastructure',
       },
     ];
+
     cy.getDataTest('stats-section').should('be.visible').within(() => {
       cy.contains('Professional Experience (Years)').should('be.visible');
       cy.verifyProfessionalStats(stats);
     });
   });
-  
+
   it('should showcase the user\'s technical skills in high level categories', () => {
     const categories = ['development', 'testing', 'infrastructure', 'support', 'soft-skills'];
+
     categories.forEach((category) => {
       cy.getDataTest(`skill-domain-${category}`).should('be.visible');
     });
@@ -96,4 +98,4 @@ describe('Home Page', () => {
       cy.url().should('include', '/contact');
     });
   });
-});
+});

cypress/e2e/workflow/projects.cy.js

@@ -0,0 +1,31 @@
+describe('Projects', () => {
+  beforeEach(() => {
+    cy.visit('/projects');
+  });
+
+  it('should show a list of current projects', () => {
+    const currentProjects = [
+      {
+        title: 'Personal Portfolio Website',
+        status: 'In Development',
+        images: [],
+      },
+    ];
+
+    cy.getDataTest('ongoing-projects').should('be.visible').within(() => {
+      currentProjects.forEach((project) => {
+        cy.validateProjectCard(project);
+      });
+    });
+  });
+
+  it.skip('should show a list of completed projects', () => {
+    const completedProjects = [];
+
+    cy.getDataTest('completed-projects').should('be.visible').within(() => {
+      completedProjects.forEach((project) => {
+        cy.validateProjectCard(project);
+      });
+    });
+  });
+});

cypress/support/commands/home.js

@@ -35,4 +35,4 @@ Cypress.Commands.add('verifyProfessionalStats', (stats) => {
   stats.forEach((stat) => {
     cy.getDataTest(`stat-${stat.dataTest}`).should('be.visible').should('contain', stat.value).should('contain', stat.label);
   });
-});
+});

cypress/support/commands/projects.js

@@ -0,0 +1,22 @@
+/**
+ * Validates a project card
+ *
+ * @param {Object} project - The project object
+ * @param {string} project.title - The project title
+ * @param {string} project.status - The project status
+ * @param {string[]} project.images - The project images
+ * @param {string[]} project.technologies - The project technologies
+ * @param {string[]} project.skills - The project skills
+ * @param {string[]} project.features - The project features
+ */
+Cypress.Commands.add('validateProjectCard', (project) => {
+  cy.getDataTest('project-title').should('contain', project.title);
+  cy.getDataTest('project-status').should('contain', project.status);
+  cy.getDataTest('project-description').should('be.visible');
+  cy.getDataTest('project-images').should(project.images.length > 0 ? 'be.visible' : 'not.exist');
+  cy.getDataTest('project-technologies').should('be.visible');
+  cy.getDataTest('project-skills').should('be.visible');
+  cy.getDataTest('project-features').should('be.visible');
+  cy.getDataTest('project-code-button').should('be.visible');
+  cy.getDataTest('project-demo-button').should('be.visible');
+});

cypress/support/e2e.js

@@ -1,5 +1,6 @@
 // General Helper Files
-import './helpers/general.js'
+import './helpers/general';
 
 // E2E Command Files
-import './commands/home.js'
+import './commands/home';
+import './commands/projects';

cypress/support/helpers/general.js

@@ -4,7 +4,7 @@
  * @returns {Cypress.Chainable} - The element
  */
 Cypress.Commands.add('getDataTest', (selector) => {
-  return cy.get(`[data-test=${selector}]`)
+  return cy.get(`[data-test=${selector}]`);
 });
 
 /**
@@ -14,5 +14,5 @@ Cypress.Commands.add('getDataTest', (selector) => {
  * @returns {Cypress.Chainable} - The element
  */
 Cypress.Commands.add('clickDataTest', (selector, options) => {
-  return cy.getDataTest(selector).click(options)
+  return cy.getDataTest(selector).click(options);
 });