feat: Add Cypress Component Tests 🧪 pull request #24 from 1-Harshit/c…

…ypress feat: Add Cypress Component Tests 🧪
1-Harshit · Oct 10, 2023 · f6d41a3 · f6d41a3
2 parents 6077f90 + c9d9401
commit f6d41a3
Show file tree

Hide file tree

Showing 28 changed files with 1,083 additions and 40 deletions.
diff --git a/.github/workflows/cypress.yaml b/.github/workflows/cypress.yaml
@@ -0,0 +1,23 @@
+name: Cypress Tests
+
+on: push
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      # Install NPM dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          build: yarn build
+          start: yarn start
+          record: true
+          parallel: true
+          component: true
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/deployment.yaml b/.github/workflows/deployment.yaml
@@ -21,8 +21,6 @@ jobs:
 
       - name: Build 
         run: npm run build
-        env:
-          CI: false
 
       - name: Deploy to gh-pages
         uses: peaceiris/actions-gh-pages@v3

diff --git a/.github/workflows/pr_lint.yml b/.github/workflows/pr_lint.yml
@@ -21,6 +21,3 @@ jobs:
 
       - name: Build and check lint
         run: npm run build
-
-      # - name: Test
-      #   run: npm run test
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  projectId: 'ug3igq',
+  component: {
+    devServer: {
+      framework: "create-react-app",
+      bundler: "webpack",
+    },
+  },
+});
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -0,0 +1,37 @@
+/// <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>
+//     }
+//   }
+// }
diff --git a/cypress/support/component-index.html b/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>
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
@@ -0,0 +1,39 @@
+// ***********************************************************
+// 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/react'
+
+// 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 {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
 		"@types/react": "^18.0.15",
 		"@types/react-dom": "^18.0.6",
 		"apexcharts": "^3.35.2",
+		"cypress": "^13.3.0",
 		"framer-motion": "^4.1.17",
 		"react": "^17.0.2",
 		"react-apexcharts": "^1.4.0",

diff --git a/src/components/button/AlignCenterButton.tsx b/src/components/button/AlignCenterButton.tsx
@@ -26,7 +26,7 @@ export default function Default() {
 			color={textColor}
 			bg={boxBg}
 		>
-			<Button color={textColor} onClick={handleAlignCenterClick}>
+			<Button color={textColor} onClick={handleAlignCenterClick} id="align-center-button">
 				<IconBox
 					icon={
 						<Icon

diff --git a/src/components/button/AlignJustifyButton.tsx b/src/components/button/AlignJustifyButton.tsx
@@ -26,7 +26,7 @@ export default function Default() {
 			color={textColor}
 			bg={boxBg}
 		>
-			<Button color={textColor} onClick={handleAlignJustifyClick}>
+			<Button color={textColor} onClick={handleAlignJustifyClick} id="align-justify-button">
 				<IconBox
 					icon={
 						<Icon

diff --git a/src/components/button/AlignLeftButton.tsx b/src/components/button/AlignLeftButton.tsx
@@ -26,7 +26,7 @@ export default function Default() {
 			color={textColor}
 			bg={boxBg}
 		>
-			<Button color={textColor} onClick={handleAlignLeftClick}>
+			<Button color={textColor} onClick={handleAlignLeftClick} id="align-left-button">
 				<IconBox
 					icon={
 						<Icon w="18px" h="18px" as={MdFormatAlignLeft} color={textColor} />

diff --git a/src/components/button/AlignRightButton.tsx b/src/components/button/AlignRightButton.tsx
@@ -26,7 +26,7 @@ export default function Default() {
 			color={textColor}
 			bg={boxBg}
 		>
-			<Button color={textColor} onClick={handleAlignRightClick}>
+			<Button color={textColor} onClick={handleAlignRightClick} id="align-right-button">
 				<IconBox
 					icon={
 						<Icon w="18px" h="18px" as={MdFormatAlignRight} color={textColor} />

diff --git a/src/components/button/BoldButton.tsx b/src/components/button/BoldButton.tsx
@@ -17,7 +17,12 @@ export default function Default() {
 			color={textColor}
 			bg={boxBg}
 		>
-			<Button fontWeight="bold" color={textColor} onClick={handleBoldClick}>
+			<Button
+				fontWeight="bold"
+				color={textColor}
+				onClick={handleBoldClick}
+				id="bold-button"
+			>
 				B
 			</Button>
 		</Tooltip>

diff --git a/src/components/button/ItalicButton.tsx b/src/components/button/ItalicButton.tsx
@@ -17,7 +17,12 @@ export default function Default() {
 			color={textColor}
 			bg={boxBg}
 		>
-			<Button fontStyle="italic" color={textColor} onClick={handleBoldClick}>
+			<Button
+				fontStyle="italic"
+				color={textColor}
+				onClick={handleBoldClick}
+				id="italic-button"
+			>
 				I
 			</Button>
 		</Tooltip>

diff --git a/src/components/button/OrderedList.tsx b/src/components/button/OrderedList.tsx
@@ -27,7 +27,7 @@ export default function Default() {
 			color={textColor}
 			bg={boxBg}
 		>
-			<Button color={textColor} onClick={OrderedList}>
+			<Button color={textColor} onClick={OrderedList} id="ordered-list-button">
 			<IconBox
 					icon={
 						<Icon

diff --git a/src/components/button/UnderlineButton.tsx b/src/components/button/UnderlineButton.tsx
@@ -18,13 +18,13 @@ export default function Default() {
 			bg={boxBg}
 		>
 			<Button
-				// underline
-                textDecoration="underline"
+				textDecoration="underline"
 				color={textColor}
 				onClick={handleUnderlineClick}
+				id="underline-button"
 			>
 				U
 			</Button>
 		</Tooltip>
 	);
-}
+}
diff --git a/src/components/button/UnorderedList.tsx b/src/components/button/UnorderedList.tsx
@@ -26,7 +26,7 @@ export default function Default() {
 			color={textColor}
 			bg={boxBg}
 		>
-			<Button color={textColor} onClick={UnorderedList}>
+			<Button color={textColor} onClick={UnorderedList} id="unordered-list-button">
 			<IconBox
 					icon={
 						<Icon

diff --git a/src/components/card/MiniStatistics.tsx b/src/components/card/MiniStatistics.tsx
@@ -29,6 +29,7 @@ export default function Default(props: {
 						{name}
 					</StatLabel>
 					<StatNumber
+						id="word-count"
 						color={textColor}
 						fontSize={{
 							base: '2xl'

diff --git a/src/types/cypress.d.ts b/src/types/cypress.d.ts
@@ -0,0 +1,11 @@
+import { mount } from "cypress/react";
+
+declare global {
+	namespace Cypress {
+		interface Chainable {
+			mount: typeof mount;
+		}
+	}
+}
+
+Cypress.Commands.add("mount", mount);
diff --git a/src/views/editor/default/components/EditorArea.tsx b/src/views/editor/default/components/EditorArea.tsx
@@ -44,6 +44,7 @@ export default function EditorArea(props: Props) {
 				id="editor-main"
 				onInput={handleContentChange}
 				onBlur={handleContentChange}
+				onFocus={handleContentChange}
 			>
 				{editorDefaultData}
 			</Box>

diff --git a/src/views/editor/default/index.tsx b/src/views/editor/default/index.tsx
@@ -38,7 +38,7 @@ import { MdFileCopy } from "react-icons/md";
 import EditorArea from "views/editor/default/components/EditorArea";
 import { useState } from "react";
 
-export default function UserReports() {
+export default function EditorHome() {
 	// Chakra Color Mode
 	const brandColor = useColorModeValue("brand.500", "white");
 	const boxBg = useColorModeValue("secondaryGray.300", "whiteAlpha.100");

diff --git a/src/views/editor/default/indexEditorHome-alignment.cy.tsx b/src/views/editor/default/indexEditorHome-alignment.cy.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import EditorHome from "./index";
+import { wordCount } from "./variables/editorDefaultData";
+import { ChakraProvider } from "@chakra-ui/react";
+import theme from "../../../theme/theme";
+
+beforeEach(() => {
+	cy.viewport(1920, 1080);
+	// see: https://on.cypress.io/mounting-react
+	cy.mount(
+		<ChakraProvider theme={theme}>
+			<EditorHome />
+		</ChakraProvider>,
+	);
+
+	// focus on editor-area
+	cy.get("#editor-main").click();
+
+	// count number words in defaultData whihc is jsx element rendering
+	cy.get("#word-count").should("have.text", wordCount);
+
+	// clear editor
+	// click on cy.get('#menu-button-24')
+	cy.get("#menu-button-24").click();
+	cy.get("#menu-list-24-menuitem-22 > .css-70qvj9 > .chakra-text").click();
+
+	// editor should be empty
+	cy.get("#editor-main").should("have.text", "");
+
+	// add text to editor
+	cy.get("#editor-main").type("Ed Eater Testing");
+
+	// count number words in editor
+	cy.get("#word-count").should("have.text", "3");
+
+	// select text
+	cy.get("#editor-main").type("{selectall}");
+});
+
+describe("<EditorHome Align-Left />", () => {
+	it("renders", () => {
+		// text align - left
+		cy.get("#align-left-button").click();
+		// the html formatting must be empty as text-align: left is default
+		cy.get("#editor-main").should("contain.html", 'Ed Eater Testing')
+	});
+});
+
+describe("<EditorHome Align-Right />", () => {
+	it("renders", () => {
+		// text align - right
+		cy.get("#align-right-button").click();
+		// the html formatting must be text-align:right as set by the button
+		cy.get("#editor-main").should("contain.html", '<div style="text-align: right;">');
+	});
+});
+
+describe("<EditorHome Align-Left-After-Right />", () => {
+	it("renders", () => {
+        // text align -right
+        cy.get("#align-right-button").click();
+        // select all text
+        cy.get("#editor-main").type("{selectall}");
+		// text align - left
+		cy.get("#align-left-button").click();
+		// the html formatting must be empty as text-align:right is removed when 
+		cy.get("#editor-main").should("contain.html", 'Ed Eater Testing')
+	});
+});
+
+describe("<EditorHome Align-Center />", () => {
+	it("renders", () => {
+		// text align - right
+		cy.get("#align-center-button").click();
+		// the html formatting must be text-align:center as set by the button
+		cy.get("#editor-main").should("contain.html", '<div style="text-align: center;">');
+	});
+});
+
+describe("<EditorHome Align-Justify />", () => {
+	it("renders", () => {
+		// text align - right
+		cy.get("#align-justify-button").click();
+		// the html formatting must be text-align:justify as set by the button
+		cy.get("#editor-main").should("contain.html", '<div style="text-align: justify;">');
+	});
+});