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 (