chore: remove jest -> cypress for unit tests

.eslintignore

@@ -1,16 +0,0 @@
-cypress.config.ts
-node_modules
-.vscode
-.git
-build
-.next
-coverage
-node_modules
-tmp
-temp
-.DS_Store
-.lighthouseci
-.vercel
-public/workbox-*.js
-public/sw.js
-cypress

.eslintrc.json

@@ -6,8 +6,7 @@
   },
   "env": {
     "node": true,
-    "browser": true,
-    "jest": true
+    "browser": true
   },
   "rules": {
     "prettier/prettier": "error",

.gitignore

@@ -11,8 +11,7 @@ out
 # production
 build
 dist
-public/*.html
-jsonresume-theme-custom/theme/index.html
+public/curriculum-vitae
 # PWA
 public/workbox-*.js
 public/sw.js

.html-w3c-validatorrc.json

@@ -4,5 +4,5 @@
     "http://localhost:3000/blog",
     "http://localhost:3000/blog/hello-world"
   ],
-  "files": ["./public/curriculum-vitae.html"]
+  "files": ["./public/curriculum-vitae/index.html"]
 }

.lintstagedrc.json

@@ -1,10 +1,6 @@
 {
   "*": ["editorconfig-checker"],
-  "*.{js,jsx,ts,tsx}": [
-    "prettier --write",
-    "eslint --fix",
-    "jest --findRelatedTests"
-  ],
+  "*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"],
   "*.{css,scss,sass,json,jsonc,yml,yaml}": ["prettier --write"],
-  "*.{md,mdx}": ["prettier --write", "markdownlint --dot --fix"]
+  "*.{md,mdx}": ["prettier --write", "markdownlint-cli2 --fix"]
 }

components/Footer.tsx

@@ -27,6 +27,7 @@ export const Footer: React.FC<FooterProps> = (props) => {
       <p className='mt-1'>
         Version{' '}
         <a
+          data-cy='version-link'
           className='text-yellow hover:underline dark:text-yellow-dark'
           href={versionLink}
           target='_blank'

components/Header/__test__/Header.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Header } from '..'
-
-describe('<Header />', () => {
-  it('should render', () => {
-    const { getByText } = render(<Header />)
-    expect(getByText('Divlo')).toBeInTheDocument()
-  })
-})

components/Header/index.tsx

@@ -4,13 +4,7 @@ import Image from 'next/image'
 import { Language } from './Language'
 import { SwitchTheme } from './SwitchTheme'
 
-export interface HeaderProps {
-  showLanguage?: boolean
-}
-
-export const Header: React.FC<HeaderProps> = (props) => {
-  const { showLanguage = false } = props
-
+export const Header: React.FC = () => {
   return (
     <header className='sticky top-0 z-50 flex w-full justify-between border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black'>
       <Link href='/'>
@@ -40,7 +34,7 @@ export const Header: React.FC<HeaderProps> = (props) => {
             </a>
           </Link>
         </div>
-        {showLanguage && <Language />}
+        <Language />
         <SwitchTheme />
       </div>
     </header>

components/__test__/ErrorPage.test.tsx

@@ -1,15 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { ErrorPage } from '../ErrorPage'
-
-describe('<ErrorPage />', () => {
-  it('should render the message and statusCode', () => {
-    const messageContent = 'message content'
-    const statusCode = 404
-    const { getByText } = render(
-      <ErrorPage statusCode={statusCode} message={messageContent} />
-    )
-    expect(getByText(messageContent)).toBeInTheDocument()
-    expect(getByText(statusCode)).toBeInTheDocument()
-  })
-})

components/__test__/Footer.test.tsx

@@ -1,16 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Footer } from '../Footer'
-
-describe('<Footer />', () => {
-  it('should render with appropriate link tag version', () => {
-    const version = '1.0.0'
-    const { getByText } = render(<Footer version={version} />)
-    const versionLink = getByText(version) as HTMLAnchorElement
-    expect(getByText('Divlo')).toBeInTheDocument()
-    expect(versionLink).toBeInTheDocument()
-    expect(versionLink.href).toEqual(
-      `https://github.com/Divlo/Divlo/releases/tag/v${version}`
-    )
-  })
-})

cypress.config.ts

@@ -3,9 +3,18 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
   fixturesFolder: false,
   video: false,
+  downloadsFolder: undefined,
   screenshotOnRunFailure: false,
+
   e2e: {
     baseUrl: 'http://localhost:3000',
     supportFile: false
+  },
+
+  component: {
+    devServer: {
+      framework: 'next',
+      bundler: 'webpack'
+    }
   }
 })

cypress/component/Footer.cy.tsx

@@ -0,0 +1,18 @@
+import { Footer } from 'components/Footer'
+
+describe('<Footer />', () => {
+  it('should render with appropriate link tag version', () => {
+    const version = '1.0.0'
+    cy.mount(<Footer version={version} />)
+    cy.contains('Divlo')
+      .get('[data-cy=version-link]')
+      .should('have.text', version)
+      .should(
+        'have.attr',
+        'href',
+        `https://github.com/Divlo/Divlo/releases/tag/v${version}`
+      )
+  })
+})
+
+export {}

cypress/component/utils/getAge.cy.ts

@@ -0,0 +1,17 @@
+import { getAge } from '../../../utils/getAge'
+
+describe('utils/getAge', () => {
+  it('should calculate the right age of a person', () => {
+    cy.clock(new Date('2018-03-20')).then(() => {
+      const birthDate = new Date('1980-02-20')
+      expect(getAge(birthDate)).equal(38)
+    })
+  })
+
+  it('should calculate the right age of a person (taking into account the months)', () => {
+    cy.clock(new Date('2018-03-20')).then(() => {
+      const birthDate = new Date('1980-07-20')
+      expect(getAge(birthDate)).equal(37)
+    })
+  })
+})

cypress/e2e/common/Header.cy.ts

@@ -56,3 +56,5 @@ describe('Common > Header', () => {
     })
   })
 })
+
+export {}

cypress/e2e/pages/404.cy.ts

@@ -5,3 +5,5 @@ describe('Page /404', () => {
     cy.get('[data-cy=status-code]').contains('404')
   })
 })
+
+export {}

cypress/e2e/pages/500.cy.ts

@@ -5,3 +5,5 @@ describe('Page /500', () => {
     cy.get('[data-cy=status-code]').contains('500')
   })
 })
+
+export {}

cypress/e2e/pages/blog/[slug].cy.ts

@@ -11,3 +11,5 @@ describe('Page /blog/[slug]', () => {
     cy.get('[data-cy=status-code]').contains('404')
   })
 })
+
+export {}

cypress/e2e/pages/blog/index.cy.ts

@@ -20,3 +20,5 @@ describe('Page /blog', () => {
       .should('eq', '/blog/hello-world')
   })
 })
+
+export {}

cypress/e2e/pages/index.cy.ts

@@ -17,3 +17,5 @@ describe('Page /', () => {
     }
   })
 })
+
+export {}

cypress/fixtures/example.json

@@ -0,0 +1 @@
+{}

cypress/support/commands.ts

@@ -0,0 +1,3 @@
+/// <reference types="cypress" />
+
+export {}

cypress/support/component-index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Components App</title>
+    <!-- Used by Next.js to inject CSS. -->
+    <div id="__next_css__DO_NOT_USE__"></div>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/support/component.ts

@@ -0,0 +1,13 @@
+import { mount } from 'cypress/react'
+
+import './commands'
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)

cypress/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "noEmit": true,
-    "types": ["cypress"],
-    "isolatedModules": false
-  },
-  "include": ["../node_modules/cypress", "./**/*.ts"]
-}

jest.config.js

@@ -1,14 +0,0 @@
-const nextJest = require('next/jest')
-
-const createJestConfig = nextJest()
-const customJestConfig = {
-  moduleDirectories: ['node_modules', './'],
-  modulePathIgnorePatterns: ['<rootDir>/cypress'],
-  testEnvironment: 'jsdom',
-  setupFilesAfterEnv: [
-    '@testing-library/jest-dom/extend-expect',
-    '@testing-library/react'
-  ]
-}
-
-module.exports = createJestConfig(customJestConfig)

jsonresume-theme-custom/index.js

@@ -1,28 +0,0 @@
-import fs from 'node:fs'
-import { fileURLToPath } from 'node:url'
-
-import ejs from 'ejs'
-import date from 'date-and-time'
-import { Parcel } from '@parcel/core'
-
-export const render = async (resume) => {
-  const themeIndexURL = new URL('./theme/index.ejs', import.meta.url)
-  const themeBuildURL = new URL('./theme/index.html', import.meta.url)
-  const indexHTMLURL = new URL('./dist/index.html', import.meta.url)
-  const themeBuildPath = fileURLToPath(themeBuildURL)
-  const html = await ejs.renderFile(fileURLToPath(themeIndexURL), {
-    date,
-    locals: {
-      ...resume
-    }
-  })
-  await fs.promises.writeFile(themeBuildURL, html, { encoding: 'utf-8' })
-  const bundler = new Parcel({
-    entries: themeBuildPath,
-    source: themeBuildPath,
-    mode: 'production',
-    defaultConfig: '@parcel/config-default'
-  })
-  await bundler.run()
-  return await fs.promises.readFile(indexHTMLURL, { encoding: 'utf-8' })
-}

package.json

@@ -18,14 +18,14 @@
     "lint:commit": "commitlint",
     "lint:editorconfig": "editorconfig-checker",
     "lint:markdown": "markdownlint-cli2",
-    "lint:typescript": "eslint \"**/*.{js,jsx,ts,tsx}\"",
+    "lint:typescript": "eslint \"**/*.{js,jsx,ts,tsx}\" --ignore-path \".gitignore\"",
     "lint:prettier": "prettier \".\" --check --ignore-path \".gitignore\"",
     "lint:staged": "lint-staged",
-    "test:unit": "jest",
+    "test:unit": "cypress run --component",
     "test:html-w3c-validator": "start-server-and-test \"start\" \"http://localhost:3000\" \"html-w3c-validator\"",
     "test:lighthouse": "lhci autorun",
     "test:e2e": "start-server-and-test \"start\" \"http://localhost:3000\" \"cypress run\"",
-    "test:e2e:dev": "start-server-and-test \"dev\" \"http://localhost:3000\" \"cypress open\"",
+    "test:dev": "start-server-and-test \"dev\" \"http://localhost:3000\" \"cypress open\"",
     "resume:build": "node ./jsonresume-theme-custom/scripts/build.js",
     "release": "semantic-release",
     "deploy": "vercel",
@@ -65,9 +65,6 @@
     "@saithodev/semantic-release-backmerge": "2.1.2",
     "@semantic-release/git": "10.0.1",
     "@tailwindcss/typography": "0.5.4",
-    "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "13.3.0",
-    "@types/jest": "27.5.0",
     "@types/node": "18.6.2",
     "@types/react": "18.0.15",
     "@types/unist": "2.0.6",
@@ -85,7 +82,6 @@
     "eslint-plugin-unicorn": "43.0.2",
     "html-w3c-validator": "1.2.0",
     "husky": "8.0.1",
-    "jest": "27.5.1",
     "jsonresume-theme-custom": "file:./jsonresume-theme-custom",
     "lint-staged": "13.0.3",
     "markdownlint-cli2": "0.5.0",

pages/404.tsx

@@ -16,7 +16,7 @@ const Error404: NextPage<Error404Props> = (props) => {
     <>
       <Head title='404 | Divlo' />
 
-      <Header showLanguage />
+      <Header />
       <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
         <ErrorPage statusCode={404} message={t('errors:not-found')} />
       </main>

pages/500.tsx

@@ -16,7 +16,7 @@ const Error500: NextPage<Error500Props> = (props) => {
     <>
       <Head title='500 | Divlo' />
 
-      <Header showLanguage />
+      <Header />
       <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
         <ErrorPage statusCode={500} message={t('errors:server-error')} />
       </main>

pages/index.tsx

@@ -23,7 +23,7 @@ const Home: NextPage<HomeProps> = (props) => {
     <>
       <Head />
 
-      <Header showLanguage />
+      <Header />
       <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
         <Section isMain id='about'>
           <Profile />

tsconfig.json

@@ -10,7 +10,7 @@
     "removeComments": true,
     "noEmit": true,
     "strict": true,
-    "types": ["jest", "@testing-library/jest-dom", "@testing-library/react"],
+    "types": ["cypress"],
     "baseUrl": ".",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
@@ -20,13 +20,6 @@
     "isolatedModules": true,
     "incremental": true
   },
-  "exclude": [
-    "dist",
-    ".next",
-    "out",
-    "next.config.js",
-    "cypress.config.ts",
-    "cypress"
-  ],
+  "exclude": ["dist", ".next", "out", "next.config.js"],
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
 }

utils/__test__/getAge.test.ts

@@ -1,15 +0,0 @@
-import { getAge } from '../getAge'
-
-describe('utils/getAge', () => {
-  it('should calculate the right age of a person', () => {
-    const birthDate = new Date('1980-02-20')
-    jest.useFakeTimers().setSystemTime(new Date('2018-03-20'))
-    expect(getAge(birthDate)).toBe(38)
-  })
-
-  it('should calculate the right age of a person (taking into account the months)', () => {
-    const birthDate = new Date('1980-07-20')
-    jest.useFakeTimers().setSystemTime(new Date('2018-03-20'))
-    expect(getAge(birthDate)).toBe(37)
-  })
-})