code-differently · anthonydmays · Jan 6, 2025 · Jan 6, 2025 · Jan 6, 2025 · Jan 6, 2025
diff --git a/.github/workflows/check_fullstack_demo_ts_pr.yaml b/.github/workflows/check_fullstack_demo_ts_pr.yaml
@@ -28,4 +28,12 @@ jobs:
         NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
       run: |
         npm ci
-        npm run test
+        npm run test
+
+    - name: Run Cypress component tests
+      uses: cypress-io/github-action@v6
+      env:
+        NEXT_PUBLIC_API_URL: http://localhost:8080
+      with:
+        working-directory: ./lib/javascript/fullstack_demo
+        component: true
diff --git a/lib/javascript/fullstack_demo/.gitignore b/lib/javascript/fullstack_demo/.gitignore
@@ -44,4 +44,8 @@ yarn-error.log*
 next-env.d.ts
 
 # database
-db.json
+db.json
+
+# Cypress
+/cypress/snapshots/actual
+/cypress/snapshots/diff
diff --git a/lib/javascript/fullstack_demo/cypress.config.ts b/lib/javascript/fullstack_demo/cypress.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from 'cypress';
+import { configureVisualRegression } from 'cypress-visual-regression';
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: 'next',
+      bundler: 'webpack',
+    },
+    env: {
+      visualRegressionType: 'regression',
+    },
+    screenshotsFolder: './cypress/snapshots/actual',
+    setupNodeEvents(on, config) {
+      configureVisualRegression(on);
+    },
+  },
+});
diff --git a/lib/javascript/fullstack_demo/cypress/fixtures/example.json b/lib/javascript/fullstack_demo/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/...emo/cypress/snapshots/base/src/components/todo-app/todo-app.cy.tsx/todo-app.png b/...emo/cypress/snapshots/base/src/components/todo-app/todo-app.cy.tsx/todo-app.png
diff --git a/lib/javascript/fullstack_demo/cypress/support/commands.ts b/lib/javascript/fullstack_demo/cypress/support/commands.ts
@@ -0,0 +1,2 @@
+import { addCompareSnapshotCommand } from 'cypress-visual-regression/dist/command';
+addCompareSnapshotCommand();
diff --git a/lib/javascript/fullstack_demo/cypress/support/component-index.html b/lib/javascript/fullstack_demo/cypress/support/component-index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+    <!-- Used by Next.js to inject CSS. -->
+    <div id="__next_css__DO_NOT_USE__"></div>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/lib/javascript/fullstack_demo/cypress/support/component.ts b/lib/javascript/fullstack_demo/cypress/support/component.ts
@@ -0,0 +1,37 @@
+// ***********************************************************
+// This example support/component.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 '../../src/app/globals.css';
+import './commands';
+
+import { mount } from 'cypress/react';
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount);
+
+// Example use:
+// cy.mount(<MyComponent />)
diff --git a/lib/javascript/fullstack_demo/cypress/tsconfig.json b/lib/javascript/fullstack_demo/cypress/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "ts-node": {
+    "transpileOnly": true,
+    "compilerOptions": {
+      "module": "ES2015"
+    }
+  }
+}
diff --git a/lib/javascript/fullstack_demo/next.config.js b/lib/javascript/fullstack_demo/next.config.js
@@ -0,0 +1,8 @@
+// @ts-check
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
diff --git a/lib/javascript/fullstack_demo/next.config.ts b/lib/javascript/fullstack_demo/next.config.ts
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import { addCompareSnapshotCommand } from 'cypress-visual-regression/dist/command';
		addCompareSnapshotCommand();