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: diff --git a/packages/replacement-variable-editor/.eslintrc.js b/packages/replacement-variable-editor/.eslintrc.js new file mode 100644 index 00000000000..32fd510f329 --- /dev/null +++ b/packages/replacement-variable-editor/.eslintrc.js @@ -0,0 +1,51 @@ +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: { + "react/jsx-no-bind": 1, + "react/require-default-props": 1, + }, + }, + ], +}; diff --git a/packages/replacement-variable-editor/package.json b/packages/replacement-variable-editor/package.json index 3c6959eb517..af2060bdcdf 100644 --- a/packages/replacement-variable-editor/package.json +++ b/packages/replacement-variable-editor/package.json @@ -48,13 +48,18 @@ "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", - "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", 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 = {}; diff --git a/packages/replacement-variable-editor/tests/ReplacementVariableEditorTest.js b/packages/replacement-variable-editor/tests/ReplacementVariableEditorTest.js index 65e6bb3f49f..c6cd4e657ad 100644 --- a/packages/replacement-variable-editor/tests/ReplacementVariableEditorTest.js +++ b/packages/replacement-variable-editor/tests/ReplacementVariableEditorTest.js @@ -1,127 +1,139 @@ -/* eslint-disable react/jsx-no-bind */ -// import ReplacementVariableEditorStandalone, { ReplacementVariableEditorStandaloneInnerComponent } -// from "../src/ReplacementVariableEditorStandalone"; -// import React from "react"; +import React from "react"; +import { render } from "./test-utils"; +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; +} + +
+
+
+ +
+
+
+
+`; 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";