Add cypress e2e testing boilerplate

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
     "react/prop-types": 0,
     "react/display-name": 0,
     "no-invalid-this": 0,
+    "spaced-comment": 0,
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
   },

cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:3000"
+}

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"
+}

cypress/integration/App.spec.ts

@@ -0,0 +1,10 @@
+/// <reference types="../support" />
+
+describe("My First Test", () => {
+  it("Opens the app", () => {
+    cy.visit("/")
+    cy.dataCy("app-container")
+  })
+})
+
+export {}

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/index.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable no-unused-vars */
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable<Subject> {
+    dataCy(value: string): Chainable<Element>
+  }
+}

cypress/support/index.ts

@@ -0,0 +1,7 @@
+function dataCy(identifier: string) {
+  return cy.get(`[data-cy=${identifier}]`)
+}
+
+Cypress.Commands.add("dataCy", dataCy)
+
+export {}

package.json

@@ -35,7 +35,8 @@
     "prepare": "husky install",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
-    "chromatic": "npx chromatic --exit-zero-on-changes"
+    "chromatic": "npx chromatic --exit-zero-on-changes",
+    "cypress:open": "cypress open"
   },
   "browserslist": {
     "production": [
@@ -65,6 +66,7 @@
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
     "chromatic": "^6.0.0-canary.1",
+    "cypress": "^8.5.0",
     "eslint": "^7.32.0",
     "eslint-config-keep": "github:keep-network/eslint-config-keep#0c27ade",
     "eslint-config-prettier": "^8.3.0",

src/App.tsx

@@ -12,7 +12,7 @@ import theme from "./theme"
 const App: FC = () => {
   return (
     <ChakraProvider theme={theme}>
-      <Container>
+      <Container data-cy="app-container">
         <Heading>Threshold Token Dashboard?</Heading>
         <VStack spacing={12} mt={6}>
           <VStack>

tsconfig.json

@@ -14,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["cypress"]
   },
   "include": ["src"]
 }