fix(170): Add cypress testing

.eslintrc.js

@@ -6,4 +6,10 @@ module.exports = {
     rules: {
         '@typescript-eslint/no-explicit-any': 'off',
     },
+    overrides:[
+        { 
+            files: ['*.cy.js'],
+            extends: ['plugin:cypress/recommended'],
+        },
+    ],
 };

.github/workflows/cypress.yaml

@@ -0,0 +1,32 @@
+name: End-to-end tests
+
+on:
+    pull_request:
+        branches: [master]
+
+jobs:
+    cypress-run:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v3
+
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v3
+              with:
+                  node-version: ${{ matrix.node-version }}
+
+            - name: Install dependencies
+              run: yarn install
+
+            - name: Cypress run
+              uses: cypress-io/github-action@v5
+              with:
+                  build: yarn run build
+                  browser: chrome
+                  start: yarn run serve
+                  record: true
+                  wait-on: 'http://localhost:8081'
+              env:
+                  CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -3,7 +3,7 @@ packages/**/node_modules/
 package-lock.json
 dist/
 packages/**/dist/
-packages/cli/out/
+packages/**/out/
 coverage/
 coverage-final.json
 .turbo/

MAINTAINING.md

@@ -9,7 +9,6 @@ Welcome to the team!
 There are, unfortunately, a few steps that need to take place when landing a pull request.
 
 1. Merge the pr. Prefer rebase merging when possible, but squash merge if there's one with a lotta chatty commits, or if it can't be rebased due to conflicts.
-2. Update the custom domain to be tybalt. This seems to be required every time the website is deployed.
 
 ### Publish a new release
 

cypress.config.js

@@ -0,0 +1,17 @@
+const { setupNodeEvents } = require('@tybalt/cypress');
+
+const cypressProjectRoot = './packages/cypress';
+const cypressOutDir = `${cypressProjectRoot}/out`;
+
+module.exports = {
+    downloadsFolder: `${cypressOutDir}/downloads`,
+    screenshotsFolder: `${cypressOutDir}/screenshots`,
+    videosFolder: `${cypressOutDir}/videos`,
+    fixturesFolder: 'e2e',
+    projectId: 'pgphiz',
+    e2e: {
+        specPattern: `${cypressProjectRoot}/e2e/**/*.cy.js`,
+        supportFile: `${cypressProjectRoot}/support/commands.js`,
+        setupNodeEvents,
+    },
+};

package.json

@@ -8,20 +8,22 @@
         "ci-test": "turbo ci-test",
         "clean": "turbo clean",
         "combine-coverage": "istanbul-merge --out coverage-final.json 'packages/**/coverage/coverage-final.json'",
+        "e2e": "cypress run --browser=chrome",
         "format": "prettier --write .",
+        "generate-scaffold": "cd ./packages/cli/out && yarn run exec-source scaffold eleventy --name my-example && cd ../../..",
         "generate-types": "turbo generate-types",
-        "lint": "eslint packages/**!(node_modules)/src/**/*.ts",
+        "lint": "eslint packages/**!(node_modules)/src/**/*.ts packages/cypress/e2e/**/*.js packages/cypress/support/*.js",
         "serve": "turbo run serve --parallel",
         "test": "turbo test",
-        "watch": "turbo run watch --parallel",
-        "generate-scaffold": "cd ./packages/cli/out && yarn run exec-source scaffold eleventy --name my-example && cd ../../.."
+        "watch": "turbo run watch --parallel"
     },
     "keywords": [],
     "author": "Douglas Wade <douglas.b.wade@gmail.com>",
     "license": "MIT",
     "workspaces": [
         "./packages/cli",
         "./packages/core",
+        "./packages/cypress",
         "./packages/eleventy-plugin",
         "./packages/eleventy-plugin-vanilla-example",
         "./packages/esbuild-plugin",
@@ -35,6 +37,7 @@
     ],
     "devDependencies": {
         "@tybalt/eslint-plugin": "workspace:^",
+        "cypress": "^12.17.3",
         "eslint": "^8.55.0",
         "istanbul-merge": "^1.1.1",
         "jest": "^29.7.0",

packages/cypress/.eslintrc.js

@@ -0,0 +1,4 @@
+return {
+    plugins: ['cypress'],
+    extends: ['plugin:cypress/recommended'],
+};

packages/cypress/e2e/website/guides.cy.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+
+const guides = [
+    'custom-validator',
+    'new-website',
+    'styling-your-component',
+    'writing-tests'
+];
+
+guides.forEach((guide) => {
+    describe(`guide: ${guide}`, () => {
+        beforeEach(() => {
+            cy.visit(`http://localhost:8081/pages/${guide}-guide/`);
+        });
+
+        it('should mount the layout', () => {
+            cy.get('tybalt-header').should('have.length', 1);
+            cy.get('tybalt-sidebar').should('have.length', 1);
+            cy.get('tybalt-footer').should('have.length', 1);
+        });
+    });
+});

packages/cypress/e2e/website/index.cy.js

@@ -0,0 +1,16 @@
+/// <reference types="cypress" />
+
+const baseUrl = 'http://localhost:8081/';
+
+describe('index.html', () => {
+    beforeEach(() => {
+        cy.visit(baseUrl);
+    });
+
+    it('should mount the layout', () => {
+        cy.get('tybalt-header').should('have.length', 1);
+        cy.get('tybalt-main').should('have.length', 1);
+        cy.get('tybalt-sidebar').should('have.length', 1);
+        cy.get('tybalt-footer').should('have.length', 1);
+    });
+});

packages/cypress/e2e/website/packages.cy.js

@@ -0,0 +1,26 @@
+/// <reference types="cypress" />
+
+const packages = [
+    'cli',
+    'core',
+    'eleventy-plugin',
+    'esbuild-plugin',
+    'eslint-plugin',
+    'parser',
+    'test-utils',
+    'validator'
+];
+
+packages.forEach((pkg) => {
+    describe(`package: ${pkg}`, () => {
+        beforeEach(() => {
+            cy.visit(`http://localhost:8081/pages/${pkg}/`);
+        });
+
+        it('should mount the layout', () => {
+            cy.get('tybalt-header').should('have.length', 1);
+            cy.get('tybalt-sidebar').should('have.length', 1);
+            cy.get('tybalt-footer').should('have.length', 1);
+        });
+    });
+});

packages/cypress/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "@tybalt/cypress",
+    "version": "0.0.1",
+    "description": "The end-to-end tests for the tybalt website",
+    "main": "dist/index.js",
+    "scripts": {
+        "build": "yarn run compile && yarn run generate-types",
+        "clean": "rimraf dist/",
+        "lint": "eslint ese/ src/ support/",
+        "compile": "esbuild src/index.ts --format=cjs --outdir=dist",
+        "generate-types": "tsc"
+    },
+    "private": true,
+    "author": "Douglas Wade <douglas.b.wade@gmail.com>",
+    "license": "MIT",
+    "devDependencies": {
+        "@cypress-audit/lighthouse": "^1.4.2",
+        "esbuild": "^0.19.1",
+        "eslint-plugin-cypress": "^2.14.0",
+        "rimraf": "^5.0.1",
+        "typescript": "^4.9.4"
+    }
+}

packages/cypress/src/index.ts

@@ -0,0 +1,11 @@
+import { lighthouse, prepareAudit } from '@cypress-audit/lighthouse';
+
+export const setupNodeEvents = (on) => {
+    on('before:browser:launch', (_: any, launchOptions: Cypress.BrowserLaunchOptions) => {
+        prepareAudit(launchOptions);
+    });
+
+    on('task', {
+        lighthouse: lighthouse(),
+    });
+};

packages/cypress/support/commands.js

@@ -0,0 +1 @@
+import '@cypress-audit/lighthouse/commands';

packages/cypress/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "compilerOptions": {
+        "skipLibCheck": true,
+        "outDir": "dist",
+        "moduleResolution": "node16",
+        "emitDeclarationOnly": true,
+        "declaration": true
+    },
+    "include": ["src/**/*"]
+}

packages/website/pages/new-website-guide.md

@@ -38,8 +38,6 @@ And edit your package.json to set up a few basic tasks
 }
 ```
 
-To see your example site, run `npm run serve` and navigate to 
-
 You can now run the following commands
 
 ```shell

turbo.json

@@ -42,6 +42,7 @@
             "inputs": ["packages/**/src/**/*.ts"]
         },
         "serve": {
+            "dependsOn": ["build"],
             "cache": false
         },
         "test": {