From 43fed427a29a29c74ade128bc561c6349d71cd69 Mon Sep 17 00:00:00 2001 From: Vraja Das Date: Wed, 25 Oct 2023 12:12:37 +0200 Subject: [PATCH 1/2] 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( ); +}; 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 ); } ); } ); + + From 816ef5f8d74842ccb301c925e7fc3d27c2946147 Mon Sep 17 00:00:00 2001 From: Vraja Das Date: Wed, 25 Oct 2023 14:09:42 +0200 Subject: [PATCH 2/2] Migrate WincherTableRow tests --- .../tests/components/WincherTableRow.test.js | 110 ++++++++++++------ 1 file changed, 77 insertions(+), 33 deletions(-) diff --git a/packages/js/tests/components/WincherTableRow.test.js b/packages/js/tests/components/WincherTableRow.test.js index 7b6d2e97299..c320af78f45 100644 --- 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( ); + 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( ); + 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( ); + + 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(); } ); } ); -