chore: add testing workflow

.github/workflows/tests.yml

@@ -0,0 +1,26 @@
+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,12 +1,6 @@
 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,3 +35,28 @@
 //     }
 //   }
 // }
+
+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,6 +13,8 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+import '@/app/globals.css';
+
 // Import commands.js using ES2015 syntax:
 import './commands';
 

package.json

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

src/components/icon-button.cy.tsx

@@ -0,0 +1,24 @@
+/* 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

@@ -0,0 +1,41 @@
+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,20 +18,26 @@ export function ThemePicker() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='outline' size='icon'>
+        <Button variant='outline' size='icon' data-cy='theme-picker'>
           <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'>
-        <DropdownMenuItem onClick={() => setTheme('light')}>
+      <DropdownMenuContent align='end' data-cy='theme-picker-content'>
+        <DropdownMenuItem
+          onClick={() => setTheme('light')}
+          data-cy='light-theme'
+        >
           Light
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>
+        <DropdownMenuItem onClick={() => setTheme('dark')} data-cy='dark-theme'>
           Dark
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')}>
+        <DropdownMenuItem
+          onClick={() => setTheme('system')}
+          data-cy='system-theme'
+        >
           System
         </DropdownMenuItem>
       </DropdownMenuContent>

tsconfig.json

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