From 047a79043b6472ac233f2314cb59817ea42178ad Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Mon, 16 Sep 2019 12:46:35 +0100 Subject: [PATCH 1/9] Initial commit to do testing --- .gitignore | 1 + package-lock.json | 400 ++++++++++++++---- package.json | 19 +- packages/components/setupTests.js | 5 + .../timed-text-editor/index.test.js | 34 ++ 5 files changed, 377 insertions(+), 82 deletions(-) create mode 100644 packages/components/setupTests.js create mode 100644 packages/components/timed-text-editor/index.test.js diff --git a/.gitignore b/.gitignore index cd88bfc3..5d86ff31 100644 --- a/.gitignore +++ b/.gitignore @@ -113,3 +113,4 @@ stats.json *.vtt *.ttml *.itt +.vscode diff --git a/package-lock.json b/package-lock.json index 33eadc37..b16fa969 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1512,6 +1512,42 @@ "integrity": "sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==", "dev": true }, + "@sinonjs/commons": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.6.0.tgz", + "integrity": "sha512-w4/WHG7C4WWFyE5geCieFJF6MZkbW4VAriol5KlmQXpAQdxvV0p26sqNZOW6Qyw6Y0l9K4g+cHvvczR2sEEpqg==", + "dev": true, + "requires": { + "type-detect": "4.0.8" + } + }, + "@sinonjs/formatio": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-3.2.1.tgz", + "integrity": "sha512-tsHvOB24rvyvV2+zKMmPkZ7dXX6LSLKZ7aOtXY6Edklp0uRcgGpOsQTTGTcWViFyx4uhWc6GV8QdnALbIbIdeQ==", + "dev": true, + "requires": { + "@sinonjs/commons": "^1", + "@sinonjs/samsam": "^3.1.0" + } + }, + "@sinonjs/samsam": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-3.3.3.tgz", + "integrity": "sha512-bKCMKZvWIjYD0BLGnNrxVuw4dkWCYsLqFOUWw8VgKF/+5Y+mE7LfHWPIYoDXowH+3a9LsWDMo0uAP8YDosPvHQ==", + "dev": true, + "requires": { + "@sinonjs/commons": "^1.3.0", + "array-from": "^2.1.1", + "lodash": "^4.17.15" + } + }, + "@sinonjs/text-encoding": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz", + "integrity": "sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==", + "dev": true + }, "@storybook/addon-a11y": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-5.0.8.tgz", @@ -2442,6 +2478,44 @@ "symbol.prototype.description": "^1.0.0" } }, + "airbnb-prop-types": { + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.15.0.tgz", + "integrity": "sha512-jUh2/hfKsRjNFC4XONQrxo/n/3GG4Tn6Hl0WlFQN5PY9OMC9loSCoAYKnZsWaP8wEfd5xcrPloK0Zg6iS1xwVA==", + "dev": true, + "requires": { + "array.prototype.find": "^2.1.0", + "function.prototype.name": "^1.1.1", + "has": "^1.0.3", + "is-regex": "^1.0.4", + "object-is": "^1.0.1", + "object.assign": "^4.1.0", + "object.entries": "^1.1.0", + "prop-types": "^15.7.2", + "prop-types-exact": "^1.2.0", + "react-is": "^16.9.0" + }, + "dependencies": { + "function.prototype.name": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.1.tgz", + "integrity": "sha512-e1NzkiJuw6xqVH7YSdiW/qDHebcmMhPNe6w+4ZYYEg0VA+LaLzx37RimbPLuonHhYGFGPx1ME2nSi74JiaCr/Q==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "function-bind": "^1.1.1", + "functions-have-names": "^1.1.1", + "is-callable": "^1.1.4" + } + }, + "react-is": { + "version": "16.9.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz", + "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==", + "dev": true + } + } + }, "ajv": { "version": "6.10.0", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz", @@ -2650,6 +2724,12 @@ "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=", "dev": true }, + "array-from": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/array-from/-/array-from-2.1.1.tgz", + "integrity": "sha1-z+nYwmYoudxa7MYqn12PHzUsEZU=", + "dev": true + }, "array-includes": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.0.3.tgz", @@ -2692,6 +2772,16 @@ "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", "dev": true }, + "array.prototype.find": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.1.0.tgz", + "integrity": "sha512-Wn41+K1yuO5p7wRZDl7890c3xvv5UBrfVXTVIe28rSQb6LS0fZMDrQB6PAcxQFRFy6vJTLDc3A2+3CjQdzVKRg==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.13.0" + } + }, "array.prototype.flat": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz", @@ -4119,13 +4209,13 @@ "dev": true }, "cheerio": { - "version": "1.0.0-rc.2", - "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz", - "integrity": "sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=", + "version": "1.0.0-rc.3", + "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.3.tgz", + "integrity": "sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==", "dev": true, "requires": { "css-select": "~1.2.0", - "dom-serializer": "~0.1.0", + "dom-serializer": "~0.1.1", "entities": "~1.1.1", "htmlparser2": "^3.9.1", "lodash": "^4.15.0", @@ -5207,6 +5297,12 @@ "debug": "^2.6.0" } }, + "diff": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz", + "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==", + "dev": true + }, "diff-sequences": { "version": "24.3.0", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.3.0.tgz", @@ -5606,9 +5702,9 @@ "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==" }, "enzyme": { - "version": "3.9.0", - "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.9.0.tgz", - "integrity": "sha512-JqxI2BRFHbmiP7/UFqvsjxTirWoM1HfeaJrmVSZ9a1EADKkZgdPcAuISPMpoUiHlac9J4dYt81MC5BBIrbJGMg==", + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.10.0.tgz", + "integrity": "sha512-p2yy9Y7t/PFbPoTvrWde7JIYB2ZyGC+NgTNbVEGvZ5/EyoYSr9aG/2rSbVvyNvMHEhw9/dmGUJHWtfQIEiX9pg==", "dev": true, "requires": { "array.prototype.flat": "^1.2.1", @@ -5634,6 +5730,50 @@ "string.prototype.trim": "^1.1.2" } }, + "enzyme-adapter-react-16": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.14.0.tgz", + "integrity": "sha512-7PcOF7pb4hJUvjY7oAuPGpq3BmlCig3kxXGi2kFx0YzJHppqX1K8IIV9skT1IirxXlu8W7bneKi+oQ10QRnhcA==", + "dev": true, + "requires": { + "enzyme-adapter-utils": "^1.12.0", + "has": "^1.0.3", + "object.assign": "^4.1.0", + "object.values": "^1.1.0", + "prop-types": "^15.7.2", + "react-is": "^16.8.6", + "react-test-renderer": "^16.0.0-0", + "semver": "^5.7.0" + } + }, + "enzyme-adapter-utils": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.12.0.tgz", + "integrity": "sha512-wkZvE0VxcFx/8ZsBw0iAbk3gR1d9hK447ebnSYBf95+r32ezBq+XDSAvRErkc4LZosgH8J7et7H7/7CtUuQfBA==", + "dev": true, + "requires": { + "airbnb-prop-types": "^2.13.2", + "function.prototype.name": "^1.1.0", + "object.assign": "^4.1.0", + "object.fromentries": "^2.0.0", + "prop-types": "^15.7.2", + "semver": "^5.6.0" + }, + "dependencies": { + "object.fromentries": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.0.tgz", + "integrity": "sha512-9iLiI6H083uiqUuvzyY6qrlmc/Gz8hLQFOcb/Ri/0xXFkSNS3ctV+CbE6yM2+AnkYfOB3dGjdzC0wrMLIhQICA==", + "dev": true, + "requires": { + "define-properties": "^1.1.2", + "es-abstract": "^1.11.0", + "function-bind": "^1.1.1", + "has": "^1.0.1" + } + } + } + }, "errno": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz", @@ -6160,18 +6300,20 @@ } }, "eslint-plugin-react": { - "version": "7.12.4", - "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.12.4.tgz", - "integrity": "sha512-1puHJkXJY+oS1t467MjbqjvX53uQ05HXwjqDgdbGBqf5j9eeydI54G3KwiJmWciQ0HTBacIKw2jgwSBSH3yfgQ==", + "version": "7.14.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.14.3.tgz", + "integrity": "sha512-EzdyyBWC4Uz2hPYBiEJrKCUi2Fn+BJ9B/pJQcjw5X+x/H2Nm59S4MJIvL4O5NEE0+WbnQwEBxWY03oUk+Bc3FA==", "dev": true, "requires": { "array-includes": "^3.0.3", "doctrine": "^2.1.0", "has": "^1.0.3", - "jsx-ast-utils": "^2.0.1", + "jsx-ast-utils": "^2.1.0", + "object.entries": "^1.1.0", "object.fromentries": "^2.0.0", - "prop-types": "^15.6.2", - "resolve": "^1.9.0" + "object.values": "^1.1.0", + "prop-types": "^15.7.2", + "resolve": "^1.10.1" }, "dependencies": { "object.fromentries": { @@ -6185,9 +6327,24 @@ "function-bind": "^1.1.1", "has": "^1.0.1" } + }, + "resolve": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz", + "integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==", + "dev": true, + "requires": { + "path-parse": "^1.0.6" + } } } }, + "eslint-plugin-react-hooks": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.0.1.tgz", + "integrity": "sha512-xir+3KHKo86AasxlCV8AHRtIZPHljqCRRUYgASkbatmt0fad4+5GgC7zkT7o/06hdKM6MIwp8giHVXqBPaarHQ==", + "dev": true + }, "eslint-restricted-globals": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/eslint-restricted-globals/-/eslint-restricted-globals-0.1.1.tgz", @@ -6205,10 +6362,13 @@ } }, "eslint-utils": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.3.1.tgz", - "integrity": "sha512-Z7YjnIldX+2XMcjr7ZkgEsOj/bREONV60qYeB/bjMAqqqZ4zxKyWX+BOUkdmRmA9riiIPVvo5x86m5elviOk0Q==", - "dev": true + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.2.tgz", + "integrity": "sha512-eAZS2sEUMlIeCjBeubdj45dmBHQwPHWyBcT1VSYB7o9x9WRRqKxyUoiXlRjyAwzN7YEzHJlYg0NmzDRWx6GP4Q==", + "dev": true, + "requires": { + "eslint-visitor-keys": "^1.0.0" + } }, "eslint-visitor-keys": { "version": "1.0.0", @@ -7047,8 +7207,7 @@ "version": "2.1.1", "resolved": false, "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -7072,15 +7231,13 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7097,22 +7254,19 @@ "version": "1.1.0", "resolved": false, "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "resolved": false, "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "resolved": false, "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -7243,8 +7397,7 @@ "version": "2.0.3", "resolved": false, "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -7258,7 +7411,6 @@ "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7275,7 +7427,6 @@ "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7284,15 +7435,13 @@ "version": "0.0.8", "resolved": false, "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -7313,7 +7462,6 @@ "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -7402,8 +7550,7 @@ "version": "1.0.1", "resolved": false, "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -7417,7 +7564,6 @@ "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -7513,8 +7659,7 @@ "version": "5.1.2", "resolved": false, "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -7556,7 +7701,6 @@ "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7578,7 +7722,6 @@ "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7627,15 +7770,13 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "resolved": false, "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "dev": true, - "optional": true + "dev": true } } }, @@ -7674,6 +7815,12 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, + "functions-have-names": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.1.1.tgz", + "integrity": "sha512-U0kNHUoxwPNPWOJaMG7Z00d4a/qZVrFtzWJRaK8V9goaVOCXBSQSJpt3MYGNtkScKEBKovxLjnNdC9MlXwo5Pw==", + "dev": true + }, "fuzzy-search": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/fuzzy-search/-/fuzzy-search-3.0.1.tgz", @@ -8246,9 +8393,9 @@ "dev": true }, "html-element-map": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.0.1.tgz", - "integrity": "sha512-BZSfdEm6n706/lBfXKWa4frZRZcT5k1cOusw95ijZsHlI+GdgY0v95h6IzO3iIDf2ROwq570YTwqNPqHcNMozw==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.1.0.tgz", + "integrity": "sha512-iqiG3dTZmy+uUaTmHarTL+3/A2VW9ox/9uasKEZC+R/wAtUrTcRlXPSaPqsnWPfIu8wqn09jQNwMRqzL54jSYA==", "dev": true, "requires": { "array-filter": "^1.0.0" @@ -9987,12 +10134,13 @@ } }, "jsx-ast-utils": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz", - "integrity": "sha1-6AGxs5mF4g//yHtA43SAgOLcrH8=", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.1.tgz", + "integrity": "sha512-v3FxCcAf20DayI+uxnCuw795+oOIkVu6EnJ1+kSzhqqTZHNkTZ7B66ZgLp4oLJ/gbA64cI0B7WRoHZMSRdyVRQ==", "dev": true, "requires": { - "array-includes": "^3.0.3" + "array-includes": "^3.0.3", + "object.assign": "^4.1.0" } }, "jszip": { @@ -10006,6 +10154,12 @@ "set-immediate-shim": "~1.0.1" } }, + "just-extend": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-4.0.2.tgz", + "integrity": "sha512-FrLwOgm+iXrPV+5zDU6Jqu4gCRXbWEQg2O3SKONsWE4w7AXFRkryS53bpWdaL9cNol+AmR3AEYz6kn+o0fCPnw==", + "dev": true + }, "keycode": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", @@ -10275,6 +10429,12 @@ "chalk": "^2.0.1" } }, + "lolex": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lolex/-/lolex-4.2.0.tgz", + "integrity": "sha512-gKO5uExCXvSm6zbF562EvM+rd1kQDnB9AZBbiQVzf1ZmdDpxUSvpnAaVOP83N/31mRK8Ml8/VE8DMvsAZQ+7wg==", + "dev": true + }, "longest-streak": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.3.tgz", @@ -10926,9 +11086,9 @@ "dev": true }, "nearley": { - "version": "2.16.0", - "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.16.0.tgz", - "integrity": "sha512-Tr9XD3Vt/EujXbZBv6UAHYoLUSMQAxSsTnm9K3koXzjzNWY195NqALeyrzLZBKzAkL3gl92BcSogqrHjD8QuUg==", + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.19.0.tgz", + "integrity": "sha512-2v52FTw7RPqieZr3Gth1luAXZR7Je6q3KaDHY5bjl/paDUdMu35fZ8ICNgiYJRr3tf3NMvIQQR1r27AvEr9CRA==", "dev": true, "requires": { "commander": "^2.19.0", @@ -10956,6 +11116,36 @@ "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", "dev": true }, + "nise": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/nise/-/nise-1.5.2.tgz", + "integrity": "sha512-/6RhOUlicRCbE9s+94qCUsyE+pKlVJ5AhIv+jEE7ESKwnbXqulKZ1FYU+XAtHHWE9TinYvAxDUJAb912PwPoWA==", + "dev": true, + "requires": { + "@sinonjs/formatio": "^3.2.1", + "@sinonjs/text-encoding": "^0.7.1", + "just-extend": "^4.0.2", + "lolex": "^4.1.0", + "path-to-regexp": "^1.7.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", + "dev": true + }, + "path-to-regexp": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz", + "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=", + "dev": true, + "requires": { + "isarray": "0.0.1" + } + } + } + }, "no-case": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", @@ -12648,6 +12838,17 @@ "react-is": "^16.8.1" } }, + "prop-types-exact": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz", + "integrity": "sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==", + "dev": true, + "requires": { + "has": "^1.0.3", + "object.assign": "^4.1.0", + "reflect.ownkeys": "^0.2.0" + } + }, "property-information": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.0.1.tgz", @@ -12919,15 +13120,13 @@ } }, "react": { - "version": "16.8.6", - "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz", - "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==", - "dev": true, + "version": "16.9.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.9.0.tgz", + "integrity": "sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.13.6" + "prop-types": "^15.6.2" } }, "react-clientside-effect": { @@ -13144,15 +13343,14 @@ } }, "react-dom": { - "version": "16.8.6", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz", - "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==", - "dev": true, + "version": "16.9.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz", + "integrity": "sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.13.6" + "scheduler": "^0.15.0" } }, "react-draggable": { @@ -13354,6 +13552,26 @@ "refractor": "^2.4.1" } }, + "react-test-renderer": { + "version": "16.9.0", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.9.0.tgz", + "integrity": "sha512-R62stB73qZyhrJo7wmCW9jgl/07ai+YzvouvCXIJLBkRlRqLx4j9RqcLEAfNfU3OxTGucqR2Whmn3/Aad6L3hQ==", + "dev": true, + "requires": { + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "react-is": "^16.9.0", + "scheduler": "^0.15.0" + }, + "dependencies": { + "react-is": { + "version": "16.9.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz", + "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==", + "dev": true + } + } + }, "react-testing-library": { "version": "5.9.0", "resolved": "https://registry.npmjs.org/react-testing-library/-/react-testing-library-5.9.0.tgz", @@ -13532,6 +13750,12 @@ "strip-indent": "^1.0.1" } }, + "reflect.ownkeys": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz", + "integrity": "sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=", + "dev": true + }, "refractor": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/refractor/-/refractor-2.8.0.tgz", @@ -14445,10 +14669,9 @@ } }, "scheduler": { - "version": "0.13.6", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz", - "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==", - "dev": true, + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz", + "integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -14726,6 +14949,21 @@ "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true }, + "sinon": { + "version": "7.4.2", + "resolved": "https://registry.npmjs.org/sinon/-/sinon-7.4.2.tgz", + "integrity": "sha512-pY5RY99DKelU3pjNxcWo6XqeB1S118GBcVIIdDi6V+h6hevn1izcg2xv1hTHW/sViRXU7sUOxt4wTUJ3gsW2CQ==", + "dev": true, + "requires": { + "@sinonjs/commons": "^1.4.0", + "@sinonjs/formatio": "^3.2.1", + "@sinonjs/samsam": "^3.3.3", + "diff": "^3.5.0", + "lolex": "^4.2.0", + "nise": "^1.5.2", + "supports-color": "^5.5.0" + } + }, "sisteransi": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.0.tgz", @@ -15241,14 +15479,14 @@ } }, "string.prototype.trim": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz", - "integrity": "sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo=", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.0.tgz", + "integrity": "sha512-9EIjYD/WdlvLpn987+ctkLf0FfvBefOCuiEr2henD8X+7jfwPnyvTdmW8OJhj5p+M0/96mBdynLWkxUr+rHlpg==", "dev": true, "requires": { - "define-properties": "^1.1.2", - "es-abstract": "^1.5.0", - "function-bind": "^1.0.2" + "define-properties": "^1.1.3", + "es-abstract": "^1.13.0", + "function-bind": "^1.1.1" } }, "string_decoder": { @@ -16450,6 +16688,12 @@ "prelude-ls": "~1.1.2" } }, + "type-detect": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz", + "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==", + "dev": true + }, "type-is": { "version": "1.6.16", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz", diff --git a/package.json b/package.json index 743ab91c..308904ff 100644 --- a/package.json +++ b/package.json @@ -29,9 +29,13 @@ "publish:dry:run": "npm publish --dry-run" }, "jest": { + "setupFilesAfterEnv": [ + "packages/components/setupTests.js" + ], "moduleFileExtensions": [ "js", - "jsx" + "jsx", + "json" ], "moduleDirectories": [ "node_modules" @@ -39,7 +43,8 @@ "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js", "\\.(css|less)$": "/__mocks__/styleMock.js" - } + }, + "verbose": true }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.12", @@ -54,6 +59,8 @@ "mousetrap": "1.5.2", "number-to-words": "^1.2.4", "prop-types": "^15.6.2", + "react": "^16.9.0", + "react-dom": "^16.9.0", "react-keyboard-shortcuts": "^1.1.3", "react-simple-tooltip": "^2.3.3", "sbd": "^1.0.15", @@ -83,21 +90,25 @@ "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-minify": "^0.5.0", "css-loader": "^2.1.1", - "enzyme": "^3.7.0", + "enzyme": "^3.10.0", + "enzyme-adapter-react-16": "^1.14.0", "eslint": "^5.16.0", "eslint-config-airbnb-base": "^13.1.0", "eslint-plugin-css-modules": "^2.11.0", "eslint-plugin-import": "^2.14.0", - "eslint-plugin-react": "^7.12.4", + "eslint-plugin-react": "^7.14.3", + "eslint-plugin-react-hooks": "^2.0.1", "gh-pages": "^2.0.1", "husky": "^1.1.3", "jest": "^24.7.1", "node-sass": "^4.12.0", "prettier-stylelint": "^0.4.2", + "react-test-renderer": "^16.9.0", "react-testing-library": "^5.2.3", "regenerator-runtime": "^0.12.1", "rimraf": "^2.6.2", "sass-loader": "^7.1.0", + "sinon": "^7.4.2", "style-loader": "^0.23.1", "stylelint-config-standard": "^18.2.0", "webpack": "^4.29.6", diff --git a/packages/components/setupTests.js b/packages/components/setupTests.js new file mode 100644 index 00000000..a3964368 --- /dev/null +++ b/packages/components/setupTests.js @@ -0,0 +1,5 @@ +// setup file +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +configure({ adapter: new Adapter() }); \ No newline at end of file diff --git a/packages/components/timed-text-editor/index.test.js b/packages/components/timed-text-editor/index.test.js new file mode 100644 index 00000000..ca175e38 --- /dev/null +++ b/packages/components/timed-text-editor/index.test.js @@ -0,0 +1,34 @@ +import React from 'react'; +import { expect } from 'chai'; +import { shallow } from 'enzyme'; +import sinon from 'sinon'; + +import TimeTextEditor from './index'; + +describe('', () => { + it('renders three components', () => { + const wrapper = shallow(); + expect(wrapper.find(TimeTextEditor)).to.have.lengthOf(3); + }); + + it('renders an `.icon-star`', () => { + const wrapper = shallow(); + expect(wrapper.find('.icon-star')).to.have.lengthOf(1); + }); + + it('renders children when passed in', () => { + const wrapper = shallow(( + +
+ + )); + expect(wrapper.contains(
)).to.equal(true); + }); + + it('simulates click events', () => { + const onButtonClick = sinon.spy(); + const wrapper = shallow(); + wrapper.find('button').simulate('click'); + expect(onButtonClick).to.have.property('callCount', 1); + }); +}); \ No newline at end of file From b2fed77ffc1c3e13b2e027c2cf7c4eb86501db20 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Mon, 16 Sep 2019 17:35:06 +0100 Subject: [PATCH 2/9] Temporary commit --- package-lock.json | 244 ++++++++++++++++++ package.json | 9 +- .../__snapshots__/index.test.js.snap | 110 ++++++++ .../components/timed-text-editor/index.js | 7 +- .../timed-text-editor/index.test.js | 61 +++-- 5 files changed, 400 insertions(+), 31 deletions(-) create mode 100644 packages/components/timed-text-editor/__snapshots__/index.test.js.snap diff --git a/package-lock.json b/package-lock.json index b16fa969..b42185ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2092,6 +2092,109 @@ "loader-utils": "^1.2.3" } }, + "@testing-library/dom": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.2.0.tgz", + "integrity": "sha512-YaaoAIDTNV8AfC19XLa6KNeBB5KuSxWYPrgYN1vBu1i+czQlfWJSCS0A3yd2V3BUH9di9C1BD+7OoyVBpZCh2Q==", + "dev": true, + "requires": { + "@babel/runtime": "^7.5.5", + "@sheerun/mutationobserver-shim": "^0.3.2", + "@types/testing-library__dom": "^6.0.0", + "aria-query": "3.0.0", + "pretty-format": "^24.8.0", + "wait-for-expect": "^1.3.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.0.tgz", + "integrity": "sha512-89eSBLJsxNxOERC0Op4vd+0Bqm6wRMqMbFtV3i0/fbaWw/mJ8Q3eBvgX0G4SyrOOLCtbu98HspF8o09MRT+KzQ==", + "dev": true, + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "@jest/types": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz", + "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==", + "dev": true, + "requires": { + "@types/istanbul-lib-coverage": "^2.0.0", + "@types/istanbul-reports": "^1.1.1", + "@types/yargs": "^13.0.0" + } + }, + "@types/yargs": { + "version": "13.0.2", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.2.tgz", + "integrity": "sha512-lwwgizwk/bIIU+3ELORkyuOgDjCh7zuWDFqRtPPhhVgq9N1F7CvLNKg1TX4f2duwtKQ0p044Au9r1PLIXHrIzQ==", + "dev": true, + "requires": { + "@types/yargs-parser": "*" + } + }, + "ansi-regex": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", + "dev": true + }, + "pretty-format": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz", + "integrity": "sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==", + "dev": true, + "requires": { + "@jest/types": "^24.9.0", + "ansi-regex": "^4.0.0", + "ansi-styles": "^3.2.0", + "react-is": "^16.8.4" + } + }, + "regenerator-runtime": { + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==", + "dev": true + }, + "wait-for-expect": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-1.3.0.tgz", + "integrity": "sha512-8fJU7jiA96HfGPt+P/UilelSAZfhMBJ52YhKzlmZQvKEZU2EcD1GQ0yqGB6liLdHjYtYAoGVigYwdxr5rktvzA==", + "dev": true + } + } + }, + "@testing-library/react": { + "version": "9.1.4", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.1.4.tgz", + "integrity": "sha512-fQ/PXZoLcmnS1W5ZiM3P7XBy2x6Hm9cJAT/ZDuZKzJ1fS1rN3j31p7ReAqUe3N1kJ46sNot0n1oiGbz7FPU+FA==", + "dev": true, + "requires": { + "@babel/runtime": "^7.5.5", + "@testing-library/dom": "^6.1.0", + "@types/testing-library__react": "^9.1.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.0.tgz", + "integrity": "sha512-89eSBLJsxNxOERC0Op4vd+0Bqm6wRMqMbFtV3i0/fbaWw/mJ8Q3eBvgX0G4SyrOOLCtbu98HspF8o09MRT+KzQ==", + "dev": true, + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "regenerator-runtime": { + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==", + "dev": true + } + } + }, "@types/babel__core": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.0.tgz", @@ -2147,6 +2250,25 @@ "integrity": "sha512-eAtOAFZefEnfJiRFQBGw1eYqa5GTLCZ1y86N0XSI/D6EB+E8z6VPV/UL7Gi5UEclFqoQk+6NRqEDsfmDLXn8sg==", "dev": true }, + "@types/istanbul-lib-report": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-1.1.1.tgz", + "integrity": "sha512-3BUTyMzbZa2DtDI2BkERNC6jJw2Mr2Y0oGI7mRxYNBPxppbtEK1F66u3bKwU2g+wxwWI7PAoRpJnOY1grJqzHg==", + "dev": true, + "requires": { + "@types/istanbul-lib-coverage": "*" + } + }, + "@types/istanbul-reports": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz", + "integrity": "sha512-UpYjBi8xefVChsCoBpKShdxTllC9pwISirfoZsUa2AAdQg/Jd2KQGtSbw+ya7GPo7x/wAPlH6JBhKhAsXUEZNA==", + "dev": true, + "requires": { + "@types/istanbul-lib-coverage": "*", + "@types/istanbul-lib-report": "*" + } + }, "@types/jszip": { "version": "3.1.6", "resolved": "https://registry.npmjs.org/@types/jszip/-/jszip-3.1.6.tgz", @@ -2160,18 +2282,62 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-11.13.0.tgz", "integrity": "sha512-rx29MMkRdVmzunmiA4lzBYJNnXsW/PhG4kMBy2ATsYaDjGGR75dCFEVVROKpNwlVdcUX3xxlghKQOeDPBJobng==" }, + "@types/prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-f8JzJNWVhKtc9dg/dyDNfliTKNOJSLa7Oht/ElZdF/UbMUmAH3rLmAk3ODNjw0mZajDEgatA03tRjB4+Dp/tzA==", + "dev": true + }, "@types/q": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz", "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==", "dev": true }, + "@types/react": { + "version": "16.9.2", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.2.tgz", + "integrity": "sha512-jYP2LWwlh+FTqGd9v7ynUKZzjj98T8x7Yclz479QdRhHfuW9yQ+0jjnD31eXSXutmBpppj5PYNLYLRfnZJvcfg==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "csstype": "^2.2.0" + } + }, + "@types/react-dom": { + "version": "16.9.0", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.0.tgz", + "integrity": "sha512-OL2lk7LYGjxn4b0efW3Pvf2KBVP0y1v3wip1Bp7nA79NkOpElH98q3WdCEdDj93b2b0zaeBG9DvriuKjIK5xDA==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==", "dev": true }, + "@types/testing-library__dom": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.0.3.tgz", + "integrity": "sha512-NCjixGZ6iubYpe63YKYJy/bDkPp+HD8fbi+0iXcaYhsYjQhoa7IfFz/WcaCRZJnKSi63c9GSK9pZi/Y8/gTvFA==", + "dev": true, + "requires": { + "pretty-format": "^24.3.0" + } + }, + "@types/testing-library__react": { + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/@types/testing-library__react/-/testing-library__react-9.1.1.tgz", + "integrity": "sha512-8/toTJaIlS3BC7JrK2ElTnbjH8tmFP7atdL2ZsIa1JDmH9RKSm/7Wp5oMDJzXoWr988Mv7ym/XZ8LRglyoGCGw==", + "dev": true, + "requires": { + "@types/react-dom": "*", + "@types/testing-library__dom": "*" + } + }, "@types/unist": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz", @@ -2205,6 +2371,12 @@ "integrity": "sha512-IsU1TD+8cQCyG76ZqxP0cVFnofvfzT8p/wO8ENT4jbN/KKN3grsHFgHNl/U+08s33ayX4LwI85cEhYXCOlOkMw==", "dev": true }, + "@types/yargs-parser": { + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-13.1.0.tgz", + "integrity": "sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==", + "dev": true + }, "@webassemblyjs/ast": { "version": "1.8.5", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz", @@ -2682,6 +2854,16 @@ "sprintf-js": "~1.0.2" } }, + "aria-query": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-3.0.0.tgz", + "integrity": "sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=", + "dev": true, + "requires": { + "ast-types-flow": "0.0.7", + "commander": "^2.11.0" + } + }, "arr-diff": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz", @@ -2867,6 +3049,12 @@ "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", "dev": true }, + "assertion-error": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz", + "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==", + "dev": true + }, "assign-symbols": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz", @@ -2879,6 +3067,12 @@ "integrity": "sha512-2mP3TwtkY/aTv5X3ZsMpNAbOnyoC/aMJwJSoaELPkHId0nSQgFcnU4dRW3isxiz7+zBexk0ym3WNVjMiQBnJSw==", "dev": true }, + "ast-types-flow": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz", + "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=", + "dev": true + }, "astral-regex": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz", @@ -4162,6 +4356,20 @@ "integrity": "sha512-Jt9tIBkRc9POUof7QA/VwWd+58fKkEEfI+/t1/eOlxKM7ZhrczNzMFefge7Ai+39y1pR/pP6cI19guHy3FSLmw==", "dev": true }, + "chai": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/chai/-/chai-4.2.0.tgz", + "integrity": "sha512-XQU3bhBukrOsQCuwZndwGcCVQHyZi53fQ6Ys1Fym7E4olpIqqZZhhoFJoaKVvV17lWQoXYwgWN2nF5crA8J2jw==", + "dev": true, + "requires": { + "assertion-error": "^1.1.0", + "check-error": "^1.0.2", + "deep-eql": "^3.0.1", + "get-func-name": "^2.0.0", + "pathval": "^1.1.0", + "type-detect": "^4.0.5" + } + }, "chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -4208,6 +4416,12 @@ "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "dev": true }, + "check-error": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz", + "integrity": "sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=", + "dev": true + }, "cheerio": { "version": "1.0.0-rc.3", "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.3.tgz", @@ -5157,6 +5371,15 @@ "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", "dev": true }, + "deep-eql": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz", + "integrity": "sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==", + "dev": true, + "requires": { + "type-detect": "^4.0.0" + } + }, "deep-extend": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", @@ -5774,6 +5997,15 @@ } } }, + "enzyme-to-json": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.4.0.tgz", + "integrity": "sha512-gbu8P8PMAtb+qtKuGVRdZIYxWHC03q1dGS3EKRmUzmTDIracu3o6cQ0d4xI2YWojbelbxjYOsmqM5EgAL0WgIA==", + "dev": true, + "requires": { + "lodash": "^4.17.12" + } + }, "errno": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz", @@ -7858,6 +8090,12 @@ "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==", "dev": true }, + "get-func-name": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz", + "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=", + "dev": true + }, "get-stdin": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz", @@ -12056,6 +12294,12 @@ } } }, + "pathval": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.0.tgz", + "integrity": "sha1-uULm1L3mUwBe9rcTYd74cn0GReA=", + "dev": true + }, "pbkdf2": { "version": "3.0.17", "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.17.tgz", diff --git a/package.json b/package.json index 308904ff..a2e434fe 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,10 @@ "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js", "\\.(css|less)$": "/__mocks__/styleMock.js" }, - "verbose": true + "verbose": true, + "snapshotSerializers": [ + "enzyme-to-json/serializer" + ] }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.12", @@ -84,14 +87,18 @@ "@storybook/addon-viewport": "^5.0.8", "@storybook/addons": "^5.0.8", "@storybook/react": "^5.0.8", + "@testing-library/dom": "^6.2.0", + "@testing-library/react": "^9.1.4", "babel-eslint": "^10.0.1", "babel-jest": "^24.7.1", "babel-loader": "^8.0.5", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-minify": "^0.5.0", + "chai": "^4.2.0", "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", diff --git a/packages/components/timed-text-editor/__snapshots__/index.test.js.snap b/packages/components/timed-text-editor/__snapshots__/index.test.js.snap new file mode 100644 index 00000000..dffaeae1 --- /dev/null +++ b/packages/components/timed-text-editor/__snapshots__/index.test.js.snap @@ -0,0 +1,110 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render correctly in "debug" mode 1`] = ` +
+
+ + +
+
+`; diff --git a/packages/components/timed-text-editor/index.js b/packages/components/timed-text-editor/index.js index 60f9e254..0662d9fd 100644 --- a/packages/components/timed-text-editor/index.js +++ b/packages/components/timed-text-editor/index.js @@ -158,7 +158,7 @@ class TimedTextEditor extends React.Component { } loadData() { - if (this.props.transcriptData !== null) { + if (this.props.transcriptData && this.props.sttJsonType) { const blocks = sttJsonAdapter(this.props.transcriptData, this.props.sttJsonType); this.setState({ originalState: convertToRaw(convertFromRaw(blocks)) }); this.setEditorContentState(blocks); @@ -201,9 +201,8 @@ class TimedTextEditor extends React.Component { const data = convertToRaw(this.state.editorState.getCurrentContent()); localStorage.setItem(`draftJs-${ mediaUrlName }`, JSON.stringify(data)); - const newLastLocalSavedDate = new Date().toString(); - localStorage.setItem(`timestamp-${ mediaUrlName }`, newLastLocalSavedDate); - + // const newLastLocalSavedDate = new Date().toString(); + // localStorage.setItem(`timestamp-${ mediaUrlName }`, newLastLocalSavedDate); // return newLastLocalSavedDate; } diff --git a/packages/components/timed-text-editor/index.test.js b/packages/components/timed-text-editor/index.test.js index ca175e38..1af95a13 100644 --- a/packages/components/timed-text-editor/index.test.js +++ b/packages/components/timed-text-editor/index.test.js @@ -1,34 +1,43 @@ import React from 'react'; -import { expect } from 'chai'; -import { shallow } from 'enzyme'; -import sinon from 'sinon'; - +import { render, cleanup } from 'react-testing-library'; import TimeTextEditor from './index'; -describe('', () => { - it('renders three components', () => { - const wrapper = shallow(); - expect(wrapper.find(TimeTextEditor)).to.have.lengthOf(3); - }); +import bbcKaldiTranscript from './stories/fixtures/bbc-kaldi.json'; - it('renders an `.icon-star`', () => { - const wrapper = shallow(); - expect(wrapper.find('.icon-star')).to.have.lengthOf(1); - }); +const mediaUrl = 'https://download.ted.com/talks/KateDarling_2018S-950k.mp4'; - it('renders children when passed in', () => { - const wrapper = shallow(( - -
- - )); - expect(wrapper.contains(
)).to.equal(true); - }); +const defaultProps = { + transcriptData: bbcKaldiTranscript, + mediaUrl: mediaUrl, + isEditable: true, + spellCheck: false, + onWordClick: () => {}, + sttJsonType: 'bbckaldi', + isPlaying: () => {}, + playMedia: () => {}, + currentTime: 0, + isScrollIntoViewOn: true, + isPauseWhileTypingOn: true, + timecodeOffset: 0, + handleAnalyticsEvents: () => {}, + showSpeakers: true, + showTimecodes: true, + fileName: 'KateDarling_2018S-950k.mp4' +}; - it('simulates click events', () => { - const onButtonClick = sinon.spy(); - const wrapper = shallow(); - wrapper.find('button').simulate('click'); - expect(onButtonClick).to.have.property('callCount', 1); +afterEach(cleanup); + +describe('TimeTextEditor', () => { + it('renders the editor correctly', () => { + const { getByText } = render(); + getByText(''); }); + + 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'); + }); \ No newline at end of file From 9d635b541d8c1048f2e3bc0ba63cd0497fdd387e Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Mon, 16 Sep 2019 19:26:33 +0100 Subject: [PATCH 3/9] Extracting out the custom editor --- .../timed-text-editor/CustomEditor.js | 75 +++++++++++++++++++ .../components/timed-text-editor/index.js | 61 ++------------- 2 files changed, 80 insertions(+), 56 deletions(-) create mode 100644 packages/components/timed-text-editor/CustomEditor.js diff --git a/packages/components/timed-text-editor/CustomEditor.js b/packages/components/timed-text-editor/CustomEditor.js new file mode 100644 index 00000000..61e3ad8c --- /dev/null +++ b/packages/components/timed-text-editor/CustomEditor.js @@ -0,0 +1,75 @@ +// TODO: move CustomEditor in separate file +import React from 'react'; +import PropTypes from 'prop-types'; + +import { + Editor, +} from 'draft-js'; + +import WrapperBlock from './WrapperBlock'; + +class CustomEditor extends React.Component { + + handleWordClick = (e) => { + 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.props.editorState, + setEditorNewContentState: this.props.setEditorNewContentState, + onWordClick: this.handleWordClick, + handleAnalyticsEvents: this.props.handleAnalyticsEvents + } + }; + } + + shouldComponentUpdate(nextProps) { + // https://stackoverflow.com/questions/39182657/best-performance-method-to-check-if-contentstate-changed-in-draftjs-or-just-edi + if (nextProps.editorState !== this.props.editorState) { + return true; + } + + return false; + } + + handleOnChange = (e) => { + this.props.onChange(e); + } + + render() { + return ( + + ); + } +} + +CustomEditor.propTypes = { + customKeyBindingFn: PropTypes.any, + editorState: PropTypes.any, + handleAnalyticsEvents: PropTypes.any, + handleKeyCommand: PropTypes.any, + onChange: PropTypes.any, + onWordClick: PropTypes.any, + setEditorNewContentState: PropTypes.any, + showSpeakers: PropTypes.any, + showTimecodes: PropTypes.any, + spellCheck: PropTypes.any, + timecodeOffset: PropTypes.any +}; + +export default CustomEditor; \ No newline at end of file diff --git a/packages/components/timed-text-editor/index.js b/packages/components/timed-text-editor/index.js index 0662d9fd..a2123676 100644 --- a/packages/components/timed-text-editor/index.js +++ b/packages/components/timed-text-editor/index.js @@ -1,8 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; +import CustomEditor from './CustomEditor'; import { - Editor, EditorState, CompositeDecorator, convertFromRaw, @@ -12,7 +12,6 @@ import { } from 'draft-js'; import Word from './Word'; -import WrapperBlock from './WrapperBlock'; // TODO: connect to local packages version // import sttJsonAdapter from '../../Util/adapters/index.js'; @@ -158,7 +157,7 @@ class TimedTextEditor extends React.Component { } loadData() { - if (this.props.transcriptData && this.props.sttJsonType) { + if (this.props.transcriptData !== null) { const blocks = sttJsonAdapter(this.props.transcriptData, this.props.sttJsonType); this.setState({ originalState: convertToRaw(convertFromRaw(blocks)) }); this.setEditorContentState(blocks); @@ -201,8 +200,9 @@ class TimedTextEditor extends React.Component { const data = convertToRaw(this.state.editorState.getCurrentContent()); localStorage.setItem(`draftJs-${ mediaUrlName }`, JSON.stringify(data)); - // const newLastLocalSavedDate = new Date().toString(); - // localStorage.setItem(`timestamp-${ mediaUrlName }`, newLastLocalSavedDate); + const newLastLocalSavedDate = new Date().toString(); + localStorage.setItem(`timestamp-${ mediaUrlName }`, newLastLocalSavedDate); + // return newLastLocalSavedDate; } @@ -605,54 +605,3 @@ TimedTextEditor.propTypes = { }; export default TimedTextEditor; - -// TODO: move CustomEditor in separate file -class CustomEditor extends React.Component { - - handleWordClick = (e) => { - 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.props.editorState, - setEditorNewContentState: this.props.setEditorNewContentState, - onWordClick: this.handleWordClick, - handleAnalyticsEvents: this.props.handleAnalyticsEvents - } - }; - } - - shouldComponentUpdate(nextProps) { - // https://stackoverflow.com/questions/39182657/best-performance-method-to-check-if-contentstate-changed-in-draftjs-or-just-edi - if (nextProps.editorState !== this.props.editorState) { - return true; - } - - return false; - } - - handleOnChange = (e) => { - this.props.onChange(e); - } - - render() { - return ( - - ); - } -} \ No newline at end of file From dc4236f30c67ee41ad5cbaea73345f4623311582 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Tue, 17 Sep 2019 08:46:42 +0100 Subject: [PATCH 4/9] Adding changes to timed text editor --- packages/components/timed-text-editor/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/timed-text-editor/index.js b/packages/components/timed-text-editor/index.js index a2123676..535b0dcf 100644 --- a/packages/components/timed-text-editor/index.js +++ b/packages/components/timed-text-editor/index.js @@ -541,7 +541,6 @@ class TimedTextEditor extends React.Component { editorState={ this.state.editorState } onChange={ this.onChange } stripPastedStyles - // renderBlockWithTimecodes={ this.renderBlockWithTimecodes } handleKeyCommand={ this.handleKeyCommand } customKeyBindingFn={ this.customKeyBindingFn } spellCheck={ this.props.spellCheck } From b69747c3f5be87822952c9f41022a940b06ffa86 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Tue, 17 Sep 2019 08:49:21 +0100 Subject: [PATCH 5/9] Moving out dependencies of CusomEditor and the component itself outside, and refactor --- .../timed-text-editor/CustomEditor.js | 73 +++++++++++++++++++ .../components/timed-text-editor/index.js | 57 +-------------- 2 files changed, 75 insertions(+), 55 deletions(-) create mode 100644 packages/components/timed-text-editor/CustomEditor.js diff --git a/packages/components/timed-text-editor/CustomEditor.js b/packages/components/timed-text-editor/CustomEditor.js new file mode 100644 index 00000000..f68fc23e --- /dev/null +++ b/packages/components/timed-text-editor/CustomEditor.js @@ -0,0 +1,73 @@ +// TODO: move CustomEditor in separate file +import React from 'react'; +import PropTypes from 'prop-types'; + +import { Editor } from 'draft-js'; + +import WrapperBlock from './WrapperBlock'; + +class CustomEditor extends React.Component { + + handleWordClick = (e) => { + 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.props.editorState, + setEditorNewContentState: this.props.setEditorNewContentState, + onWordClick: this.handleWordClick, + handleAnalyticsEvents: this.props.handleAnalyticsEvents + } + }; + } + + shouldComponentUpdate(nextProps) { + // https://stackoverflow.com/questions/39182657/best-performance-method-to-check-if-contentstate-changed-in-draftjs-or-just-edi + if (nextProps.editorState !== this.props.editorState) { + return true; + } + + return false; + } + + handleOnChange = (e) => { + this.props.onChange(e); + } + + render() { + return ( + + ); + } +} + +CustomEditor.propTypes = { + customKeyBindingFn: PropTypes.any, + editorState: PropTypes.any, + handleAnalyticsEvents: PropTypes.any, + handleKeyCommand: PropTypes.any, + onChange: PropTypes.any, + onWordClick: PropTypes.any, + setEditorNewContentState: PropTypes.any, + showSpeakers: PropTypes.any, + showTimecodes: PropTypes.any, + spellCheck: PropTypes.any, + timecodeOffset: PropTypes.any +}; + +export default CustomEditor; \ No newline at end of file diff --git a/packages/components/timed-text-editor/index.js b/packages/components/timed-text-editor/index.js index 60f9e254..5c8bee21 100644 --- a/packages/components/timed-text-editor/index.js +++ b/packages/components/timed-text-editor/index.js @@ -1,8 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; +import CustomEditor from './CustomEditor'; import { - Editor, EditorState, CompositeDecorator, convertFromRaw, @@ -12,8 +12,6 @@ import { } from 'draft-js'; import Word from './Word'; -import WrapperBlock from './WrapperBlock'; - // TODO: connect to local packages version // import sttJsonAdapter from '../../Util/adapters/index.js'; import sttJsonAdapter from '../../stt-adapters'; @@ -605,55 +603,4 @@ TimedTextEditor.propTypes = { fileName: PropTypes.string }; -export default TimedTextEditor; - -// TODO: move CustomEditor in separate file -class CustomEditor extends React.Component { - - handleWordClick = (e) => { - 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.props.editorState, - setEditorNewContentState: this.props.setEditorNewContentState, - onWordClick: this.handleWordClick, - handleAnalyticsEvents: this.props.handleAnalyticsEvents - } - }; - } - - shouldComponentUpdate(nextProps) { - // https://stackoverflow.com/questions/39182657/best-performance-method-to-check-if-contentstate-changed-in-draftjs-or-just-edi - if (nextProps.editorState !== this.props.editorState) { - return true; - } - - return false; - } - - handleOnChange = (e) => { - this.props.onChange(e); - } - - render() { - return ( - - ); - } -} \ No newline at end of file +export default TimedTextEditor; \ No newline at end of file From ff3e3e0309ee87dc62f80073b1856148cce08306 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Tue, 17 Sep 2019 14:07:57 +0100 Subject: [PATCH 6/9] Adding the simplest react-testing-library --- package-lock.json | 9 -- package.json | 6 +- .../timed-text-editor/CustomEditor.js | 71 ----------- .../__snapshots__/index.test.js.snap | 110 ------------------ .../components/timed-text-editor/index.js | 41 ++++--- .../timed-text-editor/index.test.js | 17 +-- 6 files changed, 33 insertions(+), 221 deletions(-) delete mode 100644 packages/components/timed-text-editor/CustomEditor.js delete mode 100644 packages/components/timed-text-editor/__snapshots__/index.test.js.snap diff --git a/package-lock.json b/package-lock.json index b42185ac..7ae6aaa4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5997,15 +5997,6 @@ } } }, - "enzyme-to-json": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.4.0.tgz", - "integrity": "sha512-gbu8P8PMAtb+qtKuGVRdZIYxWHC03q1dGS3EKRmUzmTDIracu3o6cQ0d4xI2YWojbelbxjYOsmqM5EgAL0WgIA==", - "dev": true, - "requires": { - "lodash": "^4.17.12" - } - }, "errno": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz", diff --git a/package.json b/package.json index a2e434fe..80f59f3f 100644 --- a/package.json +++ b/package.json @@ -44,10 +44,7 @@ "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js", "\\.(css|less)$": "/__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", diff --git a/packages/components/timed-text-editor/CustomEditor.js b/packages/components/timed-text-editor/CustomEditor.js deleted file mode 100644 index 2312cea3..00000000 --- a/packages/components/timed-text-editor/CustomEditor.js +++ /dev/null @@ -1,71 +0,0 @@ -// TODO: move CustomEditor in separate file -import React from 'react'; -import PropTypes from 'prop-types'; -import { Editor } from 'draft-js'; -import WrapperBlock from './WrapperBlock'; - -class CustomEditor extends React.Component { - - handleWordClick = (e) => { - 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.props.editorState, - setEditorNewContentState: this.props.setEditorNewContentState, - onWordClick: this.handleWordClick, - handleAnalyticsEvents: this.props.handleAnalyticsEvents - } - }; - } - - shouldComponentUpdate(nextProps) { - // https://stackoverflow.com/questions/39182657/best-performance-method-to-check-if-contentstate-changed-in-draftjs-or-just-edi - if (nextProps.editorState !== this.props.editorState) { - return true; - } - - return false; - } - - handleOnChange = (e) => { - this.props.onChange(e); - } - - render() { - return ( - - ); - } -} - -CustomEditor.propTypes = { - customKeyBindingFn: PropTypes.any, - editorState: PropTypes.any, - handleAnalyticsEvents: PropTypes.any, - handleKeyCommand: PropTypes.any, - onChange: PropTypes.any, - onWordClick: PropTypes.any, - setEditorNewContentState: PropTypes.any, - showSpeakers: PropTypes.any, - showTimecodes: PropTypes.any, - spellCheck: PropTypes.any, - timecodeOffset: PropTypes.any -}; - -export default CustomEditor; \ No newline at end of file diff --git a/packages/components/timed-text-editor/__snapshots__/index.test.js.snap b/packages/components/timed-text-editor/__snapshots__/index.test.js.snap deleted file mode 100644 index dffaeae1..00000000 --- a/packages/components/timed-text-editor/__snapshots__/index.test.js.snap +++ /dev/null @@ -1,110 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should render correctly in "debug" mode 1`] = ` -
-
- - -
-
-`; diff --git a/packages/components/timed-text-editor/index.js b/packages/components/timed-text-editor/index.js index 830169f8..1a2c9286 100644 --- a/packages/components/timed-text-editor/index.js +++ b/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,7 +538,7 @@ class TimedTextEditor extends React.Component { const time = Math.round(this.props.currentTime * 4.0) / 4.0; const editor = ( -
this.handleDoubleClick(event) } > - - 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 } /> +
); return ( -
+
{ this.props.transcriptData !== null ? editor : null }
); diff --git a/packages/components/timed-text-editor/index.test.js b/packages/components/timed-text-editor/index.test.js index 1af95a13..f38434d8 100644 --- a/packages/components/timed-text-editor/index.test.js +++ b/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(); - getByText(''); + it('renders the editor sections correctly', async () => { + const { getByTestId } = render(); + 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'); - }); \ No newline at end of file From 07b905b0b13f886a78a75bfc1d8c0984ff447368 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Tue, 17 Sep 2019 16:43:34 +0100 Subject: [PATCH 7/9] Adding back the optimisation introduced in #160 --- .../timed-text-editor/MemoEditor.js | 21 +++++++++++++++++++ .../components/timed-text-editor/index.js | 17 +++++++-------- 2 files changed, 29 insertions(+), 9 deletions(-) create mode 100644 packages/components/timed-text-editor/MemoEditor.js diff --git a/packages/components/timed-text-editor/MemoEditor.js b/packages/components/timed-text-editor/MemoEditor.js new file mode 100644 index 00000000..829128c0 --- /dev/null +++ b/packages/components/timed-text-editor/MemoEditor.js @@ -0,0 +1,21 @@ +import React from 'react'; + +import { + Editor, +} from 'draft-js'; + +const MemoEditor = (props) => { + + return ( + ); +}; + +export default React.memo(MemoEditor); \ No newline at end of file diff --git a/packages/components/timed-text-editor/index.js b/packages/components/timed-text-editor/index.js index 1a2c9286..42691727 100644 --- a/packages/components/timed-text-editor/index.js +++ b/packages/components/timed-text-editor/index.js @@ -1,9 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import WrapperBlock from './WrapperBlock'; - +import MemoEditor from './MemoEditor'; import { - Editor, EditorState, CompositeDecorator, convertFromRaw, @@ -37,7 +36,6 @@ class TimedTextEditor extends React.Component { shouldComponentUpdate = (nextProps, nextState) => { if (nextProps !== this.props) return true; - if (nextState !== this.state ) return true; return false; @@ -46,7 +44,7 @@ class TimedTextEditor extends React.Component { componentDidUpdate(prevProps, prevState) { if ( (prevProps.transcriptData !== this.props.transcriptData) - && ( this.props.mediaUrl !== null && !this.isPresentInLocalStorage(this.props.mediaUrl) ) + && ( this.props.mediaUrl && !this.isPresentInLocalStorage(this.props.mediaUrl) ) ) { this.loadData(); } @@ -553,12 +551,13 @@ class TimedTextEditor extends React.Component { {`span.Word[data-prev-times~="${ time }"] { color: ${ unplayedColor } }`} {`span.Word[data-confidence="low"] { border-bottom: ${ correctionBorder } }`} - this.onChange(e) } + onChange={ this.onChange } stripPastedStyles blockRendererFn={ this.renderBlockWithTimecodes } - handleKeyCommand={ (e) => this.handleKeyCommand(e) } + handleKeyCommand={ this.handleKeyCommand } keyBindingFn={ this.customKeyBindingFn } spellCheck={ this.props.spellCheck } /> @@ -568,7 +567,7 @@ class TimedTextEditor extends React.Component { return (
- { this.props.transcriptData !== null ? editor : null } + { this.props.transcriptData ? editor : null }
); } @@ -579,7 +578,7 @@ class TimedTextEditor extends React.Component { const getEntityStrategy = mutability => (contentBlock, callback, contentState) => { contentBlock.findEntityRanges((character) => { const entityKey = character.getEntity(); - if (entityKey === null) { + if (!entityKey) { return false; } From ffa721060f566f6eacfc3e53e176b96b3e0b3ee9 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Tue, 17 Sep 2019 16:47:18 +0100 Subject: [PATCH 8/9] updating the dataid for testing --- packages/components/timed-text-editor/MemoEditor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/timed-text-editor/MemoEditor.js b/packages/components/timed-text-editor/MemoEditor.js index 829128c0..ec102346 100644 --- a/packages/components/timed-text-editor/MemoEditor.js +++ b/packages/components/timed-text-editor/MemoEditor.js @@ -7,7 +7,7 @@ import { const MemoEditor = (props) => { return ( - { />); }; -export default React.memo(MemoEditor); \ No newline at end of file +export default React.memo(MemoEditor); From f929b7e7101ab4334ba3b4ec64fc69aaab128168 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Tue, 17 Sep 2019 16:54:08 +0100 Subject: [PATCH 9/9] adding prop types to memo editor and updating naming to simplify --- .../components/timed-text-editor/MemoEditor.js | 14 ++++++++++++-- packages/components/timed-text-editor/index.js | 8 ++++---- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/components/timed-text-editor/MemoEditor.js b/packages/components/timed-text-editor/MemoEditor.js index ec102346..3ce18708 100644 --- a/packages/components/timed-text-editor/MemoEditor.js +++ b/packages/components/timed-text-editor/MemoEditor.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { Editor, @@ -11,11 +12,20 @@ const MemoEditor = (props) => { editorState={ props.editorState } onChange={ props.onChange } stripPastedStyles - blockRendererFn={ props.renderBlockWithTimecodes } + blockRendererFn={ props.blockRendererFn } handleKeyCommand={ props.handleKeyCommand } - keyBindingFn={ props.customKeyBindingFn } + keyBindingFn={ props.keyBindingFn } spellCheck={ props.spellCheck } />); }; +MemoEditor.propTypes = { + keyBindingFn: PropTypes.any, + editorState: PropTypes.any, + handleKeyCommand: PropTypes.any, + onChange: PropTypes.any, + blockRendererFn: PropTypes.any, + spellCheck: PropTypes.any +}; + export default React.memo(MemoEditor); diff --git a/packages/components/timed-text-editor/index.js b/packages/components/timed-text-editor/index.js index 42691727..5c1e772b 100644 --- a/packages/components/timed-text-editor/index.js +++ b/packages/components/timed-text-editor/index.js @@ -303,7 +303,7 @@ class TimedTextEditor extends React.Component { /** * Listen for draftJs custom key bindings */ - customKeyBindingFn = (e) => { + keyBindingFn = (e) => { const enterKey = 13; const spaceKey = 32; @@ -509,7 +509,7 @@ class TimedTextEditor extends React.Component { this.props.onWordClick(e); } - renderBlockWithTimecodes = () => { + blockRendererFn = () => { return { component: WrapperBlock, editable: true, @@ -556,9 +556,9 @@ class TimedTextEditor extends React.Component { editorState={ this.state.editorState } onChange={ this.onChange } stripPastedStyles - blockRendererFn={ this.renderBlockWithTimecodes } + blockRendererFn={ this.blockRendererFn } handleKeyCommand={ this.handleKeyCommand } - keyBindingFn={ this.customKeyBindingFn } + keyBindingFn={ this.keyBindingFn } spellCheck={ this.props.spellCheck } />