migrate WincherKeyphrasesTable tests

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 );
 	} );
 } );
+
+