tests: adds cypress tests for fullstack_demo (#662)

* tests: configures e2e

Signed-off-by: Anthony D. Mays <anthony@morganlatimer.com>

* chore: removes unused types ref

Signed-off-by: Anthony D. Mays <anthony@morganlatimer.com>

---------

Signed-off-by: Anthony D. Mays <anthony@morganlatimer.com>

Author: anthonydmays

lib/javascript/fullstack_demo/.gitignore

@@ -48,4 +48,5 @@ db.json
 
 # Cypress
 /cypress/snapshots/actual
-/cypress/snapshots/diff
+/cypress/snapshots/diff
+cypress.env.json

lib/javascript/fullstack_demo/README.md

@@ -29,6 +29,56 @@ By default, the app is configured to store data on the web server in a JSON file
 
 To deploy this app, sign up for an account on Vercel and create a project pointing to your fork of this repo. You'll need to configure the environment variables you setup in your local `.env` file using the Vercel UI.
 
+## Testing
+
+The application includes both unit tests (Vitest) and end-to-end tests (Cypress).
+
+### End-to-End Testing with Cypress and Clerk
+
+The app is configured with Cypress for end-to-end testing, including authentication testing with Clerk.
+
+1. Set up testing environment:
+   - Create a `cypress.env.json` file with your Clerk testing keys:
+   ```json
+   {
+     "CLERK_PUBLISHABLE_KEY": "your_clerk_publishable_key_for_testing",
+     "CLERK_SECRET_KEY": "your_clerk_secret_key_for_testing"
+   }
+   ```
+
+2. Run Cypress tests:
+   ```bash
+   # Open Cypress test runner in interactive mode
+   npm run cy:open:e2e
+   
+   # Run tests headlessly
+   npm run cy:run:e2e
+   ```
+
+3. Authentication approach:
+   - We use Clerk's Testing Tokens approach to bypass the UI authentication flow entirely.
+   - This avoids cross-origin issues that would require `cy.origin()`.
+   - The `setupClerkTestingToken()` function from `@clerk/testing/cypress` handles authentication behind the scenes.
+   - This allows tests to directly access protected routes without redirects to Clerk's authentication domain.
+
+4. Test example:
+   ```typescript
+   import { setupClerkTestingToken } from '@clerk/testing/cypress';
+   
+   describe('Authentication Test', () => {
+     beforeEach(() => {
+       // Set up authentication token - no UI interaction needed
+       setupClerkTestingToken(); 
+       
+       // Visit protected route directly
+       cy.visit('/');
+       
+       // Verify authentication successful
+       cy.get('header').find('button').should('exist');
+     });
+   });
+   ```
+
 ## Tools
 
 Here are a list of tools used to compile this demo. You can read the official documentation to learn how various aspects of the demo function.
@@ -39,3 +89,5 @@ Here are a list of tools used to compile this demo. You can read the official do
 - React (https://react.dev)
 - LowDB (https://github.com/typicode/lowdb)
 - Upstash Redis (https://upstash.com/docs/redis/overall/getstarted)
+- Cypress (https://cypress.io)
+- @clerk/testing (https://clerk.dev/docs/testing/integration-testing)

lib/javascript/fullstack_demo/cypress.config.ts

@@ -1,3 +1,4 @@
+import { clerkSetup } from '@clerk/testing/cypress';
 import { defineConfig } from 'cypress';
 import { configureVisualRegression } from 'cypress-visual-regression';
 
@@ -15,4 +16,15 @@ export default defineConfig({
       configureVisualRegression(on);
     },
   },
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    setupNodeEvents(on, config) {
+      configureVisualRegression(on);
+      return clerkSetup({ config });
+    },
+    env: {
+      visualRegressionType: 'regression',
+    },
+    screenshotsFolder: './cypress/snapshots/actual',
+  },
 });

lib/javascript/fullstack_demo/cypress/e2e/auth.cy.ts

@@ -0,0 +1,22 @@
+import { setupClerkTestingToken } from '@clerk/testing/cypress';
+
+describe('Authentication Flow', () => {
+  beforeEach(() => {
+    setupClerkTestingToken();
+
+    cy.visit('/'); // Visit the homepage
+
+    // Use our custom command to login with Clerk testing
+    cy.clerkSignIn({
+      strategy: 'email_code',
+      identifier: 'testbot123+clerk_test@gmail.com', // Use a test email that Clerk recognizes
+    });
+  });
+
+  it('should successfully login to the homepage', () => {
+    // Verify the Todo App components are visible (adjust selector to match your app)
+    cy.origin('http://localhost:3000', () => {
+      cy.contains('Todo App', { timeout: 5000 }).should('be.visible');
+    });
+  });
+});

lib/javascript/fullstack_demo/cypress/e2e/todo.cy.ts

@@ -0,0 +1,45 @@
+import { setupClerkTestingToken } from '@clerk/testing/cypress';
+
+describe('Todo App Functionality', () => {
+  beforeEach(() => {
+    setupClerkTestingToken();
+
+    cy.visit('/'); // Visit the homepage
+
+    // Use our custom command to login with Clerk testing
+    cy.clerkSignIn({
+      strategy: 'email_code',
+      identifier: 'testbot123+clerk_test@gmail.com', // Use a test email that Clerk recognizes
+    });
+  });
+
+  it('should allow adding a new todo item', () => {
+    cy.origin('http://localhost:3000', () => {
+      // Create a unique todo item
+      const todoText = `Test Todo ${Date.now()}`;
+
+      // Find the input field and type the text
+      cy.get('input[placeholder*="Add"]').type(todoText);
+
+      // Submit the form (either by clicking a button or pressing Enter)
+      cy.get('form').submit();
+      // Or use this if the form doesn't have a submit button: cy.get('input').type('{enter}');
+
+      // Verify the new todo appeared in the list
+      cy.contains(todoText).should('be.visible');
+    });
+  });
+
+  it('should allow marking a todo item as completed', () => {
+    cy.origin('http://localhost:3000', () => {
+      // First, ensure there is at least one todo item to mark as completed
+      cy.get('.todo').last().as('lastTodo');
+
+      // Click the checkbox or toggle button to mark it as completed
+      cy.get('@lastTodo').find('input[type="checkbox"]').check();
+
+      // Verify the todo item is marked as completed (adjust selector as needed)
+      cy.get('@lastTodo').find('input[type="checkbox"]').should('be.checked');
+    });
+  });
+});

lib/javascript/fullstack_demo/cypress/support/commands.ts

@@ -1,2 +1,4 @@
 import { addCompareSnapshotCommand } from 'cypress-visual-regression/dist/command';
+
+// Add visual regression testing command
 addCompareSnapshotCommand();

lib/javascript/fullstack_demo/cypress/support/e2e.ts

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+import { addClerkCommands } from '@clerk/testing/cypress';
+import './commands';
+
+// Cypress-specific imports
+import 'cypress-visual-regression';
+import { addCompareSnapshotCommand } from 'cypress-visual-regression/dist/command';
+
+// Add visual regression testing command
+addCompareSnapshotCommand();
+
+// Add Clerk commands for testing
+addClerkCommands({ Cypress, cy });
+
+// This ensures TypeScript understands Cypress commands
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      // Add any custom command types here
+    }
+  }
+}