Wait for wrapper.setProps

Author: marinaaisa

tests/unit/components/AdjustableSidebarWidth.spec.js

@@ -210,7 +210,7 @@ describe('AdjustableSidebarWidth', () => {
       expect(FocusTrap.mock.results[0].value.start).toHaveBeenCalledTimes(0);
       expect(FocusTrap.mock.results[0].value.stop).toHaveBeenCalledTimes(0);
       // trigger opening externally
-      wrapper.setProps({ shownOnMobile: true });
+      await wrapper.setProps({ shownOnMobile: true });
       await flushPromises();
       // assert open class attached
       expect(aside.classes()).toContain('show-on-mobile');
@@ -225,7 +225,7 @@ describe('AdjustableSidebarWidth', () => {
       expect(FocusTrap.mock.results[0].value.start).toHaveBeenCalledTimes(1);
       expect(FocusTrap.mock.results[0].value.stop).toHaveBeenCalledTimes(0);
       // close again
-      wrapper.setProps({ shownOnMobile: false });
+      await wrapper.setProps({ shownOnMobile: false });
       await flushPromises();
       // assert class
       expect(aside.classes()).not.toContain('show-on-mobile');
@@ -244,7 +244,7 @@ describe('AdjustableSidebarWidth', () => {
       // assert not open
       const aside = wrapper.findComponent('.aside');
       // trigger opening externally
-      wrapper.setProps({ shownOnMobile: true });
+      await wrapper.setProps({ shownOnMobile: true });
       await flushPromises();
       // assert open class attached
       expect(aside.classes()).toContain('show-on-mobile');
@@ -291,13 +291,13 @@ describe('AdjustableSidebarWidth', () => {
     const aside = wrapper.findComponent({ ref: 'aside' });
     expect(aside.classes()).not.toContain('hide-on-large');
     expect(aside.classes()).not.toContain('sidebar-transitioning');
-    wrapper.setProps({ hiddenOnLarge: true });
+    await wrapper.setProps({ hiddenOnLarge: true });
     expect(aside.classes()).toContain('hide-on-large');
     expect(aside.classes()).toContain('sidebar-transitioning');
     expect(aside.attributes()).toMatchObject({
       'aria-hidden': 'true',
     });
-    wrapper.setProps({ hiddenOnLarge: false });
+    await wrapper.setProps({ hiddenOnLarge: false });
     expect(wrapper.findComponent({ ref: 'aside' }).classes()).not.toContain('hide-on-large');
     expect(aside.classes()).toContain('sidebar-transitioning');
     await wrapper.vm.$nextTick();
@@ -468,7 +468,7 @@ describe('AdjustableSidebarWidth', () => {
     assertWidth(wrapper, 300); // wrapper is minimum 20% of the screen (1000px)
   });
 
-  it('force closes the nav, if dragging below the forceClose threshold', () => {
+  it('force closes the nav, if dragging below the forceClose threshold', async () => {
     const wrapper = createWrapper();
     const aside = wrapper.findComponent('.aside');
     // assert dragging
@@ -483,7 +483,7 @@ describe('AdjustableSidebarWidth', () => {
     assertWidth(wrapper, 300); // wrapper is minimum 30% of the screen (1000px)
     expect(wrapper.emitted('update:hiddenOnLarge')).toEqual([[true]]);
     // simulate event is handled on parent
-    wrapper.setProps({
+    await wrapper.setProps({
       hiddenOnLarge: true,
     });
     // drag open now
@@ -498,7 +498,7 @@ describe('AdjustableSidebarWidth', () => {
   it('removes any locks or listeners upon destruction', async () => {
     const wrapper = createWrapper();
     await flushPromises();
-    wrapper.setProps({ shownOnMobile: true });
+    await wrapper.setProps({ shownOnMobile: true });
     await flushPromises();
     wrapper.destroy();
     expect(FocusTrap.mock.results[0].value.destroy).toHaveBeenCalledTimes(1);
@@ -612,7 +612,7 @@ describe('AdjustableSidebarWidth', () => {
       setContentWidth(wrapper, 99);
       expect(store.state.contentWidth).toBe(0);
       // setup an external close
-      wrapper.setProps({ hiddenOnLarge: true });
+      await wrapper.setProps({ hiddenOnLarge: true });
       const aside = wrapper.findComponent('.aside');
       aside.trigger('transitionstart', { propertyName: 'width' });
       aside.trigger('transitionend', { propertyName: 'width' });
@@ -621,7 +621,7 @@ describe('AdjustableSidebarWidth', () => {
       expect(store.state.contentWidth).toBe(99);
       // prepare for an external open
       setContentWidth(wrapper, 1099);
-      wrapper.setProps({ hiddenOnLarge: false });
+      await wrapper.setProps({ hiddenOnLarge: false });
       aside.trigger('transitionstart', { propertyName: 'width' });
       // assert its the same, until transitions end
       expect(store.state.contentWidth).toBe(99);

tests/unit/components/Article.spec.js

@@ -150,8 +150,8 @@ describe('Article', () => {
   });
 
   describe('without hero section', () => {
-    beforeEach(() => {
-      wrapper.setProps({ sections: [] });
+    beforeEach(async () => {
+      await wrapper.setProps({ sections: [] });
     });
 
     it('does not provide a page title', () => {

tests/unit/components/Article/Layouts/FullWidth.spec.js

@@ -81,8 +81,8 @@ describe('FullWidth', () => {
       },
     ];
 
-    beforeEach(() => {
-      wrapper.setProps({ content });
+    beforeEach(async () => {
+      await wrapper.setProps({ content });
     });
 
     it('groups headings and subsequent content with `LinkableElement`', () => {

tests/unit/components/Asset.spec.js

@@ -112,11 +112,11 @@ describe('Asset', () => {
     expect(videoAsset.props('alt')).toBe(video.alt);
   });
 
-  it('passes down `deviceFrame` to `ReplayableVideoAsset`', () => {
+  it('passes down `deviceFrame` to `ReplayableVideoAsset`', async () => {
     const wrapper = mountAsset('video', { video });
     let videoAsset = wrapper.findComponent(ReplayableVideoAsset);
     expect(videoAsset.props('deviceFrame')).toBeFalsy();
-    wrapper.setProps({
+    await wrapper.setProps({
       deviceFrame: 'phone',
     });
     videoAsset = wrapper.findComponent(ReplayableVideoAsset);

tests/unit/components/BaseDropdown.spec.js

@@ -31,13 +31,13 @@ describe('BaseDropdown', () => {
     expect(wrapper.classes()).toEqual(['form-element']);
   });
 
-  it('renders a `select` component', () => {
+  it('renders a `select` component', async () => {
     const wrapper = createWrapper();
     // assert select is rendered with correct classes
     const select = wrapper.findComponent('select');
     expect(select.exists()).toBe(true);
     expect(select.classes()).toContain('form-dropdown');
-    wrapper.setProps({ value: '' });
+    await wrapper.setProps({ value: '' });
     expect(select.classes()).toContain('form-dropdown-selectnone');
   });
 
@@ -136,7 +136,7 @@ describe('BaseDropdown', () => {
     expect(icon.attributes()).toHaveProperty('aria-hidden', 'true');
   });
 
-  it('passes `form-dropdown-selectnone` if value is empty', () => {
+  it('passes `form-dropdown-selectnone` if value is empty', async () => {
     let scopedSlotProps = {};
     const wrapper = createWrapper({
       scopedSlots: {
@@ -148,7 +148,7 @@ describe('BaseDropdown', () => {
     });
     expect(scopedSlotProps.dropdownClasses)
       .toContainEqual({ [EmptyClass]: false, 'no-eyebrow': true });
-    wrapper.setProps({
+    await wrapper.setProps({
       value: '',
     });
     expect(scopedSlotProps.dropdownClasses)

tests/unit/components/ContentNode/Aside.spec.js

@@ -23,7 +23,7 @@ describe('Aside', () => {
     expect(wrapper.attributes('aria-label')).toBe('note');
   });
 
-  it('renders a label', () => {
+  it('renders a label', async () => {
     const wrapper = shallowMount(Aside, {
       propsData: {
         kind: 'experiment',
@@ -33,27 +33,27 @@ describe('Aside', () => {
     expect(label.exists()).toBe(true);
     expect(label.text()).toBe('aside-kind.experiment');
 
-    wrapper.setProps({ kind: 'important' });
+    await wrapper.setProps({ kind: 'important' });
     label = wrapper.findComponent('.label');
     expect(label.exists()).toBe(true);
     expect(label.text()).toBe('aside-kind.important');
 
-    wrapper.setProps({ kind: 'note' });
+    await wrapper.setProps({ kind: 'note' });
     label = wrapper.findComponent('.label');
     expect(label.exists()).toBe(true);
     expect(label.text()).toBe('aside-kind.note');
 
-    wrapper.setProps({ kind: 'tip' });
+    await wrapper.setProps({ kind: 'tip' });
     label = wrapper.findComponent('.label');
     expect(label.exists()).toBe(true);
     expect(label.text()).toBe('aside-kind.tip');
 
-    wrapper.setProps({ kind: 'warning' });
+    await wrapper.setProps({ kind: 'warning' });
     label = wrapper.findComponent('.label');
     expect(label.exists()).toBe(true);
     expect(label.text()).toBe('aside-kind.warning');
 
-    wrapper.setProps({ kind: 'note', name: 'Custom Name' });
+    await wrapper.setProps({ kind: 'note', name: 'Custom Name' });
     label = wrapper.findComponent('.label');
     expect(label.exists()).toBe(true);
     expect(label.text()).toBe('Custom Name');

tests/unit/components/ContentNode/CodeListing.spec.js

@@ -179,7 +179,7 @@ describe('CodeListing', () => {
     await flushPromises();
 
     expect(wrapper.findComponent('.syntax-keyword').text()).toBe('let');
-    wrapper.setProps({
+    await wrapper.setProps({
       content: ['print("Some Text")'],
     });
     await flushPromises();
@@ -197,7 +197,7 @@ describe('CodeListing', () => {
     await flushPromises();
 
     expect(wrapper.classes()).not.toContain('single-line');
-    wrapper.setProps({
+    await wrapper.setProps({
       content: content.slice(0, 1),
     });
 

tests/unit/components/ContentNode/Row.spec.js

@@ -26,7 +26,7 @@ describe('Row', () => {
     expect(wrapper.text()).toContain('Slot Content');
   });
 
-  it('renders with columns in mind', () => {
+  it('renders with columns in mind', async () => {
     const wrapper = createWrapper({
       propsData: {
         columns: { large: 4 },
@@ -36,7 +36,7 @@ describe('Row', () => {
     expect(wrapper.vm.style).toHaveProperty('--col-count-large', 4);
     expect(wrapper.vm.style).toHaveProperty('--col-count-medium', undefined);
     expect(wrapper.vm.style).toHaveProperty('--col-count-small', 1);
-    wrapper.setProps({
+    await wrapper.setProps({
       columns: {
         large: 3,
         medium: 5,

tests/unit/components/ContentNode/TabNavigator.spec.js

@@ -82,60 +82,60 @@ describe('TabNavigator.spec', () => {
     expect(tabnav.props('value')).toEqual(titles[1]);
   });
 
-  it('selects the added tab when adding a tab', () => {
+  it('selects the added tab when adding a tab', async () => {
     const wrapper = createWrapper();
     expect(wrapper.findComponent('.tab-container.active').text()).toBe('First');
 
-    wrapper.setProps({ titles: longerTitles });
+    await wrapper.setProps({ titles: longerTitles });
     expect(wrapper.findComponent('.tab-container.active').text()).toBe('Fourth');
     const tabnav = wrapper.findComponent(Tabnav);
     expect(tabnav.props('value')).toEqual(longerTitles[3]);
   });
 
-  it('selects first tab when deleting current tab', () => {
+  it('selects first tab when deleting current tab', async () => {
     const wrapper = createWrapper();
-    wrapper.setProps({ titles: longerTitles });
+    await wrapper.setProps({ titles: longerTitles });
     expect(wrapper.findComponent('.tab-container.active').text()).toBe('Fourth');
 
-    wrapper.setProps({ titles });
+    await wrapper.setProps({ titles });
     expect(wrapper.findComponent('.tab-container.active').text()).toBe('First');
     const tabnav = wrapper.findComponent(Tabnav);
     expect(tabnav.props('value')).toEqual(titles[0]);
   });
 
-  it('keep currently selected tab when deleting a tab', () => {
+  it('keep currently selected tab when deleting a tab', async () => {
     const wrapper = createWrapper();
-    wrapper.setProps({ titles: longerTitles });
+    await wrapper.setProps({ titles: longerTitles });
     expect(wrapper.findComponent('.tab-container.active').text()).toBe('Fourth'); // Current tab
 
     const removedTitles = ['Long tab title',
       'A Longer tab title', 'added title'];
-    wrapper.setProps({ titles: removedTitles });
+    await wrapper.setProps({ titles: removedTitles });
     expect(wrapper.findComponent('.tab-container.active').text()).toBe('Fourth'); // Keeps current tab
     const tabnav = wrapper.findComponent(Tabnav);
     expect(tabnav.props('value')).toEqual(longerTitles[3]);
   });
 
-  it('selects correct tab when changing a tab', () => {
+  it('selects correct tab when changing a tab', async () => {
     const changedLastTab = ['Long tab title',
       'A Longer tab title', 'changed last tab'];
     const wrapper = createWrapper();
     expect(wrapper.findComponent('.tab-container.active').text()).toBe('First');
-    wrapper.setProps({ titles: changedLastTab });
+    await wrapper.setProps({ titles: changedLastTab });
     expect(wrapper.findComponent('.tab-container.active').text()).toBe('Last');
     let tabnav = wrapper.findComponent(Tabnav);
     expect(tabnav.props('value')).toEqual(changedLastTab[2]);
 
     const changedFirstTab = ['changed first tab',
       'A Longer tab title', 'changed last tab'];
-    wrapper.setProps({ titles: changedFirstTab });
+    await wrapper.setProps({ titles: changedFirstTab });
     expect(wrapper.findComponent('.tab-container.active').text()).toBe('First');
     tabnav = wrapper.findComponent(Tabnav);
     expect(tabnav.props('value')).toEqual(changedFirstTab[0]);
 
     const changedMidTab = ['changed first tab',
       'changed middle tab', 'changed last tab'];
-    wrapper.setProps({ titles: changedMidTab });
+    await wrapper.setProps({ titles: changedMidTab });
     expect(wrapper.findComponent('.tab-container.active').text()).toBe('Middle');
     tabnav = wrapper.findComponent(Tabnav);
     expect(tabnav.props('value')).toEqual(changedMidTab[1]);