Skip to content

Commit df6cbaa

Browse files
RoyEJohnsonRoyEJohnson
committed
Tests
1 parent 72bbb0c commit df6cbaa

File tree

4 files changed

+78
-42
lines changed

4 files changed

+78
-42
lines changed

‎src/app/content/highlights/components/CardWrapper.spec.tsx‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ describe('CardWrapper', () => {
138138

139139
// Handle null value
140140
renderer.act(() => {
141-
card1.props.onHeightChange({ current: { offsetHeight: null } });
141+
card1.props.onHeightChange({ current: null });
142142
});
143143
// First card have null height so secondcard starts at the highlight top offset
144144
expect(card1.props.topOffset).toEqual(100);
@@ -332,6 +332,14 @@ describe('CardWrapper', () => {
332332
});
333333
});
334334

335+
renderer.act(() => {
336+
// Simulate pressing Escape to hide card
337+
dispatchKeyDownEvent({
338+
key: 'Escape',
339+
target: highlightElement1,
340+
});
341+
});
342+
335343
// Expect cards to be visible again
336344
renderer.act(() => {
337345
// Simulate pressing Enter to unhide cards
@@ -341,7 +349,6 @@ describe('CardWrapper', () => {
341349
});
342350
});
343351

344-
// Expect all cards to be visible
345352
renderer.act(() => {
346353
// Simulate pressing Tab to unhide all cards
347354
dispatchKeyDownEvent({
@@ -350,11 +357,22 @@ describe('CardWrapper', () => {
350357
});
351358
});
352359

353-
// Set focusedHighlight, and do double=click
354360
renderer.act(() => {
355-
highlightElement1.dispatchEvent(new Event('focus', { bubbles: true }));
356-
highlightElement1.dispatchEvent(new Event('dblclick', { bubbles: true }));
361+
// Simulate pressing Escape to hide card
362+
dispatchKeyDownEvent({
363+
key: 'Escape',
364+
target: highlightElement1,
365+
});
357366
});
367+
368+
// Trigger editOnEnter with no focusedHighlight
369+
renderer.act(() => {
370+
dispatchKeyDownEvent({
371+
key: 'Enter',
372+
});
373+
});
374+
375+
document?.dispatchEvent(new CustomEvent('showCardEvent', { bubbles: true }));
358376
});
359377

360378
it(

‎src/app/content/highlights/components/EditCard.spec.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Highlight } from '@openstax/highlighter';
22
import { HighlightUpdateColorEnum } from '@openstax/highlighter/dist/api';
33
import React, { ReactElement } from 'react';
44
import renderer from 'react-test-renderer';
5+
import ReactTestUtils from 'react-dom/test-utils';
56
import createTestServices from '../../../../test/createTestServices';
67
import createTestStore from '../../../../test/createTestStore';
78
import createMockHighlight from '../../../../test/mocks/highlight';
@@ -101,6 +102,7 @@ describe('EditCard', () => {
101102

102103
const tree = component.toJSON();
103104
expect(tree).toMatchSnapshot();
105+
104106
mockSpyUser.mockClear();
105107
});
106108

@@ -629,7 +631,7 @@ describe('EditCard', () => {
629631
...highlightData,
630632
};
631633

632-
renderToDom(
634+
const component = renderToDom(
633635
<div id={MAIN_CONTENT_ID} tabIndex={-1}>
634636
<TestContainer services={services} store={store}>
635637
<a href='#foo'>text</a>
@@ -650,6 +652,17 @@ describe('EditCard', () => {
650652
document?.querySelector('a')?.focus();
651653
document?.getElementById(MAIN_CONTENT_ID)?.focus();
652654
expect(editCardProps.onBlur).not.toHaveBeenCalled();
655+
const button = component.node.querySelector('button') as HTMLButtonElement;
656+
const preventDefault = jest.fn();
657+
document!.dispatchEvent = jest.fn();
658+
659+
// Two branches of showCard - must be mousedown of button 0
660+
ReactTestUtils.Simulate.mouseDown(button, { preventDefault, button: 1 });
661+
expect(preventDefault).not.toHaveBeenCalled();
662+
ReactTestUtils.Simulate.mouseDown(button, { preventDefault, button: 0 });
663+
expect(preventDefault).toHaveBeenCalled();
664+
expect(document!.dispatchEvent).toHaveBeenCalled();
665+
653666
mockSpyUser.mockClear();
654667
});
655668

‎src/app/content/highlights/components/__snapshots__/Card.spec.tsx.snap‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,10 @@ exports[`Card matches snapshot when focused without note 1`] = `
1010
padding: 0.8rem;
1111
border-radius: 0.4rem;
1212
box-shadow: 0 0 2px 0 rgba(0,0,0,0.14),0 2px 2px 0 rgba(0,0,0,0.12),0 1px 3px 0 rgba(0,0,0,0.2);
13-
left: unset;
14-
right: 0;
13+
left: calc(50% + (82.5rem / 2) + 3rem);
14+
right: unset;
1515
top: 150px;
1616
left: calc(50% + (82.5rem / 2) + 1rem);
17-
right: unset;
1817
-webkit-transition: opacity 0.3s,top 0.3s,left 0.3s;
1918
transition: opacity 0.3s,top 0.3s,left 0.3s;
2019
}
@@ -44,8 +43,8 @@ exports[`Card matches snapshot when focused without note 1`] = `
4443
.c0 {
4544
-webkit-animation: none;
4645
animation: none;
47-
left: unset;
48-
right: 2rem;
46+
left: calc(75vw - (82.5rem / 2) + 1rem);
47+
right: unset;
4948
top: 0px;
5049
}
5150
}
@@ -54,8 +53,8 @@ exports[`Card matches snapshot when focused without note 1`] = `
5453
.c0 {
5554
-webkit-animation: none;
5655
animation: none;
57-
left: unset;
58-
right: 2rem;
56+
left: calc(75vw - (82.5rem / 2) + 1rem);
57+
right: unset;
5958
top: 0px;
6059
}
6160
}
@@ -129,11 +128,10 @@ exports[`Card matches snapshot when passed data without note 1`] = `
129128
padding: 0.8rem;
130129
border-radius: 0.4rem;
131130
box-shadow: 0 0 2px 0 rgba(0,0,0,0.14),0 2px 2px 0 rgba(0,0,0,0.12),0 1px 3px 0 rgba(0,0,0,0.2);
132-
left: unset;
133-
right: 0;
131+
left: calc(50% + (82.5rem / 2) + 3rem);
132+
right: unset;
134133
top: undefinedpx;
135134
left: calc(50% + (82.5rem / 2) + 1rem);
136-
right: unset;
137135
-webkit-transition: opacity 0.3s,top 0.3s,left 0.3s;
138136
transition: opacity 0.3s,top 0.3s,left 0.3s;
139137
}
@@ -152,8 +150,8 @@ exports[`Card matches snapshot when passed data without note 1`] = `
152150
.c0 {
153151
-webkit-animation: none;
154152
animation: none;
155-
left: unset;
156-
right: 2rem;
153+
left: calc(75vw - (82.5rem / 2) + 1rem);
154+
right: unset;
157155
top: 0px;
158156
}
159157
}
@@ -162,8 +160,8 @@ exports[`Card matches snapshot when passed data without note 1`] = `
162160
.c0 {
163161
-webkit-animation: none;
164162
animation: none;
165-
left: unset;
166-
right: 2rem;
163+
left: calc(75vw - (82.5rem / 2) + 1rem);
164+
right: unset;
167165
top: 0px;
168166
}
169167
}
@@ -223,11 +221,10 @@ exports[`Card matches snapshot without data 1`] = `
223221
padding: 0.8rem;
224222
border-radius: 0.4rem;
225223
box-shadow: 0 0 2px 0 rgba(0,0,0,0.14),0 2px 2px 0 rgba(0,0,0,0.12),0 1px 3px 0 rgba(0,0,0,0.2);
226-
left: unset;
227-
right: 0;
224+
left: calc(50% + (82.5rem / 2) + 3rem);
225+
right: unset;
228226
top: 200px;
229227
left: calc(50% + (82.5rem / 2) + 1rem);
230-
right: unset;
231228
-webkit-transition: opacity 0.3s,top 0.3s,left 0.3s;
232229
transition: opacity 0.3s,top 0.3s,left 0.3s;
233230
}
@@ -246,8 +243,8 @@ exports[`Card matches snapshot without data 1`] = `
246243
.c0 {
247244
-webkit-animation: none;
248245
animation: none;
249-
left: unset;
250-
right: 2rem;
246+
left: calc(75vw - (82.5rem / 2) + 1rem);
247+
right: unset;
251248
top: 200px;
252249
}
253250
}
@@ -256,8 +253,8 @@ exports[`Card matches snapshot without data 1`] = `
256253
.c0 {
257254
-webkit-animation: none;
258255
animation: none;
259-
left: unset;
260-
right: 2rem;
256+
left: calc(75vw - (82.5rem / 2) + 1rem);
257+
right: unset;
261258
top: 200px;
262259
}
263260
}

‎src/app/content/highlights/components/__snapshots__/EditCard.spec.tsx.snap‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`EditCard matches snapshot when editing 1`] = `
4-
.c3 {
4+
.c4 {
55
display: -webkit-box;
66
display: -webkit-flex;
77
display: -ms-flexbox;
@@ -32,20 +32,20 @@ exports[`EditCard matches snapshot when editing 1`] = `
3232
-moz-osx-font-smoothing: grayscale;
3333
}
3434
35-
.c3:hover {
35+
.c4:hover {
3636
background-color: ,#be3c08,;
3737
}
3838
39-
.c3:active {
39+
.c4:active {
4040
background-color: ,#b03808,;
4141
}
4242
43-
.c3:focus {
43+
.c4:focus {
4444
outline: solid #fff;
4545
box-shadow: inset 0 0 0 0.3rem #000;
4646
}
4747
48-
.c4 {
48+
.c5 {
4949
display: -webkit-box;
5050
display: -webkit-flex;
5151
display: -ms-flexbox;
@@ -74,21 +74,25 @@ exports[`EditCard matches snapshot when editing 1`] = `
7474
font-weight: regular;
7575
}
7676
77-
.c4:hover {
77+
.c5:hover {
7878
background-color: ,#fafafa,;
7979
}
8080
81-
.c4:active {
81+
.c5:active {
8282
background-color: ,#e5e5e5,;
8383
}
8484
85-
.c2 {
85+
.c3 {
8686
display: grid;
8787
overflow: visible;
8888
grid-auto-flow: column;
8989
grid-gap: 1rem;
9090
}
9191
92+
.c1 {
93+
min-width: 20rem;
94+
}
95+
9296
.c0 {
9397
background: #f5f5f5;
9498
-webkit-user-select: none;
@@ -98,7 +102,7 @@ exports[`EditCard matches snapshot when editing 1`] = `
98102
overflow: visible;
99103
}
100104
101-
.c0 .c1 {
105+
.c0 .c2 {
102106
margin-top: 0.8rem;
103107
}
104108
@@ -108,7 +112,7 @@ exports[`EditCard matches snapshot when editing 1`] = `
108112
role="dialog"
109113
>
110114
<div
111-
className=""
115+
className="c1"
112116
>
113117
<form
114118
data-analytics-region="edit-note"
@@ -140,18 +144,18 @@ exports[`EditCard matches snapshot when editing 1`] = `
140144
mock-note="true"
141145
/>
142146
<div
143-
className="c1 c2"
147+
className="c2 c3"
144148
>
145149
<button
146-
className="c3"
150+
className="c4"
147151
data-analytics-label="save"
148152
data-testid="save"
149153
onClick={[Function]}
150154
>
151155
Save
152156
</button>
153157
<button
154-
className="c4"
158+
className="c5"
155159
data-analytics-label="cancel"
156160
data-testid="cancel"
157161
onClick={[Function]}
@@ -202,6 +206,10 @@ exports[`EditCard matches snapshot when focused 1`] = `
202206
`;
203207

204208
exports[`EditCard matches snapshot with data 1`] = `
209+
.c1 {
210+
min-width: 20rem;
211+
}
212+
205213
.c0 {
206214
background: #f5f5f5;
207215
-webkit-user-select: none;
@@ -211,7 +219,7 @@ exports[`EditCard matches snapshot with data 1`] = `
211219
overflow: visible;
212220
}
213221
214-
.c0 .c1 {
222+
.c0 .c2 {
215223
margin-top: 0.8rem;
216224
}
217225
@@ -221,7 +229,7 @@ exports[`EditCard matches snapshot with data 1`] = `
221229
role="dialog"
222230
>
223231
<div
224-
className=""
232+
className="c1"
225233
>
226234
<form
227235
data-analytics-region="edit-note"

0 commit comments

Comments
 (0)