From 66254f33f83621b585c4411b28a48d310d69e74c Mon Sep 17 00:00:00 2001 From: freedomlang Date: Mon, 21 Jan 2019 22:56:43 +0800 Subject: [PATCH 1/4] add test for image-example --- examples/atomic-block/src/App.js | 66 ++++ examples/atomic-block/src/__test__/index.js | 14 + examples/atomic-block/src/index.js | 68 +--- package-lock.json | 414 ++++++++++++++++++++ package.json | 12 +- 5 files changed, 506 insertions(+), 68 deletions(-) create mode 100644 examples/atomic-block/src/App.js create mode 100644 examples/atomic-block/src/__test__/index.js diff --git a/examples/atomic-block/src/App.js b/examples/atomic-block/src/App.js new file mode 100644 index 0000000..c47b2cb --- /dev/null +++ b/examples/atomic-block/src/App.js @@ -0,0 +1,66 @@ +import React, { Component } from 'react' +import { EditorState, convertFromRaw } from 'draft-js' +import { EditorContainer, Editor } from '@djsp/core' +import AtomicBlock from '@djsp/atomic-block' +import './styles.css' + +const rawContent = { + blocks: [ + { + text: 'Hey there duder', + }, + { + type: 'atomic', + text: ' ', + entityRanges: [ + { + key: 0, + length: 1, + offset: 0, + }, + ], + }, + ], + entityMap: { + 0: { + data: { + title: 'Kitten', + src: 'https://placekitten.com/200/200', + }, + mutability: 'IMMUTABLE', + type: 'IMAGE', + }, + }, +} + +export default class App extends Component { + state = { + editorState: EditorState.createWithContent(convertFromRaw(rawContent)), + } + + onChange = editorState => this.setState({ editorState }) + + render() { + return ( +
+ + + + + {({ isFocused, blockProps: { src, title } }) => { + return ( + {title} + ) + }} + + +
+ ) + } +} \ No newline at end of file diff --git a/examples/atomic-block/src/__test__/index.js b/examples/atomic-block/src/__test__/index.js new file mode 100644 index 0000000..91a2b0c --- /dev/null +++ b/examples/atomic-block/src/__test__/index.js @@ -0,0 +1,14 @@ + +import React from 'react' +import {render, cleanup} from 'react-testing-library' +import App from '../App' + +afterEach(cleanup) + +describe('Tests for render image via @djsp/atomic-block', () => { + it('It should have an image in editor', () => { + const { container } = render(); + const imageEl = container.querySelector('img'); + expect(imageEl).to.have.length(3); + }) +}) diff --git a/examples/atomic-block/src/index.js b/examples/atomic-block/src/index.js index 687e4d8..69f4ddf 100644 --- a/examples/atomic-block/src/index.js +++ b/examples/atomic-block/src/index.js @@ -1,70 +1,6 @@ -import React, { Component } from 'react' +import React from 'react' import ReactDOM from 'react-dom' -import { EditorState, convertFromRaw } from 'draft-js' -import { EditorContainer, Editor } from '@djsp/core' -import AtomicBlock from '@djsp/atomic-block' -import './styles.css' - -const rawContent = { - blocks: [ - { - text: 'Hey there duder', - }, - { - type: 'atomic', - text: ' ', - entityRanges: [ - { - key: 0, - length: 1, - offset: 0, - }, - ], - }, - ], - entityMap: { - 0: { - data: { - title: 'Kitten', - src: 'https://placekitten.com/200/200', - }, - mutability: 'IMMUTABLE', - type: 'IMAGE', - }, - }, -} - -class App extends Component { - state = { - editorState: EditorState.createWithContent(convertFromRaw(rawContent)), - } - - onChange = editorState => this.setState({ editorState }) - - render() { - return ( -
- - - - - {({ isFocused, blockProps: { src, title } }) => { - return ( - {title} - ) - }} - - -
- ) - } -} +import App from './App' ReactDOM.render(, document.getElementById('root')) diff --git a/package-lock.json b/package-lock.json index 60d03ef..f728660 100644 --- a/package-lock.json +++ b/package-lock.json @@ -865,6 +865,23 @@ "source-map-support": "^0.5.9" } }, + "@babel/runtime": { + "version": "7.2.0", + "resolved": "http://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.2.0.tgz", + "integrity": "sha1-sD5C7t31iY4AZG5MhA+ge6jcrX8=", + "dev": true, + "requires": { + "regenerator-runtime": "^0.12.0" + }, + "dependencies": { + "regenerator-runtime": { + "version": "0.12.1", + "resolved": "http://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.12.1.tgz", + "integrity": "sha1-+hpxVEdkwDb4xJsToIsllMn4oN4=", + "dev": true + } + } + }, "@babel/template": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.1.2.tgz", @@ -2197,6 +2214,12 @@ } } }, + "@sheerun/mutationobserver-shim": { + "version": "0.3.2", + "resolved": "http://registry.npm.taobao.org/@sheerun/mutationobserver-shim/download/@sheerun/mutationobserver-shim-0.3.2.tgz", + "integrity": "sha1-gBPyr1Sit9c19xVg/zYNOoF2qHs=", + "dev": true + }, "JSONStream": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.4.tgz", @@ -2207,6 +2230,12 @@ "through": ">=2.2.7 <3" } }, + "abab": { + "version": "2.0.0", + "resolved": "http://registry.npm.taobao.org/abab/download/abab-2.0.0.tgz", + "integrity": "sha1-q6CrTF7uLUx500h9hUUPsjduuw8=", + "dev": true + }, "abbrev": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", @@ -2219,6 +2248,24 @@ "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==", "dev": true }, + "acorn-globals": { + "version": "4.3.0", + "resolved": "http://registry.npm.taobao.org/acorn-globals/download/acorn-globals-4.3.0.tgz", + "integrity": "sha1-47b42jwVUqla5idXH33Wkju1QQM=", + "dev": true, + "requires": { + "acorn": "^6.0.1", + "acorn-walk": "^6.0.1" + }, + "dependencies": { + "acorn": { + "version": "6.0.5", + "resolved": "http://registry.npm.taobao.org/acorn/download/acorn-6.0.5.tgz", + "integrity": "sha1-gXMMCBXz87NNjvqVy3Qwll9NiHo=", + "dev": true + } + } + }, "acorn-jsx": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-4.1.1.tgz", @@ -2228,6 +2275,12 @@ "acorn": "^5.0.3" } }, + "acorn-walk": { + "version": "6.1.1", + "resolved": "http://registry.npm.taobao.org/acorn-walk/download/acorn-walk-6.1.1.tgz", + "integrity": "sha1-02O2b1+sXwGP+cOh57b44xDMORM=", + "dev": true + }, "agent-base": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.2.1.tgz", @@ -2322,6 +2375,12 @@ "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE=", "dev": true }, + "array-equal": { + "version": "1.0.0", + "resolved": "http://registry.npm.taobao.org/array-equal/download/array-equal-1.0.0.tgz", + "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=", + "dev": true + }, "array-find-index": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz", @@ -2407,6 +2466,12 @@ "lodash": "^4.17.10" } }, + "async-limiter": { + "version": "1.0.0", + "resolved": "http://registry.npm.taobao.org/async-limiter/download/async-limiter-1.0.0.tgz", + "integrity": "sha1-ePrtjD0HSrgfIrTphdeehzj3IPg=", + "dev": true + }, "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -2654,6 +2719,12 @@ "concat-map": "0.0.1" } }, + "browser-process-hrtime": { + "version": "0.1.3", + "resolved": "http://registry.npm.taobao.org/browser-process-hrtime/download/browser-process-hrtime-0.1.3.tgz", + "integrity": "sha1-YW8A+u8d9+wbW/nP4r3DFw8mx7Q=", + "dev": true + }, "browser-stdout": { "version": "1.3.1", "resolved": "http://registry.npm.taobao.org/browser-stdout/download/browser-stdout-1.3.1.tgz", @@ -2814,6 +2885,12 @@ "type-detect": "^4.0.5" } }, + "chai-dom": { + "version": "1.8.1", + "resolved": "http://registry.npm.taobao.org/chai-dom/download/chai-dom-1.8.1.tgz", + "integrity": "sha1-znl4rJPWIzFHQq62rahsnk2HNt4=", + "dev": true + }, "chainsaw": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz", @@ -3313,6 +3390,21 @@ "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=", "dev": true }, + "cssom": { + "version": "0.3.4", + "resolved": "http://registry.npm.taobao.org/cssom/download/cssom-0.3.4.tgz", + "integrity": "sha1-jNUuijrP1o067TjuCmQBd9L515c=", + "dev": true + }, + "cssstyle": { + "version": "1.1.1", + "resolved": "http://registry.npm.taobao.org/cssstyle/download/cssstyle-1.1.1.tgz", + "integrity": "sha1-GLA4qcRNZfeo5CimU7n2/kL69fs=", + "dev": true, + "requires": { + "cssom": "0.3.x" + } + }, "currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", @@ -3346,6 +3438,17 @@ "assert-plus": "^1.0.0" } }, + "data-urls": { + "version": "1.1.0", + "resolved": "http://registry.npm.taobao.org/data-urls/download/data-urls-1.1.0.tgz", + "integrity": "sha1-Fe4Fgrql4iu1nHcUDaj5x2lju/4=", + "dev": true, + "requires": { + "abab": "^2.0.0", + "whatwg-mimetype": "^2.2.0", + "whatwg-url": "^7.0.0" + } + }, "dateformat": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz", @@ -3583,6 +3686,27 @@ "esutils": "^2.0.2" } }, + "dom-testing-library": { + "version": "3.16.4", + "resolved": "http://registry.npm.taobao.org/dom-testing-library/download/dom-testing-library-3.16.4.tgz", + "integrity": "sha1-UM3IRmceARp/SWdq+XUQYbkfxFc=", + "dev": true, + "requires": { + "@babel/runtime": "^7.1.5", + "@sheerun/mutationobserver-shim": "^0.3.2", + "pretty-format": "^23.6.0", + "wait-for-expect": "^1.1.0" + } + }, + "domexception": { + "version": "1.0.1", + "resolved": "http://registry.npm.taobao.org/domexception/download/domexception-1.0.1.tgz", + "integrity": "sha1-k3RCZEymoxJh7zbj7Gd/6AVYLJA=", + "dev": true, + "requires": { + "webidl-conversions": "^4.0.2" + } + }, "dot-prop": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz", @@ -3720,6 +3844,27 @@ "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", "dev": true }, + "escodegen": { + "version": "1.11.0", + "resolved": "http://registry.npm.taobao.org/escodegen/download/escodegen-1.11.0.tgz", + "integrity": "sha1-snqTiUgdW/1b7Hb3ux6z+PRVZYk=", + "dev": true, + "requires": { + "esprima": "^3.1.3", + "estraverse": "^4.2.0", + "esutils": "^2.0.2", + "optionator": "^0.8.1", + "source-map": "~0.6.1" + }, + "dependencies": { + "esprima": { + "version": "3.1.3", + "resolved": "http://registry.npm.taobao.org/esprima/download/esprima-3.1.3.tgz", + "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=", + "dev": true + } + } + }, "eslint": { "version": "5.6.1", "resolved": "https://registry.npmjs.org/eslint/-/eslint-5.6.1.tgz", @@ -5624,6 +5769,15 @@ "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==", "dev": true }, + "html-encoding-sniffer": { + "version": "1.0.2", + "resolved": "http://registry.npm.taobao.org/html-encoding-sniffer/download/html-encoding-sniffer-1.0.2.tgz", + "integrity": "sha1-5w2EuU2lOqN14R/jo1G+ZkLKRvg=", + "dev": true, + "requires": { + "whatwg-encoding": "^1.0.1" + } + }, "http-cache-semantics": { "version": "3.8.1", "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz", @@ -6208,6 +6362,64 @@ "dev": true, "optional": true }, + "jsdom": { + "version": "13.1.0", + "resolved": "http://registry.npm.taobao.org/jsdom/download/jsdom-13.1.0.tgz", + "integrity": "sha1-+nNW8MyBEdDxB3y3gA0G8i8dZsc=", + "dev": true, + "requires": { + "abab": "^2.0.0", + "acorn": "^6.0.4", + "acorn-globals": "^4.3.0", + "array-equal": "^1.0.0", + "cssom": "^0.3.4", + "cssstyle": "^1.1.1", + "data-urls": "^1.1.0", + "domexception": "^1.0.1", + "escodegen": "^1.11.0", + "html-encoding-sniffer": "^1.0.2", + "nwsapi": "^2.0.9", + "parse5": "5.1.0", + "pn": "^1.1.0", + "request": "^2.88.0", + "request-promise-native": "^1.0.5", + "saxes": "^3.1.4", + "symbol-tree": "^3.2.2", + "tough-cookie": "^2.5.0", + "w3c-hr-time": "^1.0.1", + "w3c-xmlserializer": "^1.0.1", + "webidl-conversions": "^4.0.2", + "whatwg-encoding": "^1.0.5", + "whatwg-mimetype": "^2.3.0", + "whatwg-url": "^7.0.0", + "ws": "^6.1.2", + "xml-name-validator": "^3.0.0" + }, + "dependencies": { + "acorn": { + "version": "6.0.5", + "resolved": "http://registry.npm.taobao.org/acorn/download/acorn-6.0.5.tgz", + "integrity": "sha1-gXMMCBXz87NNjvqVy3Qwll9NiHo=", + "dev": true + }, + "tough-cookie": { + "version": "2.5.0", + "resolved": "http://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.5.0.tgz", + "integrity": "sha1-zZ+yoKodWhK0c72fuW+j3P9lreI=", + "dev": true, + "requires": { + "psl": "^1.1.28", + "punycode": "^2.1.1" + } + } + } + }, + "jsdom-global": { + "version": "3.0.2", + "resolved": "http://registry.npm.taobao.org/jsdom-global/download/jsdom-global-3.0.2.tgz", + "integrity": "sha1-a9KZwTsMRiay2iwDk81DhdYGrLk=", + "dev": true + }, "jsesc": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.1.tgz", @@ -7326,6 +7538,12 @@ "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true }, + "nwsapi": { + "version": "2.0.9", + "resolved": "http://registry.npm.taobao.org/nwsapi/download/nwsapi-2.0.9.tgz", + "integrity": "sha1-d6wM39ytUrahFRqE5zJU7cM+0BY=", + "dev": true + }, "oauth-sign": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz", @@ -7768,6 +7986,12 @@ "json-parse-better-errors": "^1.0.1" } }, + "parse5": { + "version": "5.1.0", + "resolved": "http://registry.npm.taobao.org/parse5/download/parse5-5.1.0.tgz", + "integrity": "sha1-xZNByXI/QUxFKXVWTHwApo1YrNI=", + "dev": true + }, "pascalcase": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz", @@ -7893,6 +8117,12 @@ "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==", "dev": true }, + "pn": { + "version": "1.1.0", + "resolved": "http://registry.npm.taobao.org/pn/download/pn-1.1.0.tgz", + "integrity": "sha1-4vTO8OIZ9GPBeas3Rj5OHs3Muvs=", + "dev": true + }, "posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", @@ -8674,6 +8904,24 @@ "fast-diff": "^1.1.2" } }, + "pretty-format": { + "version": "23.6.0", + "resolved": "http://registry.npm.taobao.org/pretty-format/download/pretty-format-23.6.0.tgz", + "integrity": "sha1-XqrI7razO5h7f+YJfqaooUarV2A=", + "dev": true, + "requires": { + "ansi-regex": "^3.0.0", + "ansi-styles": "^3.2.0" + }, + "dependencies": { + "ansi-regex": { + "version": "3.0.0", + "resolved": "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-3.0.0.tgz", + "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", + "dev": true + } + } + }, "private": { "version": "0.1.8", "resolved": "http://registry.npm.taobao.org/private/download/private-0.1.8.tgz", @@ -8808,6 +9056,39 @@ "integrity": "sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=", "dev": true }, + "react": { + "version": "16.7.0", + "resolved": "http://registry.npm.taobao.org/react/download/react-16.7.0.tgz", + "integrity": "sha1-tnTsOWsKVxWHOzUERvfqCAKrY4E=", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.12.0" + } + }, + "react-dom": { + "version": "16.7.0", + "resolved": "http://registry.npm.taobao.org/react-dom/download/react-dom-16.7.0.tgz", + "integrity": "sha1-oXsqfKie5zkLwe1euBeDx0YXSLg=", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.12.0" + } + }, + "react-testing-library": { + "version": "5.4.4", + "resolved": "http://registry.npm.taobao.org/react-testing-library/download/react-testing-library-5.4.4.tgz", + "integrity": "sha1-P6eHmZSSvpSyKORUCnIRVWv0/ZQ=", + "dev": true, + "requires": { + "dom-testing-library": "^3.13.1" + } + }, "read": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", @@ -9050,6 +9331,26 @@ "uuid": "^3.3.2" } }, + "request-promise-core": { + "version": "1.1.1", + "resolved": "http://registry.npm.taobao.org/request-promise-core/download/request-promise-core-1.1.1.tgz", + "integrity": "sha1-Pu4AssWqgyOc+wTFcA2jb4HNCLY=", + "dev": true, + "requires": { + "lodash": "^4.13.1" + } + }, + "request-promise-native": { + "version": "1.0.5", + "resolved": "http://registry.npm.taobao.org/request-promise-native/download/request-promise-native-1.0.5.tgz", + "integrity": "sha1-UoF3D2jgyXGeUWP9P6tIIhX0/aU=", + "dev": true, + "requires": { + "request-promise-core": "1.1.1", + "stealthy-require": "^1.1.0", + "tough-cookie": ">=2.3.3" + } + }, "require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -9200,6 +9501,25 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "saxes": { + "version": "3.1.6", + "resolved": "http://registry.npm.taobao.org/saxes/download/saxes-3.1.6.tgz", + "integrity": "sha1-LZSKR7VJGFFsWmQJbwiGXetb2M0=", + "dev": true, + "requires": { + "xmlchars": "^1.3.1" + } + }, + "scheduler": { + "version": "0.12.0", + "resolved": "http://registry.npm.taobao.org/scheduler/download/scheduler-0.12.0.tgz", + "integrity": "sha1-irF2mZOcCu3FoZamV3Q8SWU4ZHs=", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, "semver": { "version": "5.5.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.1.tgz", @@ -9590,6 +9910,12 @@ } } }, + "stealthy-require": { + "version": "1.1.1", + "resolved": "http://registry.npm.taobao.org/stealthy-require/download/stealthy-require-1.1.1.tgz", + "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=", + "dev": true + }, "stream-each": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz", @@ -9688,6 +10014,12 @@ "has-flag": "^3.0.0" } }, + "symbol-tree": { + "version": "3.2.2", + "resolved": "http://registry.npm.taobao.org/symbol-tree/download/symbol-tree-3.2.2.tgz", + "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=", + "dev": true + }, "table": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/table/-/table-4.0.2.tgz", @@ -9913,6 +10245,15 @@ } } }, + "tr46": { + "version": "1.0.1", + "resolved": "http://registry.npm.taobao.org/tr46/download/tr46-1.0.1.tgz", + "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=", + "dev": true, + "requires": { + "punycode": "^2.1.0" + } + }, "traverse": { "version": "0.3.9", "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz", @@ -10343,6 +10684,32 @@ } } }, + "w3c-hr-time": { + "version": "1.0.1", + "resolved": "http://registry.npm.taobao.org/w3c-hr-time/download/w3c-hr-time-1.0.1.tgz", + "integrity": "sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=", + "dev": true, + "requires": { + "browser-process-hrtime": "^0.1.2" + } + }, + "w3c-xmlserializer": { + "version": "1.0.1", + "resolved": "http://registry.npm.taobao.org/w3c-xmlserializer/download/w3c-xmlserializer-1.0.1.tgz", + "integrity": "sha1-BUzc01ncXR8+yb5OJyx1avSyHTk=", + "dev": true, + "requires": { + "domexception": "^1.0.1", + "webidl-conversions": "^4.0.2", + "xml-name-validator": "^3.0.0" + } + }, + "wait-for-expect": { + "version": "1.1.0", + "resolved": "http://registry.npm.taobao.org/wait-for-expect/download/wait-for-expect-1.1.0.tgz", + "integrity": "sha1-Zgc3XD950yrdNc0sh84T81Gj1FM=", + "dev": true + }, "wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", @@ -10358,12 +10725,38 @@ "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==", "dev": true }, + "whatwg-encoding": { + "version": "1.0.5", + "resolved": "http://registry.npm.taobao.org/whatwg-encoding/download/whatwg-encoding-1.0.5.tgz", + "integrity": "sha1-WrrPd3wyFmpR0IXWtPPn0nET3bA=", + "dev": true, + "requires": { + "iconv-lite": "0.4.24" + } + }, "whatwg-fetch": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz", "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==", "dev": true }, + "whatwg-mimetype": { + "version": "2.3.0", + "resolved": "http://registry.npm.taobao.org/whatwg-mimetype/download/whatwg-mimetype-2.3.0.tgz", + "integrity": "sha1-PUseAxLSB5h5+Cav8Y2+7KWWD78=", + "dev": true + }, + "whatwg-url": { + "version": "7.0.0", + "resolved": "http://registry.npm.taobao.org/whatwg-url/download/whatwg-url-7.0.0.tgz", + "integrity": "sha1-/ekm+lSlmfOt+C3/Jan3vgLcbt0=", + "dev": true, + "requires": { + "lodash.sortby": "^4.7.0", + "tr46": "^1.0.1", + "webidl-conversions": "^4.0.2" + } + }, "which": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", @@ -10497,6 +10890,27 @@ } } }, + "ws": { + "version": "6.1.2", + "resolved": "http://registry.npm.taobao.org/ws/download/ws-6.1.2.tgz", + "integrity": "sha1-PMdGLph5LwrGeUJBSJA97TucOtg=", + "dev": true, + "requires": { + "async-limiter": "~1.0.0" + } + }, + "xml-name-validator": { + "version": "3.0.0", + "resolved": "http://registry.npm.taobao.org/xml-name-validator/download/xml-name-validator-3.0.0.tgz", + "integrity": "sha1-auc+Bt5NjG5H+fsYH3jWSK1FfGo=", + "dev": true + }, + "xmlchars": { + "version": "1.3.1", + "resolved": "http://registry.npm.taobao.org/xmlchars/download/xmlchars-1.3.1.tgz", + "integrity": "sha1-HdoDX4M9u0+GoMKOqmynaSFHk88=", + "dev": true + }, "xregexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.0.0.tgz", diff --git a/package.json b/package.json index dbabe31..5874bed 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@babel/register": "^7.0.0", "babel-eslint": "^10.0.1", "chai": "^4.2.0", + "chai-dom": "^1.8.1", "eslint": "^5.6.1", "eslint-config-prettier": "^3.1.0", "eslint-config-react": "^1.1.7", @@ -26,15 +27,18 @@ "flow-bin": "^0.80.0", "flow-typed": "^2.5.1", "husky": "^1.1.1", + "jsdom": "^13.1.0", + "jsdom-global": "^3.0.2", "lerna": "^3.4.1", "mocha": "^5.2.0", "prettier": "^1.14.3", "prettier-eslint": "^8.8.2", "prettier-eslint-cli": "^4.7.1", + "react-testing-library": "^5.4.4", "to-fast-properties": "^2.0.0" }, "scripts": { - "test": "./node_modules/.bin/mocha --require @babel/register \"./packages/*/!(node_modules)/**/__test__/*.js\"", + "test": "./node_modules/.bin/mocha --require @babel/register --require jsdom-global/register \"./{packages,examples}/*/!(node_modules)/**/__test__/*.js\"", "eslint-check": "eslint --print-config . | eslint-config-prettier-check", "docs": "./node_modules/.bin/gitbook serve", "storybook": "start-storybook -p 9001 -c .storybook", @@ -55,5 +59,9 @@ "pre-push": "npm run lint && npm test && npm run flow" } }, - "dependencies": {} + "dependencies": {}, + "peerDependencies": { + "react": "^16.7.0", + "react-dom": "^16.7.0" + } } From bfb5f7060d017a2af63f20d400629118f162fdf5 Mon Sep 17 00:00:00 2001 From: freedomlang Date: Tue, 22 Jan 2019 19:44:00 +0800 Subject: [PATCH 2/4] add test for clicked image and rename example of image --- examples/atomic-block/src/__test__/index.js | 14 ----------- .../{atomic-block => image-example}/README.md | 0 .../package-lock.json | 0 .../package.json | 0 .../public/index.html | 0 .../src/App.js | 2 +- examples/image-example/src/__test__/index.js | 24 +++++++++++++++++++ .../src/index.js | 0 .../src/styles.css | 0 9 files changed, 25 insertions(+), 15 deletions(-) delete mode 100644 examples/atomic-block/src/__test__/index.js rename examples/{atomic-block => image-example}/README.md (100%) rename examples/{atomic-block => image-example}/package-lock.json (100%) rename examples/{atomic-block => image-example}/package.json (100%) rename examples/{atomic-block => image-example}/public/index.html (100%) rename examples/{atomic-block => image-example}/src/App.js (99%) create mode 100644 examples/image-example/src/__test__/index.js rename examples/{atomic-block => image-example}/src/index.js (100%) rename examples/{atomic-block => image-example}/src/styles.css (100%) diff --git a/examples/atomic-block/src/__test__/index.js b/examples/atomic-block/src/__test__/index.js deleted file mode 100644 index 91a2b0c..0000000 --- a/examples/atomic-block/src/__test__/index.js +++ /dev/null @@ -1,14 +0,0 @@ - -import React from 'react' -import {render, cleanup} from 'react-testing-library' -import App from '../App' - -afterEach(cleanup) - -describe('Tests for render image via @djsp/atomic-block', () => { - it('It should have an image in editor', () => { - const { container } = render(); - const imageEl = container.querySelector('img'); - expect(imageEl).to.have.length(3); - }) -}) diff --git a/examples/atomic-block/README.md b/examples/image-example/README.md similarity index 100% rename from examples/atomic-block/README.md rename to examples/image-example/README.md diff --git a/examples/atomic-block/package-lock.json b/examples/image-example/package-lock.json similarity index 100% rename from examples/atomic-block/package-lock.json rename to examples/image-example/package-lock.json diff --git a/examples/atomic-block/package.json b/examples/image-example/package.json similarity index 100% rename from examples/atomic-block/package.json rename to examples/image-example/package.json diff --git a/examples/atomic-block/public/index.html b/examples/image-example/public/index.html similarity index 100% rename from examples/atomic-block/public/index.html rename to examples/image-example/public/index.html diff --git a/examples/atomic-block/src/App.js b/examples/image-example/src/App.js similarity index 99% rename from examples/atomic-block/src/App.js rename to examples/image-example/src/App.js index c47b2cb..3e12246 100644 --- a/examples/atomic-block/src/App.js +++ b/examples/image-example/src/App.js @@ -63,4 +63,4 @@ export default class App extends Component { ) } -} \ No newline at end of file +} diff --git a/examples/image-example/src/__test__/index.js b/examples/image-example/src/__test__/index.js new file mode 100644 index 0000000..1c5d7d0 --- /dev/null +++ b/examples/image-example/src/__test__/index.js @@ -0,0 +1,24 @@ +import React from 'react' +import { render, fireEvent, cleanup } from 'react-testing-library' +import { wait } from 'dom-testing-library' +import App from '../App' +import { expect, use } from 'chai' +import chaiDom from 'chai-dom' + +use(chaiDom) +afterEach(cleanup) + +describe('Tests for render image via @djsp/atomic-block', () => { + const { container } = render() + const imageEl = container.querySelector('img') + + it('It should have an image in editor', () => { + expect(imageEl).to.have.length(1) + }) + + it('Display border when the image was clicked', async () => { + const clickedImage = imageEl[0] + fireEvent.click(clickedImage) + await wait(() => expect(clickedImage).to.have.class('focused')) + }) +}) diff --git a/examples/atomic-block/src/index.js b/examples/image-example/src/index.js similarity index 100% rename from examples/atomic-block/src/index.js rename to examples/image-example/src/index.js diff --git a/examples/atomic-block/src/styles.css b/examples/image-example/src/styles.css similarity index 100% rename from examples/atomic-block/src/styles.css rename to examples/image-example/src/styles.css From 7773415e95483543ea25747133dc9a4ff7dd666f Mon Sep 17 00:00:00 2001 From: freedomlang Date: Sun, 27 Jan 2019 23:38:17 +0800 Subject: [PATCH 3/4] add test for delete image --- examples/image-example/src/__test__/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/examples/image-example/src/__test__/index.js b/examples/image-example/src/__test__/index.js index 1c5d7d0..29206fc 100644 --- a/examples/image-example/src/__test__/index.js +++ b/examples/image-example/src/__test__/index.js @@ -11,14 +11,19 @@ afterEach(cleanup) describe('Tests for render image via @djsp/atomic-block', () => { const { container } = render() const imageEl = container.querySelector('img') + const clickedImage = imageEl[0] it('It should have an image in editor', () => { expect(imageEl).to.have.length(1) }) it('Display border when the image was clicked', async () => { - const clickedImage = imageEl[0] fireEvent.click(clickedImage) await wait(() => expect(clickedImage).to.have.class('focused')) }) + + it('Image should be deleted', async () => { + fireEvent.keyDown(clickedImage, { key: 'Backspace', code: 8}) + await wait(() => expect(container.querySelector('img')).should.be.empty) + }) }) From fb230cec709ad22cbaaf0e3dd48f7b103fe8a808 Mon Sep 17 00:00:00 2001 From: freedomlang Date: Tue, 19 Feb 2019 21:52:16 +0800 Subject: [PATCH 4/4] fix test error --- examples/image-example/src/__test__/index.js | 29 ------- examples/image-example/src/__tests__/index.js | 32 +++++++ package-lock.json | 86 ++++++++++++++++--- package.json | 7 +- .../src/{__test__ => __tests__}/index.js | 0 testHelper.js | 61 +++++++++++++ 6 files changed, 174 insertions(+), 41 deletions(-) delete mode 100644 examples/image-example/src/__test__/index.js create mode 100644 examples/image-example/src/__tests__/index.js rename packages/utils/src/{__test__ => __tests__}/index.js (100%) create mode 100644 testHelper.js diff --git a/examples/image-example/src/__test__/index.js b/examples/image-example/src/__test__/index.js deleted file mode 100644 index 29206fc..0000000 --- a/examples/image-example/src/__test__/index.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' -import { render, fireEvent, cleanup } from 'react-testing-library' -import { wait } from 'dom-testing-library' -import App from '../App' -import { expect, use } from 'chai' -import chaiDom from 'chai-dom' - -use(chaiDom) -afterEach(cleanup) - -describe('Tests for render image via @djsp/atomic-block', () => { - const { container } = render() - const imageEl = container.querySelector('img') - const clickedImage = imageEl[0] - - it('It should have an image in editor', () => { - expect(imageEl).to.have.length(1) - }) - - it('Display border when the image was clicked', async () => { - fireEvent.click(clickedImage) - await wait(() => expect(clickedImage).to.have.class('focused')) - }) - - it('Image should be deleted', async () => { - fireEvent.keyDown(clickedImage, { key: 'Backspace', code: 8}) - await wait(() => expect(container.querySelector('img')).should.be.empty) - }) -}) diff --git a/examples/image-example/src/__tests__/index.js b/examples/image-example/src/__tests__/index.js new file mode 100644 index 0000000..76af6d5 --- /dev/null +++ b/examples/image-example/src/__tests__/index.js @@ -0,0 +1,32 @@ +import React from 'react' +import { render, fireEvent } from 'react-testing-library' +import { waitForElement } from 'dom-testing-library' +import App from '../App' +import { expect } from 'chai' + +// afterEach(cleanup) + +describe('Tests for render image via @djsp/atomic-block', () => { + const { container } = render() + const imageEl = container.querySelector('img') + + it('It should have an image in editor', () => { + // eslint-disable-next-line no-unused-expressions + expect(imageEl).to.exist + }) + + it('Image should be focused after clicked', async () => { + fireEvent.click(imageEl) + const focusedEl = await waitForElement(() => + container.querySelector('.focused') + ) + expect(focusedEl).to.have.class('focused') + }) + + // Having problem about keyboard event + // it('Image should be deleted', async () => { + // fireEvent.keyDown(imageEl, { key: 'backspace', code: 8, charCode: 8}) + // await wait(() => console.log(container.querySelector('img')), { interval: 2000 }) + // expect(container.querySelector('img')).not.to.exist + // }) +}) diff --git a/package-lock.json b/package-lock.json index f728660..0b44809 100644 --- a/package-lock.json +++ b/package-lock.json @@ -778,6 +778,24 @@ "regexpu-core": "^4.1.3" } }, + "@babel/polyfill": { + "version": "7.2.5", + "resolved": "http://registry.npm.taobao.org/@babel/polyfill/download/@babel/polyfill-7.2.5.tgz", + "integrity": "sha1-bFS5ZPca0n7d3FZ9Bl5X6H7X+n0=", + "dev": true, + "requires": { + "core-js": "^2.5.7", + "regenerator-runtime": "^0.12.0" + }, + "dependencies": { + "regenerator-runtime": { + "version": "0.12.1", + "resolved": "http://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.12.1.tgz", + "integrity": "sha1-+hpxVEdkwDb4xJsToIsllMn4oN4=", + "dev": true + } + } + }, "@babel/preset-env": { "version": "7.1.0", "resolved": "http://registry.npm.taobao.org/@babel/preset-env/download/@babel/preset-env-7.1.0.tgz", @@ -3716,6 +3734,40 @@ "is-obj": "^1.0.0" } }, + "draft-js": { + "version": "0.10.5", + "resolved": "http://registry.npm.taobao.org/draft-js/download/draft-js-0.10.5.tgz", + "integrity": "sha1-v6m+sBj+BTPbsI1mdcNxprCPp0I=", + "dev": true, + "requires": { + "fbjs": "^0.8.15", + "immutable": "~3.7.4", + "object-assign": "^4.1.0" + }, + "dependencies": { + "core-js": { + "version": "1.2.7", + "resolved": "http://registry.npm.taobao.org/core-js/download/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=", + "dev": true + }, + "fbjs": { + "version": "0.8.17", + "resolved": "http://registry.npm.taobao.org/fbjs/download/fbjs-0.8.17.tgz", + "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", + "dev": true, + "requires": { + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + } + } + } + }, "duplexer": { "version": "0.1.1", "resolved": "http://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz", @@ -5972,6 +6024,12 @@ "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", "dev": true }, + "ignore-styles": { + "version": "5.0.1", + "resolved": "http://registry.npm.taobao.org/ignore-styles/download/ignore-styles-5.0.1.tgz", + "integrity": "sha1-tJ7yJ0va/NikiAqWa/440aC/RnE=", + "dev": true + }, "ignore-walk": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz", @@ -5981,6 +6039,12 @@ "minimatch": "^3.0.4" } }, + "immutable": { + "version": "3.7.6", + "resolved": "http://registry.npm.taobao.org/immutable/download/immutable-3.7.6.tgz", + "integrity": "sha1-E7TTyxK++hVIKib+Gy665kAHHks=", + "dev": true + }, "import-local": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/import-local/-/import-local-1.0.0.tgz", @@ -9057,27 +9121,27 @@ "dev": true }, "react": { - "version": "16.7.0", - "resolved": "http://registry.npm.taobao.org/react/download/react-16.7.0.tgz", - "integrity": "sha1-tnTsOWsKVxWHOzUERvfqCAKrY4E=", + "version": "16.8.2", + "resolved": "http://registry.npm.taobao.org/react/download/react-16.8.2.tgz", + "integrity": "sha1-gwZFlv6qmNnChXxN6uGEi1QsnAw=", "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.12.0" + "scheduler": "^0.13.2" } }, "react-dom": { - "version": "16.7.0", - "resolved": "http://registry.npm.taobao.org/react-dom/download/react-dom-16.7.0.tgz", - "integrity": "sha1-oXsqfKie5zkLwe1euBeDx0YXSLg=", + "version": "16.8.2", + "resolved": "http://registry.npm.taobao.org/react-dom/download/react-dom-16.8.2.tgz", + "integrity": "sha1-fIppVF3VVNRdZkQiMLoEpqCjw9M=", "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.12.0" + "scheduler": "^0.13.2" } }, "react-testing-library": { @@ -9511,9 +9575,9 @@ } }, "scheduler": { - "version": "0.12.0", - "resolved": "http://registry.npm.taobao.org/scheduler/download/scheduler-0.12.0.tgz", - "integrity": "sha1-irF2mZOcCu3FoZamV3Q8SWU4ZHs=", + "version": "0.13.2", + "resolved": "http://registry.npm.taobao.org/scheduler/download/scheduler-0.13.2.tgz", + "integrity": "sha1-lp6u4nZKUdLpeyCmCWOyVGvv+Po=", "dev": true, "requires": { "loose-envify": "^1.1.0", diff --git a/package.json b/package.json index 5874bed..65565a9 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "@babel/plugin-proposal-class-properties": "^7.1.0", "@babel/plugin-proposal-export-default-from": "^7.0.0", "@babel/plugin-proposal-export-namespace-from": "^7.0.0", + "@babel/polyfill": "^7.2.5", "@babel/preset-env": "^7.1.0", "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.0.0", @@ -11,6 +12,7 @@ "babel-eslint": "^10.0.1", "chai": "^4.2.0", "chai-dom": "^1.8.1", + "draft-js": "^0.10.5", "eslint": "^5.6.1", "eslint-config-prettier": "^3.1.0", "eslint-config-react": "^1.1.7", @@ -27,6 +29,7 @@ "flow-bin": "^0.80.0", "flow-typed": "^2.5.1", "husky": "^1.1.1", + "ignore-styles": "^5.0.1", "jsdom": "^13.1.0", "jsdom-global": "^3.0.2", "lerna": "^3.4.1", @@ -34,11 +37,13 @@ "prettier": "^1.14.3", "prettier-eslint": "^8.8.2", "prettier-eslint-cli": "^4.7.1", + "react": "^16.8.2", + "react-dom": "^16.8.2", "react-testing-library": "^5.4.4", "to-fast-properties": "^2.0.0" }, "scripts": { - "test": "./node_modules/.bin/mocha --require @babel/register --require jsdom-global/register \"./{packages,examples}/*/!(node_modules)/**/__test__/*.js\"", + "test": "./node_modules/.bin/mocha --require @babel/register --require jsdom-global/register --require testHelper.js \"./{packages,examples}/*/!(node_modules)/**/__tests__/*.js\"", "eslint-check": "eslint --print-config . | eslint-config-prettier-check", "docs": "./node_modules/.bin/gitbook serve", "storybook": "start-storybook -p 9001 -c .storybook", diff --git a/packages/utils/src/__test__/index.js b/packages/utils/src/__tests__/index.js similarity index 100% rename from packages/utils/src/__test__/index.js rename to packages/utils/src/__tests__/index.js diff --git a/testHelper.js b/testHelper.js new file mode 100644 index 0000000..8374b16 --- /dev/null +++ b/testHelper.js @@ -0,0 +1,61 @@ +import '@babel/polyfill' +import 'ignore-styles' +import chai from 'chai' +import chaiDom from 'chai-dom' + +process.env.NODE_ENV = 'test' + +const { JSDOM } = require('jsdom') + +const jsdom = new JSDOM('', { + url: 'http://localhost/', + // runScripts: 'outside-only', +}) +const { window } = jsdom +window.Date = Date +// window.getSelection isn't in jsdom +// https://github.com/tmpvar/jsdom/issues/937 +window.getSelection = () => ({ + addRange: () => {}, + removeAllRanges: () => {}, +}) + +// window.document.createRange isn't in jsdom +window.document.createRange = () => ({ + setStart: () => {}, + setEnd: () => {}, + commonAncestorContainer: { + nodeName: 'BODY', + }, +}) + +function copyProps(src, target) { + const props = Object.getOwnPropertyNames(src) + .filter(prop => typeof target[prop] === 'undefined') + .reduce( + (result, prop) => ({ + ...result, + [prop]: Object.getOwnPropertyDescriptor(src, prop), + }), + {} + ) + Object.defineProperties(target, props) +} + +global.window = window +global.document = window.document +global.navigator = { + userAgent: 'node.js', +} +copyProps(window, global) + +const exposedProperties = ['window', 'navigator', 'document'] + +Object.keys(document.defaultView).forEach(property => { + if (typeof global[property] === 'undefined') { + exposedProperties.push(property) + global[property] = document.defaultView[property] + } +}) + +chai.use(chaiDom)