test: 🧪 Added Cypress E2E Testing

.eslintrc.cjs

@@ -24,11 +24,23 @@ module.exports = defineConfig({
   ],
   overrides: [
     {
-      files: ['*.test.{ts|tsx}'],
+      files: ['*.test.{ts|tsx}', '*.cy.ts'],
       rules: {
         'import/no-extraneous-dependencies': 'off',
       },
     },
+    {
+      files: ['*.cy.ts'],
+      rules: {
+        '@typescript-eslint/no-unused-expressions': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+        'func-names': 'off',
+        'no-console': 'off',
+        'promise/always-return': 'off',
+        'promise/catch-or-return': 'off',
+        'promise/no-nesting': 'off',
+      },
+    },
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: { ecmaVersion: 'latest', project: true, sourceType: 'module' },

.github/workflows/cypress.yml

@@ -0,0 +1,33 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Cypress
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+
+jobs:
+  E2E:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      # Install npm dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v5
+        with:
+          build: npm run build
+          start: npm start
+  Component:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Cypress run
+        uses: cypress-io/github-action@v5
+        with:
+          component: true

.gitignore

@@ -14,6 +14,9 @@ dist-ssr
 .husky
 reports
 coverage
+cypress/screenshots
+cypress/videos
+cypress/reports
 
 # Editor directories and files
 .idea

.vscode/settings.json

@@ -17,7 +17,7 @@
     "scss"
   ],
   "[javascript]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[scss]": {
     "editor.defaultFormatter": "vscode.css-language-features"

README.md

@@ -1,4 +1,6 @@
-# Vite React Typescript Template ![Build](https://github.com/R35007/vite-react-typescript/actions/workflows/build.yml/badge.svg) ![Lints](https://github.com/R35007/vite-react-typescript/actions/workflows/lints.yml/badge.svg) ![Tests](https://github.com/R35007/vite-react-typescript/actions/workflows/tests.yml/badge.svg)
+# Vite React Typescript Template
+
+![Build](https://github.com/R35007/vite-react-typescript/actions/workflows/build.yml/badge.svg) ![Lints](https://github.com/R35007/vite-react-typescript/actions/workflows/lints.yml/badge.svg) ![Tests](https://github.com/R35007/vite-react-typescript/actions/workflows/tests.yml/badge.svg) ![Cypress](https://github.com/R35007/vite-react-typescript/actions/workflows/cypress.yml/badge.svg)
 
 A simple vite react typescript starter template with husky, conventional commit, eslint, stylelint, prettier, sass, tailwindcss, material ui, tanstack routing, redux and saga, vitest and cypress
 
@@ -10,7 +12,7 @@ A simple vite react typescript starter template with husky, conventional commit,
 
 This template setup will include following features.
 
-| ◼️  | Feature                                | Branch Name                |
+| ✅  | Feature                                | Branch Name                |
 | --- | -------------------------------------- | :------------------------- |
 | ✅  | Generate Vite + React + Typescript App | feature/1/starter          |
 | ✅  | Husky                                  | feature/2/husky            |
@@ -25,7 +27,7 @@ This template setup will include following features.
 | ✅  | Redux + Redux Toolkit                  | feature/11/react-redux     |
 | ✅  | Redux Saga                             | feature/12/react-saga      |
 | ✅  | Vitest + RTL                           | feature/13/vitest          |
-| ◼️  | Cypress E2E Testing                    | feature/14/cypress         |
+| ✅  | Cypress E2E Testing                    | feature/14/cypress         |
 
 ## Installation
 
@@ -67,7 +69,11 @@ npm run lint:staged           # does npm run lint only for staged files
 
 ```bash
 npm run test             # run test
-npm run test:coverage    # run test with code covereage
+npm run test:coverage    # run test with code coverage
+npm run cy:open          # open cypress ui
+npm run cy:run           # run cypress test in headless mode
+npm run cy:run:e2e       # run cypress end 2 end test in headless mode
+npm run cy:run:component # run cypress component test in headless mode
 ```
 
 ### Report scripts

cypress.config.ts

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable import/no-extraneous-dependencies */
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  component: {
+    devServer: {
+      bundler: 'vite',
+      framework: 'react',
+    },
+  },
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    setupNodeEvents(_on, _config) {
+      // implement node event listeners here
+    },
+    viewportHeight: 1049,
+    viewportWidth: 1905,
+  },
+});

cypress/e2e/app.cy.ts

@@ -0,0 +1,52 @@
+describe('Vite React Typescript Template Test Suite', () => {
+  it('should navigate to about page', () => {
+    cy.visit('/');
+    cy.get('.MuiCardHeader-content > .MuiTypography-root').should('contain.text', 'Home Page');
+    cy.get('button>a:contains("About")').click();
+    cy.get('.MuiCardHeader-content > .MuiTypography-root').should('contain.text', 'About Page');
+  });
+
+  it('should perform counter operations', () => {
+    cy.visit('/');
+
+    cy.contains('Decrement By 1').click();
+    cy.get('.Counter [role="note"]').should('contain.text', 'count is -1');
+
+    cy.contains('Increment By 1').click();
+    cy.get('.Counter [role="note"]').should('contain.text', 'count is 0');
+
+    cy.get('input.MuiInput-input').clear().type('5');
+    cy.contains('Increment By Value').click();
+    cy.get('.Counter [role="note"]').should('contain.text', 'count is 5');
+
+    cy.get('input.MuiInput-input').clear().type('-5');
+    cy.contains('Increment By Value').click();
+    cy.get('.Counter [role="note"]').should('contain.text', 'count is 0');
+
+    cy.contains('Decrement Async By 1').click();
+    cy.get('.Counter [role="note"]').should('contain.text', 'count is -1');
+
+    cy.contains('Increment Async By 1').click();
+    cy.get('.Counter [role="note"]').should('contain.text', 'count is 0');
+
+    cy.get('input.MuiInput-input').clear().type('5');
+    cy.contains('Increment Async By Value').click();
+    cy.get('.Counter [role="note"]').should('contain.text', 'count is 5');
+
+    cy.get('input.MuiInput-input').clear().type('-5');
+    cy.contains('Increment Async By Value').click();
+    cy.get('.Counter [role="note"]').should('contain.text', 'count is 0');
+  });
+
+  it('should count value persist on routing', () => {
+    cy.visit('/');
+
+    cy.contains('Decrement By 1').click();
+    cy.get('.Counter [role="note"]').should('contain.text', 'count is -1');
+
+    cy.get('button>a:contains("About")').click();
+    cy.get('.MuiCardHeader-content > .MuiTypography-root').should('contain.text', 'About Page');
+
+    cy.get('.Counter [role="note"]').should('contain.text', 'count is -1');
+  });
+});

cypress/support/commands.ts

@@ -0,0 +1,40 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+import '@testing-library/cypress/add-commands';

cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!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>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/support/component.ts

@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable import/no-extraneous-dependencies */
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/react18';
+
+import 'tailwindcss/base.css';
+import 'tailwindcss/utilities.css';
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable<Subject> {
+      mount: typeof mount;
+      console(method: 'log' | 'error' | 'warn' | 'info'): Chainable<Subject>;
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount);
+
+// Example use:
+// cy.mount(<MyComponent />)

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')