test: initialize cypress e2e testing library

.github/workflows/tests.yml

@@ -1,26 +0,0 @@
-name: tests
-on:
-  push:
-    branches:
-      - main
-      - renovate/*
-  pull_request:
-jobs:
-  tests:
-    name: Tests
-    runs-on: docker
-    container:
-      image: ghcr.io/di0ik/forgejo_runner_container:main@sha256:672aee9a5dfc35531db3a218ad9486eb5c5d7d9ac10bdcba13110470c10403ee
-    steps:
-      - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
-
-      - name: Enable corepack
-        run: corepack enable
-
-      - name: Cypress run
-        uses: cypress-io/github-action@v6
-        with:
-          build: yarn run build
-          start: yarn start
-          component: true

cypress.config.ts

@@ -1,6 +1,12 @@
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+
   component: {
     devServer: {
       framework: 'next',

cypress/support/commands.ts

@@ -35,28 +35,3 @@
 //     }
 //   }
 // }
-
-Cypress.Commands.add('getBySel', (selector, ...args) => {
-  return cy.get(`[data-cy=${selector}]`, ...args);
-});
-
-Cypress.Commands.add('getBySelLike', (selector, ...args) => {
-  return cy.get(`[data-cy*=${selector}]`, ...args);
-});
-
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      getBySel(
-        selector: string,
-        ...args: any[]
-      ): Chainable<JQuery<HTMLElement>>;
-      getBySelLike(
-        selector: string,
-        ...args: any[]
-      ): Chainable<JQuery<HTMLElement>>;
-    }
-  }
-}
-
-export {};

cypress/support/component.ts

@@ -13,8 +13,6 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-import '@/app/globals.css';
-
 // Import commands.js using ES2015 syntax:
 import './commands';
 

package.json

@@ -9,7 +9,8 @@
     "lint": "next lint",
     "format": "prettier --write .",
     "cypress:open": "cypress open",
-    "cypress:run": "cypress run"
+    "cypress:run": "cypress run",
+    "test": "start-server-and-test "
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.7.2",

src/components/icon-button.cy.tsx

@@ -1,24 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import React from 'react';
-import { IconButton } from './icon-button';
-import { faOpenid } from '@fortawesome/free-brands-svg-icons';
-
-describe('<IconButton />', () => {
-  it('renders', () => {
-    cy.mount(<IconButton icon={faOpenid}>Button</IconButton>);
-  });
-
-  it('is clickable', () => {
-    const onClick = cy.stub();
-    cy.mount(
-      <IconButton icon={faOpenid} onClick={onClick} data-cy='icon-button'>
-        Button
-      </IconButton>,
-    );
-    cy.getBySel('icon-button')
-      .click()
-      .then(() => {
-        expect(onClick).to.be.calledOnce;
-      });
-  });
-});

src/components/user/theme-picker.cy.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { ThemePicker } from '@/components/user/theme-picker';
-import { ThemeProvider } from '../theme-provider';
-
-describe('<ThemePicker />', () => {
-  it('renders', () => {
-    cy.mount(<ThemePicker />);
-  });
-
-  it('toggle open and close', () => {
-    cy.mount(<ThemePicker />);
-    cy.getBySel('theme-picker').click();
-    cy.getBySel('theme-picker-content').should('exist');
-    cy.get('html').click();
-    cy.getBySel('theme-picker-content').should('not.exist');
-  });
-
-  it('enable dark mode', () => {
-    cy.mount(
-      <ThemeProvider>
-        <ThemePicker />
-      </ThemeProvider>,
-    );
-
-    cy.getBySel('theme-picker').click();
-    cy.getBySel('dark-theme').click();
-    cy.get('html').should('have.attr', 'data-theme', 'dark');
-  });
-
-  it('enable light mode', () => {
-    cy.mount(
-      <ThemeProvider>
-        <ThemePicker />
-      </ThemeProvider>,
-    );
-
-    cy.getBySel('theme-picker').click();
-    cy.getBySel('light-theme').click();
-    cy.get('html').should('have.attr', 'data-theme', 'light');
-  });
-});

src/components/user/theme-picker.tsx

@@ -18,26 +18,20 @@ export function ThemePicker() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='outline' size='icon' data-cy='theme-picker'>
+        <Button variant='outline' size='icon'>
           <Sun className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
           <Moon className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
           <span className='sr-only'>Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align='end' data-cy='theme-picker-content'>
-        <DropdownMenuItem
-          onClick={() => setTheme('light')}
-          data-cy='light-theme'
-        >
+      <DropdownMenuContent align='end'>
+        <DropdownMenuItem onClick={() => setTheme('light')}>
           Light
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')} data-cy='dark-theme'>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>
           Dark
         </DropdownMenuItem>
-        <DropdownMenuItem
-          onClick={() => setTheme('system')}
-          data-cy='system-theme'
-        >
+        <DropdownMenuItem onClick={() => setTheme('system')}>
           System
         </DropdownMenuItem>
       </DropdownMenuContent>

tsconfig.json

@@ -20,8 +20,7 @@
     ],
     "paths": {
       "@/*": ["./src/*"]
-    },
-    "types": ["node", "cypress"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]