Adding the simplest react-testing-library

package.json

@@ -44,10 +44,7 @@
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
       "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
     },
-    "verbose": true,
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ]
+    "verbose": true
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.12",
@@ -98,7 +95,6 @@
     "css-loader": "^2.1.1",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
-    "enzyme-to-json": "^3.4.0",
     "eslint": "^5.16.0",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-plugin-css-modules": "^2.11.0",

packages/components/timed-text-editor/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import CustomEditor from './CustomEditor';
+import WrapperBlock from './WrapperBlock';
 
 import {
+  Editor,
   EditorState,
   CompositeDecorator,
   convertFromRaw,
@@ -510,6 +511,22 @@ class TimedTextEditor extends React.Component {
     this.props.onWordClick(e);
   }
 
+  renderBlockWithTimecodes = () => {
+    return {
+      component: WrapperBlock,
+      editable: true,
+      props: {
+        showSpeakers: this.props.showSpeakers,
+        showTimecodes: this.props.showTimecodes,
+        timecodeOffset: this.props.timecodeOffset,
+        editorState: this.state.editorState,
+        setEditorNewContentState: this.setEditorNewContentState,
+        onWordClick: this.handleWordClick,
+        handleAnalyticsEvents: this.props.handleAnalyticsEvents
+      }
+    };
+  }
+
   render() {
     // console.log('render TimedTextEditor');
     const currentWord = this.getCurrentWord();
@@ -521,40 +538,36 @@ class TimedTextEditor extends React.Component {
     const time = Math.round(this.props.currentTime * 4.0) / 4.0;
 
     const editor = (
-      <section
+      <section data-testid="section-editor"
         className={ style.editor }
         onDoubleClick={ this.handleDoubleClick }
         // TODO: decide if on mobile want to have a way to "click" on words
         // to play corresponding media
         // a double tap would be the ideal solution
         // onTouchStart={ event => this.handleDoubleClick(event) }
       >
-        <style scoped>
+        <style scoped data-testid="section-style">
           {`span.Word[data-start="${ currentWord.start }"] { background-color: ${ highlightColour }; text-shadow: 0 0 0.01px black }`}
           {`span.Word[data-start="${ currentWord.start }"]+span { background-color: ${ highlightColour } }`}
           {`span.Word[data-prev-times~="${ Math.floor(time) }"] { color: ${ unplayedColor } }`}
           {`span.Word[data-prev-times~="${ time }"] { color: ${ unplayedColor } }`}
           {`span.Word[data-confidence="low"] { border-bottom: ${ correctionBorder } }`}
         </style>
-        <CustomEditor
+        <Editor data-testid="custom-editor"
           editorState={ this.state.editorState }
-          onChange={ this.onChange }
+          onChange={ (e) => this.onChange(e) }
           stripPastedStyles
-          handleKeyCommand={ this.handleKeyCommand }
-          customKeyBindingFn={ this.customKeyBindingFn }
+          blockRendererFn={ this.renderBlockWithTimecodes }
+          handleKeyCommand={ (e) => this.handleKeyCommand(e) }
+          keyBindingFn={ this.customKeyBindingFn }
           spellCheck={ this.props.spellCheck }
-          showSpeakers={ this.props.showSpeakers }
-          showTimecodes={ this.props.showTimecodes }
-          timecodeOffset={ this.props.timecodeOffset }
-          setEditorNewContentState={ this.setEditorNewContentState }
-          onWordClick={ this.onWordClick }
-          handleAnalyticsEvents={ this.props.handleAnalyticsEvents }
         />
+
       </section>
     );
 
     return (
-      <section>
+      <section >
         { this.props.transcriptData !== null ? editor : null }
       </section>
     );

packages/components/timed-text-editor/index.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, cleanup } from 'react-testing-library';
+import { render, cleanup, } from 'react-testing-library';
 import TimeTextEditor from './index';
 
 import bbcKaldiTranscript from './stories/fixtures/bbc-kaldi.json';
@@ -28,16 +28,9 @@ const defaultProps = {
 afterEach(cleanup);
 
 describe('TimeTextEditor', () => {
-  it('renders the editor correctly', () => {
-    const { getByText } = render(<TimeTextEditor { ...defaultProps }/>);
-    getByText('');
+  it('renders the editor sections correctly', async () => {
+    const { getByTestId } = render(<TimeTextEditor { ...defaultProps }/>);
+    getByTestId('section-editor');
+    getByTestId('section-style');
   });
-
-  it('realigns the timecodes of text when text is written to');
-  it('realigns the timecodes of text when text is deleted');
-  it('pops up a modal when the speaker is selected');
-  it('edits the speaker');
-  it('underlines the time codes on hover');
-  it('creates a new block of text when the "enter" is inserted');
-
 });