Skip to content

Commit c75863c

Browse files
marinaaisamarinaaisa
committed
Replace wrapper.find
Replace wrapper.find with wrapper.findComponent instead since wrapper.find is deprecated
1 parent d54b4ed commit c75863c

File tree

170 files changed

+1334
-1334
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

170 files changed

+1334
-1334
lines changed

‎tests/unit/App.spec.js

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -101,10 +101,10 @@ describe('App', () => {
101101
const wrapper = createWrapper();
102102
expect(wrapper.classes('hascustomheader')).toBe(false);
103103

104-
const header = wrapper.find('custom-header-stub');
104+
const header = wrapper.findComponent('custom-header-stub');
105105
expect(header.exists()).toBe(false);
106106

107-
const footer = wrapper.find('custom-footer-stub');
107+
const footer = wrapper.findComponent('custom-footer-stub');
108108
expect(footer.exists()).toBe(false);
109109
});
110110

@@ -115,7 +115,7 @@ describe('App', () => {
115115

116116
it('renders Skip Navigation', () => {
117117
const wrapper = createWrapper();
118-
const skipNavigation = wrapper.find('#skip-nav');
118+
const skipNavigation = wrapper.findComponent('#skip-nav');
119119
expect(skipNavigation.text()).toBe('accessibility.skip-navigation');
120120
expect(skipNavigation.attributes('href')).toBe('#app-main');
121121
});
@@ -126,7 +126,7 @@ describe('App', () => {
126126
header: '<div class="header">Header</div>',
127127
},
128128
});
129-
const header = wrapper.find('.header');
129+
const header = wrapper.findComponent('.header');
130130
expect(header.text()).toBe('Header');
131131
});
132132

@@ -142,7 +142,7 @@ describe('App', () => {
142142
},
143143
});
144144

145-
const SuggestLangComponent = wrapper.find(SuggestLang);
145+
const SuggestLangComponent = wrapper.findComponent(SuggestLang);
146146
expect(SuggestLangComponent.exists()).toBe(true);
147147
});
148148

@@ -152,15 +152,15 @@ describe('App', () => {
152152
getSetting.mockReturnValue(true);
153153

154154
const wrapper = createWrapper();
155-
expect(wrapper.find(LocaleSelector).exists()).toBe(false);
155+
expect(wrapper.findComponent(LocaleSelector).exists()).toBe(false);
156156
wrapper.setData({
157157
appState: {
158158
...wrapper.vm.appState,
159159
availableLocales,
160160
},
161161
});
162162

163-
expect(wrapper.find(LocaleSelector).exists()).toBe(true);
163+
expect(wrapper.findComponent(LocaleSelector).exists()).toBe(true);
164164
});
165165

166166
it('does not render LocaleSelector if there is less than two available locales', () => {
@@ -169,15 +169,15 @@ describe('App', () => {
169169
getSetting.mockReturnValue(true);
170170

171171
const wrapper = createWrapper();
172-
expect(wrapper.find(LocaleSelector).exists()).toBe(false);
172+
expect(wrapper.findComponent(LocaleSelector).exists()).toBe(false);
173173
wrapper.setData({
174174
appState: {
175175
...wrapper.vm.appState,
176176
availableLocales: ['en-US'],
177177
},
178178
});
179179

180-
expect(wrapper.find(LocaleSelector).exists()).toBe(false);
180+
expect(wrapper.findComponent(LocaleSelector).exists()).toBe(false);
181181
});
182182

183183
it('renders the `#nav-sticky-anchor` between the header and loading placeholder', () => {
@@ -186,9 +186,9 @@ describe('App', () => {
186186
header: '<div class="header">Footer</div>',
187187
},
188188
});
189-
const header = wrapper.find('.header');
190-
const stickyAnchor = wrapper.find(`#${baseNavStickyAnchorId}`);
191-
const loadingPlaceholder = wrapper.find(InitialLoadingPlaceholder);
189+
const header = wrapper.findComponent('.header');
190+
const stickyAnchor = wrapper.findComponent(`#${baseNavStickyAnchorId}`);
191+
const loadingPlaceholder = wrapper.findComponent(InitialLoadingPlaceholder);
192192

193193
// make sure the anchor is below the header and above the content
194194
expect(header.element.nextElementSibling).toBe(stickyAnchor.element);
@@ -201,9 +201,9 @@ describe('App', () => {
201201
default: '<div class="default">Default</div>',
202202
},
203203
});
204-
const stickyAnchor = wrapper.find(`#${baseNavStickyAnchorId}`);
205-
const content = wrapper.find('.default');
206-
const placeholder = wrapper.find(InitialLoadingPlaceholder);
204+
const stickyAnchor = wrapper.findComponent(`#${baseNavStickyAnchorId}`);
205+
const content = wrapper.findComponent('.default');
206+
const placeholder = wrapper.findComponent(InitialLoadingPlaceholder);
207207
// make sure the anchor is below the header and above the content
208208
expect(placeholder.exists()).toBe(true);
209209
expect(stickyAnchor.element.nextElementSibling).toBe(placeholder.element);
@@ -216,7 +216,7 @@ describe('App', () => {
216216
footer: '<div class="footer-slot">Footer</div>',
217217
},
218218
});
219-
const footer = wrapper.find('.footer-slot');
219+
const footer = wrapper.findComponent('.footer-slot');
220220
expect(footer.text()).toBe('Footer');
221221
});
222222

@@ -226,9 +226,9 @@ describe('App', () => {
226226
default: '<div class="default">Default</div>',
227227
},
228228
});
229-
const slotContent = wrapper.find('.default');
229+
const slotContent = wrapper.findComponent('.default');
230230
expect(slotContent.text()).toBe('Default');
231-
expect(wrapper.find('router-view-stub').exists()).toBe(false);
231+
expect(wrapper.findComponent('router-view-stub').exists()).toBe(false);
232232
});
233233

234234
it('renders a default `Footer` for non-IDE targets', () => {
@@ -241,7 +241,7 @@ describe('App', () => {
241241

242242
it('renders the app-top element', () => {
243243
const wrapper = createWrapper();
244-
expect(wrapper.find(`#${AppTopID}`).exists()).toBe(true);
244+
expect(wrapper.findComponent(`#${AppTopID}`).exists()).toBe(true);
245245
});
246246

247247
describe('Custom CSS Properties', () => {
@@ -365,7 +365,7 @@ describe('App', () => {
365365
});
366366

367367
it('renders a <custom-header>', () => {
368-
const header = wrapper.find('custom-header-stub');
368+
const header = wrapper.findComponent('custom-header-stub');
369369
expect(header.exists()).toBe(true);
370370
expect(header.attributes('data-color-scheme')).toBeDefined();
371371
});
@@ -376,15 +376,15 @@ describe('App', () => {
376376
header: '<div class="header">Header</div>',
377377
},
378378
});
379-
const header = wrapper.find('custom-header-stub');
379+
const header = wrapper.findComponent('custom-header-stub');
380380
expect(header.exists()).toBe(false);
381381
});
382382
});
383383

384384
it('renders a <custom-footer> if one has been defined', () => {
385385
window.customElements.get.mockImplementation(name => name === 'custom-footer');
386386
const wrapper = createWrapper();
387-
const footer = wrapper.find('custom-footer-stub');
387+
const footer = wrapper.findComponent('custom-footer-stub');
388388
expect(footer.exists()).toBe(true);
389389
expect(footer.attributes('data-color-scheme')).toBeDefined();
390390
});

‎tests/unit/components/AdjustableSidebarWidth.spec.js

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const createWrapper = opts => shallowMount(AdjustableSidebarWidth, {
7373
});
7474

7575
function assertWidth(wrapper, value) {
76-
expect(wrapper.find('.aside').attributes('style')).toContain(`width: ${value}px`);
76+
expect(wrapper.findComponent('.aside').attributes('style')).toContain(`width: ${value}px`);
7777
}
7878

7979
Object.defineProperty(HTMLElement.prototype, 'offsetLeft', { configurable: true, value: 100 });
@@ -87,14 +87,14 @@ describe('AdjustableSidebarWidth', () => {
8787
it('renders the AdjustableSidebarWidth', () => {
8888
const wrapper = createWrapper();
8989
// sidebar
90-
expect(wrapper.find('.sidebar').exists()).toBe(true);
91-
expect(wrapper.find('.aside').exists()).toBe(true);
90+
expect(wrapper.findComponent('.sidebar').exists()).toBe(true);
91+
expect(wrapper.findComponent('.aside').exists()).toBe(true);
9292
// handle
93-
expect(wrapper.find('.resize-handle').exists()).toBe(true);
93+
expect(wrapper.findComponent('.resize-handle').exists()).toBe(true);
9494
// sidebar-slot
95-
expect(wrapper.find('.aside-content').text()).toBe('Aside Content');
95+
expect(wrapper.findComponent('.aside-content').text()).toBe('Aside Content');
9696
// content and default slot
97-
expect(wrapper.find('.default-content').text()).toBe('Default Content');
97+
expect(wrapper.findComponent('.default-content').text()).toBe('Default Content');
9898
});
9999

100100
it('provides props from the aside scoped slot', () => {
@@ -119,15 +119,15 @@ describe('AdjustableSidebarWidth', () => {
119119
}),
120120
});
121121
assertWidth(wrapper, 650);
122-
wrapper.find(BreakpointEmitter).vm.$emit('change', 'medium');
122+
wrapper.findComponent(BreakpointEmitter).vm.$emit('change', 'medium');
123123
assertWidth(wrapper, 500); // 50% on medium
124124
});
125125

126126
it('applies a momentary no-transition class to the aside, if going from a larger breakpoint into `small`', async () => {
127127
const wrapper = createWrapper();
128-
const aside = wrapper.find('.aside');
128+
const aside = wrapper.findComponent('.aside');
129129
expect(aside.classes()).not.toContain('no-transition');
130-
const emitter = wrapper.find(BreakpointEmitter);
130+
const emitter = wrapper.findComponent(BreakpointEmitter);
131131
expect(emitter.props('scope')).toEqual(BreakpointScopes.nav);
132132
emitter.vm.$emit('change', BreakpointName.small);
133133
expect(aside.classes()).toContain('no-transition');
@@ -204,7 +204,7 @@ describe('AdjustableSidebarWidth', () => {
204204
const wrapper = createWrapper();
205205
await flushPromises();
206206
// assert not open
207-
const aside = wrapper.find('.aside');
207+
const aside = wrapper.findComponent('.aside');
208208
expect(aside.classes()).not.toContain('show-on-mobile');
209209
expect(FocusTrap).toHaveBeenCalledTimes(1);
210210
expect(FocusTrap.mock.results[0].value.start).toHaveBeenCalledTimes(0);
@@ -242,7 +242,7 @@ describe('AdjustableSidebarWidth', () => {
242242
const wrapper = createWrapper();
243243
await flushPromises();
244244
// assert not open
245-
const aside = wrapper.find('.aside');
245+
const aside = wrapper.findComponent('.aside');
246246
// trigger opening externally
247247
wrapper.setProps({ shownOnMobile: true });
248248
await flushPromises();
@@ -277,18 +277,18 @@ describe('AdjustableSidebarWidth', () => {
277277
},
278278
});
279279
// setup
280-
wrapper.find(BreakpointEmitter).vm.$emit('change', BreakpointName.medium);
280+
wrapper.findComponent(BreakpointEmitter).vm.$emit('change', BreakpointName.medium);
281281
await wrapper.vm.$nextTick();
282282
expect(wrapper.emitted('update:shownOnMobile')).toBeFalsy();
283283
// true test
284-
wrapper.find(BreakpointEmitter).vm.$emit('change', BreakpointName.large);
284+
wrapper.findComponent(BreakpointEmitter).vm.$emit('change', BreakpointName.large);
285285
expect(wrapper.emitted('update:shownOnMobile')).toEqual([[false]]);
286286
});
287287
});
288288

289289
it('adds a `hide-on-large` class, when `hiddenOnLarge: true`', async () => {
290290
const wrapper = createWrapper();
291-
const aside = wrapper.find({ ref: 'aside' });
291+
const aside = wrapper.findComponent({ ref: 'aside' });
292292
expect(aside.classes()).not.toContain('hide-on-large');
293293
expect(aside.classes()).not.toContain('sidebar-transitioning');
294294
wrapper.setProps({ hiddenOnLarge: true });
@@ -298,7 +298,7 @@ describe('AdjustableSidebarWidth', () => {
298298
'aria-hidden': 'true',
299299
});
300300
wrapper.setProps({ hiddenOnLarge: false });
301-
expect(wrapper.find({ ref: 'aside' }).classes()).not.toContain('hide-on-large');
301+
expect(wrapper.findComponent({ ref: 'aside' }).classes()).not.toContain('hide-on-large');
302302
expect(aside.classes()).toContain('sidebar-transitioning');
303303
await wrapper.vm.$nextTick();
304304
expect(aside.classes()).not.toContain('sidebar-transitioning');
@@ -355,9 +355,9 @@ describe('AdjustableSidebarWidth', () => {
355355

356356
it('allows dragging the handle to expand/contract the sidebar, with the mouse', () => {
357357
const wrapper = createWrapper();
358-
const aside = wrapper.find('.aside');
358+
const aside = wrapper.findComponent('.aside');
359359
// assert dragging
360-
wrapper.find('.resize-handle').trigger('mousedown', { type: 'mouseevent' });
360+
wrapper.findComponent('.resize-handle').trigger('mousedown', { type: 'mouseevent' });
361361
document.dispatchEvent(createEvent(eventsMap.mouse.move, {
362362
clientX: 500,
363363
}));
@@ -389,9 +389,9 @@ describe('AdjustableSidebarWidth', () => {
389389

390390
it('allows dragging the handle to expand/contract the sidebar, with the touch device', () => {
391391
const wrapper = createWrapper();
392-
const aside = wrapper.find('.aside');
392+
const aside = wrapper.findComponent('.aside');
393393
// assert dragging
394-
wrapper.find('.resize-handle').trigger('touchstart', { type: 'touchstart' });
394+
wrapper.findComponent('.resize-handle').trigger('touchstart', { type: 'touchstart' });
395395
document.dispatchEvent(createEvent(eventsMap.touch.move, {
396396
touches: [{
397397
clientX: 500,
@@ -430,9 +430,9 @@ describe('AdjustableSidebarWidth', () => {
430430
it('prevents dragging outside of the window', () => {
431431
window.innerWidth = 1000;
432432
const wrapper = createWrapper();
433-
const aside = wrapper.find('.aside');
433+
const aside = wrapper.findComponent('.aside');
434434
// assert dragging
435-
wrapper.find('.resize-handle').trigger('mousedown', { type: 'mousedown' });
435+
wrapper.findComponent('.resize-handle').trigger('mousedown', { type: 'mousedown' });
436436
document.dispatchEvent(createEvent(eventsMap.mouse.move, {
437437
clientX: window.innerWidth + 500,
438438
}));
@@ -444,9 +444,9 @@ describe('AdjustableSidebarWidth', () => {
444444
it('prevents dragging outside of the max container', () => {
445445
window.innerWidth = MAX_WIDTH + 200; // very wide screen
446446
const wrapper = createWrapper();
447-
const aside = wrapper.find('.aside');
447+
const aside = wrapper.findComponent('.aside');
448448
// assert dragging
449-
wrapper.find('.resize-handle').trigger('mousedown', { type: 'mousedown' });
449+
wrapper.findComponent('.resize-handle').trigger('mousedown', { type: 'mousedown' });
450450
document.dispatchEvent(createEvent(eventsMap.mouse.move, {
451451
clientX: window.innerWidth + 500,
452452
}));
@@ -457,9 +457,9 @@ describe('AdjustableSidebarWidth', () => {
457457

458458
it('prevents dragging below the `minWidth`', () => {
459459
const wrapper = createWrapper();
460-
const aside = wrapper.find('.aside');
460+
const aside = wrapper.findComponent('.aside');
461461
// assert dragging
462-
wrapper.find('.resize-handle').trigger('mousedown', { type: 'mousedown' });
462+
wrapper.findComponent('.resize-handle').trigger('mousedown', { type: 'mousedown' });
463463
document.dispatchEvent(createEvent(eventsMap.mouse.move, {
464464
clientX: 100,
465465
}));
@@ -470,10 +470,10 @@ describe('AdjustableSidebarWidth', () => {
470470

471471
it('force closes the nav, if dragging below the forceClose threshold', () => {
472472
const wrapper = createWrapper();
473-
const aside = wrapper.find('.aside');
473+
const aside = wrapper.findComponent('.aside');
474474
// assert dragging
475475
expect(wrapper.emitted('update:hiddenOnLarge')).toBeFalsy();
476-
wrapper.find('.resize-handle').trigger('mousedown', { type: 'mousedown' });
476+
wrapper.findComponent('.resize-handle').trigger('mousedown', { type: 'mousedown' });
477477
document.dispatchEvent(createEvent(eventsMap.mouse.move, {
478478
// minimum is 200, so 100px wide is the forceClose cutoff point, so we drag 50px beyond it
479479
clientX: 150,
@@ -514,9 +514,9 @@ describe('AdjustableSidebarWidth', () => {
514514
it('accounts for zoomed in devices', () => {
515515
window.scrollX = 55;
516516
const wrapper = createWrapper();
517-
const aside = wrapper.find('.aside');
517+
const aside = wrapper.findComponent('.aside');
518518
// assert dragging
519-
wrapper.find('.resize-handle').trigger('touchstart', { type: 'touchstart' });
519+
wrapper.findComponent('.resize-handle').trigger('touchstart', { type: 'touchstart' });
520520
document.dispatchEvent(createEvent(eventsMap.touch.move, {
521521
touches: [{
522522
clientX: 300,
@@ -540,7 +540,7 @@ describe('AdjustableSidebarWidth', () => {
540540
window.Event = null;
541541

542542
const wrapper = createWrapper();
543-
const aside = wrapper.find('.aside');
543+
const aside = wrapper.findComponent('.aside');
544544
expect(aside.classes()).not.toContain('sidebar-transitioning');
545545
aside.trigger('transitionstart', { propertyName: 'width' });
546546
expect(aside.classes()).toContain('sidebar-transitioning');
@@ -562,7 +562,7 @@ describe('AdjustableSidebarWidth', () => {
562562
},
563563
});
564564
expect(wrapper.classes()).toContain('sidebar-hidden');
565-
const aside = wrapper.find({ ref: 'aside' });
565+
const aside = wrapper.findComponent({ ref: 'aside' });
566566
expect(aside.attributes('aria-hidden')).toBe('true');
567567
expect(aside.classes()).toContain('hide-on-large');
568568
});
@@ -580,12 +580,12 @@ describe('AdjustableSidebarWidth', () => {
580580
window.dispatchEvent(createEvent('resize'));
581581
await flushPromises();
582582
assertWidth(wrapper, 200); // hardcoded width
583-
expect(wrapper.find('.resize-handle').exists()).toBe(false);
583+
expect(wrapper.findComponent('.resize-handle').exists()).toBe(false);
584584
});
585585

586586
describe('stores the content width in the store', () => {
587587
function setContentWidth(wrapper, value) {
588-
Object.defineProperty(wrapper.find({ ref: 'content' }).element, 'offsetWidth', {
588+
Object.defineProperty(wrapper.findComponent({ ref: 'content' }).element, 'offsetWidth', {
589589
value,
590590
writable: true,
591591
});
@@ -595,7 +595,7 @@ describe('AdjustableSidebarWidth', () => {
595595
const wrapper = createWrapper();
596596
setContentWidth(wrapper, 99);
597597
expect(store.state.contentWidth).toBe(0);
598-
wrapper.find('.resize-handle').trigger('touchstart', { type: 'touchstart' });
598+
wrapper.findComponent('.resize-handle').trigger('touchstart', { type: 'touchstart' });
599599
document.dispatchEvent(createEvent(eventsMap.touch.move, {
600600
touches: [{
601601
clientX: 300,
@@ -613,7 +613,7 @@ describe('AdjustableSidebarWidth', () => {
613613
expect(store.state.contentWidth).toBe(0);
614614
// setup an external close
615615
wrapper.setProps({ hiddenOnLarge: true });
616-
const aside = wrapper.find('.aside');
616+
const aside = wrapper.findComponent('.aside');
617617
aside.trigger('transitionstart', { propertyName: 'width' });
618618
aside.trigger('transitionend', { propertyName: 'width' });
619619
await flushPromises();

0 commit comments

Comments
 (0)