chore: add happo example [skip ci]

examples/happo/.happo.js

@@ -0,0 +1,12 @@
+// .happo.js
+const { RemoteBrowserTarget } = require("happo.io");
+
+module.exports = {
+  apiKey: process.env.HAPPO_API,
+  apiSecret: process.env.HAPPO_SECRET,
+  targets: {
+    chrome: new RemoteBrowserTarget("chrome", {
+      viewport: "1024x768",
+    }),
+  },
+};

examples/happo/README.md

@@ -0,0 +1,23 @@
+# Happo + Currents + Cypress
+
+An example showcasing seting up Happo with Currents.
+
+```sh
+export CURRENTS_RECORD_KEY=zzz
+export HAPPO_API=yyy
+export HAPPO_SECRET=xxx
+npx happo-e2e -- npx cypress-cloud run --parallel --record --ci-build-id `date +%s`
+
+[HAPPO] Listening on port 5339
+Using config file: 'file:///Users/agoldis/cypress-cloud/examples/happo/currents.config.js'
+Discovered 1 spec files
+Tags: false; Group: false; Parallel: true; Batch Size: 2
+Connecting to cloud orchestration service...
+
+...
+
+🏁 Recorded Run: https://app.currents.dev/run/9e2a97f99ec1ef16
+[HAPPO] https://happo.io/a/1182/jobs/1338306
+```
+
+Note the use of [cypress-on-fix]() in [`cypress.config.ts`](examples/happo/cypress.config.ts) due to Cypress [bug](https://github.com/cypress-io/cypress/issues/5240)

examples/happo/currents.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  e2e: {
+    batchSize: 2, // how many specs to send in one batch
+  },
+  component: {
+    batchSize: 5, // how many specs to send in one batch
+  },
+  projectId: "Ij0RfK",
+};

examples/happo/cypress.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from "cypress";
+import { cloudPlugin } from "cypress-cloud/plugin";
+// @ts-ignore
+import patchCypressOn from "cypress-on-fix";
+// @ts-ignore
+import * as happoTask from "happo-cypress/task";
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: "https://todomvc.com/examples/backbone/dist",
+    videoUploadOnPasses: false,
+    supportFile: "cypress/support/e2e.ts",
+    specPattern: "cypress/*/**/*.spec.js",
+    async setupNodeEvents(cyOn, config) {
+      const on = patchCypressOn(cyOn);
+      happoTask.register(on, config);
+      const result = await cloudPlugin(on, config);
+      return result;
+    },
+  },
+
+  component: {
+    specPattern: ["pages/__tests__/*.spec.tsx"],
+    async setupNodeEvents(on, config) {
+      const result = await cloudPlugin(on, config);
+      return result;
+    },
+    devServer: {
+      framework: "next",
+      bundler: "webpack",
+    },
+  },
+});

examples/happo/cypress/e2e/happo.spec.js

@@ -0,0 +1,6 @@
+describe("Home page", function () {
+  it("loads properly", function () {
+    cy.visit("/");
+    cy.get(".header").happoScreenshot();
+  });
+});

examples/happo/cypress/support/commands.ts

@@ -0,0 +1,2 @@
+/// <reference types="cypress" />
+import "happo-cypress";

examples/happo/cypress/support/component.ts

@@ -0,0 +1,39 @@
+// ***********************************************************
+// 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 "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from "cypress/react18";
+
+// 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 />)

examples/happo/cypress/support/e2e.ts

@@ -0,0 +1,6 @@
+require("cypress-cloud/support");
+require("./commands");
+
+beforeEach(() => {
+  cy.visit("/");
+});

examples/happo/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "happo",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "cypress": "12.17.4",
+    "cypress-cloud": "*",
+    "cypress-on-fix": "^1.0.2",
+    "happo-cypress": "^4.2.0",
+    "happo-e2e": "^2.6.1",
+    "happo.io": "^10.1.2"
+  },
+  "devDependencies": {
+    "tsconfig": "*",
+    "typescript": "^4.7.4"
+  }
+}

examples/happo/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Next.js",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": false,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "ts-node": {
+    "compilerOptions": {
+      "module": "CommonJS"
+    }
+  },
+  "exclude": ["node_modules"]
+}