feat: added cypress tests and ci (#14)

* test: cypress setup and dropdown test

* test: cypress testing branch

* fix: update cypress version

remove error:
```
TSError: ⨯ Unable to compile TypeScript:
error TS5095: Option 'bundler' can only be used when 'module' is set to 'es2015' or later.
```

* fix: rebuild pnpm.lock

* chore: updated dependencies

* ci: updated ci to include cypress tests

* ci: fix for prettier step in lint job

---------

Co-authored-by: Pratik Borole <borolepratik@gmail.com>

.eslintrc.js

@@ -4,7 +4,12 @@ module.exports = {
     es2021: true,
     node: true,
   },
-  plugins: ['@typescript-eslint', 'simple-import-sort', 'unused-imports'],
+  plugins: [
+    '@typescript-eslint',
+    'simple-import-sort',
+    'unused-imports',
+    'cypress',
+  ],
   extends: [
     'eslint:recommended',
     'next',
@@ -77,6 +82,15 @@ module.exports = {
       },
     ],
     //#endregion  //*======== Import Sort ===========
+
+    // #region   //*========= Cypress files =========
+    '@typescript-eslint/no-namespace': [
+      'error',
+      {
+        allowDeclarations: true,
+      },
+    ],
+    // #endregion   //*========= Cypress files =========
   },
   globals: {
     React: true,

.github/workflows/codeql.yml

@@ -45,7 +45,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL

.github/workflows/lint.yml

@@ -1,4 +1,4 @@
-name: Code Check
+name: Code Lint and Test
 
 on:
   push:
@@ -8,19 +8,19 @@ on:
 
 jobs:
   lint:
-    name: ⬣ ESLint, ʦ TypeScript, 💅 Prettier
+    name: ⬣ ESLint, ʦ TypeScript, 💅 Prettier, ✅ Cypress
     runs-on: ubuntu-latest
     steps:
       - name: ⬇️ Checkout repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11
 
       - name: ⎔ Setup node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@b39b52d1213e96004bfcb1c61a8a6fa8ab84f3e8
         with:
           node-version: 21
 
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
+      - name: Install pnpm
+        uses: pnpm/action-setup@d882d12c64e032187b2edb46d3a0d003b7a43598
         with:
           version: 8
           run_install: true
@@ -33,3 +33,12 @@ jobs:
 
       - name: 💅 Prettier check
         run: pnpm format:check
+
+      - name: ✅ Cypress tests
+        uses: cypress-io/github-action@1b70233146622b69e789ccdd4f9452adc638d25a
+        with:
+          browser: chrome
+          build: pnpm build
+          component: true
+          start: pnpm start
+          wait-on: 'http://localhost:3000'

.vscode/settings.json

@@ -6,7 +6,6 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.tabSize": 2,
-
   "python.terminal.activateEnvironment": false,
   // Tailwind CSS Autocomplete, add more if used in projects
   "tailwindCSS.classAttributes": [

README.md

@@ -82,10 +82,21 @@ This project is using [conventional commits](https://www.conventionalcommits.org
 
 // TODO [cypress](https://www.cypress.io/)
 
+> [!WARNING]
+> Cypress does not officially support Next v14. If you enncounter any errors or issues please report them [here](https://github.com/Slick-Telemetry/frontend/issues)
+
+- **Background**
+
+  - Cypress uses chai based assertions
+
+- **Running Cypress**
+
+  - `pnpm run cypress:open`
+
 ## Deployment
 
 // TODO [vercel](https://vercel.com/)
 
 ## Resources
 
-Key tools in use: `daisy-ui`, `tailwindcss`, `react`, `nextjs`, `pnpm`
+Key tools in use: `daisy-ui`, `tailwindcss`, `react`, `nextjs`, `pnpm`, `cypress`

cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: 'next',
+      bundler: 'webpack',
+    },
+  },
+});

cypress/component/Dropdown.cy.tsx

@@ -0,0 +1,38 @@
+// /* eslint-disable simple-import-sort/imports */
+
+import '@/app/globals.css';
+
+import { Dropdown } from '@/app/ui/Dropdown';
+
+describe('Dropdown.cy.tsx', () => {
+  const initialVal = 'Initial Val';
+  const options = ['Option 1', 'Options2'];
+
+  it('dropdown selects first option', () => {
+    const action = cy.spy().as('onDropdownChange');
+    cy.mount(<Dropdown value={initialVal} items={options} action={action} />);
+    cy.get('[data-cy="dropdown"]').click();
+    cy.get('[data-cy="dropdown-item"]').first().click();
+    cy.get('@onDropdownChange').should('have.been.calledWith', options[0]);
+  });
+
+  it('dropdown selects second option', () => {
+    const action = cy.spy().as('onDropdownChange');
+    cy.mount(<Dropdown value={initialVal} items={options} action={action} />);
+    cy.get('[data-cy="dropdown"]').click();
+    cy.get('[data-cy="dropdown-item"]').first().next().click();
+    cy.get('@onDropdownChange').should('have.been.calledWith', options[1]);
+  });
+
+  it('dropdown with no items and close dropdown', () => {
+    const action = cy.spy().as('onDropdownChange');
+    cy.mount(<Dropdown value={initialVal} items={[]} action={action} />);
+    cy.get('[data-cy="dropdown"]').click();
+    cy.get('[data-cy="dropdown-item"]').should('not.exist');
+    cy.get('@onDropdownChange').should('not.have.been.calledWith', options[0]);
+    cy.get('@onDropdownChange').should('not.have.been.calledWith', options[1]);
+
+    // Outside click
+    cy.get('body').click();
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}