From 266b3f8589e359b6ed1cae2b1a5f68e1491f62a7 Mon Sep 17 00:00:00 2001 From: Divlo Date: Fri, 13 Aug 2021 15:48:29 +0200 Subject: [PATCH] test: add cypress e2e (#159) --- .github/workflows/Divlo.yml | 32 +- .gitignore | 3 + __test__/pages/404.test.tsx | 10 - __test__/pages/500.test.tsx | 10 - components/ErrorPage.tsx | 7 +- components/Header/Language/LanguageFlag.tsx | 4 +- components/Header/Language/index.tsx | 11 +- components/Header/SwitchTheme.tsx | 14 +- components/__test__/Footer.test.tsx | 8 +- cypress.json | 8 + cypress/integration/common/Header.spec.ts | 47 + cypress/integration/pages/404.spec.ts | 7 + cypress/integration/pages/500.spec.ts | 7 + cypress/integration/pages/index.spec.ts | 19 + cypress/tsconfig.json | 9 + jest.config.json | 6 +- package-lock.json | 4049 +++++++++++++------ package.json | 14 +- tsconfig.json | 1 + 19 files changed, 2893 insertions(+), 1373 deletions(-) delete mode 100644 __test__/pages/404.test.tsx delete mode 100644 __test__/pages/500.test.tsx create mode 100644 cypress.json create mode 100644 cypress/integration/common/Header.spec.ts create mode 100644 cypress/integration/pages/404.spec.ts create mode 100644 cypress/integration/pages/500.spec.ts create mode 100644 cypress/integration/pages/index.spec.ts create mode 100644 cypress/tsconfig.json diff --git a/.github/workflows/Divlo.yml b/.github/workflows/Divlo.yml index 0ec4c49..5b554b6 100644 --- a/.github/workflows/Divlo.yml +++ b/.github/workflows/Divlo.yml @@ -46,7 +46,24 @@ jobs: - run: 'npm run lint:markdown' - run: 'npm run lint:typescript' - build: + test-unit: + runs-on: 'ubuntu-latest' + steps: + - uses: 'actions/checkout@v2.3.4' + + - name: 'Use Node.js' + uses: 'actions/setup-node@v2.4.0' + with: + node-version: '16.x' + cache: 'npm' + + - name: 'Install' + run: 'npm install' + + - name: 'Unit Test' + run: 'npm run test:unit' + + test-lighthouse: runs-on: 'ubuntu-latest' steps: - uses: 'actions/checkout@v2.3.4' @@ -64,11 +81,11 @@ jobs: run: 'npm run build' - name: 'Lighthouse' - run: 'npm run lighthouse' + run: 'npm run test:lighthouse' env: LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }} - test: + test-e2e: runs-on: 'ubuntu-latest' steps: - uses: 'actions/checkout@v2.3.4' @@ -82,12 +99,15 @@ jobs: - name: 'Install' run: 'npm install' - - name: 'Test' - run: 'npm run test' + - name: 'Build' + run: 'npm run build' + + - name: 'End To End (e2e) Test' + run: 'npm run test:e2e' release: if: github.ref == 'refs/heads/master' && github.event_name == 'push' - needs: [analyze, lint, build, test] + needs: [analyze, lint, test-unit, test-e2e, test-lighthouse] runs-on: 'ubuntu-latest' steps: - uses: 'actions/checkout@v2.3.4' diff --git a/.gitignore b/.gitignore index 45a236e..1c4974b 100644 --- a/.gitignore +++ b/.gitignore @@ -14,6 +14,9 @@ dist # testing coverage +cypress/screenshots +cypress/videos +cypress/downloads # PWA **/workbox-*.js diff --git a/__test__/pages/404.test.tsx b/__test__/pages/404.test.tsx deleted file mode 100644 index 72a2032..0000000 --- a/__test__/pages/404.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react' - -import Error404 from 'pages/404' - -describe('GET /404', () => { - it('should render', async () => { - const { getByText } = render() - expect(getByText('404')).toBeInTheDocument() - }) -}) diff --git a/__test__/pages/500.test.tsx b/__test__/pages/500.test.tsx deleted file mode 100644 index 4d9d3b1..0000000 --- a/__test__/pages/500.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react' - -import Error500 from 'pages/500' - -describe('GET /500', () => { - it('should render', async () => { - const { getByText } = render() - expect(getByText('500')).toBeInTheDocument() - }) -}) diff --git a/components/ErrorPage.tsx b/components/ErrorPage.tsx index c102647..55be9e1 100644 --- a/components/ErrorPage.tsx +++ b/components/ErrorPage.tsx @@ -14,7 +14,12 @@ export const ErrorPage: React.FC = (props) => { <>

{t('errors:error')}{' '} - {statusCode} + + {statusCode} +

{message}{' '} diff --git a/components/Header/Language/LanguageFlag.tsx b/components/Header/Language/LanguageFlag.tsx index dd3353c..7963b7d 100644 --- a/components/Header/Language/LanguageFlag.tsx +++ b/components/Header/Language/LanguageFlag.tsx @@ -15,7 +15,9 @@ export const LanguageFlag: React.FC = (props) => { src={`/images/languages/${language}.svg`} alt={language} /> -

{language.toUpperCase()}

+

+ {language.toUpperCase()} +

) } diff --git a/components/Header/Language/index.tsx b/components/Header/Language/index.tsx index 7c30882..52a73bf 100644 --- a/components/Header/Language/index.tsx +++ b/components/Header/Language/index.tsx @@ -33,12 +33,19 @@ export const Language: React.FC = () => { return (
-
+
{!hiddenMenu && ( -
    +
      {i18n.locales.map((language, index) => { if (language === currentLanguage) { return null diff --git a/components/Header/SwitchTheme.tsx b/components/Header/SwitchTheme.tsx index 012366f..b95d2a3 100644 --- a/components/Header/SwitchTheme.tsx +++ b/components/Header/SwitchTheme.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react' +import React, { useEffect, useState } from 'react' import { useTheme } from 'next-themes' export const SwitchTheme: React.FC = () => { @@ -13,23 +13,29 @@ export const SwitchTheme: React.FC = () => { return null } + const handleClick = (): void => { + setTheme(theme === 'dark' ? 'light' : 'dark') + } + return ( <>
      setTheme(theme === 'dark' ? 'light' : 'dark')} + data-cy='switch-theme-click' + onClick={handleClick} >
      -
      +
      🌜
      -
      +
      🌞
      ', () => { - it('should render', async () => { + it('should render with appropriate link tag version', async () => { const version = '1.0.0' const { getByText } = render(