Jakekohl/cypress-time (#12)

Send it

Author: jakekohl

.github/workflows/cypress.yaml

@@ -0,0 +1,20 @@
+name: Cypress Tests
+on: [pull_request]
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          start: npm run test:ci
+          wait-on: 'http://localhost:5173'
+          record: true
+          parallel: true
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -1,57 +1,52 @@
-# vue-project
+# jakekohl.github.io (aka, the Professional Portfolio that is also a sandbox)
 
-This template should help get you started developing with Vue 3 in Vite.
+Hey there! 👋
 
-## Recommended IDE Setup
+This project is my personal professional portfolio—a place to highlight my work, skills, and experience in tech. But it’s more than just a digital resume. I built this site as a hands-on sandbox for experimenting with modern web development tools, frameworks, and best practices. 
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+One of my main goals here is to showcase robust test automation, so you’ll find real-world implementations of both **Cypress** and **PlayWright** throughout the codebase. Whether you’re a recruiter, a fellow developer, or just curious, feel free to poke around and see how I approach building, testing, and continuously improving QA Test Automations within modern web applications!
 
-## Customize configuration
+## Current Technologies Implemented
 
-See [Vite Configuration Reference](https://vite.dev/config/).
+This project leverages a modern web stack and several best-in-class tools:
 
-## Project Setup
+- **Vue 3**: The core framework for building the user interface.
+- **PrimeVue**: A rich UI component library for Vue, used extensively for layout and interactive elements.
+- **Cypress**: End-to-end and component testing framework, with custom commands and workflows implemented.
+- **Playwright**: Planned for future implementation as an additional E2E testing solution.
+- **Vite**: Lightning-fast build tool and development server.
+- **Other Node Packages**: For a full list of dependencies and devDependencies, see the [package.json](./package.json).
 
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
+You’ll find these technologies reflected throughout the codebase, with more details and specific versions in the [package.json](./package.json).
 
-```sh
-npm run dev
-```
 
-### Compile and Minify for Production
+## Cypress & Playwright
 
-```sh
-npm run build
-```
+### 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)
 
-### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component)
 
-```sh
-npm run test:unit:dev # or `npm run test:unit` for headless testing
-```
+### Running Cypress Tests
 
-### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
+You can run the Cypress test suite against the deployed site (`https://jakekohl.github.io`) or locally after cloning the repository. Below are step-by-step instructions for both approaches.
 
-```sh
-npm run test:e2e:dev
 ```
+# Clone this repo
+git clone https://github.com/jakekohl/jakekohl.github.io
 
-This runs the end-to-end tests against the Vite development server.
-It is much faster than the production build.
-
-But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
+# Install packages
+npm i
 
-```sh
-npm run build
-npm run test:e2e
-```
+# Run Cypress locally against the deployed site
+npx cypress run --config baseUrl=https://jakekohl.github.io
 
-### Lint with [ESLint](https://eslint.org/)
+# Or open the Cypress UI with the deployed site as baseUrl
+npx cypress open --config baseUrl=https://jakekohl.github.io
 
-```sh
-npm run lint
+# If you want to run this locally, you can run the source code locally and run Cypress locally
+npm run dev && npm run cy:open
 ```
+
+### Running Playwright Test Automations
+`Coming Soon`

cypress.config.js

@@ -1,9 +1,10 @@
 import { defineConfig } from 'cypress'
 
 export default defineConfig({
+  projectId: 'kz76nf',
   e2e: {
     specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
-    baseUrl: 'http://localhost:4173',
+    baseUrl: 'http://localhost:5173',
   },
   component: {
     specPattern: 'src/**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}',

cypress/e2e/example.cy.js

@@ -0,0 +1,99 @@
+describe('Home Page', () => {
+
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('should display the home page with the Top Navigation Menubar', () => {
+    const brandText = 'Jake Kohl';
+    const menuItems = [
+      { dataTest: 'nav-home', label: 'Home' },
+      { dataTest: 'nav-projects', label: 'Projects' },
+      { dataTest: 'nav-contact', label: 'Contact' },
+    ];
+    const socialLinks = [
+      { 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' ];
+    cy.verifyTopNavMenubar(brandText, menuItems, socialLinks);
+    sections.forEach((section) => {
+      cy.verifySectionVisibility(section);
+    });
+  });
+
+  it('should inform the user whose portfolio they are looking at', () => {
+    cy.getDataTest('hero-section').should('be.visible').within(() => {
+      cy.contains('Jake Kohl').should('be.visible');
+      cy.contains('Quality Assurance Engineer').should('be.visible');
+      cy.contains('Test Automation Enthusiast').should('be.visible');
+      cy.getDataTest('profile-avatar').should('be.visible').children().should('have.attr', 'src').and('include', 'https://avatars.githubusercontent.com/');
+    });
+  });
+
+  it('should allow user to navigate to the projects page through the hero section', () => {
+    cy.getDataTest('hero-section').should('be.visible').within(() => {
+      cy.clickDataTest('hero-projects-button');
+    });
+    cy.url().should('include', '/projects');
+  });
+
+  it.skip('should allow a user to directly download a resume from the hero section', () => {
+    cy.getDataTest('hero-section').should('be.visible').within(() => {
+      cy.clickDataTest('hero-resume-button');
+    });
+  });
+
+  it('should showcase the user\'s years of experience in different domains', () => {
+    const stats = [
+      { 
+        dataTest: 'quality-assurance',
+        value: 5,
+        label: 'Quality Assurance',
+      },
+      {
+        dataTest: 'technical-support',
+        value: 8,
+        label: 'Technical Support',
+      },
+      {
+        dataTest: 'technical-leadership',
+        value: 4,
+        label: 'Technical Leadership',
+      },
+      {
+        dataTest: 'management',
+        value: 1,
+        label: 'Management',
+      },
+      {
+        dataTest: 'software-development',
+        value: 3,
+        label: 'Software Development',
+      },
+      {
+        dataTest: 'infrastructure',
+        value: 6,
+        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');
+    });
+  });
+
+  it('should show a call-to-action featuring a button link for connecting with the user', () => {
+    cy.getDataTest('cta-section').should('be.visible').within(() => {
+      cy.clickDataTest('contact-cta-button');
+      cy.url().should('include', '/contact');
+    });
+  });
+});

cypress/e2e/workflow/home.cy.js

@@ -0,0 +1,38 @@
+/**
+ * Verify the top navigation menubar
+ * @param {string} brandText - The text for the brand slot
+ * @param {Object[]} menuItems - The menu items to verify
+ * @param {Object[]} socialLinks - The social links to verify
+ */
+Cypress.Commands.add('verifyTopNavMenubar', (brandText, menuItems, socialLinks) => {
+  cy.getDataTest('nav-top-menubar').should('exist').should('be.visible').within(() => {
+    cy.getDataTest('brand-slot').should('exist').should('be.visible').should('have.text', brandText);
+    menuItems.forEach((item) => {
+      cy.getDataTest(item.dataTest).should('exist').should('be.visible').should('have.text', item.label);
+    });
+    socialLinks.forEach((link) => {
+      cy.getDataTest(link.dataTest).should('exist').should('be.visible').should('have.attr', 'href', link.link);
+    });
+  });
+});
+
+/**
+ * Verify the visibility of a section
+ * @param {string} sectionSelector - The selector for the section
+ */
+Cypress.Commands.add('verifySectionVisibility', (sectionSelector) => {
+  cy.getDataTest(sectionSelector).should('exist').should('be.visible');
+});
+
+/**
+ * Verify the professional stats
+ * @param {Object[]} stats - The stats to verify
+ * @param {string} stats.dataTest - The data test for the stat
+ * @param {string} stats.value - The value for the stat
+ * @param {string} stats.label - The label for the stat
+ */
+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.js

@@ -1,20 +1,5 @@
-// ***********************************************************
-// This example support/index.js 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
-// ***********************************************************
+// General Helper Files
+import './helpers/general.js'
 
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+// E2E Command Files
+import './commands/home.js'