test: add e2e tests (#2)

.github/workflows/deploy.yml

@@ -1,12 +1,11 @@
 name: Deploy to Github Pages
 on:
   push:
-  pull_request:
     branches:
       - main
 
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: true
 
 jobs:
@@ -19,7 +18,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: "npm"
+          cache: 'npm'
       - name: Install dependencies
         run: npm ci
       - name: Build
@@ -29,7 +28,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          path: "dist"
+          path: 'dist'
 
   deploy:
     runs-on: ubuntu-latest

.github/workflows/test:e2e.yml

@@ -0,0 +1,36 @@
+name: Run e2e tests
+on:
+  pull_request:
+    branches:
+      - main
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup NodeJS
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Run E2E tests
+        run: npm run test:e2e
+
+      - name: Archive e2e artifacts
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: e2e-artifacts
+          path: |
+            cypress/videos
+            cypress/screenshots
+        continue-on-error: true

cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:4173',
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+})

cypress/e2e/home.cy.ts

@@ -0,0 +1,30 @@
+import { INFO } from '../../src/constants/wordings'
+
+describe('Home', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('should have Builders Program banner', () => {
+    cy.get('.ant-alert-banner')
+      .as('banner')
+      .find('span')
+      .contains(INFO.JOIN_BUILDERS_PROGRAM)
+      .should('exist')
+      .and('be.visible')
+    cy.get('@banner')
+      .find('a')
+      .as('banner-link')
+      .should('have.text', INFO.BUILDERS_PROGRAM)
+      .and(
+        'have.attr',
+        'href',
+        'https://builders.toposware.com/topos-builders-program-v1-0'
+      )
+      .and('not.be.disabled')
+  })
+
+  it('should have disabled address input', () => {
+    cy.get('#faucet_address').should('be.visible').and('be.disabled')
+  })
+})

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

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')

cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"]
+  },
+  "include": ["**/*.ts"]
+}

package.json

@@ -8,7 +8,7 @@
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "start": "tsc && vite build --mode development --watch --sourcemap true",
-    "test:e2e": "env-cmd --silent cypress run --browser chrome --headed"
+    "test:e2e": "start-server-and-test 'npm run preview' http-get://localhost:4173 'cypress run'"
   },
   "dependencies": {
     "@ant-design/icons": "^5.0.1",

src/components/Content.tsx

@@ -1,35 +1,36 @@
-import { Alert, Button, Result, Space, Typography } from "antd";
+import { Alert, Button, Result, Space, Typography } from 'antd'
 
-import logo from "/logo.svg";
-import { useCallback, useContext, useMemo } from "react";
-import useTracingCreateSpan from "../hooks/useTracingCreateSpan";
-import { TracingContext } from "../contexts/tracing";
+import logo from '/logo.svg'
+import { useCallback, useContext, useMemo } from 'react'
+import useTracingCreateSpan from '../hooks/useTracingCreateSpan'
+import { TracingContext } from '../contexts/tracing'
+import { INFO } from '../constants/wordings'
 
-const { Text } = Typography;
+const { Text } = Typography
 
 interface Props {
-  children: React.ReactNode;
+  children: React.ReactNode
 }
 
 const Content = ({ children }: Props) => {
-  const { rootSpan } = useContext(TracingContext);
+  const { rootSpan } = useContext(TracingContext)
   const span = useMemo(
-    () => useTracingCreateSpan("show-content", rootSpan),
+    () => useTracingCreateSpan('show-content', rootSpan),
     [rootSpan]
-  );
+  )
 
   const handleClick = useCallback(() => {
-    span.addEvent("click on builders program link");
-    span.end();
-    rootSpan?.end();
-  }, [span]);
+    span.addEvent('click on builders program link')
+    span.end()
+    rootSpan?.end()
+  }, [span])
 
   return (
     <Space direction="vertical">
       <Alert
         message={
           <Space direction="vertical" size={0}>
-            <Text>Wanna be part of something cool landing soon?</Text>
+            <Text>{INFO.JOIN_BUILDERS_PROGRAM}</Text>
             <Text>
               <Space>
                 👉
@@ -38,9 +39,9 @@ const Content = ({ children }: Props) => {
                   target="_blank"
                   type="link"
                   onClick={handleClick}
-                  style={{ paddingLeft: "0.2rem", paddingRight: "0.2rem" }}
+                  style={{ paddingLeft: '0.2rem', paddingRight: '0.2rem' }}
                 >
-                  Builders Program
+                  {INFO.BUILDERS_PROGRAM}
                 </Button>
               </Space>
             </Text>
@@ -56,7 +57,7 @@ const Content = ({ children }: Props) => {
         extra={[<div key="form">{children}</div>]}
       />
     </Space>
-  );
-};
+  )
+}
 
-export default Content;
+export default Content

src/components/FaucetForm.tsx

@@ -16,7 +16,7 @@ const FaucetForm = () => {
 
   return (
     <Form
-      name="basic"
+      name="faucet"
       style={{ margin: '0 auto', maxWidth: 600 }}
       initialValues={{ remember: true }}
       onFinish={onFinish}

src/constants/wordings.ts

@@ -0,0 +1,4 @@
+export enum INFO {
+  BUILDERS_PROGRAM = 'Builders Program',
+  JOIN_BUILDERS_PROGRAM = 'Wanna be part of something cool landing soon?',
+}

tsconfig.json

@@ -21,5 +21,11 @@
     "noFallthroughCasesInSwitch": true
   },
   "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [{ "path": "./tsconfig.node.json" }],
+  "ts-node": {
+    "compilerOptions": {
+      "module": "es2015",
+      "moduleResolution": "node"
+    }
+  }
 }