diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 570e0b0..bbbbc10 100644 --- a/.github/workflows/deploy.yml +++ b/.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 diff --git a/.github/workflows/test:e2e.yml b/.github/workflows/test:e2e.yml new file mode 100644 index 0000000..9012356 --- /dev/null +++ b/.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 diff --git a/cypress.config.ts b/cypress.config.ts new file mode 100644 index 0000000..e8d7a16 --- /dev/null +++ b/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 + }, + }, +}) diff --git a/cypress/e2e/home.cy.ts b/cypress/e2e/home.cy.ts new file mode 100644 index 0000000..c6c4209 --- /dev/null +++ b/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') + }) +}) diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/cypress/fixtures/example.json @@ -0,0 +1,5 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io", + "body": "Fixtures are a great way to mock data for responses to routes" +} diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts new file mode 100644 index 0000000..698b01a --- /dev/null +++ b/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } \ No newline at end of file diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts new file mode 100644 index 0000000..f80f74f --- /dev/null +++ b/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') \ No newline at end of file diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json new file mode 100644 index 0000000..18edb19 --- /dev/null +++ b/cypress/tsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress", "node"] + }, + "include": ["**/*.ts"] +} diff --git a/cypress/videos/home.cy.ts.mp4 b/cypress/videos/home.cy.ts.mp4 new file mode 100644 index 0000000..266681c Binary files /dev/null and b/cypress/videos/home.cy.ts.mp4 differ diff --git a/package.json b/package.json index b124982..b729b1a 100644 --- a/package.json +++ b/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", diff --git a/src/components/Content.tsx b/src/components/Content.tsx index d06fc34..fdc953f 100644 --- a/src/components/Content.tsx +++ b/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 ( - Wanna be part of something cool landing soon? + {INFO.JOIN_BUILDERS_PROGRAM} 👉 @@ -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} @@ -56,7 +57,7 @@ const Content = ({ children }: Props) => { extra={[
{children}
]} />
- ); -}; + ) +} -export default Content; +export default Content diff --git a/src/components/FaucetForm.tsx b/src/components/FaucetForm.tsx index 91bbac9..8087b8b 100644 --- a/src/components/FaucetForm.tsx +++ b/src/components/FaucetForm.tsx @@ -16,7 +16,7 @@ const FaucetForm = () => { return (