Merge pull request #20709 from Yoast/refactor_snippeteditor_tests

Refactor snippeteditor tests

.eslintrc

@@ -36,14 +36,6 @@ overrides:
       react/default-props-match-prop-types: 1
       react/no-unused-prop-types: 1
       require-jsdoc: 1
-  - files:
-      - "packages/search-metadata-previews/**/*.js"
-    rules:
-      react/jsx-no-bind: 1
-      react/no-unused-state: 1
-      react/no-access-state-in-setstate: 1
-      react/require-default-props: 1
-      react/default-props-match-prop-types: 1
   - files:
       - "packages/yoastseo/**/*.js"
     settings:

packages/search-metadata-previews/.eslintrc.js

@@ -0,0 +1,56 @@
+module.exports = {
+	root: true,
+	"extends": [
+		"yoast",
+	],
+	settings: {
+		react: {
+			version: "detect",
+		},
+	},
+	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: "module",
+	},
+	ignorePatterns: [
+		"/build/",
+		"/coverage/",
+		"/dist/",
+	],
+	rules: {
+		"no-prototype-builtins": 0,
+		"comma-dangle": [
+			"error",
+			{
+				arrays: "always-multiline",
+				objects: "always-multiline",
+				imports: "always-multiline",
+				exports: "always-multiline",
+				functions: "never",
+			},
+		],
+	},
+	overrides: [
+		{
+			files: [ "tests/**/*.js" ],
+			env: {
+				jest: true,
+			},
+			rules: {
+				"no-restricted-imports": 0,
+			},
+		},
+		{
+			files: [ "**/*.js" ],
+			rules: {
+				// A wrapping label is not necessary when there already is an htmlFor attribute.
+				"react/default-props-match-prop-types": 1,
+				"react/no-unused-prop-types": 1,
+				"react/no-access-state-in-setstate": 1,
+				"react/no-unused-state": 1,
+				"react/jsx-no-bind": 1,
+				"react/require-default-props": 1,
+			},
+		},
+	],
+};

packages/search-metadata-previews/package.json

@@ -30,18 +30,23 @@
     "yoastseo": "^1.91.2"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@yoast/browserslist-config": "^1.2.2",
+    "eslint": "^7.32.0",
+    "eslint-config-yoast": "^6.0.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.29.4",
     "browserslist": "^4.7.3",
     "jest-styled-components": "^7.0.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0"
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {},
   "jest": {
+    "testEnvironment": "jest-environment-jsdom",
     "testURL": "http://localhost",
     "testRegex": ".*Test.js$",
     "transform": {

packages/search-metadata-previews/src/snippet-editor/SnippetEditor.js

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 // External dependencies.
 import styled from "styled-components";
 import React from "react";
@@ -168,7 +169,7 @@ class SnippetEditor extends React.Component {
 	 * @param {Object} nextProps The new props.
 	 * @returns {void}
 	 */
-	componentWillReceiveProps( nextProps ) {
+	UNSAFE_componentWillReceiveProps( nextProps ) {
 		// Only set a new state when the data is dirty.
 		if ( this.shallowCompareData( this.props, nextProps ) ) {
 			const data = this.mapDataToMeasurements( nextProps.data, nextProps.replacementVariables );

packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 // External dependencies.
 import React, { PureComponent } from "react";
 import styled from "styled-components";
@@ -697,7 +698,7 @@ export default class SnippetPreview extends PureComponent {
 	 *
 	 * @returns {void}
 	 */
-	componentWillReceiveProps( nextProps ) {
+	UNSAFE_componentWillReceiveProps( nextProps ) {
 		const nextState = {};
 
 		if ( this.props.title !== nextProps.title ) {

packages/search-metadata-previews/tests/HelpTextWrapperTest.js

@@ -1,22 +1,21 @@
 /* External dependencies */
 import React from "react";
-import renderer from "react-test-renderer";
+import { fireEvent, render, screen } from "./test-utils";
 
 /* Internal dependencies */
 import HelpTextWrapper from "../src/snippet-preview/HelpTextWrapper";
 
 
 describe( "HelpTextWrapper", () => {
 	it( "matches the snapshot by default", () => {
-		const component = renderer.create(
-			<HelpTextWrapper helpTextButtonLabel="Open help" />
-		);
-
-		const tree = component.toJSON();
-		expect( tree ).toMatchSnapshot();
+		const { container } = render( <HelpTextWrapper helpTextButtonLabel="Open help" /> );
+		expect( container ).toMatchSnapshot();
 	} );
 
-	it( "matches the snapshot when the help text button is focused", () => {
+	it( "matches the snapshot when the help text button is focused", async() => {
+		const { container } = render( <HelpTextWrapper helpTextButtonLabel="Open help" /> );
 
+		fireEvent.click( screen.getByLabelText( "Open help" ) );
+		expect( container ).toMatchSnapshot();
 	} );
 } );

packages/search-metadata-previews/tests/SnippetEditorTest.js

@@ -1,43 +1,65 @@
-// import SnippetEditor from "../src/snippet-editor/SnippetEditor";
-// import React from "react";
-// eslint-disable-next-line import/named -- this concerns a mock
-import { focus } from "@yoast/replacement-variable-editor";
+import React from "react";
+import SnippetEditor from "../src/snippet-editor/SnippetEditor";
+import { fireEvent, render, screen } from "./test-utils";
 
+const defaultData = {
+	title: "Test title",
+	slug: "test-slug",
+	description: "Test description, %%replacement_variable%%",
+};
 
-describe( "SnippetEditor", () => {
-	it( "closes when calling close()", () => {
-		focus.mockClear();
-	} );
+const defaultArgs = {
+	baseUrl: "http://example.org/",
+	siteName: "Test site name",
+	data: defaultData,
+	isOpen: true,
+	onChange: jest.fn(),
+};
 
-	it( "highlights the active ReplacementVariableEditor when calling setFieldFocus", () => {
-		focus.mockClear();
+describe( "SnippetEditor", () => {
+	it( "Mobile mode", async() => {
+		const { container } = render( <SnippetEditor { ...defaultArgs } /> );
+		const desktopRadioInput = screen.getByLabelText( "Desktop result" );
+		const mobileRadioInput = screen.getByLabelText( "Mobile result" );
+		expect( desktopRadioInput ).not.toBeChecked();
+		expect( mobileRadioInput ).toBeChecked();
+		expect( container ).toMatchSnapshot();
 	} );
+	it( "Desktop mode and should switch to mobile", async() => {
+		const { container } = render( <SnippetEditor { ...defaultArgs } mode="desktop" /> );
+		const desktopRadioInput = screen.getByLabelText( "Desktop result" );
+		const mobileRadioInput = screen.getByLabelText( "Mobile result" );
+		expect( desktopRadioInput ).toBeChecked();
+		expect( mobileRadioInput ).not.toBeChecked();
+		expect( container ).toMatchSnapshot();
 
-	it( "switches modes when changing mode switcher input", () => {
-
+		fireEvent.click( mobileRadioInput );
+		expect( defaultArgs.onChange ).toHaveBeenCalledWith( "mode", "mobile" );
 	} );
 
-	describe( "shallowCompareData", () => {
-		it( "returns false when there is no new data", () => {
-
-		} );
-
-		it( "returns true when one replacement variable has changed", () => {
-
-		} );
-
-		it( "returns true when multiple data points have changed", () => {
-		} );
+	it( "Without close snippet editor button", async() => {
+		render( <SnippetEditor { ...defaultArgs } showCloseButton={ false } /> );
+		expect( screen.queryByText( "Edit snippet" ) ).not.toBeInTheDocument();
 	} );
-	describe( "mapDataToMeasurements", () => {
-		it( "returns the filtered SEO title without separator and site title", () => {
 
+	describe( "Snippet editor defaults", () => {
+		beforeEach( () => {
+			render( <SnippetEditor { ...defaultArgs } /> );
 		} );
-		it( "returns the correct url: baseURL + slug", () => {
-
+		it( "Close snippet editor with button", async() => {
+			const openSnippetEditorButton = screen.getByText( "Edit snippet" );
+			expect( openSnippetEditorButton ).toBeInTheDocument();
+			fireEvent.click( openSnippetEditorButton );
+			const closeSnippetEditorButton = screen.getByText( "Close snippet editor" );
+			expect( closeSnippetEditorButton ).toBeInTheDocument();
+			fireEvent.click( closeSnippetEditorButton );
+			expect( closeSnippetEditorButton ).not.toBeInTheDocument();
 		} );
-		it( "returns the description with multiple spaces stripped", () => {
 
+		it( "should switch to desktop mode", () => {
+			const desktopRadioInput = screen.getByLabelText( "Desktop result" );
+			fireEvent.click( desktopRadioInput );
+			expect( defaultArgs.onChange ).toHaveBeenCalledWith( "mode", "desktop" );
 		} );
 	} );
 } );

packages/search-metadata-previews/tests/SnippetPreviewTest.js

@@ -1,40 +1,89 @@
-
-// import React from "react";
-// import { MODE_DESKTOP, MODE_MOBILE } from "../src/snippet-preview/constants";
-// import SnippetPreview from "../src/snippet-preview/SnippetPreview";
+import React from "react";
+import { MODE_DESKTOP, MODE_MOBILE } from "../src/snippet-preview/constants";
+import SnippetPreview from "../src/snippet-preview/SnippetPreview";
+import { render, screen } from "./test-utils";
+
+const baseArgs = {
+	description: "Description",
+	siteName: "Test site name",
+	title: "Title",
+	onMouseUp: jest.fn(),
+};
 
 describe( "SnippetPreview", () => {
 	describe( "breadcrumbs", () => {
 		it( "properly renders multiple breadcrumbs in mobile view", () => {
-
+			render( <SnippetPreview { ...baseArgs } url={ "http://www.google.nl/about" } mode={ MODE_MOBILE } /> );
+			const baseURL = screen.getByText( "www.google.nl" );
+			const subFolder = screen.getByText( "› about" );
+			expect( baseURL ).toBeInTheDocument();
+			expect( subFolder ).toBeInTheDocument();
 		} );
 
 		it( "doesn't percent encode characters that are percent encoded by node's url.parse in mobile view", () => {
-
+			render( <SnippetPreview { ...baseArgs } url={ "http://www.google.nl/`^ {}" } mode={ MODE_MOBILE } /> );
+			const baseURL = screen.getByText( "www.google.nl" );
+			const subFolder = screen.getByText( "› `^ {}" );
+			expect( baseURL ).toBeInTheDocument();
+			expect( subFolder ).toBeInTheDocument();
 		} );
 
 		it( "properly renders multiple breadcrumbs in desktop view", () => {
-
+			render( <SnippetPreview { ...baseArgs } url={ "http://www.google.nl/about" } mode={ MODE_DESKTOP } /> );
+			const baseURL = screen.getByText( "www.google.nl" );
+			const subFolder = screen.getByText( "› about" );
+			expect( baseURL ).toBeInTheDocument();
+			expect( subFolder ).toBeInTheDocument();
 		} );
 
 		it( "properly renders multiple breadcrumbs in desktop view without a trailing slash", () => {
-
+			render( <SnippetPreview { ...baseArgs } url={ "http://www.google.nl/about/" } mode={ MODE_DESKTOP } /> );
+			const baseURL = screen.getByText( "www.google.nl" );
+			const subFolder = screen.getByText( "› about" );
+			const subFolderWithTrailingSlash = screen.queryByText( "› about/" );
+			expect( baseURL ).toBeInTheDocument();
+			expect( subFolder ).toBeInTheDocument();
+			expect( subFolderWithTrailingSlash ).not.toBeInTheDocument();
 		} );
 
 		it( "strips http protocol in mobile view", () => {
-
+			render( <SnippetPreview { ...baseArgs } url={ "http://www.google.nl/subdir" } mode={ MODE_MOBILE } /> );
+			const baseURL = screen.getByText( "www.google.nl" );
+			const baseUrlWithProtocol = screen.queryByText( "http://www.google.nl" );
+			const subFolder = screen.getByText( "› subdir" );
+			expect( baseURL ).toBeInTheDocument();
+			expect( baseUrlWithProtocol ).not.toBeInTheDocument();
+			expect( subFolder ).toBeInTheDocument();
 		} );
 
 		it( "strips https protocol in mobile view", () => {
-
+			render( <SnippetPreview { ...baseArgs } url={ "https://www.google.nl/subdir" } mode={ MODE_MOBILE } /> );
+			const baseURL = screen.getByText( "www.google.nl" );
+			const baseUrlWithProtocol = screen.queryByText( "https://www.google.nl" );
+			const subFolder = screen.getByText( "› subdir" );
+			expect( baseURL ).toBeInTheDocument();
+			expect( baseUrlWithProtocol ).not.toBeInTheDocument();
+			expect( subFolder ).toBeInTheDocument();
 		} );
 
 		it( "strips http protocol in desktop view", () => {
-
+			render( <SnippetPreview { ...baseArgs } url={ "http://www.google.nl/subdir" } mode={ MODE_DESKTOP } /> );
+			const baseURL = screen.getByText( "www.google.nl" );
+			const baseUrlWithProtocol = screen.queryByText( "http://www.google.nl" );
+			const subFolder = screen.getByText( "› subdir" );
+			expect( baseURL ).toBeInTheDocument();
+			expect( baseUrlWithProtocol ).not.toBeInTheDocument();
+			expect( subFolder ).toBeInTheDocument();
 		} );
 
 		it( "strips https protocol in desktop view", () => {
-
+			render( <SnippetPreview { ...baseArgs } url={ "https://www.google.nl/subdir" } mode={ MODE_DESKTOP } /> );
+			const baseURL = screen.getByText( "www.google.nl" );
+			const baseUrlWithProtocol = screen.queryByText( "https://www.google.nl" );
+			const subFolder = screen.getByText( "› subdir" );
+			expect( baseURL ).toBeInTheDocument();
+			expect( baseUrlWithProtocol ).not.toBeInTheDocument();
+			expect( subFolder ).toBeInTheDocument();
 		} );
 	} );
 } );