migrating counter-plugin (draft-js-plugins#1476)

* removing class components and migrating tests from chai/enzyme to jest/RTL * update mocha to support --exlude flag and rename jest files to .test Co-authored-by: Gabriel <[email protected]>
ynnelson · Sep 14, 2020 · ad77f02 · ad77f02
1 parent dbe3b90
commit ad77f02
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 205 deletions.
diff --git a/...-plugin/src/CharCounter/__test__/index.js → ...in/src/CharCounter/__test__/index.test.js b/...-plugin/src/CharCounter/__test__/index.js → ...in/src/CharCounter/__test__/index.test.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { expect } from 'chai';
+import { screen, render } from '@testing-library/react';
 import { EditorState, ContentState } from 'draft-js';
 import createCounterPlugin from '../../index';
 
@@ -23,8 +22,8 @@ describe('CounterPlugin Character Counter', () => {
     });
     const { CharCounter } = counterPlugin;
 
-    const result = mount(<CharCounter />);
-    expect(result).to.have.text('12');
+    render(<CharCounter />);
+    expect(screen.getByText('12')).toBeInTheDocument();
   });
 
   it('instantiates plugin and counts 3 unicode characters', () => {
@@ -34,7 +33,7 @@ describe('CounterPlugin Character Counter', () => {
     });
     const { CharCounter } = counterPlugin;
 
-    const result = mount(<CharCounter />);
-    expect(result).to.have.text('3');
+    render(<CharCounter />);
+    expect(screen.getByText('3')).toBeInTheDocument();
   });
 });
diff --git a/draft-js-counter-plugin/src/CharCounter/index.js b/draft-js-counter-plugin/src/CharCounter/index.js
@@ -1,35 +1,34 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import punycode from 'punycode';
 
-class CharCounter extends Component {
-  static propTypes = {
-    theme: PropTypes.any,
-  };
-
-  getCharCount(editorState) {
+const CharCounter = ({ theme = {}, className, store, limit }) => {
+  const getCharCount = editorState => {
     const decodeUnicode = str => punycode.ucs2.decode(str); // func to handle unicode characters
     const plainText = editorState.getCurrentContent().getPlainText('');
     const regex = /(?:\r\n|\r|\n)/g; // new line, carriage return, line feed
     const cleanString = plainText.replace(regex, '').trim(); // replace above characters w/ nothing
     return decodeUnicode(cleanString).length;
-  }
+  };
 
-  getClassNames(count, limit) {
-    const { theme = {}, className } = this.props;
+  const getClassNames = count => {
     const defaultStyle = clsx(theme.counter, className);
     const overLimitStyle = clsx(theme.counterOverLimit, className);
     return count > limit ? overLimitStyle : defaultStyle;
-  }
+  };
+
+  const count = getCharCount(store.getEditorState());
+  const classNames = getClassNames(count);
 
-  render() {
-    const { store, limit } = this.props;
-    const count = this.getCharCount(store.getEditorState());
-    const classNames = this.getClassNames(count, limit);
+  return <span className={classNames}>{count}</span>;
+};
 
-    return <span className={classNames}>{count}</span>;
-  }
-}
+CharCounter.propTypes = {
+  theme: PropTypes.any,
+  className: PropTypes.any,
+  store: PropTypes.any,
+  limit: PropTypes.any,
+};
 
 export default CharCounter;
diff --git a/...lugin/src/CustomCounter/__test__/index.js → .../src/CustomCounter/__test__/index.test.js b/...lugin/src/CustomCounter/__test__/index.js → .../src/CustomCounter/__test__/index.test.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { expect } from 'chai';
+import { screen, render } from '@testing-library/react';
 import { EditorState, ContentState } from 'draft-js';
 import createCounterPlugin from '../../index';
 
@@ -30,8 +29,8 @@ describe('CounterPlugin Line Counter', () => {
       return wordArray ? wordArray.length : 0;
     };
 
-    const result = mount(<CustomCounter countFunction={countFunction} />);
-    expect(result).to.have.text('5');
+    render(<CustomCounter countFunction={countFunction} />);
+    expect(screen.getByText('5')).toBeInTheDocument();
   });
 
   it('instantiates plugin with number counter and counts 6 number characters', () => {
@@ -48,7 +47,7 @@ describe('CounterPlugin Line Counter', () => {
       return numArray ? numArray.length : 0;
     };
 
-    const result = mount(<CustomCounter countFunction={countFunction} />);
-    expect(result).to.have.text('6');
+    render(<CustomCounter countFunction={countFunction} />);
+    expect(screen.getByText('6')).toBeInTheDocument();
   });
 });
diff --git a/draft-js-counter-plugin/src/CustomCounter/index.js b/draft-js-counter-plugin/src/CustomCounter/index.js
@@ -1,32 +1,36 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-class CustomCounter extends Component {
-  static propTypes = {
-    theme: PropTypes.any,
-    limit: PropTypes.number,
-    countFunction: PropTypes.func.isRequired,
-  };
-
-  getClassNames(count, limit) {
-    const { theme = {}, className } = this.props;
+const CustomCounter = ({
+  store,
+  limit,
+  countFunction,
+  theme = {},
+  className,
+}) => {
+  const getClassNames = count => {
     const defaultStyle = clsx(theme.counter, className);
     const overLimitStyle = clsx(theme.counterOverLimit, className);
     return count > limit ? overLimitStyle : defaultStyle;
-  }
+  };
+
+  const plainText = store
+    .getEditorState()
+    .getCurrentContent()
+    .getPlainText('');
+  const count = countFunction(plainText);
+  const classNames = getClassNames(count, limit);
 
-  render() {
-    const { store, limit, countFunction } = this.props;
-    const plainText = store
-      .getEditorState()
-      .getCurrentContent()
-      .getPlainText('');
-    const count = countFunction(plainText);
-    const classNames = this.getClassNames(count, limit);
+  return <span className={classNames}>{count}</span>;
+};
 
-    return <span className={classNames}>{count}</span>;
-  }
-}
+CustomCounter.propTypes = {
+  theme: PropTypes.any,
+  store: PropTypes.any,
+  className: PropTypes.any,
+  limit: PropTypes.number,
+  countFunction: PropTypes.func.isRequired,
+};
 
 export default CustomCounter;
diff --git a/...-plugin/src/LineCounter/__test__/index.js → ...n/src/LineCounter/__test__/index.test.jsx b/...-plugin/src/LineCounter/__test__/index.js → ...n/src/LineCounter/__test__/index.test.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { expect } from 'chai';
+import { screen, render } from '@testing-library/react';
 import { EditorState, ContentState } from 'draft-js';
 import createCounterPlugin from '../../index';
 
@@ -23,7 +22,7 @@ describe('CounterPlugin Line Counter', () => {
     });
     const { LineCounter } = counterPlugin;
 
-    const result = mount(<LineCounter />);
-    expect(result).to.have.text('3');
+    render(<LineCounter />);
+    expect(screen.getByText('3')).toBeInTheDocument();
   });
 });
diff --git a/draft-js-counter-plugin/src/LineCounter/index.js b/draft-js-counter-plugin/src/LineCounter/index.js
@@ -1,32 +1,30 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-class LineCounter extends Component {
-  static propTypes = {
-    theme: PropTypes.any,
-    limit: PropTypes.number,
-  };
-
-  getLineCount(editorState) {
+const LineCounter = ({ store, limit, theme = {}, className }) => {
+  const getLineCount = editorState => {
     const blockArray = editorState.getCurrentContent().getBlocksAsArray();
     return blockArray ? blockArray.length : null;
-  }
+  };
 
-  getClassNames(count, limit) {
-    const { theme = {}, className } = this.props;
+  const getClassNames = count => {
     const defaultStyle = clsx(theme.counter, className);
     const overLimitStyle = clsx(theme.counterOverLimit, className);
     return count > limit ? overLimitStyle : defaultStyle;
-  }
+  };
+
+  const count = getLineCount(store.getEditorState());
+  const classNames = getClassNames(count);
 
-  render() {
-    const { store, limit } = this.props;
-    const count = this.getLineCount(store.getEditorState());
-    const classNames = this.getClassNames(count, limit);
+  return <span className={classNames}>{count}</span>;
+};
 
-    return <span className={classNames}>{count}</span>;
-  }
-}
+LineCounter.propTypes = {
+  theme: PropTypes.any,
+  store: PropTypes.any,
+  className: PropTypes.any,
+  limit: PropTypes.number,
+};
 
 export default LineCounter;
diff --git a/...-plugin/src/WordCounter/__test__/index.js → ...in/src/WordCounter/__test__/index.test.js b/...-plugin/src/WordCounter/__test__/index.js → ...in/src/WordCounter/__test__/index.test.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { expect } from 'chai';
+import { screen, render } from '@testing-library/react';
 import { EditorState, ContentState } from 'draft-js';
 import createCounterPlugin from '../../index';
 
@@ -24,7 +23,7 @@ describe('CounterPlugin Word Counter', () => {
     });
     const { WordCounter } = counterPlugin;
 
-    const result = mount(<WordCounter />);
-    expect(result).to.have.text('5');
+    render(<WordCounter />);
+    expect(screen.getByText('5')).toBeInTheDocument();
   });
 });
diff --git a/draft-js-counter-plugin/src/WordCounter/index.js b/draft-js-counter-plugin/src/WordCounter/index.js
@@ -1,35 +1,31 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-class WordCounter extends Component {
-  static propTypes = {
-    theme: PropTypes.any,
-    limit: PropTypes.number,
-  };
-
-  getWordCount(editorState) {
+const WordCounter = ({ store, limit, theme = {}, className }) => {
+  const getWordCount = editorState => {
     const plainText = editorState.getCurrentContent().getPlainText('');
     const regex = /(?:\r\n|\r|\n)/g; // new line, carriage return, line feed
     const cleanString = plainText.replace(regex, ' ').trim(); // replace above characters w/ space
     const wordArray = cleanString.match(/\S+/g); // matches words according to whitespace
     return wordArray ? wordArray.length : 0;
-  }
+  };
 
-  getClassNames(count, limit) {
-    const { theme = {}, className } = this.props;
+  const getClassNames = count => {
     const defaultStyle = clsx(theme.counter, className);
     const overLimitStyle = clsx(theme.counterOverLimit, className);
     return count > limit ? overLimitStyle : defaultStyle;
-  }
+  };
+
+  const count = getWordCount(store.getEditorState());
+  const classNames = getClassNames(count);
 
-  render() {
-    const { store, limit } = this.props;
-    const count = this.getWordCount(store.getEditorState());
-    const classNames = this.getClassNames(count, limit);
+  return <span className={classNames}>{count}</span>;
+};
 
-    return <span className={classNames}>{count}</span>;
-  }
-}
+WordCounter.propTypes = {
+  theme: PropTypes.any,
+  limit: PropTypes.number,
+};
 
 export default WordCounter;
diff --git a/package.json b/package.json
@@ -70,7 +70,7 @@
     "linaria": "^1.4.0-alpha.1",
     "lint-staged": "^9.2.3",
     "matched": "^4.0.0",
-    "mocha": "^3.0.2",
+    "mocha": "^5.0.0",
     "multer": "^1.3.0",
     "postcss-loader": "^1.3.3",
     "prettier": "^1.18.2",
@@ -136,8 +136,8 @@
     "lint:eslint:fix": "eslint --fix --rule 'mocha/no-exclusive-tests: 2' ./",
     "lint:flow": "flow status",
     "storybook": "start-storybook -p 6006 -s ./stories/public",
-    "test": "mocha --compilers @babel/register --require testHelper.js \"./*/src/**/__test__/*.js\"",
-    "test:jest": "jest --passWithNoTests",
+    "test": "mocha --compilers @babel/register --exclude \"./*/src/**/__test__/*test.js\" --require testHelper.js \"./*/src/**/__test__/*.js\"",
+    "test:jest": "jest",
     "test:watch": "yarn test -- --watch"
   },
   "workspaces": [