test: add e2e smoke tests for headless-ssr utils

.github/actions/e2e-headless-ssr/action.yml

@@ -0,0 +1,26 @@
+name: 'Headless SSR E2E tests'
+description: 'Runs Cypress tests for Headless SSR'
+inputs:
+  github-token:
+    description: The GitHub token for accurately detecting a build vs a re-run build
+    required: false
+    default: ''
+runs:
+  using: composite
+  steps:
+    - uses: cypress-io/github-action@v5
+      name: Run Cypress
+      with:
+        browser: chrome
+        command-prefix: 'npx cypress-repeat run -n 3 --until-passes --rerun-failed-only --'
+        working-directory: ./packages/samples/headless-ssr
+        start: npm run prod
+        wait-on: 'http://localhost:3000'
+        install: false
+        record: false
+
+    - uses: actions/upload-artifact@v3
+      if: failure()
+      with:
+        name: cypress-screenshots
+        path: packages/samples/headless-ssr/cypress/screenshots

.github/workflows/prbot.yml

@@ -134,6 +134,14 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
       - uses: ./.github/actions/e2e-atomic-insight-panel
+  e2e-headless-ssr-test:
+    name: 'Run e2e tests on Headless SSR sample'
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - uses: ./.github/actions/e2e-headless-ssr
   e2e-quantic-setup:
     name: 'Setup e2e tests on Quantic'
     needs: build
@@ -152,7 +160,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        spec: [
+        spec:
+          [
             'cypress/e2e/default-1/**/*',
             'cypress/e2e/default-2/**/*',
             'cypress/e2e/facets-1/**/*',

packages/samples/headless-ssr/cypress.config.ts

@@ -0,0 +1,7 @@
+import {defineConfig} from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000/',
+  },
+});

packages/samples/headless-ssr/cypress/e2e/ssr.cy.ts

@@ -0,0 +1,56 @@
+import 'cypress-web-vitals';
+
+describe('headless ssr example', () => {
+  const numResults = 10;
+  const numResultsMsg = `Hydrated engine with ${numResults} results`;
+  const msgSelector = '#hydrated-msg';
+  const timestampSelector = '#timestamp';
+  it('renders page in SSR as expected', () => {
+    cy.intercept('/', (req) => {
+      req.continue((resp) => {
+        const dom = new DOMParser().parseFromString(resp.body, 'text/html');
+        expect(dom.querySelector(msgSelector)?.textContent).to.equal(
+          numResultsMsg
+        );
+        expect(dom.querySelectorAll('li').length).to.equal(numResults);
+      });
+    });
+    cy.visit('/');
+  });
+
+  it('renders page in CSR as expected', () => {
+    cy.visit('/');
+    cy.get(msgSelector).should('have.text', numResultsMsg);
+    cy.get('li').should('have.length', numResults);
+  });
+
+  it('renders result list in SSR and then in CSR', () => {
+    const interceptAlias = 'searchResults';
+    cy.intercept('/').as(interceptAlias);
+
+    cy.visit('/');
+    cy.wait(`@${interceptAlias}`).then((intercept) => {
+      const dom = new DOMParser().parseFromString(
+        intercept.response?.body,
+        'text/html'
+      );
+      const ssrTimestamp = Date.parse(
+        dom.querySelector(timestampSelector)!.innerHTML
+      );
+      expect(ssrTimestamp).to.not.be.undefined;
+      cy.get(timestampSelector).should((timeStampElement) => {
+        const csrTimestamp = Date.parse(timeStampElement.text());
+        expect(csrTimestamp).to.be.greaterThan(ssrTimestamp);
+      });
+    });
+  });
+
+  it('should pass the web-vitals audits', () => {
+    // TODO: Add input based vitals after interactive elements are added to test page (e.g. search box)
+    // Note: Thresholds might need to be adjusted as the page tested changes (e.g. more components are added etc)
+    const VITALS_THRESHOLD = {
+      thresholds: {fcp: 100, lcp: 100, cls: 0, ttfb: 20},
+    };
+    cy.vitals(VITALS_THRESHOLD);
+  });
+});

packages/samples/headless-ssr/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

packages/samples/headless-ssr/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.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 './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

packages/samples/headless-ssr/package.json

@@ -7,7 +7,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "prod": "npm run build && npm run start",
+    "e2e": "cypress run --browser chrome --e2e"
   },
   "dependencies": {
     "@coveo/headless": "2.24.0",
@@ -20,5 +22,9 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.1.6"
+  },
+  "devDependencies": {
+    "cypress": "10.8.0",
+    "cypress-web-vitals": "4.0.1"
   }
 }

packages/samples/headless-ssr/src/components/result-list.tsx

@@ -5,14 +5,22 @@ import {Result} from '@coveo/headless';
 export default function ResultList({results}: {results: Result[]}) {
   return (
     <div>
-      Hydrated engine with {results?.length} results
+      <span id="hydrated-msg">
+        Hydrated engine with {results?.length} results
+      </span>
       <ul>
         {results?.map((result) => (
           <li key={result.uniqueId}>
             <a href={result.clickUri}>{result.title}</a>
           </li>
         ))}
       </ul>
+      <div>
+        Rendered on{' '}
+        <span id="timestamp" suppressHydrationWarning>
+          {new Date().toISOString()}
+        </span>
+      </div>
     </div>
   );
 }

packages/samples/headless-ssr/tsconfig.json

@@ -24,5 +24,12 @@
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
+  "ts-node": {
+    // For Cypress https://github.com/cypress-io/cypress/issues/27448
+    "compilerOptions": {
+      "module": "es2015",
+      "moduleResolution": "node"
+    }
+  }
 }