From 64984f8195e7638ea4826b9f9699fe58f9c516ca Mon Sep 17 00:00:00 2001 From: Vraja Das Date: Wed, 27 Nov 2024 11:14:54 +0200 Subject: [PATCH 1/5] Move links and link params to client side --- admin/class-expose-shortlinks.php | 4 -- .../SEMrushRelatedKeyphrasesModalContent.js | 39 +++++++------------ .../containers/SEMrushRelatedKeyphrases.js | 4 ++ 3 files changed, 19 insertions(+), 28 deletions(-) diff --git a/admin/class-expose-shortlinks.php b/admin/class-expose-shortlinks.php index e6a589b687d..f52c269778b 100644 --- a/admin/class-expose-shortlinks.php +++ b/admin/class-expose-shortlinks.php @@ -58,10 +58,6 @@ class WPSEO_Expose_Shortlinks implements WPSEO_WordPress_Integration { 'shortlinks.activate_premium_info' => 'https://yoa.st/activate-subscription', 'shortlinks.upsell.sidebar.morphology_upsell_metabox' => 'https://yoa.st/morphology-upsell-metabox', 'shortlinks.upsell.sidebar.morphology_upsell_sidebar' => 'https://yoa.st/morphology-upsell-sidebar', - 'shortlinks.semrush.volume_help' => 'https://yoa.st/3-v', - 'shortlinks.semrush.trend_help' => 'https://yoa.st/3-v', - 'shortlinks.semrush.prices' => 'https://yoa.st/semrush-prices', - 'shortlinks.semrush.premium_landing_page' => 'https://yoa.st/413', 'shortlinks.wincher.seo_performance' => 'https://yoa.st/wincher-integration', 'shortlinks-insights-estimated_reading_time' => 'https://yoa.st/4fd', 'shortlinks-insights-flesch_reading_ease' => 'https://yoa.st/34r', diff --git a/packages/js/src/components/SEMrushRelatedKeyphrasesModalContent.js b/packages/js/src/components/SEMrushRelatedKeyphrasesModalContent.js index 6b3cfee2741..c41689f03e3 100644 --- a/packages/js/src/components/SEMrushRelatedKeyphrasesModalContent.js +++ b/packages/js/src/components/SEMrushRelatedKeyphrasesModalContent.js @@ -71,30 +71,32 @@ export function getUserMessage( props ) { */ export default function RelatedKeyphraseModalContent( props ) { const { - response, - lastRequestKeyphrase, - keyphrase, + response = {}, + lastRequestKeyphrase = "", + keyphrase = "", newRequest, setCountry, - renderAction, + renderAction = null, countryCode, - requestLimitReached, + requestLimitReached = false, setRequestFailed, setNoResultsFound, - relatedKeyphrases, + relatedKeyphrases = [], setRequestSucceeded, setRequestLimitReached, isPending, - isRtl, - isPremium, - userLocale, + isRtl = false, + isPremium = false, + userLocale = "en_US", + semrushUpsellLink = "", + premiumUpsellLink = "", } = props; return ( { ! requestLimitReached && ! isPremium && } @@ -114,7 +116,7 @@ export default function RelatedKeyphraseModalContent( props ) { { ! isPending && } { From 9809a3493b41f36ecffa56990e15f2f89d294c8f Mon Sep 17 00:00:00 2001 From: Vraja Das Date: Wed, 27 Nov 2024 12:46:00 +0200 Subject: [PATCH 2/5] Add tests for the modal content --- ...MrushRelatedKeyphrasesModalContent.test.js | 198 +- ...RelatedKeyphrasesModalContent.test.js.snap | 4225 +++++++++++++++++ 2 files changed, 4414 insertions(+), 9 deletions(-) create mode 100644 packages/js/tests/components/__snapshots__/SEMrushRelatedKeyphrasesModalContent.test.js.snap diff --git a/packages/js/tests/components/SEMrushRelatedKeyphrasesModalContent.test.js b/packages/js/tests/components/SEMrushRelatedKeyphrasesModalContent.test.js index 35efe968309..1bfaaf654d7 100644 --- a/packages/js/tests/components/SEMrushRelatedKeyphrasesModalContent.test.js +++ b/packages/js/tests/components/SEMrushRelatedKeyphrasesModalContent.test.js @@ -1,4 +1,94 @@ -import * as SEMrushRelatedKeyphrasesModalContent from "../../src/components/SEMrushRelatedKeyphrasesModalContent"; +import RelatedKeyphraseModalContent, { hasError, getUserMessage, hasMaximumRelatedKeyphrases } from "../../src/components/SEMrushRelatedKeyphrasesModalContent"; +import { render } from "../test-utils"; +import { expect } from "@jest/globals"; + +const succesfulResponse = { + results: { + columnNames: [ "Keyword", "Search Volume", "Trends", "Keyword Difficulty Index", "Intent" ], + rows: [ + [ + "speed test", + "13600000", + "0.44,1.00,0.44,0.44,0.44,0.24,0.24,0.36,0.44,0.44,0.44,0.44", + "9", + "0", + ], + [ + "internet speed test", + "7480000", + "0.82,0.0", + "50", + "0,2", + ], + [ + "automated test", + "1500000", + "0.20,0.24,0.24,0.16,0.36,0.29,0.66,0.81,0.36,0.36,0.20,0.16", + "90", + "3", + ], + [ + "test", + "1500000", + "0.36,0.19,0.29,0.16,0.16,0.16,0.16,0.29,0.16,0.19,0.16,0.19", + "30", + "0,2,3,1", + ], + [ + "wifi speed test", + "823000", + "1.00,0.44,0.44,0.44,0.54,0.44,0.44,0.54,0.54,0.54,0.54,0.54", + "15", + "0,2", + ], + [ + "typing test", + "550000", + "0.55,0.55,0.55,0.45,0.36,0.55,0.55,0.55,0.45,0.36,0.36,0.55", + "95", + "0,3", + ], + [ + "accesability test", + "301000", + "0.36,0.44,0.44,0.44,0.44,0.54,0.44,0.54,0.36,0.44,0.44,0.29", + "80", + "0", + ], + [ + "seo test", + "301000", + "0.66,0.54,0.54,0.54,0.66,0.54,0.66,0.66,0.54,0.44,0.44,0.54", + "86", + "3", + ], + [ + "related keyphrase test", + "246000", + "0.66,0.66,0.54,0.81,1.00,0.81,0.81,0.81,0.66,0.54,0.54,0.54", + "60", + "1,3", + ], + [ + "storybook tests", + "246000", + "0.81,0.54,0.44,0.54,0.44,0.13,0.20,0.04,0.06,0.07,0.20,0.29", + "72", + "1", + ], + ], + }, + status: 200, +}; + +jest.mock( "@wordpress/api-fetch", () => { + return { + __esModule: true, + "default": jest.fn( () => { + return Promise.resolve( succesfulResponse ); + } ), + }; +} ); describe( "SEMrushRelatedKeyphrasesModalContent", () => { let props = {}; @@ -25,13 +115,13 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { describe( "hasError", () => { it( "returns that the response has no error property", () => { - const actual = SEMrushRelatedKeyphrasesModalContent.hasError( { status: 200 } ); + const actual = hasError( { status: 200 } ); expect( actual ).toBe( false ); } ); it( "returns that the limit has been reached", () => { - const actual = SEMrushRelatedKeyphrasesModalContent.hasError( { error: "An error!", status: 500 } ); + const actual = hasError( { error: "An error!", status: 500 } ); expect( actual ).toBe( true ); } ); @@ -44,7 +134,7 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { requestLimitReached: true, }; - const actual = SEMrushRelatedKeyphrasesModalContent.getUserMessage( props ); + const actual = getUserMessage( props ); expect( actual ).toEqual( "requestLimitReached" ); } ); @@ -59,13 +149,13 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { }, }; - const actual = SEMrushRelatedKeyphrasesModalContent.getUserMessage( props ); + const actual = getUserMessage( props ); expect( actual ).toEqual( "requestFailed" ); } ); it( "returns a message when response contains no data", () => { - const actual = SEMrushRelatedKeyphrasesModalContent.getUserMessage( props ); + const actual = getUserMessage( props ); expect( actual ).toEqual( "requestEmpty" ); } ); @@ -73,13 +163,13 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { describe( "hasMaximumRelatedKeyphrases", () => { it( "returns that maximum related keyphrases hasn't been reached when there are none", () => { - const actual = SEMrushRelatedKeyphrasesModalContent.hasMaximumRelatedKeyphrases( [] ); + const actual = hasMaximumRelatedKeyphrases( [] ); expect( actual ).toBe( false ); } ); it( "returns that maximum related keyphrases hasn't been reached when there is less than 4", () => { - const actual = SEMrushRelatedKeyphrasesModalContent.hasMaximumRelatedKeyphrases( [ + const actual = hasMaximumRelatedKeyphrases( [ { key: "a", keyword: "yoast seo", score: 33 }, { key: "b", keyword: "yoast seo plugin", score: 33 }, { key: "c", keyword: "yoast plugin", score: 33 }, @@ -89,7 +179,7 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { } ); it( "returns that the limit has been reached", () => { - const actual = SEMrushRelatedKeyphrasesModalContent.hasMaximumRelatedKeyphrases( [ + const actual = hasMaximumRelatedKeyphrases( [ { key: "a", keyword: "yoast seo", score: 33 }, { key: "b", keyword: "yoast seo plugin", score: 33 }, { key: "c", keyword: "yoast plugin", score: 33 }, @@ -99,4 +189,94 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { expect( actual ).toBe( true ); } ); } ); + + describe( "RelatedKeyphraseModalContent", () => { + it( "renders the SEMrush related keyphrases modal content with results and without premium", async() => { + props = { + ...props, + isPremium: false, + renderAction: null, + requestHasData: true, + response: succesfulResponse, + premiumUpsellLink: "https://yoa.st/413", + }; + + const { container } = render( ); + expect( container ).toMatchSnapshot(); + } ); + + it( "renders the SEMrush related keyphrases modal content with results and with premium", async() => { + props = { + ...props, + isPremium: true, + renderAction: jest.fn( () => ), + requestHasData: true, + response: succesfulResponse, + }; + + const { container } = render( ); + expect( container ).toMatchSnapshot(); + } ); + + it( "renders the SEMrush related keyphrases modal content with no results alert", async() => { + props = { + ...props, + isPremium: true, + renderAction: jest.fn( () => ), + requestHasData: false, + response: {}, + }; + + const { container } = render( ); + expect( container ).toMatchSnapshot(); + } ); + + it( "renders the SEMrush related keyphrases modal content with request limit reached alert", async() => { + props = { + ...props, + isPremium: true, + renderAction: jest.fn( () => ), + requestLimitReached: true, + response: {}, + semrushUpsellLink: "https://yoa.st/semrush-prices", + }; + + const { container } = render( ); + expect( container ).toMatchSnapshot(); + } ); + + it( "renders the SEMrush related keyphrases modal content with request failed alert", async() => { + props = { + ...props, + isPremium: true, + renderAction: jest.fn( () => ), + isSuccess: false, + response: { + error: "An error!", + status: 500, + }, + }; + + const { container } = render( ); + expect( container ).toMatchSnapshot(); + } ); + + it( "renders the SEMrush related keyphrases modal content with maximum related keyphrases alert", async() => { + props = { + ...props, + isPremium: true, + renderAction: jest.fn( () => ), + relatedKeyphrases: [ + { key: "a", keyword: "yoast seo", score: 33 }, + { key: "b", keyword: "yoast seo plugin", score: 33 }, + { key: "c", keyword: "yoast plugin", score: 33 }, + { key: "d", keyword: "yoast premium plugin", score: 33 }, + ], + requestHasData: true, + }; + + const { container } = render( ); + expect( container ).toMatchSnapshot(); + } ); + } ); } ); diff --git a/packages/js/tests/components/__snapshots__/SEMrushRelatedKeyphrasesModalContent.test.js.snap b/packages/js/tests/components/__snapshots__/SEMrushRelatedKeyphrasesModalContent.test.js.snap new file mode 100644 index 00000000000..d48e0be44f4 --- /dev/null +++ b/packages/js/tests/components/__snapshots__/SEMrushRelatedKeyphrasesModalContent.test.js.snap @@ -0,0 +1,4225 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SEMrushRelatedKeyphrasesModalContent RelatedKeyphraseModalContent renders the SEMrush related keyphrases modal content with maximum related keyphrases alert 1`] = ` +
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+ + +
+ You've reached the maximum amount of 4 related keyphrases. You can change or remove related keyphrases in the Yoast SEO metabox or sidebar. +
+ +
+
+`; + +exports[`SEMrushRelatedKeyphrasesModalContent RelatedKeyphraseModalContent renders the SEMrush related keyphrases modal content with no results alert 1`] = ` +
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+ + +
+ Sorry, there's no data available for that keyphrase/country combination. +
+ +
+
+`; + +exports[`SEMrushRelatedKeyphrasesModalContent RelatedKeyphraseModalContent renders the SEMrush related keyphrases modal content with request failed alert 1`] = ` +
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+ + +
+ We've encountered a problem trying to get related keyphrases. Please try again later. +
+ +
+
+`; + +exports[`SEMrushRelatedKeyphrasesModalContent RelatedKeyphraseModalContent renders the SEMrush related keyphrases modal content with request limit reached alert 1`] = ` +
+
+ + +
+
+ You've reached your request limit for today. Check back tomorrow or upgrade your plan over at Semrush. + + Upgrade your Semrush plan + + +
+
+ +
+
+`; + +exports[`SEMrushRelatedKeyphrasesModalContent RelatedKeyphraseModalContent renders the SEMrush related keyphrases modal content with results and with premium 1`] = ` +
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Related keyphrase + + Intent + +
+ Volume +
+ 		+ Trend + +
+ Difficulty % +
+ 		+
+ Add keyphrase +
+
+ speed test + +
+ + I + +
+ 		+
+ 14M +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 44 + + 100 + + 44 + + 44 + + 44 + + 24 + + 24 + + 36 + + 44 + + 44 + + 44 + + 44 +
+
+ 		+
+
+
+ 9 +
+
+
+
+
+ +
+ internet speed test + +
+ + I + + + T + +
+ 		+
+ 7.5M +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 0 + + 0 + + 0 + + 0 + + 0 + + 0 + + 0 + + 0 + + 0 + + 0 + + 82 + + 0 +
+
+ 		+
+
+
+ 50 +
+
+
+
+
+ +
+ automated test + +
+ + C + +
+ 		+
+ 1.5M +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 20 + + 24 + + 24 + + 16 + + 36 + + 29 + + 66 + + 81 + + 36 + + 36 + + 20 + + 16 +
+
+ 		+
+
+
+ 90 +
+
+
+
+
+ +
+ test + +
+ + I + + + T + + + C + + + N + +
+ 		+
+ 1.5M +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 36 + + 19 + + 29 + + 16 + + 16 + + 16 + + 16 + + 29 + + 16 + + 19 + + 16 + + 19 +
+
+ 		+
+
+
+ 30 +
+
+
+
+
+ +
+ wifi speed test + +
+ + I + + + T + +
+ 		+
+ 823K +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 100 + + 44 + + 44 + + 44 + + 54 + + 44 + + 44 + + 54 + + 54 + + 54 + + 54 + + 54 +
+
+ 		+
+
+
+ 15 +
+
+
+
+
+ +
+ typing test + +
+ + I + + + C + +
+ 		+
+ 550K +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 55 + + 55 + + 55 + + 45 + + 36 + + 55 + + 55 + + 55 + + 45 + + 36 + + 36 + + 55 +
+
+ 		+
+
+
+ 95 +
+
+
+
+
+ +
+ accesability test + +
+ + I + +
+ 		+
+ 301K +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 36 + + 44 + + 44 + + 44 + + 44 + + 54 + + 44 + + 54 + + 36 + + 44 + + 44 + + 29 +
+
+ 		+
+
+
+ 80 +
+
+
+
+
+ +
+ seo test + +
+ + C + +
+ 		+
+ 301K +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 66 + + 54 + + 54 + + 54 + + 66 + + 54 + + 66 + + 66 + + 54 + + 44 + + 44 + + 54 +
+
+ 		+
+
+
+ 86 +
+
+
+
+
+ +
+ related keyphrase test + +
+ + N + + + C + +
+ 		+
+ 246K +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 66 + + 66 + + 54 + + 81 + + 100 + + 81 + + 81 + + 81 + + 66 + + 54 + + 54 + + 54 +
+
+ 		+
+
+
+ 60 +
+
+
+
+
+ +
+ storybook tests + +
+ + N + +
+ 		+
+ 246K +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 81 + + 54 + + 44 + + 54 + + 44 + + 13 + + 20 + + 4 + + 6 + + 7 + + 20 + + 29 +
+
+ 		+
+
+
+ 72 +
+
+
+
+
+ +
+
+
+
+`; + +exports[`SEMrushRelatedKeyphrasesModalContent RelatedKeyphraseModalContent renders the SEMrush related keyphrases modal content with results and without premium 1`] = ` +
+
+
+

+ You’ll reach more people with multiple keyphrases! Want to quickly add these related keyphrases to the Yoast SEO analyses for even better content optimization? +

+ + + Explore Yoast SEO Premium! + + (Opens in a new browser tab) + + +
+
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Related keyphrase + + Intent + +
+ Volume +
+ 		+ Trend + +
+ Difficulty % +
+
+ speed test + +
+ + I + +
+ 		+
+ 14M +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 44 + + 100 + + 44 + + 44 + + 44 + + 24 + + 24 + + 36 + + 44 + + 44 + + 44 + + 44 +
+
+ 		+
+
+
+ 9 +
+
+
+
+
+ internet speed test + +
+ + I + + + T + +
+ 		+
+ 7.5M +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 0 + + 0 + + 0 + + 0 + + 0 + + 0 + + 0 + + 0 + + 0 + + 0 + + 82 + + 0 +
+
+ 		+
+
+
+ 50 +
+
+
+
+
+ automated test + +
+ + C + +
+ 		+
+ 1.5M +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 20 + + 24 + + 24 + + 16 + + 36 + + 29 + + 66 + + 81 + + 36 + + 36 + + 20 + + 16 +
+
+ 		+
+
+
+ 90 +
+
+
+
+
+ test + +
+ + I + + + T + + + C + + + N + +
+ 		+
+ 1.5M +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 36 + + 19 + + 29 + + 16 + + 16 + + 16 + + 16 + + 29 + + 16 + + 19 + + 16 + + 19 +
+
+ 		+
+
+
+ 30 +
+
+
+
+
+ wifi speed test + +
+ + I + + + T + +
+ 		+
+ 823K +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 100 + + 44 + + 44 + + 44 + + 54 + + 44 + + 44 + + 54 + + 54 + + 54 + + 54 + + 54 +
+
+ 		+
+
+
+ 15 +
+
+
+
+
+ typing test + +
+ + I + + + C + +
+ 		+
+ 550K +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 55 + + 55 + + 55 + + 45 + + 36 + + 55 + + 55 + + 55 + + 45 + + 36 + + 36 + + 55 +
+
+ 		+
+
+
+ 95 +
+
+
+
+
+ accesability test + +
+ + I + +
+ 		+
+ 301K +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 36 + + 44 + + 44 + + 44 + + 44 + + 54 + + 44 + + 54 + + 36 + + 44 + + 44 + + 29 +
+
+ 		+
+
+
+ 80 +
+
+
+
+
+ seo test + +
+ + C + +
+ 		+
+ 301K +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 66 + + 54 + + 54 + + 54 + + 66 + + 54 + + 66 + + 66 + + 54 + + 44 + + 44 + + 54 +
+
+ 		+
+
+
+ 86 +
+
+
+
+
+ related keyphrase test + +
+ + N + + + C + +
+ 		+
+ 246K +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 66 + + 66 + + 54 + + 81 + + 100 + + 81 + + 81 + + 81 + + 66 + + 54 + + 54 + + 54 +
+
+ 		+
+
+
+ 60 +
+
+
+
+
+ storybook tests + +
+ + N + +
+ 		+
+ 246K +
+ 		+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyphrase volume in the last 12 months on a scale from 0 to 100. +
+ Twelve months ago + + Eleven months ago + + Ten months ago + + Nine months ago + + Eight months ago + + Seven months ago + + Six months ago + + Five months ago + + Four months ago + + Three months ago + + Two months ago + + Last month +
+ 81 + + 54 + + 44 + + 54 + + 44 + + 13 + + 20 + + 4 + + 6 + + 7 + + 20 + + 29 +
+
+ 		+
+
+
+ 72 +
+
+
+
+
+
+
+
+`; From df27eca5d233ecddf073e33b36bda77453ed0eb5 Mon Sep 17 00:00:00 2001 From: Vraja Das Date: Fri, 13 Dec 2024 11:35:10 +0200 Subject: [PATCH 3/5] fixed tests --- ...MrushRelatedKeyphrasesModalContent.test.js | 43 +- ...RelatedKeyphrasesModalContent.test.js.snap | 4225 ----------------- 2 files changed, 25 insertions(+), 4243 deletions(-) delete mode 100644 packages/js/tests/components/__snapshots__/SEMrushRelatedKeyphrasesModalContent.test.js.snap diff --git a/packages/js/tests/components/SEMrushRelatedKeyphrasesModalContent.test.js b/packages/js/tests/components/SEMrushRelatedKeyphrasesModalContent.test.js index 1bfaaf654d7..8341ecc069f 100644 --- a/packages/js/tests/components/SEMrushRelatedKeyphrasesModalContent.test.js +++ b/packages/js/tests/components/SEMrushRelatedKeyphrasesModalContent.test.js @@ -191,7 +191,7 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { } ); describe( "RelatedKeyphraseModalContent", () => { - it( "renders the SEMrush related keyphrases modal content with results and without premium", async() => { + it( "renders the anchor tag with the right premium upsell link", async() => { props = { ...props, isPremium: false, @@ -201,11 +201,12 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { premiumUpsellLink: "https://yoa.st/413", }; - const { container } = render( ); - expect( container ).toMatchSnapshot(); + const { getByRole } = render( ); + const link = getByRole( "link", { name: /Explore Yoast SEO Premium!/i } ); + expect( link ).toHaveAttribute( "href", "https://yoa.st/413" ); } ); - it( "renders the SEMrush related keyphrases modal content with results and with premium", async() => { + it( "renders the results and with premium", async() => { props = { ...props, isPremium: true, @@ -214,11 +215,13 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { response: succesfulResponse, }; - const { container } = render( ); - expect( container ).toMatchSnapshot(); + const { getAllByRole } = render( ); + + const buttons = getAllByRole( "button", { name: /Add/i } ); + expect( buttons ).toHaveLength( 10 ); } ); - it( "renders the SEMrush related keyphrases modal content with no results alert", async() => { + it( "renders the no results alert", async() => { props = { ...props, isPremium: true, @@ -227,11 +230,12 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { response: {}, }; - const { container } = render( ); - expect( container ).toMatchSnapshot(); + const { queryByText } = render( ); + const alert = queryByText( "Sorry, there's no data available for that keyphrase/country combination." ); + expect( alert ).toBeInTheDocument(); } ); - it( "renders the SEMrush related keyphrases modal content with request limit reached alert", async() => { + it( "renders the request limit reached alert with the right link", async() => { props = { ...props, isPremium: true, @@ -241,11 +245,12 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { semrushUpsellLink: "https://yoa.st/semrush-prices", }; - const { container } = render( ); - expect( container ).toMatchSnapshot(); + const { getByRole } = render( ); + const link = getByRole( "link", { name: /Upgrade your Semrush plan/i } ); + expect( link ).toHaveAttribute( "href", "https://yoa.st/semrush-prices" ); } ); - it( "renders the SEMrush related keyphrases modal content with request failed alert", async() => { + it( "renders the request failed alert", async() => { props = { ...props, isPremium: true, @@ -257,11 +262,12 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { }, }; - const { container } = render( ); - expect( container ).toMatchSnapshot(); + const { queryByText } = render( ); + const alert = queryByText( "We've encountered a problem trying to get related keyphrases. Please try again later." ); + expect( alert ).toBeInTheDocument(); } ); - it( "renders the SEMrush related keyphrases modal content with maximum related keyphrases alert", async() => { + it( "renders the maximum related keyphrases alert", async() => { props = { ...props, isPremium: true, @@ -275,8 +281,9 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { requestHasData: true, }; - const { container } = render( ); - expect( container ).toMatchSnapshot(); + const { queryByText } = render( ); + const alert = queryByText( "You've reached the maximum amount of 4 related keyphrases. You can change or remove related keyphrases in the Yoast SEO metabox or sidebar." ); + expect( alert ).toBeInTheDocument(); } ); } ); } ); diff --git a/packages/js/tests/components/__snapshots__/SEMrushRelatedKeyphrasesModalContent.test.js.snap b/packages/js/tests/components/__snapshots__/SEMrushRelatedKeyphrasesModalContent.test.js.snap deleted file mode 100644 index d48e0be44f4..00000000000 --- a/packages/js/tests/components/__snapshots__/SEMrushRelatedKeyphrasesModalContent.test.js.snap +++ /dev/null @@ -1,4225 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SEMrushRelatedKeyphrasesModalContent RelatedKeyphraseModalContent renders the SEMrush related keyphrases modal content with maximum related keyphrases alert 1`] = ` -
-
-
-
-
-
- -
-
-
- -
-
-
-
- -
- - -
- You've reached the maximum amount of 4 related keyphrases. You can change or remove related keyphrases in the Yoast SEO metabox or sidebar. -
- -
-
-`; - -exports[`SEMrushRelatedKeyphrasesModalContent RelatedKeyphraseModalContent renders the SEMrush related keyphrases modal content with no results alert 1`] = ` -
-
-
-
-
-
- -
-
-
- -
-
-
-
- -
- - -
- Sorry, there's no data available for that keyphrase/country combination. -
- -
-
-`; - -exports[`SEMrushRelatedKeyphrasesModalContent RelatedKeyphraseModalContent renders the SEMrush related keyphrases modal content with request failed alert 1`] = ` -
-
-
-
-
-
- -
-
-
- -
-
-
-
- -
- - -
- We've encountered a problem trying to get related keyphrases. Please try again later. -
- -
-
-`; - -exports[`SEMrushRelatedKeyphrasesModalContent RelatedKeyphraseModalContent renders the SEMrush related keyphrases modal content with request limit reached alert 1`] = ` -
-
- - -
-
- You've reached your request limit for today. Check back tomorrow or upgrade your plan over at Semrush. - - Upgrade your Semrush plan - - -
-
- -
-
-`; - -exports[`SEMrushRelatedKeyphrasesModalContent RelatedKeyphraseModalContent renders the SEMrush related keyphrases modal content with results and with premium 1`] = ` -
-
-
-
-
-
- -
-
-
- -
-
-
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Related keyphrase - - Intent - -
- Volume -
- 		- Trend - -
- Difficulty % -
- 		-
- Add keyphrase -
-
- speed test - -
- - I - -
- 		-
- 14M -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 44 - - 100 - - 44 - - 44 - - 44 - - 24 - - 24 - - 36 - - 44 - - 44 - - 44 - - 44 -
-
- 		-
-
-
- 9 -
-
-
-
-
- -
- internet speed test - -
- - I - - - T - -
- 		-
- 7.5M -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 0 - - 0 - - 0 - - 0 - - 0 - - 0 - - 0 - - 0 - - 0 - - 0 - - 82 - - 0 -
-
- 		-
-
-
- 50 -
-
-
-
-
- -
- automated test - -
- - C - -
- 		-
- 1.5M -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 20 - - 24 - - 24 - - 16 - - 36 - - 29 - - 66 - - 81 - - 36 - - 36 - - 20 - - 16 -
-
- 		-
-
-
- 90 -
-
-
-
-
- -
- test - -
- - I - - - T - - - C - - - N - -
- 		-
- 1.5M -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 36 - - 19 - - 29 - - 16 - - 16 - - 16 - - 16 - - 29 - - 16 - - 19 - - 16 - - 19 -
-
- 		-
-
-
- 30 -
-
-
-
-
- -
- wifi speed test - -
- - I - - - T - -
- 		-
- 823K -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 100 - - 44 - - 44 - - 44 - - 54 - - 44 - - 44 - - 54 - - 54 - - 54 - - 54 - - 54 -
-
- 		-
-
-
- 15 -
-
-
-
-
- -
- typing test - -
- - I - - - C - -
- 		-
- 550K -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 55 - - 55 - - 55 - - 45 - - 36 - - 55 - - 55 - - 55 - - 45 - - 36 - - 36 - - 55 -
-
- 		-
-
-
- 95 -
-
-
-
-
- -
- accesability test - -
- - I - -
- 		-
- 301K -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 36 - - 44 - - 44 - - 44 - - 44 - - 54 - - 44 - - 54 - - 36 - - 44 - - 44 - - 29 -
-
- 		-
-
-
- 80 -
-
-
-
-
- -
- seo test - -
- - C - -
- 		-
- 301K -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 66 - - 54 - - 54 - - 54 - - 66 - - 54 - - 66 - - 66 - - 54 - - 44 - - 44 - - 54 -
-
- 		-
-
-
- 86 -
-
-
-
-
- -
- related keyphrase test - -
- - N - - - C - -
- 		-
- 246K -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 66 - - 66 - - 54 - - 81 - - 100 - - 81 - - 81 - - 81 - - 66 - - 54 - - 54 - - 54 -
-
- 		-
-
-
- 60 -
-
-
-
-
- -
- storybook tests - -
- - N - -
- 		-
- 246K -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 81 - - 54 - - 44 - - 54 - - 44 - - 13 - - 20 - - 4 - - 6 - - 7 - - 20 - - 29 -
-
- 		-
-
-
- 72 -
-
-
-
-
- -
-
-
-
-`; - -exports[`SEMrushRelatedKeyphrasesModalContent RelatedKeyphraseModalContent renders the SEMrush related keyphrases modal content with results and without premium 1`] = ` -
-
-
-

- You’ll reach more people with multiple keyphrases! Want to quickly add these related keyphrases to the Yoast SEO analyses for even better content optimization? -

- - - Explore Yoast SEO Premium! - - (Opens in a new browser tab) - - -
-
-
-
-
- -
-
-
- -
-
-
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Related keyphrase - - Intent - -
- Volume -
- 		- Trend - -
- Difficulty % -
-
- speed test - -
- - I - -
- 		-
- 14M -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 44 - - 100 - - 44 - - 44 - - 44 - - 24 - - 24 - - 36 - - 44 - - 44 - - 44 - - 44 -
-
- 		-
-
-
- 9 -
-
-
-
-
- internet speed test - -
- - I - - - T - -
- 		-
- 7.5M -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 0 - - 0 - - 0 - - 0 - - 0 - - 0 - - 0 - - 0 - - 0 - - 0 - - 82 - - 0 -
-
- 		-
-
-
- 50 -
-
-
-
-
- automated test - -
- - C - -
- 		-
- 1.5M -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 20 - - 24 - - 24 - - 16 - - 36 - - 29 - - 66 - - 81 - - 36 - - 36 - - 20 - - 16 -
-
- 		-
-
-
- 90 -
-
-
-
-
- test - -
- - I - - - T - - - C - - - N - -
- 		-
- 1.5M -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 36 - - 19 - - 29 - - 16 - - 16 - - 16 - - 16 - - 29 - - 16 - - 19 - - 16 - - 19 -
-
- 		-
-
-
- 30 -
-
-
-
-
- wifi speed test - -
- - I - - - T - -
- 		-
- 823K -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 100 - - 44 - - 44 - - 44 - - 54 - - 44 - - 44 - - 54 - - 54 - - 54 - - 54 - - 54 -
-
- 		-
-
-
- 15 -
-
-
-
-
- typing test - -
- - I - - - C - -
- 		-
- 550K -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 55 - - 55 - - 55 - - 45 - - 36 - - 55 - - 55 - - 55 - - 45 - - 36 - - 36 - - 55 -
-
- 		-
-
-
- 95 -
-
-
-
-
- accesability test - -
- - I - -
- 		-
- 301K -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 36 - - 44 - - 44 - - 44 - - 44 - - 54 - - 44 - - 54 - - 36 - - 44 - - 44 - - 29 -
-
- 		-
-
-
- 80 -
-
-
-
-
- seo test - -
- - C - -
- 		-
- 301K -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 66 - - 54 - - 54 - - 54 - - 66 - - 54 - - 66 - - 66 - - 54 - - 44 - - 44 - - 54 -
-
- 		-
-
-
- 86 -
-
-
-
-
- related keyphrase test - -
- - N - - - C - -
- 		-
- 246K -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 66 - - 66 - - 54 - - 81 - - 100 - - 81 - - 81 - - 81 - - 66 - - 54 - - 54 - - 54 -
-
- 		-
-
-
- 60 -
-
-
-
-
- storybook tests - -
- - N - -
- 		-
- 246K -
- 		- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Keyphrase volume in the last 12 months on a scale from 0 to 100. -
- Twelve months ago - - Eleven months ago - - Ten months ago - - Nine months ago - - Eight months ago - - Seven months ago - - Six months ago - - Five months ago - - Four months ago - - Three months ago - - Two months ago - - Last month -
- 81 - - 54 - - 44 - - 54 - - 44 - - 13 - - 20 - - 4 - - 6 - - 7 - - 20 - - 29 -
-
- 		-
-
-
- 72 -
-
-
-
-
-
-
-
-`; From 5bdc8bb2283864cb4ed9e5a594d49e98366f0b3f Mon Sep 17 00:00:00 2001 From: Vraja Das Date: Fri, 13 Dec 2024 17:09:19 +0200 Subject: [PATCH 4/5] test the table content --- ...MrushRelatedKeyphrasesModalContent.test.js | 79 +++++++++++++++---- 1 file changed, 63 insertions(+), 16 deletions(-) diff --git a/packages/js/tests/components/SEMrushRelatedKeyphrasesModalContent.test.js b/packages/js/tests/components/SEMrushRelatedKeyphrasesModalContent.test.js index 8341ecc069f..6dad27404a1 100644 --- a/packages/js/tests/components/SEMrushRelatedKeyphrasesModalContent.test.js +++ b/packages/js/tests/components/SEMrushRelatedKeyphrasesModalContent.test.js @@ -1,6 +1,5 @@ import RelatedKeyphraseModalContent, { hasError, getUserMessage, hasMaximumRelatedKeyphrases } from "../../src/components/SEMrushRelatedKeyphrasesModalContent"; import { render } from "../test-utils"; -import { expect } from "@jest/globals"; const succesfulResponse = { results: { @@ -206,21 +205,6 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { expect( link ).toHaveAttribute( "href", "https://yoa.st/413" ); } ); - it( "renders the results and with premium", async() => { - props = { - ...props, - isPremium: true, - renderAction: jest.fn( () => ), - requestHasData: true, - response: succesfulResponse, - }; - - const { getAllByRole } = render( ); - - const buttons = getAllByRole( "button", { name: /Add/i } ); - expect( buttons ).toHaveLength( 10 ); - } ); - it( "renders the no results alert", async() => { props = { ...props, @@ -286,4 +270,67 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { expect( alert ).toBeInTheDocument(); } ); } ); + + describe( "RelatedKeyphraseModalContent table content", () => { + let renderResult; + let rowsWithId; + + beforeEach( () => { + props = { + ...props, + isPremium: true, + renderAction: jest.fn( () => ), + requestHasData: true, + response: succesfulResponse, + }; + renderResult = render( ); + const { getAllByRole } = renderResult; + const rows = getAllByRole( "row" ); + // The results rows accepts an id while the header row and hidden table row do not. + rowsWithId = rows.filter( row => row.hasAttribute( "id" ) ); + } ); + + it( "renders the results and with add button when premium is active", async() => { + const { getAllByRole } = renderResult; + const buttons = getAllByRole( "button", { name: /Add/i } ); + expect( buttons ).toHaveLength( 10 ); + } ); + + it( "render the 10 rows for the results", () => { + expect( rowsWithId ).toHaveLength( 10 ); + } ); + + it( "render the keyphrases", () => { + const expectedKeyphrases = succesfulResponse.results.rows.map( row => row[ 0 ] ); + expectedKeyphrases.forEach( ( keyphrase, index ) => { + expect( rowsWithId[ index ] ).toHaveTextContent( keyphrase ); + } ); + } ); + + it( "render the search volume", () => { + const searchVolumeFormat = new Intl.NumberFormat( "en", { notation: "compact", compactDisplay: "short" } ); + const expectedSearchVolumes = succesfulResponse.results.rows.map( row => row[ 1 ] ); + expectedSearchVolumes.forEach( ( searchVolume, index ) => { + const volume = searchVolumeFormat.format( searchVolume ); + expect( rowsWithId[ index ] ).toHaveTextContent( volume ); + } ); + } ); + + it( "render the intent badges", () => { + const expectedIntents = succesfulResponse.results.rows.map( row => row[ 4 ] ); + expectedIntents.forEach( ( intentList, index ) => { + const intents = intentList.split( "," ).map( ( value ) => [ "i", "n", "t", "c" ][ Number( value ) ] ); + intents.forEach( ( intent ) => { + expect( rowsWithId[ index ] ).toHaveTextContent( intent ); + } ); + } ); + } ); + + it( "render the keyword difficulty index", () => { + const expectedKeywordDifficultyIndexes = succesfulResponse.results.rows.map( row => row[ 3 ] ); + expectedKeywordDifficultyIndexes.forEach( ( keywordDifficultyIndex, index ) => { + expect( rowsWithId[ index ] ).toHaveTextContent( keywordDifficultyIndex ); + } ); + } ); + } ); } ); From 156f527942d60c135d9b5856609eb117177646db Mon Sep 17 00:00:00 2001 From: Vraja Das Date: Mon, 16 Dec 2024 12:41:51 +0200 Subject: [PATCH 5/5] add tests for tooltip content and trend graph --- ...MrushRelatedKeyphrasesModalContent.test.js | 102 +++++++- ...RelatedKeyphrasesModalContent.test.js.snap | 226 ++++++++++++++++++ 2 files changed, 322 insertions(+), 6 deletions(-) create mode 100644 packages/js/tests/components/__snapshots__/SEMrushRelatedKeyphrasesModalContent.test.js.snap diff --git a/packages/js/tests/components/SEMrushRelatedKeyphrasesModalContent.test.js b/packages/js/tests/components/SEMrushRelatedKeyphrasesModalContent.test.js index 6dad27404a1..5709f00a753 100644 --- a/packages/js/tests/components/SEMrushRelatedKeyphrasesModalContent.test.js +++ b/packages/js/tests/components/SEMrushRelatedKeyphrasesModalContent.test.js @@ -290,24 +290,24 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { rowsWithId = rows.filter( row => row.hasAttribute( "id" ) ); } ); - it( "renders the results and with add button when premium is active", async() => { + it( "should render the results and with add button when premium is active", async() => { const { getAllByRole } = renderResult; const buttons = getAllByRole( "button", { name: /Add/i } ); expect( buttons ).toHaveLength( 10 ); } ); - it( "render the 10 rows for the results", () => { + it( "should render the 10 rows for the results", () => { expect( rowsWithId ).toHaveLength( 10 ); } ); - it( "render the keyphrases", () => { + it( "should render the keyphrases", () => { const expectedKeyphrases = succesfulResponse.results.rows.map( row => row[ 0 ] ); expectedKeyphrases.forEach( ( keyphrase, index ) => { expect( rowsWithId[ index ] ).toHaveTextContent( keyphrase ); } ); } ); - it( "render the search volume", () => { + it( "should render the search volume", () => { const searchVolumeFormat = new Intl.NumberFormat( "en", { notation: "compact", compactDisplay: "short" } ); const expectedSearchVolumes = succesfulResponse.results.rows.map( row => row[ 1 ] ); expectedSearchVolumes.forEach( ( searchVolume, index ) => { @@ -316,21 +316,111 @@ describe( "SEMrushRelatedKeyphrasesModalContent", () => { } ); } ); - it( "render the intent badges", () => { + it( "should render the intent badges", () => { + const variantsIntents = { + i: { + title: "Informational", + description: "The user wants to find an answer to a specific question.", + }, + n: { + title: "Navigational", + description: "The user wants to find a specific page or site.", + }, + c: { + title: "Commercial", + description: "The user wants to investigate brands or services.", + }, + t: { + title: "Transactional", + description: "The user wants to complete an action (conversion).", + }, + }; const expectedIntents = succesfulResponse.results.rows.map( row => row[ 4 ] ); expectedIntents.forEach( ( intentList, index ) => { const intents = intentList.split( "," ).map( ( value ) => [ "i", "n", "t", "c" ][ Number( value ) ] ); + intents.forEach( ( intent ) => { expect( rowsWithId[ index ] ).toHaveTextContent( intent ); + // Check the tooltip content. + expect( rowsWithId[ index ] ).toHaveTextContent( variantsIntents[ intent ].title ); + expect( rowsWithId[ index ] ).toHaveTextContent( variantsIntents[ intent ].description ); } ); } ); } ); - it( "render the keyword difficulty index", () => { + it( "should render the keyword difficulty index", () => { + const difficultyIndex = [ + { + min: 0, + max: 14, + name: "very-easy", + tooltip: { + title: "Very easy", + description: "Your chance to start ranking new pages.", + }, + }, + { + min: 15, + max: 29, + name: "easy", + tooltip: { + title: "Easy", + description: "You will need quality content focused on the keyword’s intent.", + }, + }, + { + min: 30, + max: 49, + name: "possible", + tooltip: { + title: "Possible", + description: "You will need well-structured and unique content.", + }, + }, + { + min: 50, + max: 69, + name: "difficult", + tooltip: { + title: "Difficult", + description: "You will need lots of ref. domains and optimized content.", + }, + }, + { + min: 70, + max: 84, + name: "hard", + tooltip: { + title: "Hard", + description: "You will need lots of high-quality ref. domains and optimized content.", + }, + }, + { + min: 85, + max: 100, + name: "very-hard", + tooltip: { + title: "Very hard", + description: "It will take a lot of on-page SEO, link building, and content promotion efforts.", + }, + }, + ]; const expectedKeywordDifficultyIndexes = succesfulResponse.results.rows.map( row => row[ 3 ] ); expectedKeywordDifficultyIndexes.forEach( ( keywordDifficultyIndex, index ) => { expect( rowsWithId[ index ] ).toHaveTextContent( keywordDifficultyIndex ); + // Check the tooltip content. + const variantDifficultyIndex = difficultyIndex.find( variant => + keywordDifficultyIndex >= variant.min && keywordDifficultyIndex <= variant.max ); + expect( rowsWithId[ index ] ).toHaveTextContent( variantDifficultyIndex.tooltip.title ); + expect( rowsWithId[ index ] ).toHaveTextContent( variantDifficultyIndex.tooltip.description ); } ); } ); + + it( "should render the trends svgs", () => { + const { container } = renderResult; + const trendGraphs = container.querySelectorAll( 'svg[height="24"][width="66"]' ); + expect( trendGraphs ).toHaveLength( 10 ); + expect( trendGraphs ).toMatchSnapshot(); + } ); } ); } ); diff --git a/packages/js/tests/components/__snapshots__/SEMrushRelatedKeyphrasesModalContent.test.js.snap b/packages/js/tests/components/__snapshots__/SEMrushRelatedKeyphrasesModalContent.test.js.snap new file mode 100644 index 00000000000..57f150c96cc --- /dev/null +++ b/packages/js/tests/components/__snapshots__/SEMrushRelatedKeyphrasesModalContent.test.js.snap @@ -0,0 +1,226 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SEMrushRelatedKeyphrasesModalContent RelatedKeyphraseModalContent table content should render the trends svgs 1`] = ` +NodeList [ + , + , + , + , + , + , + , + , + , + , +] +`;