From 43fed427a29a29c74ade128bc561c6349d71cd69 Mon Sep 17 00:00:00 2001
From: Vraja Das <vraja.pro@gmail.com>
Date: Wed, 25 Oct 2023 12:12:37 +0200
Subject: [PATCH] migrate WincherKeyphrasesTable tests

---
 .../components/WincherKeyphrasesTable.test.js | 100 +++++++++++-------
 1 file changed, 62 insertions(+), 38 deletions(-)

diff --git a/packages/js/tests/components/WincherKeyphrasesTable.test.js b/packages/js/tests/components/WincherKeyphrasesTable.test.js
index 360f7ed7acd..6830ed6687d 100644
--- a/packages/js/tests/components/WincherKeyphrasesTable.test.js
+++ b/packages/js/tests/components/WincherKeyphrasesTable.test.js
@@ -1,12 +1,11 @@
-// 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" );
@@ -14,48 +13,73 @@ 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 );
 	} );
 } );
+
+