Skip to content

Commit 024827c

Browse files
alexkrolickalexkrolick
authored
add browser test suite (#581)
* add in-browser smoke tests with cypress * add cypress intellisense * add prettier config matching current style * update cypress * add more e2e tests - instead of using demo page, use a test harness that allows more inspection of the editor instance - run the old test suite inside the browser (!! it works, just requires one test to be rewritten to fully catch errors instead of hiding them)
1 parent 47f8a4e commit 024827c

10 files changed

+932
-99
lines changed

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,7 @@
1818
# Packaging artifacts
1919
/react-quill-*.tgz
2020
/package
21+
22+
# Test artifacts
23+
.cypress/screenshots
24+
.cypress/videos

‎.prettierrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "es5"
4+
}

‎cypress.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"integrationFolder": "test",
3+
"fileServerFolder": "demo",
4+
"testFiles": "*.spec.js",
5+
"videosFolder": ".cypress/videos",
6+
"screenshotsFolder": ".cypress/screenshots",
7+
"fixturesFolder": false,
8+
"pluginsFile": false,
9+
"supportFile": false
10+
}

‎demo/test.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<head>
2+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
3+
<link rel="stylesheet" href="quill.snow.css" />
4+
</head>
5+
<body>
6+
<div id="app"></div>
7+
</body>

‎package.json

+8-4
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,12 @@
1515
"build:dist": "webpack",
1616
"build:css": "cpx 'node_modules/quill/dist/quill.*.css' dist",
1717
"watch": "tsc --watch",
18-
"test": "npm run build && npm run test:unit && npm run test:coverage",
18+
"pretest": "npm run build",
19+
"test": "npm run test:unit && npm run test:coverage && npm run test:browser",
1920
"test:unit": "mocha --recursive --require=./test/setup.js -R spec test/index",
2021
"test:coverage": "mocha --recursive --require=./test/setup.js -R mocha-text-cov test/index",
22+
"test:browser": "cypress run",
23+
"test:browser:interactive": "cypress open",
2124
"demo": "superstatic demo",
2225
"clean": "rimraf lib dist",
2326
"prepublishOnly": "npm run build"
@@ -49,17 +52,18 @@
4952
"react-dom": "^16.0.0"
5053
},
5154
"devDependencies": {
52-
"@types/react": "^16.9.11",
53-
"@types/react-dom": "^16.9.4",
54-
"@types/lodash": "^4.14.146",
5555
"@types/chai": "^4.2.11",
56+
"@types/lodash": "^4.14.146",
5657
"@types/mocha": "^7.0.2",
58+
"@types/react": "^16.9.11",
59+
"@types/react-dom": "^16.9.4",
5760
"@types/sinon": "^7.5.2",
5861
"blanket": "^1.2.3",
5962
"chai": "^4.2.0",
6063
"chai-enzyme": "^1.0.0-beta.1",
6164
"cheerio": "^1.0.0-rc.3",
6265
"cpx": "^1.5.0",
66+
"cypress": "^4.3.0",
6367
"enzyme": "^3.10.0",
6468
"enzyme-adapter-react-16": "^1.15.1",
6569
"jsdom": "^11.0.0",

‎test/index.js

+54-39
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@
88

99
const React = require('react');
1010
const sinon = require('sinon');
11-
const {expect} = require('chai');
1211
const ReactQuill = require('../lib/index');
13-
const {Quill} = require('../lib/index');
12+
const { Quill } = require('../lib/index');
1413

1514
const {
1615
mountReactQuill,
@@ -20,15 +19,16 @@ const {
2019
withMockedConsole,
2120
} = require('./utils');
2221

23-
console.log('\n\
22+
console.log(
23+
'\n\
2424
Note that some functionality cannot be tested outside of a full browser environment.\n\n\
2525
To manually test the component:\n\
26-
1) Run "npm install" \& "npm run build"\n\
26+
1) Run "npm install" & "npm run build"\n\
2727
2) Open "demo/index.html" in a web browser.\
28-
');
28+
'
29+
);
2930

3031
describe('<ReactQuill />', function() {
31-
3232
it('calls componentDidMount', () => {
3333
sinon.spy(ReactQuill.prototype, 'componentDidMount');
3434
const wrapper = mountReactQuill();
@@ -37,18 +37,18 @@ describe('<ReactQuill />', function() {
3737
});
3838

3939
it('allows props to be set', () => {
40-
const props = {readOnly: true}
40+
const props = { readOnly: true };
4141
const wrapper = mountReactQuill(props);
4242
expect(wrapper.props().readOnly).to.equal(true);
43-
wrapper.setProps({readOnly: false});
43+
wrapper.setProps({ readOnly: false });
4444
expect(wrapper.props().readOnly).to.equal(false);
4545
});
4646

4747
it('attaches a Quill instance to the component', () => {
4848
const wrapper = mountReactQuill();
4949
const quill = getQuillInstance(wrapper);
5050
expect(quill instanceof Quill).to.equal(true);
51-
})
51+
});
5252

5353
it('passes options to Quill from props', () => {
5454
const enabledFormats = ['underline', 'bold', 'italic'];
@@ -66,85 +66,101 @@ describe('<ReactQuill />', function() {
6666
expect(quill.options.readOnly).to.equal(props.readOnly);
6767
expect(quill.options.modules).to.include.keys(Object.keys(props.modules));
6868
expect(quill.options.formats).to.include.members(props.formats);
69-
})
69+
});
7070

7171
it('allows using HTML strings as value', () => {
7272
const html = '<p>Hello, world!</p>';
73-
const wrapper = mountReactQuill({value: html});
73+
const wrapper = mountReactQuill({ value: html });
7474
const quill = getQuillInstance(wrapper);
7575
expect(getQuillContentsAsHTML(wrapper)).to.equal(html);
7676
});
7777

7878
it('allows using HTML strings as defaultValue', () => {
7979
const html = '<p>Hello, world!</p>';
80-
const wrapper = mountReactQuill({defaultValue: html});
80+
const wrapper = mountReactQuill({ defaultValue: html });
8181
const quill = getQuillInstance(wrapper);
8282
expect(getQuillContentsAsHTML(wrapper)).to.equal(html);
8383
});
8484

8585
it('allows using Deltas as value', () => {
8686
const html = '<p>Hello, world!</p>';
87-
const delta = {ops: [{insert: 'Hello, world!'}]};
88-
const wrapper = mountReactQuill({value: html});
87+
const delta = { ops: [{ insert: 'Hello, world!' }] };
88+
const wrapper = mountReactQuill({ value: html });
8989
const quill = getQuillInstance(wrapper);
9090
expect(getQuillContentsAsHTML(wrapper)).to.equal(html);
9191
});
9292

93-
it('prevents using Delta changesets from events as value', (done) => {
93+
it('prevents using Delta changesets from events as value', done => {
9494
const value = '<p>Hello, world!</p>';
9595
const changedValue = '<p>Adieu, world!</p>';
96+
let wrapper;
9697
const onChange = (_, delta) => {
97-
withMockedConsole(() => {
98-
expect(() => wrapper.setProps({value: delta})).to.throw();
99-
done();
100-
});
98+
wrapper.setProps({ value: delta });
10199
};
102-
const wrapper = mountReactQuill({value, onChange});
100+
wrapper = mountReactQuill({ value, onChange });
101+
102+
const expectedErr = /You are passing the `delta` object from the `onChange` event back/;
103+
// this test knows a lot about the implementation,
104+
// but we need to wrap the right function with a catch
105+
// in order to prevent errors from it from propagating
106+
const origValidateProps = wrapper.instance().validateProps;
107+
let calledDone = false; // might get called more than once
108+
wrapper.instance().validateProps = function(props) {
109+
try {
110+
origValidateProps.call(wrapper.instance(), props);
111+
} catch (err) {
112+
if (expectedErr.test(err) && calledDone === false) {
113+
done();
114+
calledDone = true;
115+
}
116+
}
117+
}.bind(wrapper.instance());
118+
103119
setQuillContentsFromHTML(wrapper, changedValue);
104120
});
105121

106122
it('allows using Deltas as defaultValue', () => {
107123
const html = '<p>Hello, world!</p>';
108-
const delta = {ops: [{insert: 'Hello, world!'}]};
109-
const wrapper = mountReactQuill({defaultValue: html});
124+
const delta = { ops: [{ insert: 'Hello, world!' }] };
125+
const wrapper = mountReactQuill({ defaultValue: html });
110126
const quill = getQuillInstance(wrapper);
111127
expect(getQuillContentsAsHTML(wrapper)).to.equal(html);
112128
});
113129

114130
it('calls onChange with the new value when Quill calls pasteHTML', () => {
115131
const onChangeSpy = sinon.spy();
116132
const inHtml = '<p>Hello, world!</p>';
117-
const onChange = (value) => {
133+
const onChange = value => {
118134
expect(inHtml).to.equal(value);
119135
onChangeSpy();
120136
};
121-
const wrapper = mountReactQuill({onChange});
137+
const wrapper = mountReactQuill({ onChange });
122138
setQuillContentsFromHTML(wrapper, inHtml);
123-
expect(getQuillContentsAsHTML(wrapper)).to.equal(inHtml)
139+
expect(getQuillContentsAsHTML(wrapper)).to.equal(inHtml);
124140
expect(onChangeSpy).to.have.property('callCount', 1);
125-
})
141+
});
126142

127143
it('calls onChange with the new value when Quill calls insertText', () => {
128144
const onChangeSpy = sinon.spy();
129145
const inHtml = '<p><strong>Hello, World!</strong></p>';
130-
const onChange = (value) => {
146+
const onChange = value => {
131147
expect(inHtml).to.equal(value);
132148
onChangeSpy();
133149
};
134-
const wrapper = mountReactQuill({onChange});
150+
const wrapper = mountReactQuill({ onChange });
135151
const quill = getQuillInstance(wrapper);
136152
quill.insertText(0, 'Hello, World!', 'bold', true);
137153
expect(getQuillContentsAsHTML(wrapper)).to.equal(inHtml);
138154
expect(onChangeSpy).to.have.property('callCount', 1);
139-
})
155+
});
140156

141157
it('shows defaultValue if value prop is undefined', () => {
142158
const defaultValue = '<p>Hello, world!</p>';
143-
const wrapper = mountReactQuill({defaultValue});
159+
const wrapper = mountReactQuill({ defaultValue });
144160
const quill = getQuillInstance(wrapper);
145161
// @ts-ignore untyped instance
146162
expect(wrapper.instance().getEditorContents()).to.equal(defaultValue);
147-
})
163+
});
148164

149165
it('shows the value prop instead of defaultValue if both are defined', () => {
150166
const defaultValue = '<p>Hello, world!</p>';
@@ -156,15 +172,15 @@ describe('<ReactQuill />', function() {
156172
const quill = getQuillInstance(wrapper);
157173
// @ts-ignore untyped instance
158174
expect(wrapper.instance().getEditorContents()).to.equal(value);
159-
})
175+
});
160176

161177
it('uses a custom editing area if provided', () => {
162178
const div = React.createFactory('div');
163-
const editingArea = div({id:'venus'});
179+
const editingArea = div({ id: 'venus' });
164180
const wrapper = mountReactQuill({}, editingArea);
165181
const quill = getQuillInstance(wrapper);
166182
expect(wrapper.getDOMNode().querySelector('div#venus')).not.to.be.null;
167-
})
183+
});
168184

169185
/**
170186
* This can't be tested with the current state of JSDOM.
@@ -173,26 +189,25 @@ describe('<ReactQuill />', function() {
173189
* https://github.com/tmpvar/jsdom/issues/317.
174190
* Leaving this pending test as a reminder to follow up.
175191
*/
176-
it('focuses editor when calling focus()')
192+
it('focuses editor when calling focus()');
177193

178194
/**
179195
* A test for this may work if checking document.activeElement,
180196
* but chances are the focus was never removed from the body
181197
* after calling focus(). See JSDOM issue #317.
182198
*/
183-
it('removes focus from the editor when calling blur()')
199+
it('removes focus from the editor when calling blur()');
184200

185201
/**
186202
* In a browser, querySelector('.ql-editor').textContent = 'hi' would
187203
* trigger a 'text-change' event, but here it doesn't. Is the polyfill
188204
* for MutationObserver not working?
189205
*/
190-
it('calls onChange after the textContent of the editor changes')
206+
it('calls onChange after the textContent of the editor changes');
191207

192208
/**
193209
* This is hard to do without Selenium's 'type' function, but it is the
194210
* ultimate test of whether everything is working or not
195211
*/
196-
it('calls onChange after keypresses are sent to the editor')
197-
212+
it('calls onChange after keypresses are sent to the editor');
198213
});

0 commit comments

Comments
 (0)