Refactor Cypress tests (#32 from 1-Harshit/test)

Refactor Cypress tests
1-Harshit · Nov 17, 2023 · 0417478 · 0417478
2 parents 9bb12d4 + c0c4530
commit 0417478
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 40 deletions.
diff --git a/.github/workflows/cypress.yaml b/.github/workflows/cypress.yaml
@@ -18,6 +18,7 @@ jobs:
           record: true
           parallel: true
           component: true
+          browser: chrome
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/...s/editor/indexEditorHome-alignment.cy.tsx → src/tests/EditorHome-alignment.cy.tsx b/...s/editor/indexEditorHome-alignment.cy.tsx → src/tests/EditorHome-alignment.cy.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import EditorHome from "./index";
-import { wordCount } from "../../variables/editorPlaceholder";
+import EditorHome from "../views/editor/index";
+import { wordCount } from "../variables/editorPlaceholder";
 import { ChakraProvider } from "@chakra-ui/react";
-import theme from "../../theme/theme";
+import theme from "../theme/theme";
 
 beforeEach(() => {
 	cy.viewport(1920, 1080);
@@ -13,14 +13,10 @@ beforeEach(() => {
 		</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();
 
@@ -30,9 +26,6 @@ beforeEach(() => {
 	// 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}");
 });
@@ -42,7 +35,7 @@ describe("<EditorHome Align-Left />", () => {
 		// 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')
+		cy.get("#editor-main").should("contain.html", "Ed Eater Testing");
 	});
 });
 
@@ -51,20 +44,23 @@ describe("<EditorHome Align-Right />", () => {
 		// 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;">');
+		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 -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')
+		// the html formatting must be empty as text-align:right is removed when
+		cy.get("#editor-main").should("contain.html", "Ed Eater Testing");
 	});
 });
 
@@ -73,7 +69,10 @@ describe("<EditorHome Align-Center />", () => {
 		// 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;">');
+		cy.get("#editor-main").should(
+			"contain.html",
+			'<div style="text-align: center;">',
+		);
 	});
 });
 
@@ -82,6 +81,9 @@ describe("<EditorHome Align-Justify />", () => {
 		// 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;">');
+		cy.get("#editor-main").should(
+			"contain.html",
+			'<div style="text-align: justify;">',
+		);
 	});
 });
diff --git a/.../editor/indexEditorHome-formatting.cy.tsx → src/tests/EditorHome-formatting.cy.tsx b/.../editor/indexEditorHome-formatting.cy.tsx → src/tests/EditorHome-formatting.cy.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import EditorHome from "./index";
-import { wordCount } from "../../variables/editorPlaceholder";
+import EditorHome from "../views/editor/index";
+import { wordCount } from "../variables/editorPlaceholder";
 import { ChakraProvider } from "@chakra-ui/react";
-import theme from "../../theme/theme";
+import theme from "../theme/theme";
 
 beforeEach(() => {
 	cy.viewport(1920, 1080);
@@ -13,14 +13,10 @@ beforeEach(() => {
 		</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();
 

diff --git a/...views/editor/indexEditorHome-lists.cy.tsx → src/tests/EditorHome-lists.cy.tsx b/...views/editor/indexEditorHome-lists.cy.tsx → src/tests/EditorHome-lists.cy.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import EditorHome from "./index";
-import { wordCount } from "../../variables/editorPlaceholder";
+import EditorHome from "../views/editor/index";
+import { wordCount } from "../variables/editorPlaceholder";
 import { ChakraProvider } from "@chakra-ui/react";
-import theme from "../../theme/theme";
+import theme from "../theme/theme";
 
 beforeEach(() => {
 	cy.viewport(1920, 1080);
@@ -13,9 +13,6 @@ beforeEach(() => {
 		</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);
 
@@ -24,6 +21,8 @@ beforeEach(() => {
 	cy.get("#menu-button-24").click();
 	cy.get("#menu-list-24-menuitem-22 > .css-70qvj9 > .chakra-text").click();
 
+	cy.get("#word-count").should("have.text", 0);
+
 	// editor should be empty
 	cy.get("#editor-main").should("have.text", "");
 

diff --git a/src/views/editor/indexEditorHome.cy.tsx → src/tests/EditorHome.cy.tsx b/src/views/editor/indexEditorHome.cy.tsx → src/tests/EditorHome.cy.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import EditorHome from "./index";
-import { wordCount } from "../../variables/editorPlaceholder";
+import EditorHome from "../views/editor/index";
+import { wordCount } from "../variables/editorPlaceholder";
 import { ChakraProvider } from "@chakra-ui/react";
-import theme from "../../theme/theme";
+import theme from "../theme/theme";
 
 describe("<EditorHome />", () => {
 	it("renders", () => {
@@ -14,17 +14,16 @@ describe("<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();
 
+		// word count should be 0
+		cy.get("#word-count").should("have.text", 0);
+
 		// editor should be empty
 		cy.get("#editor-main").should("have.text", "");