test: add cypress e2e (#159)

components/ErrorPage.tsx

@@ -14,7 +14,12 @@ export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
     <>
       <h1 className='my-6 font-semibold text-4xl'>
         {t('errors:error')}{' '}
-        <span className='text-yellow dark:text-yellow-dark'>{statusCode}</span>
+        <span
+          className='text-yellow dark:text-yellow-dark'
+          data-cy='status-code'
+        >
+          {statusCode}
+        </span>
       </h1>
       <p className='text-center text-lg'>
         {message}{' '}

components/Header/Language/LanguageFlag.tsx

@@ -15,7 +15,9 @@ export const LanguageFlag: React.FC<LanguageFlagProps> = (props) => {
         src={`/images/languages/${language}.svg`}
         alt={language}
       />
-      <p className='mx-2 text-base'>{language.toUpperCase()}</p>
+      <p data-cy='language-flag-text' className='mx-2 text-base'>
+        {language.toUpperCase()}
+      </p>
     </>
   )
 }

components/Header/Language/index.tsx

@@ -33,12 +33,19 @@ export const Language: React.FC = () => {
 
   return (
     <div className='flex flex-col justify-center items-center cursor-pointer'>
-      <div className='flex items-center mr-5' onClick={handleHiddenMenu}>
+      <div
+        data-cy='language-click'
+        className='flex items-center mr-5'
+        onClick={handleHiddenMenu}
+      >
         <LanguageFlag language={currentLanguage} />
         <Arrow />
       </div>
       {!hiddenMenu && (
-        <ul className='flex flex-col justify-center items-center absolute p-0 top-14 z-10 w-24 mt-3 mr-4 rounded-lg list-none shadow-light dark:shadow-dark bg-white dark:bg-black'>
+        <ul
+          data-cy='languages-list'
+          className='flex flex-col justify-center items-center absolute p-0 top-14 z-10 w-24 mt-3 mr-4 rounded-lg list-none shadow-light dark:shadow-dark bg-white dark:bg-black'
+        >
           {i18n.locales.map((language, index) => {
             if (language === currentLanguage) {
               return null

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 (
     <>
       <div
         className='toggle-button'
-        onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+        data-cy='switch-theme-click'
+        onClick={handleClick}
       >
         <div className='toggle-theme-button'>
           <div className='toggle-track'>
-            <div className='toggle-track-check'>
+            <div data-cy='switch-theme-dark' className='toggle-track-check'>
               <span className='toggle_Dark'>🌜</span>
             </div>
-            <div className='toggle-track-x'>
+            <div data-cy='switch-theme-light' className='toggle-track-x'>
               <span className='toggle_Light'>🌞</span>
             </div>
           </div>
           <div className='toggle-thumb' />
           <input
+            data-cy='switch-theme-input'
             type='checkbox'
             aria-label='Dark mode toggle'
             className='toggle-screenreader-only'

components/__test__/Footer.test.tsx

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