Skip to content

Commit a4a1523

Browse files
bedeoverendbedeoverend
committed
Test for syncing between editor instances, call input callback at end of state transaction
1 parent 43a553c commit a4a1523

File tree

10 files changed

+85
-42
lines changed

10 files changed

+85
-42
lines changed

‎demo/index.html

+2-9
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,6 @@
2222
<!-- Import component -->
2323
<link rel="import" href="../simpla-text.html">
2424
<link rel="import" href="../iron-test-helpers/iron-test-helpers.html">
25-
26-
<link rel="import" href="../iron-test-helpers/iron-test-helpers.html">
27-
28-
<script src="../rangy/rangy-core.js"></script>
29-
<script src="../rangy/rangy-textrange.js"></script>
30-
31-
3225
</head>
3326
<body unresolved>
3427
<h1>Basic Editor</h1>
@@ -47,8 +40,8 @@ <h1>Plaintext Editor</h1>
4740
<simpla-text plaintext editable></simpla-text>
4841

4942
<h1>Synced Editors</h1>
50-
<simpla-text uid="text-0" plaintext editable>Hello World</simpla-text>
51-
<simpla-text uid="text-0" plaintext editable>Hello World</simpla-text>
43+
<simpla-text uid="text-0" editable>Hello World</simpla-text>
44+
<simpla-text uid="text-0" editable>Hello World</simpla-text>
5245

5346
</body>
5447
</html>

‎nightwatch.conf.js

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ module.exports = {
77
'nightwatch/tests' // we use '/test' as the name of our test directory by default. So 'test/e2e' for 'e2e'.
88
],
99
'custom_commands_path': './nightwatch/commands',
10+
'custom_assertions_path': './nightwatch/assertions',
1011
'output_folder': false,
1112
'selenium': { // downloaded by selenium-download module (see readme)
1213
'start_process': true, // tells nightwatch to start/stop the selenium process

‎nightwatch/assertions/inSyncWith.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
const util = require('util');
2+
3+
/**
4+
* Checks if both given element's innerHTML matches
5+
*
6+
* ```
7+
* this.demoTest = function (client) {
8+
* browser.assert.elementContainsTag("simpla-text", "strong");
9+
* };
10+
* ```
11+
*/
12+
13+
exports.assertion = function(source, mirror, msg) {
14+
this.DEFAULT_MSG = this.DEFAULT_MSG || 'Testing if innerHTML of <%s> and <%s> match.';
15+
16+
this.message = msg || util.format(this.DEFAULT_MSG, source, mirror);
17+
18+
this.expected = () => this.result.value[0];
19+
this.value = () => this.result.value[1];
20+
21+
this.pass = () => this.result.value[0] === this.result.value[1];
22+
23+
this.command = function(callback) {
24+
return this.api.execute(function(sourceSelector, mirrorSelector) {
25+
var sourceEl = document.querySelector(sourceSelector),
26+
mirrorEl = document.querySelector(mirrorSelector);
27+
28+
return [ sourceEl.innerHTML, mirrorEl.innerHTML ];
29+
}, [ source, mirror ], (result) => {
30+
this.result = result;
31+
callback(result);
32+
});
33+
}
34+
35+
};

‎nightwatch/commands/clickOnCommand.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
module.exports = {
2-
command(name) {
2+
command(...args) {
33
this
4-
.hoverOverCommand(name)
4+
.hoverOverCommand(...args)
55
.mouseButtonClick();
66
}
77
}

‎nightwatch/commands/hoverOverCommand.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
module.exports = {
2-
command(name) {
3-
this.execute(function(name) {
4-
var text = document.querySelector('simpla-text'),
2+
command(selector, name) {
3+
this.execute(function(selector, name) {
4+
var text = document.querySelector(selector),
55
toolbar = text.$.toolbar,
66
command = toolbar.$$('[data-command="' + name + '"]'),
77
textBounds,
@@ -16,9 +16,9 @@ module.exports = {
1616
width: commandBounds.width,
1717
height: commandBounds.height
1818
}
19-
}, [ name ], function(response) {
19+
}, [ selector, name ], function(response) {
2020
let { offsetLeft, offsetTop, width, height } = response.value;
21-
this.moveToElement('simpla-text', offsetLeft + width / 2, offsetTop + height / 2);
21+
this.moveToElement(selector, offsetLeft + width / 2, offsetTop + height / 2);
2222
});
2323
}
2424
}

‎nightwatch/server/index.html

+7-1
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,14 @@
99
</script>
1010
<link rel="import" href="/components/simpla-text/simpla-text.html">
1111
<title></title>
12+
<style media="screen">
13+
body {
14+
padding: 50px;
15+
}
16+
</style>
1217
</head>
1318
<body>
14-
<simpla-text><simpla-text>
19+
<simpla-text id="main" uid="text-0"></simpla-text>
20+
<simpla-text id="mirror" uid="text-0"></simpla-text>
1521
</body>
1622
</html>

‎nightwatch/tests/keyboard.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
const init = () => (browser) => {
22
browser
33
.url('http://localhost:3333/')
4-
.setProperty('simpla-text', 'editable', true)
4+
.setProperty('#main', 'editable', true)
55
.pause(500) // Wait for async loads to occur
6-
.click('simpla-text')
6+
.click('#main')
77
.keys('Hello World')
88
.highlight(1, 'word', 'left')
99
.saveScreenshot('./screenshots/keyboard/init.png');
@@ -19,11 +19,11 @@ const checkCommand = ({ name, key, tag, mod }) => (browser) => {
1919

2020
browser
2121
.pressKeys()
22-
.verify.elementPresent(`simpla-text ${tag}`, `Added ${tag} tag`)
22+
.verify.elementPresent(`#main ${tag}`, `Added ${tag} tag`)
2323
.saveScreenshot(`./screenshots/keyboard/${name}.png`)
2424
// Now just check it can toggle it back off
2525
.pressKeys()
26-
.verify.elementNotPresent(`simpla-text ${tag}`, `Removed ${tag} tag`)
26+
.verify.elementNotPresent(`#main ${tag}`, `Removed ${tag} tag`)
2727
}
2828

2929
module.exports = {

‎nightwatch/tests/toolbar.js

+21-16
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
const init = () => (browser) => {
22
browser
33
.url('http://localhost:3333/')
4-
.setProperty('simpla-text', 'editable', true)
4+
.setProperty('#main', 'editable', true)
55
.pause(500) // Wait for async loads to occur
6-
.click('simpla-text')
6+
.click('#main')
77
.keys('Hello World')
88
.saveScreenshot('./screenshots/toolbar/init.png');
99
}
@@ -16,11 +16,13 @@ const highlight = () => (browser) => {
1616

1717
const checkCommand = ({ name, tag }) => (browser) => {
1818
browser
19-
.clickOnCommand(name)
19+
.clickOnCommand('#main', name)
2020
.saveScreenshot(`./screenshots/toolbar/${name}.png`)
21-
.verify.elementPresent(`simpla-text ${tag}`, `Added ${tag} tag`)
22-
.clickOnCommand(name)
23-
.verify.elementNotPresent(`simpla-text ${tag}`, `Removed ${tag} tag`)
21+
.verify.elementPresent(`#main ${tag}`, `Added ${tag} tag`)
22+
.verify.inSyncWith('#main', '#mirror', `Synced addition of ${tag}`)
23+
.clickOnCommand('#main', name)
24+
.verify.elementNotPresent(`#main ${tag}`, `Removed ${tag} tag`)
25+
.verify.inSyncWith('#main', '#mirror', `Synced removal of ${tag}`)
2426
}
2527

2628
module.exports = {
@@ -34,41 +36,44 @@ module.exports = {
3436

3537
'Creating / Updating Links': function(browser) {
3638
browser
37-
.clickOnCommand('link')
39+
.clickOnCommand('#main', 'link')
3840
.saveScreenshot('./screenshots/toolbar/link-open.png')
3941
.keys([ 'http://xkcd.com/', browser.Keys.ENTER ])
40-
.verify.elementPresent('simpla-text a')
42+
.verify.elementPresent('#main a')
4143
// Note we're using contains here as an anchor tag will normalize the URL
42-
.verify.attributeEquals('simpla-text a', 'href', 'http://xkcd.com/')
44+
.verify.attributeEquals('#main a', 'href', 'http://xkcd.com/')
45+
.verify.inSyncWith('#main', '#mirror')
4346
.saveScreenshot('./screenshots/toolbar/added-link.png')
4447

4548
// This is because after creating a link, it loses focus, in future we
4649
// should probably patch this, and remove these lines
47-
.click('simpla-text')
50+
.click('#main')
4851
// Move to the end of text
4952
.highlightLastWord()
50-
.clickOnCommand('link')
53+
.clickOnCommand('#main', 'link')
5154

5255
// Essentially highlight all, but CMD+a isn't working for some reason...
5356
.moveCursor('right')
5457
.highlight(10, 'words', 'left')
5558
.keys(browser.Keys.BACK_SPACE)
5659
.keys([ 'http://google.com/', browser.Keys.ENTER ])
57-
.verify.elementPresent('simpla-text a')
58-
.verify.attributeEquals('simpla-text a', 'href', 'http://google.com/')
60+
.verify.elementPresent('#main a')
61+
.verify.attributeEquals('#main a', 'href', 'http://google.com/')
62+
.verify.inSyncWith('#main', '#mirror')
5963
},
6064

6165
'Removing Links': function(browser) {
6266
browser
63-
.click('simpla-text')
67+
.click('#main')
6468
.highlightLastWord()
65-
.clickOnCommand('link')
69+
.clickOnCommand('#main', 'link')
6670

6771
.moveCursor('right')
6872
.highlight(10, 'words', 'left')
6973

7074
.keys([ browser.Keys.BACK_SPACE, browser.Keys.ENTER ])
71-
.verify.elementNotPresent('simpla-text a');
75+
.verify.elementNotPresent('#main a')
76+
.verify.inSyncWith('#main', '#mirror')
7277
},
7378

7479
'finish': (browser) => browser.end()

‎simpla-text-editor.html

+4-4
Large diffs are not rendered by default.

‎src/editor/plugins.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,10 @@ export function getInputPlugin({ callback }) {
2626
init: () => {},
2727
apply: (tr) => {
2828
if (tr.docChanged) {
29-
callback();
29+
// Run callback in microtask queue so that the current transaction
30+
// has been applied, if done immediately then view won't have updated
31+
// yet
32+
Promise.resolve().then(callback);
3033
}
3134
}
3235
}

0 commit comments

Comments
 (0)