Bump deps (#72)

* bump the deps

* correct the lock-files

* chore: update test case using new API

.prettierrc

@@ -0,0 +1 @@
+{ "singleQuote": true }

package.json

@@ -9,16 +9,16 @@
   "homepage": "./",
   "main": "src/index.js",
   "dependencies": {
-    "codemirror": "^5.45.0",
+    "codemirror": "^5.65.0",
     "github-markdown-css": "3.0.1",
     "highlight.js": "9.15.8",
     "nonaction": "0.0.5",
     "normalize.css": "8.0.1",
-    "react": "16.8.6",
-    "react-codemirror2": "^6.0.0",
-    "react-dom": "16.8.6",
+    "react": "^16.14.0",
+    "react-codemirror2": "^6.0.1",
+    "react-dom": "^16.14",
     "react-remarkable": "1.1.3",
-    "react-scripts": "^3.0.1",
+    "react-scripts": "^3.4.4",
     "styled-components": "4.3.2",
     "workbox-background-sync": "^5.1.3",
     "workbox-broadcast-update": "^5.1.3",
@@ -34,10 +34,10 @@
     "workbox-streams": "^5.1.3"
   },
   "devDependencies": {
-    "@testing-library/react": "^8.0.5",
+    "@testing-library/react": "^8.0.9",
     "@testing-library/react-hooks": "^1.1.0",
-    "react-test-renderer": "^16.8.6",
-    "source-map-explorer": "^2.0.1"
+    "react-test-renderer": "^16.14.0",
+    "source-map-explorer": "^2.5.2"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",

src/App/Components/Markdown/Previewer/Loading.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 const unWrappedLoading = ({ className }) => {
   return (
-    <div className={className}>
+    <div className={className} id="suspense-loading">
       <p />
       <p />
       <p />
@@ -25,12 +25,12 @@ export default styled(unWrappedLoading)`
     animation-iteration-count: infinite;
     animation-timing-function: linear;
     animation-name: load;
-    animation-duration: ${props => props.duration + 's'};
+    animation-duration: ${(props) => props.duration + 's'};
     &:nth-child(1) {
-      animation-delay: ${props => props.duration / 3 + 's'};
+      animation-delay: ${(props) => props.duration / 3 + 's'};
     }
     &:nth-child(2) {
-      animation-delay: ${props => (2 * props.duration) / 3 + 's'};
+      animation-delay: ${(props) => (2 * props.duration) / 3 + 's'};
     }
   }
   @keyframes load {

src/App/Components/Markdown/index.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, waitForElement } from '@testing-library/react';
+import { render, waitForElementToBeRemoved } from '@testing-library/react';
 import { Provider } from 'nonaction';
 import { TextContainer } from '../../Container';
 import Markdown from './index.js';
@@ -11,8 +11,8 @@ test('<Markdown /> Previewer lazy load should work', async () => {
       <Markdown />
     </Provider>
   );
-  const Previewer = await waitForElement(() =>
-    container.querySelector('.preview')
+  const Previewer = await waitForElementToBeRemoved(() =>
+    container.querySelector('#suspense-loading')
   );
   // Test Lazy load component using `waitforElement`!
   // const Content = Previewer.querySelector('span');