Skip to content

Commit ebdd8da

Browse files
karenrasmussensanticomp2014
karenrasmussen
authored and
santicomp2014
committed
Add tests
1 parent 967733c commit ebdd8da

File tree

2 files changed

+96
-19
lines changed

2 files changed

+96
-19
lines changed

‎src/sidebar/components/KeyboardShortcutsModal.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,14 +102,25 @@ function ShortcutBody({
102102
className="flex items-center justify-between gap-3"
103103
>
104104
<div className="flex-1 min-w-0">
105-
<div className="text-sm font-medium truncate">{label}</div>
105+
<div
106+
className="text-sm font-medium truncate"
107+
data-testid={`shortcut-label-${id}`}
108+
>
109+
{label}
110+
</div>
106111
{description && (
107-
<div className="text-xs text-grey-6">{description}</div>
112+
<div
113+
className="text-xs text-grey-6"
114+
data-testid={`shortcut-description-${id}`}
115+
>
116+
{description}
117+
</div>
108118
)}
109119
</div>
110120
<div className="w-32">
111121
<Input
112122
aria-label={`Shortcut for ${label}`}
123+
data-testid={`shortcut-input-${id}`}
113124
value={shortcutsKeyValue[id] ?? ''}
114125
onKeyDown={(e: KeyboardEvent) =>
115126
handleShortcutInputKeyDown(id, e)
@@ -156,6 +167,7 @@ function ShortcutActions({
156167
}}
157168
variant="custom"
158169
classes="text-sm text-grey-7 hover:text-grey-9 w-min"
170+
data-testid="reset-shortcuts-button"
159171
>
160172
Reset all shortcuts to defaults
161173
</Button>
@@ -175,13 +187,15 @@ function ShortcutActions({
175187
variant="primary"
176188
disabled={!!duplicateShortcutsMessage}
177189
classes="w-min"
190+
data-testid="save-shortcuts-button"
178191
>
179192
Save
180193
</Button>
181194
<Button
182195
onClick={handleClose}
183196
variant="custom"
184197
classes="text-sm text-grey-7 hover:text-grey-9 w-min"
198+
data-testid="cancel-shortcuts-button"
185199
>
186200
Cancel
187201
</Button>

‎src/sidebar/components/test/KeyboardShortcutsModal-test.js‎

Lines changed: 80 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,10 @@ describe('KeyboardShortcutsModal', () => {
2929
);
3030
};
3131

32-
const findButton = (wrapper, label) =>
33-
wrapper.find('Button').filterWhere(node => node.props().children === label);
34-
const findShortcutInput = (wrapper, label) =>
35-
wrapper
36-
.find('Input')
37-
.filterWhere(node => node.prop('aria-label') === `Shortcut for ${label}`);
32+
const findButton = (wrapper, testId) =>
33+
wrapper.find(`[data-testid="${testId}"]`).first();
34+
const findShortcutInput = (wrapper, id) =>
35+
wrapper.find(`[data-testid="shortcut-input-${id}"]`).first();
3836

3937
beforeEach(() => {
4038
fakeSession = {
@@ -101,7 +99,7 @@ describe('KeyboardShortcutsModal', () => {
10199
it('saves shortcuts when there are no duplicates', () => {
102100
const wrapper = createComponent();
103101

104-
const saveButton = findButton(wrapper, 'Save');
102+
const saveButton = findButton(wrapper, 'save-shortcuts-button');
105103
saveButton.props().onClick();
106104

107105
assert.calledWith(
@@ -119,7 +117,7 @@ describe('KeyboardShortcutsModal', () => {
119117
const wrapper = createComponent();
120118

121119
assert.isTrue(wrapper.exists('[data-testid="duplicate-shortcuts-error"]'));
122-
const saveButton = findButton(wrapper, 'Save');
120+
const saveButton = findButton(wrapper, 'save-shortcuts-button');
123121
assert.isTrue(saveButton.prop('disabled'));
124122
});
125123

@@ -138,7 +136,7 @@ describe('KeyboardShortcutsModal', () => {
138136
it('resets shortcuts to defaults', () => {
139137
const wrapper = createComponent();
140138

141-
const resetButton = findButton(wrapper, 'Reset all shortcuts to defaults');
139+
const resetButton = findButton(wrapper, 'reset-shortcuts-button');
142140
resetButton.props().onClick();
143141

144142
assert.called(fakeResetShortcuts);
@@ -156,7 +154,7 @@ describe('KeyboardShortcutsModal', () => {
156154

157155
const wrapper = createComponent();
158156

159-
const saveButton = findButton(wrapper, 'Save');
157+
const saveButton = findButton(wrapper, 'save-shortcuts-button');
160158
saveButton.props().onClick();
161159

162160
assert.notCalled(fakeSession.updateShortcutPreferences);
@@ -169,13 +167,78 @@ describe('KeyboardShortcutsModal', () => {
169167

170168
const wrapper = createComponent();
171169

172-
const saveButton = findButton(wrapper, 'Save');
170+
const saveButton = findButton(wrapper, 'save-shortcuts-button');
173171
await saveButton.props().onClick();
174172

175173
wrapper.update();
176174
assert.isTrue(wrapper.exists('[data-testid="save-shortcuts-error"]'));
177175
});
178176

177+
it('shows an error message when resetting shortcuts fails', async () => {
178+
fakeSession.updateShortcutPreferences.rejects(
179+
new Error('Error resetting shortcuts'),
180+
);
181+
182+
const wrapper = createComponent();
183+
184+
const resetButton = findButton(wrapper, 'reset-shortcuts-button');
185+
await resetButton.props().onClick();
186+
187+
wrapper.update();
188+
assert.isTrue(wrapper.exists('[data-testid="save-shortcuts-error"]'));
189+
});
190+
191+
it('clears save errors when updating a shortcut', async () => {
192+
fakeSession.updateShortcutPreferences.rejects(
193+
new Error('Error saving shortcuts'),
194+
);
195+
fakeParseShortcutInputEvent.returns({
196+
shortcut: 'ctrl+k',
197+
shouldClear: false,
198+
});
199+
200+
const wrapper = createComponent();
201+
202+
const saveButton = findButton(wrapper, 'save-shortcuts-button');
203+
await saveButton.props().onClick();
204+
wrapper.update();
205+
assert.isTrue(wrapper.exists('[data-testid="save-shortcuts-error"]'));
206+
207+
const event = new KeyboardEvent('keydown', { key: 'k', ctrlKey: true });
208+
findShortcutInput(wrapper, 'applyUpdates').props().onKeyDown(event);
209+
210+
wrapper.update();
211+
assert.isFalse(wrapper.exists('[data-testid="save-shortcuts-error"]'));
212+
});
213+
214+
it('renders shortcut labels and descriptions when provided', () => {
215+
fakeShortcutDefinitions.splice(
216+
0,
217+
fakeShortcutDefinitions.length,
218+
{
219+
id: 'applyUpdates',
220+
label: 'Apply new updates',
221+
description: 'Apply any new updates in the thread',
222+
group: 'Sidebar',
223+
},
224+
{
225+
id: 'annotateSelection',
226+
label: 'Annotate selection',
227+
group: 'Annotator',
228+
},
229+
);
230+
231+
const wrapper = createComponent();
232+
233+
const label = wrapper.find('[data-testid="shortcut-label-applyUpdates"]');
234+
assert.equal(label.text(), 'Apply new updates');
235+
const description = wrapper.find(
236+
'[data-testid="shortcut-description-applyUpdates"]',
237+
);
238+
assert.equal(description.length, 1);
239+
assert.equal(description.text(), 'Apply any new updates in the thread');
240+
});
241+
179242
it('restores profile shortcuts on close', () => {
180243
const onClose = sinon.stub();
181244
const profileShortcuts = { applyUpdates: 'p' };
@@ -190,10 +253,10 @@ describe('KeyboardShortcutsModal', () => {
190253

191254
const wrapper = createComponent({ onClose });
192255

193-
const input = findShortcutInput(wrapper, 'Apply new updates');
256+
const input = findShortcutInput(wrapper, 'applyUpdates');
194257
input.props().onKeyDown(new KeyboardEvent('keydown', { key: 'x' }));
195258

196-
const cancelButton = findButton(wrapper, 'Cancel');
259+
const cancelButton = findButton(wrapper, 'cancel-shortcuts-button');
197260
cancelButton.props().onClick();
198261

199262
assert.calledWith(fakeSetShortcut, 'applyUpdates', 'x');
@@ -221,7 +284,7 @@ describe('KeyboardShortcutsModal', () => {
221284
const wrapper = createComponent();
222285
const event = new KeyboardEvent('keydown', { key: 'k', ctrlKey: true });
223286

224-
findShortcutInput(wrapper, 'Apply new updates').props().onKeyDown(event);
287+
findShortcutInput(wrapper, 'applyUpdates').props().onKeyDown(event);
225288

226289
assert.calledWith(fakeParseShortcutInputEvent, event);
227290
assert.calledWith(fakeSetShortcut, 'applyUpdates', parsedShortcut.shortcut);
@@ -239,7 +302,7 @@ describe('KeyboardShortcutsModal', () => {
239302
stopPropagation: sinon.stub(),
240303
};
241304

242-
findShortcutInput(wrapper, 'Apply new updates').props().onKeyDown(event);
305+
findShortcutInput(wrapper, 'applyUpdates').props().onKeyDown(event);
243306

244307
assert.called(event.preventDefault);
245308
assert.called(event.stopPropagation);
@@ -250,7 +313,7 @@ describe('KeyboardShortcutsModal', () => {
250313

251314
const wrapper = createComponent();
252315

253-
findShortcutInput(wrapper, 'Apply new updates')
316+
findShortcutInput(wrapper, 'applyUpdates')
254317
.props()
255318
.onKeyDown(new KeyboardEvent('keydown', { key: 'Shift' }));
256319

@@ -265,7 +328,7 @@ describe('KeyboardShortcutsModal', () => {
265328

266329
const wrapper = createComponent();
267330

268-
findShortcutInput(wrapper, 'Apply new updates')
331+
findShortcutInput(wrapper, 'applyUpdates')
269332
.props()
270333
.onKeyDown(new KeyboardEvent('keydown', { key: 'Backspace' }));
271334

0 commit comments

Comments
 (0)