Merge pull request #20799 from Yoast/20672-wincher-tests

20672 wincher tests
Yoast · Oct 30, 2023 · b05fe43 · b05fe43
2 parents c1bd345 + 816ef5f
commit b05fe43
Show file tree

Hide file tree

Showing 2 changed files with 139 additions and 71 deletions.
diff --git a/packages/js/tests/components/WincherKeyphrasesTable.test.js b/packages/js/tests/components/WincherKeyphrasesTable.test.js
@@ -1,61 +1,85 @@
-// import { act } from "react-dom/test-utils";
-
 global.window.wpseoAdminGlobalL10n = [];
+import { render, screen, waitFor, within } from "../test-utils";
+
 global.window.wpseoAdminGlobalL10n[ "links.wincher.login" ] = "test.com";
 
-// import WincherKeyphrasesTable
-// 	from "../../../js/src/components/WincherKeyphrasesTable";
-// import { noop } from "lodash";
-// import WincherTableRow from "../../src/components/WincherTableRow";
+import WincherKeyphrasesTable
+	from "../../../js/src/components/WincherKeyphrasesTable";
+import { noop } from "lodash";
 import { trackKeyphrases } from "../../src/helpers/wincherEndpoints";
 
 jest.mock( "../../src/helpers/wincherEndpoints" );
 trackKeyphrases.mockImplementation( async fn => {
 	return fn;
 } );
 
-// const keyphrases = [ "yoast seo" ];
-
-// const keyphrasesData = {
-// 	"yoast seo": {
-// 		id: "12345",
-// 		keyword: "yoast seo",
-// 		// eslint-disable-next-line camelcase
-// 		updated_at: new Date().toISOString(),
-// 		position: {
-// 			value: 10,
-// 			history: [
-// 				{
-// 					datetime: "2021-08-02T22:00:00Z",
-// 					value: 40,
-// 				},
-// 				{
-// 					datetime: "2021-08-03T22:00:00Z",
-// 					value: 38,
-// 				},
-// 			],
-// 		},
-// 	},
-// 	"woocommerce seo": {
-// 		id: "54321",
-// 		keyword: "woocommerce seo",
-// 	},
-// };
+/**
+ * Render the WincherKeyphrasesTable component.
+ *
+ * @param {*} props The component props.
+ * @returns {void}
+ */
+const renderWincherKeyphrasesTable = ( props ) => {
+	render( <WincherKeyphrasesTable
+		keyphrases={ [ "Example keyphrase" ] }
+		trackedKeyphrases={ {} }
+		onAuthentication={ noop }
+		addTrackingKeyphrase={ noop }
+		newRequest={ noop }
+		setKeyphraseLimitReached={ noop }
+		setTrackedKeyphrases={ noop }
+		setRequestFailed={ noop }
+		setRequestSucceeded={ noop }
+		addTrackedKeyphrase={ noop }
+		removeTrackedKeyphrase={ noop }
+		setHasTrackedAll={ noop }
+		onSelectKeyphrases={ noop }
+		permalink=""
+		selectedKeyphrases={ [] }
+		{ ...props }
+	/> );
+};
 
 describe( "WincherKeyphrasesTable", () => {
-	it( "should fill the table with 1 element", () => {
-
+	beforeEach( () => {
+		renderWincherKeyphrasesTable();
 	} );
 
-	it( "should have the right keyphrases present", () => {
+	it( "should fill the table with 1 element", async() => {
+		const rows = screen.getAllByRole( "row" );
+		expect( rows.length ).toBe( 2 );
+	} );
 
+	it( "should have the right keyphrases present", async() => {
+		const cell = screen.getByRole( "cell", { name: "Example keyphrase" } );
+		expect( cell ).toBeInTheDocument();
 	} );
+} );
 
-	it( "should track all keyphrases", async() => {
+describe( "WincherKeyphrasesTable with asterisk", () => {
+	it( "should add an asterisk after the focus keyphrase, even if the keyphrase contains capital letters", async() => {
+		renderWincherKeyphrasesTable( {
+			keyphrases: [ "example keyphrase", "test" ],
+			focusKeyphrase: "Example keyphrase",
+		} );
 
+		const cell = screen.getByRole( "cell", { name: /example keyphrase/i } );
+		const span = within( cell ).getByText( "*" );
+		expect( span ).toBeInTheDocument();
 	} );
 
-	it( "should add an asterisk after the focus keyphrase, even if the keyphrase contains capital letters", () => {
+	it( "should track all keyphrases", async() => {
+		const keyphrases = [ "example keyphrase", "test" ];
+		waitFor( () => {
+			renderWincherKeyphrasesTable( {
+				keyphrases: keyphrases,
+				isLoggedIn: true,
+				trackAll: true,
+			} );
+		} );
 
+		expect( trackKeyphrases ).toHaveBeenCalledWith( keyphrases );
 	} );
 } );
+
+
diff --git a/packages/js/tests/components/WincherTableRow.test.js b/packages/js/tests/components/WincherTableRow.test.js
@@ -1,47 +1,91 @@
-// import WincherTableRow, { PositionOverTimeChart } from "../../src/components/WincherTableRow";
-// import { Toggle } from "@yoast/components";
-// import WincherSEOPerformanceLoading from "../../src/components/modals/WincherSEOPerformanceLoading";
-
-// const keyphrasesData = {
-// 	"yoast seo": {
-// 		id: "12345",
-// 		keyword: "yoast seo",
-// 		position: {
-// 			value: 10,
-// 			history: [
-// 				{
-// 					datetime: "2021-08-02T22:00:00Z",
-// 					value: 40,
-// 				},
-// 				{
-// 					datetime: "2021-08-03T22:00:00Z",
-// 					value: 38,
-// 				},
-// 			],
-// 		},
-// 		// eslint-disable-next-line camelcase
-// 		updated_at: new Date(),
-// 	},
-// 	"woocommerce seo": {
-// 		id: "54321",
-// 		keyword: "woocommerce seo",
-// 		position: null,
-// 		// eslint-disable-next-line camelcase
-// 		updated_at: null,
-// 	},
-// };
+import WincherTableRow from "../../src/components/WincherTableRow";
+import { render, screen, within } from "../test-utils";
+import { noop } from "lodash";
+
+const keyphrasesData = {
+	"yoast seo": {
+		id: "12345",
+		keyword: "yoast seo",
+		position: {
+			value: 10,
+			history: [
+				{
+					datetime: "2021-08-02T22:00:00Z",
+					value: 40,
+				},
+				{
+					datetime: "2021-08-03T22:00:00Z",
+					value: 38,
+				},
+			],
+		},
+		// eslint-disable-next-line camelcase
+		updated_at: new Date(),
+	},
+	"woocommerce seo": {
+		id: "54321",
+		keyword: "woocommerce seo",
+		position: null,
+		// eslint-disable-next-line camelcase
+		updated_at: null,
+	},
+};
 
 describe( "WincherTableRow", () => {
 	it( "should render a row with the available data but without chart data", () => {
+		render( <WincherTableRow
+			rowData={ keyphrasesData[ "woocommerce seo" ] }
+			keyphrase="woocommerce seo"
+			onSelectKeyphrases={ noop }
+			isSelected={ false }
+		/> );
 
+		const rows = screen.getAllByRole( "cell" );
+		expect( rows.length ).toBe( 4 );
+		expect( rows[ 1 ].textContent ).toContain( "woocommerce seo" );
+		const loadingText = screen.getByText( "Tracking the ranking position..." );
+		expect( loadingText ).toBeInTheDocument();
 	} );
 
 	it( "should render a row with the available data and with chart data", () => {
+		render( <WincherTableRow
+			rowData={ keyphrasesData[ "yoast seo" ] }
+			keyphrase="yoast seo"
+			onSelectKeyphrases={ noop }
+			isSelected={ false }
+		/> );
 
+		const rows = screen.getAllByRole( "row" );
+		const toggle = within( rows[ 0 ] ).getAllByRole( "checkbox" );
+		expect( toggle.length ).toBe( 2 );
+		expect( toggle[ 1 ] ).toBeChecked();
+		const positionOverTimeChart = within( rows[ 0 ] ).getAllByRole( "button" );
+		expect( positionOverTimeChart.length ).toBe( 1 );
+		const keyfrase = within( rows[ 0 ] ).getByText( "yoast seo" );
+		expect( keyfrase ).toBeInTheDocument();
 	} );
 
 	it( "should not render an enabled toggle or any position and chart data when no data is available", () => {
+		render( <WincherTableRow
+			rowData={ {} }
+			keyphrase="yoast seo"
+			onSelectKeyphrases={ noop }
+			isSelected={ false }
+		/> );
+
+		const rows = screen.getAllByRole( "row" );
+		const toggle = within( rows[ 0 ] ).getAllByRole( "checkbox" );
+		expect( toggle.length ).toBe( 1 );
+		expect( toggle[ 0 ] ).not.toBeChecked();
+
+		const cells = within( rows[ 0 ] ).getAllByRole( "cell" );
+		expect( cells.length ).toBe( 4 );
 
+
+		const positionOverTimeChart = screen.queryByRole( "button", { name: /example button/i } );
+		expect( positionOverTimeChart ).not.toBeInTheDocument();
+
+		const keyfrase = within( rows[ 0 ] ).getByText( "yoast seo" );
+		expect( keyfrase ).toBeInTheDocument();
 	} );
 } );
-