From 1981583816b44afd3ab294d0d3197939a6fbe280 Mon Sep 17 00:00:00 2001 From: Vraja Das Date: Wed, 27 Sep 2023 11:41:36 +0200 Subject: [PATCH 1/9] update name of lifecycle hook to remove warnings in tests --- .../src/ReplacementVariableEditorStandalone.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/replacement-variable-editor/src/ReplacementVariableEditorStandalone.js b/packages/replacement-variable-editor/src/ReplacementVariableEditorStandalone.js index 9d5fff2dbef..fe48fa0ecde 100644 --- a/packages/replacement-variable-editor/src/ReplacementVariableEditorStandalone.js +++ b/packages/replacement-variable-editor/src/ReplacementVariableEditorStandalone.js @@ -1,3 +1,4 @@ +/* eslint-disable camelcase */ // External dependencies. import React from "react"; import Editor from "@draft-js-plugins/editor"; @@ -515,7 +516,7 @@ class ReplacementVariableEditorStandalone extends React.Component { * * @returns {void} */ - componentWillReceiveProps( nextProps ) { + UNSAFE_componentWillReceiveProps( nextProps ) { const { content, replacementVariables, recommendedReplacementVariables } = this.props; const { searchValue } = this.state; const nextState = {}; From 01c15384f08f405956cbcc6597389e4680971573 Mon Sep 17 00:00:00 2001 From: Vraja Das Date: Wed, 27 Sep 2023 11:42:46 +0200 Subject: [PATCH 2/9] migrate replacement variable edito standalone snapshot --- .../tests/ReplacementVariableEditorTest.js | 247 +++++++++--------- .../ReplacementVariableEditorTest.js.snap | 63 +++++ 2 files changed, 192 insertions(+), 118 deletions(-) create mode 100644 packages/replacement-variable-editor/tests/__snapshots__/ReplacementVariableEditorTest.js.snap diff --git a/packages/replacement-variable-editor/tests/ReplacementVariableEditorTest.js b/packages/replacement-variable-editor/tests/ReplacementVariableEditorTest.js index 65e6bb3f49f..370a15a08e7 100644 --- a/packages/replacement-variable-editor/tests/ReplacementVariableEditorTest.js +++ b/packages/replacement-variable-editor/tests/ReplacementVariableEditorTest.js @@ -1,127 +1,138 @@ -/* eslint-disable react/jsx-no-bind */ -// import ReplacementVariableEditorStandalone, { ReplacementVariableEditorStandaloneInnerComponent } -// from "../src/ReplacementVariableEditorStandalone"; -// import React from "react"; +import React from "react"; +import { render } from "@testing-library/react"; +import ReplacementVariableEditorStandalone, { ReplacementVariableEditorStandaloneInnerComponent } + from "../src/ReplacementVariableEditorStandalone"; -// jest.mock( "draft-js/lib/generateRandomKey", () => () => { -// let randomKey = global._testDraftJSRandomNumber; +jest.mock( "draft-js/lib/generateRandomKey", () => () => { + let randomKey = global._testDraftJSRandomNumber; -// if ( ! randomKey ) { -// randomKey = 0; -// } + if ( ! randomKey ) { + randomKey = 0; + } -// randomKey++; -// global._testDraftJSRandomNumber = randomKey; + randomKey++; + global._testDraftJSRandomNumber = randomKey; -// return randomKey + ""; -// } ); + return randomKey + ""; +} ); -describe( "ReplacementVariableEditor", () => { +describe( "ReplacementVariableEditorStandalone", () => { it( "wraps a Draft.js editor instance", () => { - + const { container } = render( + {} } + ariaLabelledBy="id" + fieldId="test-field-id" + theme={ { isRtl: "false" } } + /> + ); + + expect( container ).toMatchSnapshot(); } ); } ); -// describe( "suggestionsFilter", () => { -// let searchValue, replacementVariables, suggestions, replacementVariablesEditor, expected; - -// beforeEach( () => { -// searchValue = "cat"; -// replacementVariables = [ -// { -// name: "category", -// label: "Category", -// value: "uncategorized", -// }, -// { -// name: "primary_category", -// label: "Primary category", -// value: "uncategorized", -// }, -// { -// name: "category_description", -// label: "Category description", -// value: "uncategorized", -// }, -// { -// name: "date", -// label: "Date", -// value: "May 30, 2018", -// }, -// ]; - -// const props = { -// replacementVariables, -// content: "Dummy content", -// onChange: () => {}, -// ariaLabelledBy: "id", -// theme: { isRtl: false }, -// }; - -// replacementVariablesEditor = new ReplacementVariableEditorStandaloneInnerComponent( props ); - -// suggestions = replacementVariablesEditor.mapReplacementVariablesToSuggestions( props.replacementVariables ); - -// expected = [ -// { -// replaceName: "category", -// label: "Category", -// name: "Category", -// value: "uncategorized", -// }, -// { -// replaceName: "category_description", -// label: "Category description", -// name: "Category description", -// value: "uncategorized", -// }, -// ]; -// } ); - -// it( "Replacement variables are correctly mapped to suggestions by mapReplacementVariablesToSuggestions.", () => { -// expected = [ -// { -// replaceName: "category", -// label: "Category", -// name: "Category", -// value: "uncategorized", -// }, -// { -// replaceName: "primary_category", -// label: "Primary category", -// name: "Primary category", -// value: "uncategorized", -// }, -// { -// replaceName: "category_description", -// label: "Category description", -// name: "Category description", -// value: "uncategorized", -// }, -// { -// replaceName: "date", -// label: "Date", -// name: "Date", -// value: "May 30, 2018", -// }, -// ]; - -// const actual = replacementVariablesEditor.mapReplacementVariablesToSuggestions( replacementVariables ); - -// expect( actual ).toEqual( expected ); -// } ); - -// it( "Returns only the replacement variables where the start of the name matches with the search value.", () => { -// const actual = replacementVariablesEditor.suggestionsFilter( searchValue, suggestions ); - -// expect( actual ).toEqual( expected ); -// } ); - -// it( "Returns the matching replacement variables, regardless of upper- or lowercase in the search value.", () => { -// searchValue = "Cat"; - -// const actual = replacementVariablesEditor.suggestionsFilter( searchValue, suggestions ); - -// expect( actual ).toEqual( expected ); -// } ); -// } ); +describe( "suggestionsFilter", () => { + let searchValue, replacementVariables, suggestions, replacementVariablesEditor, expected; + + beforeEach( () => { + searchValue = "cat"; + replacementVariables = [ + { + name: "category", + label: "Category", + value: "uncategorized", + }, + { + name: "primary_category", + label: "Primary category", + value: "uncategorized", + }, + { + name: "category_description", + label: "Category description", + value: "uncategorized", + }, + { + name: "date", + label: "Date", + value: "May 30, 2018", + }, + ]; + + const props = { + replacementVariables, + content: "Dummy content", + onChange: () => {}, + ariaLabelledBy: "id", + theme: { isRtl: false }, + }; + suggestions = [ + { name: "cat", value: "meow" }, + ]; + replacementVariablesEditor = new ReplacementVariableEditorStandaloneInnerComponent( props ); + suggestions = replacementVariablesEditor.mapReplacementVariablesToSuggestions( props.replacementVariables ); + expected = [ + { + replaceName: "category", + label: "Category", + name: "Category", + value: "uncategorized", + }, + { + replaceName: "category_description", + label: "Category description", + name: "Category description", + value: "uncategorized", + }, + ]; + } ); + + it( "Replacement variables are correctly mapped to suggestions by mapReplacementVariablesToSuggestions.", () => { + expected = [ + { + replaceName: "category", + label: "Category", + name: "Category", + value: "uncategorized", + }, + { + replaceName: "primary_category", + label: "Primary category", + name: "Primary category", + value: "uncategorized", + }, + { + replaceName: "category_description", + label: "Category description", + name: "Category description", + value: "uncategorized", + }, + { + replaceName: "date", + label: "Date", + name: "Date", + value: "May 30, 2018", + }, + ]; + + const actual = replacementVariablesEditor.mapReplacementVariablesToSuggestions( replacementVariables ); + + expect( actual ).toEqual( expected ); + } ); + + it( "Returns only the replacement variables where the start of the name matches with the search value.", () => { + const actual = replacementVariablesEditor.suggestionsFilter( searchValue, suggestions ); + + expect( actual ).toEqual( expected ); + } ); + + it( "Returns the matching replacement variables, regardless of upper- or lowercase in the search value.", () => { + searchValue = "Cat"; + + const actual = replacementVariablesEditor.suggestionsFilter( searchValue, suggestions ); + + expect( actual ).toEqual( expected ); + } ); +} ); diff --git a/packages/replacement-variable-editor/tests/__snapshots__/ReplacementVariableEditorTest.js.snap b/packages/replacement-variable-editor/tests/__snapshots__/ReplacementVariableEditorTest.js.snap new file mode 100644 index 00000000000..c6d2e7dded9 --- /dev/null +++ b/packages/replacement-variable-editor/tests/__snapshots__/ReplacementVariableEditorTest.js.snap @@ -0,0 +1,63 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ReplacementVariableEditorStandalone wraps a Draft.js editor instance 1`] = ` +.c0 div { + z-index: 10995; +} + +.c0 > div { + max-height: 450px; + overflow-y: auto; +} + +
+
+
+ +
+
+
+
+`; From 00de594fe136c1b6e9af0d5de959d5abdd82c9bb Mon Sep 17 00:00:00 2001 From: Vraja Das Date: Wed, 27 Sep 2023 13:52:04 +0200 Subject: [PATCH 3/9] add test utils --- .../tests/ReplacementVariableEditorTest.js | 3 ++- packages/replacement-variable-editor/tests/test-utils.js | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 packages/replacement-variable-editor/tests/test-utils.js diff --git a/packages/replacement-variable-editor/tests/ReplacementVariableEditorTest.js b/packages/replacement-variable-editor/tests/ReplacementVariableEditorTest.js index 370a15a08e7..c6cd4e657ad 100644 --- a/packages/replacement-variable-editor/tests/ReplacementVariableEditorTest.js +++ b/packages/replacement-variable-editor/tests/ReplacementVariableEditorTest.js @@ -1,5 +1,5 @@ import React from "react"; -import { render } from "@testing-library/react"; +import { render } from "./test-utils"; import ReplacementVariableEditorStandalone, { ReplacementVariableEditorStandaloneInnerComponent } from "../src/ReplacementVariableEditorStandalone"; @@ -22,6 +22,7 @@ describe( "ReplacementVariableEditorStandalone", () => { {} } ariaLabelledBy="id" fieldId="test-field-id" diff --git a/packages/replacement-variable-editor/tests/test-utils.js b/packages/replacement-variable-editor/tests/test-utils.js new file mode 100644 index 00000000000..9c7f86fb46f --- /dev/null +++ b/packages/replacement-variable-editor/tests/test-utils.js @@ -0,0 +1 @@ +export * from "@testing-library/react"; From 6a0d21950193d7873317d6ec106ec8c5ae0c5a55 Mon Sep 17 00:00:00 2001 From: Vraja Das Date: Wed, 27 Sep 2023 13:52:33 +0200 Subject: [PATCH 4/9] update dependencies and add eslint dependencies --- packages/replacement-variable-editor/package.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/replacement-variable-editor/package.json b/packages/replacement-variable-editor/package.json index 3c6959eb517..f594b222d9e 100644 --- a/packages/replacement-variable-editor/package.json +++ b/packages/replacement-variable-editor/package.json @@ -48,9 +48,14 @@ "styled-components": "^5.3.6" }, "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", + "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", "jest-styled-components": "^7.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", From 8975416430b6eb9d8f7ea2cbedc92831abc06e25 Mon Sep 17 00:00:00 2001 From: Vraja Das Date: Wed, 27 Sep 2023 13:53:01 +0200 Subject: [PATCH 5/9] add eslintrc file to replacement variable editor package --- .../replacement-variable-editor/.eslintrc.js | 60 +++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 packages/replacement-variable-editor/.eslintrc.js diff --git a/packages/replacement-variable-editor/.eslintrc.js b/packages/replacement-variable-editor/.eslintrc.js new file mode 100644 index 00000000000..413b334585e --- /dev/null +++ b/packages/replacement-variable-editor/.eslintrc.js @@ -0,0 +1,60 @@ +module.exports = { + root: true, + "extends": [ + "yoast", + ], + settings: { + react: { + version: "detect", + }, + }, + parserOptions: { + ecmaVersion: 2020, + sourceType: "module", + }, + ignorePatterns: [ + "/build/", + ], + 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: { + complexity: [ 1, 6 ], + // A wrapping label is not necessary when there already is an htmlFor attribute. + "jsx-a11y/label-has-for": [ "error", { required: "id" } ], + "require-jsdoc": 1, + "react/button-has-type": 1, + "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/jsx-no-target-blank": 1, + "react/require-default-props": 1, + "react/forbid-foreign-prop-types": 1, + }, + }, + ], +}; From 7a2c11dfaa75ccf4a10e0f5c15af1d907da1efb0 Mon Sep 17 00:00:00 2001 From: Vraja Das Date: Wed, 27 Sep 2023 13:53:19 +0200 Subject: [PATCH 6/9] clean up eslint rules from eslintrc in root --- .eslintrc | 5 ----- 1 file changed, 5 deletions(-) diff --git a/.eslintrc b/.eslintrc index 6029447ab00..862a606245d 100644 --- a/.eslintrc +++ b/.eslintrc @@ -36,11 +36,6 @@ overrides: react/default-props-match-prop-types: 1 react/no-unused-prop-types: 1 require-jsdoc: 1 - - files: - - "packages/replacement-variable-editor/**/*.js" - rules: - react/jsx-no-bind: 1 - react/require-default-props: 1 - files: - "packages/search-metadata-previews/**/*.js" rules: From 98d26d2257933d1eb7ca3aa4fd45aff554dd6213 Mon Sep 17 00:00:00 2001 From: Vraja Das Date: Wed, 27 Sep 2023 14:02:28 +0200 Subject: [PATCH 7/9] cleanup rules --- packages/replacement-variable-editor/.eslintrc.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/replacement-variable-editor/.eslintrc.js b/packages/replacement-variable-editor/.eslintrc.js index 413b334585e..2ee8d5dc8c4 100644 --- a/packages/replacement-variable-editor/.eslintrc.js +++ b/packages/replacement-variable-editor/.eslintrc.js @@ -41,19 +41,8 @@ module.exports = { { files: [ "**/*.js" ], rules: { - complexity: [ 1, 6 ], - // A wrapping label is not necessary when there already is an htmlFor attribute. - "jsx-a11y/label-has-for": [ "error", { required: "id" } ], - "require-jsdoc": 1, - "react/button-has-type": 1, - "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/jsx-no-target-blank": 1, "react/require-default-props": 1, - "react/forbid-foreign-prop-types": 1, }, }, ], From 6beb4a8e12669cddb411c36e8abb7168fb470ec5 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Mon, 2 Oct 2023 10:36:36 +0200 Subject: [PATCH 8/9] ESlint: ignore 2 more "root" folders --- packages/replacement-variable-editor/.eslintrc.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/replacement-variable-editor/.eslintrc.js b/packages/replacement-variable-editor/.eslintrc.js index 2ee8d5dc8c4..32fd510f329 100644 --- a/packages/replacement-variable-editor/.eslintrc.js +++ b/packages/replacement-variable-editor/.eslintrc.js @@ -14,6 +14,8 @@ module.exports = { }, ignorePatterns: [ "/build/", + "/coverage/", + "/dist/", ], rules: { "no-prototype-builtins": 0, From 3cc1c6e9376240fecdfc98ba0981f55284d70481 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Mon, 2 Oct 2023 10:36:53 +0200 Subject: [PATCH 9/9] Change tabs to spaces for unity --- packages/replacement-variable-editor/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/replacement-variable-editor/package.json b/packages/replacement-variable-editor/package.json index f594b222d9e..af2060bdcdf 100644 --- a/packages/replacement-variable-editor/package.json +++ b/packages/replacement-variable-editor/package.json @@ -58,8 +58,8 @@ "eslint-plugin-react": "^7.29.4", "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", + "react-test-renderer": "^18.2.0" }, "peerDependencies": { "@draft-js-plugins/mention": "^5.0.0",