-
-
Notifications
You must be signed in to change notification settings - Fork 344
/
editor.jsx
121 lines (105 loc) · 2.86 KB
/
editor.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React from 'react';
import { mount } from 'enzyme';
import { Loader } from 'react-cosmos-loader';
import createStateProxy from 'react-cosmos-state-proxy';
import selectedEditorFixture from '../../__fixtures__/selected-editor';
import FixtureEditor from '../../../FixtureEditor';
import ComponentPlayground from '../../';
// Vars populated in beforeEach blocks
let messageHandlers;
let wrapper;
let loaderContentWindow;
const handleMessage = e => {
const { type } = e.data;
if (!messageHandlers[type]) {
throw new Error('Unexpected message event');
}
messageHandlers[type](e.data);
};
const waitForPostMessage = type =>
new Promise(resolve => {
messageHandlers[type] = resolve;
});
describe('Fixture editor', () => {
beforeEach(() => {
messageHandlers = {};
window.addEventListener('message', handleMessage, false);
const onFixtureLoad = waitForPostMessage('fixtureLoad');
return new Promise(resolve => {
// Mount component in order for ref and lifecycle methods to be called
wrapper = mount(
<Loader
proxies={[createStateProxy]}
component={ComponentPlayground}
fixture={selectedEditorFixture}
onComponentRef={resolve}
/>
);
}).then(instance => {
loaderContentWindow = {
postMessage: jest.fn(),
};
// iframe.contentWindow isn't available in jsdom
instance.loaderFrame = {
contentWindow: loaderContentWindow,
};
window.postMessage(
{
type: 'fixtureLoad',
fixtureBody: {
foo: 'bar',
},
},
'*'
);
return onFixtureLoad;
});
});
afterEach(() => {
window.removeEventListener('message', handleMessage);
});
it('sends initial fixture body as value to FixtureEditor', () => {
expect(wrapper.find(FixtureEditor).prop('value')).toEqual({
foo: 'bar',
});
});
describe('on fixture update from Loader', () => {
beforeEach(() => {
const onFixtureUpdate = waitForPostMessage('fixtureUpdate');
window.postMessage(
{
type: 'fixtureUpdate',
fixtureBody: {
baz: 'qux',
},
},
'*'
);
return onFixtureUpdate;
});
it('sends updated fixture body as value to FixtureEditor', () => {
expect(wrapper.find(FixtureEditor).prop('value')).toEqual({
foo: 'bar',
baz: 'qux',
});
});
});
describe('on fixture edit from editor', () => {
beforeEach(() => {
wrapper.find(FixtureEditor).prop('onChange')({
foo: 'baz',
});
});
it('sends edited fixture body to Loader', () => {
expect(loaderContentWindow.postMessage).toHaveBeenCalledWith(
{
type: 'fixtureEdit',
fixtureBody: {
foo: 'baz',
},
},
'*'
);
});
});
});