Wait for nextTick after emitting an event

Author: marinaaisa

tests/unit/components/AdjustableSidebarWidth.spec.js

@@ -282,6 +282,7 @@ describe('AdjustableSidebarWidth', () => {
       expect(wrapper.emitted('update:shownOnMobile')).toBeFalsy();
       // true test
       wrapper.findComponent(BreakpointEmitter).vm.$emit('change', BreakpointName.large);
+      await wrapper.vm.$nextTick();
       expect(wrapper.emitted('update:shownOnMobile')).toEqual([[false]]);
     });
   });

tests/unit/components/Asset.spec.js

@@ -80,7 +80,7 @@ describe('Asset', () => {
     expect(imageAsset.props('variants')).toBe(foo.variants);
   });
 
-  it('renders a `ReplayableVideoAsset` for video', () => {
+  it('renders a `ReplayableVideoAsset` for video', async () => {
     const image = {
       type: 'image',
       variants: [
@@ -100,6 +100,7 @@ describe('Asset', () => {
 
     // Check that 'ended' events emitted by a `VideoAsset` are re-emitted.
     videoAsset.vm.$emit('ended');
+    await wrapper.vm.$nextTick();
     expect(wrapper.emitted().videoEnded[0]).toBeTruthy();
   });
 

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

@@ -15,7 +15,7 @@ import { flushPromises } from '../../../../test-utils';
 describe('CodeListing', () => {
   const { Filename } = CodeListing.components;
 
-  it('renders the file name if provided', () => {
+  it('renders the file name if provided', async () => {
     const fileName = 'myfile';
     const isFileNameActionable = true;
 
@@ -37,6 +37,7 @@ describe('CodeListing', () => {
 
     // Test that an event is emitted when the file name is clicked.
     fileNameComponent.vm.$emit('click');
+    await wrapper.vm.$nextTick();
     expect(wrapper.emitted()['file-name-click']).toBeTruthy();
   });
 

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

@@ -75,8 +75,9 @@ describe('EndpointExample', () => {
     expect(codeListing.props('collapsed')).toBe(true);
   });
 
-  it('toggles the current tab when selected', () => {
+  it('toggles the current tab when selected', async () => {
     wrapper.findComponent(Tabnav).vm.$emit('input', Tab.response);
+    await wrapper.vm.$nextTick();
     const codeListing = wrapper.findComponent(CollapsibleCodeListing);
     expect(codeListing.props('content')).toBe(propsData.response.content);
   });
@@ -88,6 +89,7 @@ describe('EndpointExample', () => {
   it('expands/collapses the CollapsibleCodeListing when the more/less toggle is clicked', async () => {
     // show the response, as it is collapsible
     wrapper.findComponent(Tabnav).vm.$emit('input', Tab.response);
+    await wrapper.vm.$nextTick();
 
     const codeListing = wrapper.findComponent(CollapsibleCodeListing);
 

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

@@ -29,11 +29,12 @@ describe('MobileCodeListing', () => {
     expect(codeListing.props('isFileNameActionable')).toBe(true);
   });
 
-  it('re-emits `file-name-click` events', () => {
+  it('re-emits `file-name-click` events', async () => {
     const wrapper = mountWithHighlights([{ line: 1 }]);
     const codeListing = wrapper.findComponent(CodeListing);
 
     codeListing.vm.$emit('file-name-click');
+    await wrapper.vm.$nextTick();
     expect(wrapper.emitted()['file-name-click']).toBeTruthy();
   });
 

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

@@ -78,6 +78,7 @@ describe('TabNavigator.spec', () => {
     await flushPromises();
     const tabnav = wrapper.findComponent(Tabnav);
     tabnav.vm.$emit('input', titles[1]);
+    await wrapper.vm.$nextTick();
     expect(wrapper.findComponent('.tab-container.active').text()).toBe('Second');
     expect(tabnav.props('value')).toEqual(titles[1]);
   });

tests/unit/components/DocumentationLayout.spec.js

@@ -474,6 +474,7 @@ describe('DocumentationLayout', () => {
     await flushPromises();
     sidebar.vm.breakpoint = BreakpointName.medium;
     navigator.vm.$emit('close');
+    await wrapper.vm.$nextTick();
     expect(sidebar.props('shownOnMobile')).toBe(false);
     expect(storage.set).toHaveBeenCalledTimes(0);
   });
@@ -510,10 +511,12 @@ describe('DocumentationLayout', () => {
     expect(sidebar.props('hiddenOnLarge')).toBe(false);
     // Now close from the sidebar
     sidebar.vm.$emit('update:hiddenOnLarge', true);
+    await wrapper.vm.$nextTick();
     expect(sidebar.props('hiddenOnLarge')).toBe(true);
     expect(storage.set).toHaveBeenLastCalledWith(NAVIGATOR_HIDDEN_ON_LARGE_KEY, true);
     // now toggle it back, from within the Nav button
     nav.vm.$emit('toggle-sidenav', BreakpointName.large);
+    await wrapper.vm.$nextTick();
     // assert we are storing the updated values
     expect(sidebar.props('hiddenOnLarge')).toBe(false);
     expect(storage.set).toHaveBeenLastCalledWith(NAVIGATOR_HIDDEN_ON_LARGE_KEY, false);

tests/unit/components/DocumentationTopic/Summary/LanguageSwitcher.spec.js

@@ -128,7 +128,7 @@ describe('LanguageSwitcher', () => {
     expect(links.at(1).props('url')).toBe('/documentation/foo?language=objc');
   });
 
-  it('stores the preferred language when a link is clicked', () => {
+  it('stores the preferred language when a link is clicked', async () => {
     const store = { setPreferredLanguage: jest.fn() };
     wrapper = shallowMount(LanguageSwitcher, {
       mocks,
@@ -138,6 +138,7 @@ describe('LanguageSwitcher', () => {
 
     let link = wrapper.findAllComponents(LanguageSwitcherLink).at(1);
     link.vm.$emit('click');
+    await wrapper.vm.$nextTick();
     expect(store.setPreferredLanguage).toBeCalledWith(Language.objectiveC.key.url);
 
     link = wrapper.findAllComponents(LanguageSwitcherLink).at(0);

tests/unit/components/Filter/FilterInput.spec.js

@@ -470,6 +470,7 @@ describe('FilterInput', () => {
       const selectedTags = wrapper.findComponent({ ref: 'selectedTags' });
       if (selectedTags.exists()) {
         selectedTags.vm.$emit('select-all');
+        await wrapper.vm.$nextTick();
       }
 
       input.trigger('paste', { clipboardData });
@@ -709,10 +710,11 @@ describe('FilterInput', () => {
       });
     });
 
-    it('adds tag to `selectedTags` when it is clicked, clearing the filter', () => {
+    it('adds tag to `selectedTags` when it is clicked, clearing the filter', async () => {
       const selectedTag = 'Tag1';
       suggestedTags = wrapper.findComponent({ ref: 'suggestedTags' });
       suggestedTags.vm.$emit('click-tags', { tagName: selectedTag });
+      await wrapper.vm.$nextTick();
       expect(wrapper.emitted('update:selectedTags')).toEqual([[[selectedTag]]]);
       expect(wrapper.emitted('input')).toEqual([['']]);
     });
@@ -742,8 +744,9 @@ describe('FilterInput', () => {
         expect(attrs).toHaveProperty('aria-labelledby', 'filter-input selected-tags');
       });
 
-      it('re-emits the the `preventedBlur` event, from selected tags', () => {
+      it('re-emits the the `preventedBlur` event, from selected tags', async () => {
         selectedTagsComponent.vm.$emit('prevent-blur');
+        await wrapper.vm.$nextTick();
         expect(wrapper.emitted('update:preventedBlur')).toEqual([[true]]);
       });
 
@@ -854,6 +857,7 @@ describe('FilterInput', () => {
 
       it('reset filters when `reset-filters` event is called on `selectedTags`', async () => {
         selectedTagsComponent.vm.$emit('reset-filters');
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.emitted('input')).toEqual([['']]);
         expect(wrapper.emitted('update:selectedTags')).toBeTruthy();
@@ -938,9 +942,10 @@ describe('FilterInput', () => {
         expect(wrapper.emitted('update:selectedTags')).toBeTruthy();
       });
 
-      it('focuses the input and does not delete selected tag when it is clicked on desktop', () => {
+      it('focuses the input and does not delete selected tag when it is clicked on desktop', async () => {
         const selectedTags = wrapper.findComponent({ ref: 'selectedTags' });
         selectedTags.vm.$emit('click-tags', selectedTag);
+        await wrapper.vm.$nextTick();
         expect(wrapper.vm.selectedTags).toEqual([selectedTag]);
         expect(document.activeElement).toBe(input.element);
       });
@@ -1030,6 +1035,7 @@ describe('FilterInput', () => {
       const singleCharacter = 'a';
 
       wrapper.findComponent({ ref: 'selectedTags' }).vm.$emit('select-all');
+      await wrapper.vm.$nextTick();
       input.trigger('keydown', { key: singleCharacter });
       input.setValue(singleCharacter);
 
@@ -1091,6 +1097,7 @@ describe('FilterInput', () => {
       await wrapper.setProps({ value: 'foo', selectedTags: tags });
       const selectedTags = wrapper.findComponent({ ref: 'selectedTags' });
       selectedTags.vm.$emit('select-all');
+      await wrapper.vm.$nextTick();
 
       expect(wrapper.vm.selectedTag).toEqual(wrapper.vm.activeTag);
     });
@@ -1193,8 +1200,9 @@ describe('FilterInput', () => {
       expect(wrapper.emitted('focus-prev')).toBeTruthy();
     });
 
-    it('emits `focus-next`, when @focus-next is called from SuggestedTags', () => {
+    it('emits `focus-next`, when @focus-next is called from SuggestedTags', async () => {
       wrapper.findComponent({ ref: 'suggestedTags' }).vm.$emit('focus-next');
+      await wrapper.vm.$nextTick();
       expect(wrapper.emitted('focus-next')).toHaveLength(1);
     });
 
@@ -1211,6 +1219,7 @@ describe('FilterInput', () => {
       await wrapper.setProps({ positionReversed: true });
 
       wrapper.findComponent({ ref: 'suggestedTags' }).vm.$emit('focus-prev');
+      await wrapper.vm.$nextTick();
       expect(wrapper.emitted('focus-prev')).toHaveLength(1);
     });
 
@@ -1316,7 +1325,7 @@ describe('FilterInput', () => {
           input.trigger('keydown.left', { shiftKey: true });
         });
 
-        it('selects tags from right to left', () => {
+        it('selects tags from right to left', async () => {
           // Last tag should get active
           expect(wrapper.vm.activeTags).toEqual([selectedTags[2]]);
 
@@ -1328,18 +1337,20 @@ describe('FilterInput', () => {
 
           // Previous tag get focus
           selectedTagsComponent.vm.$emit('focus', { tagName: selectedTags[1] });
+          await wrapper.vm.$nextTick();
 
           // Last two tags get active
           expect(wrapper.vm.activeTags).toEqual([selectedTags[1], selectedTags[2]]);
         });
 
-        it('unselects tags from left to right', () => {
+        it('unselects tags from left to right', async () => {
           // Press left key + shift on the last tag
           selectedTagsComponent.vm.$emit('keydown', {
             tagName: selectedTags[2],
             event: new KeyboardEvent('keydown.left', { shiftKey: true }),
           });
           selectedTagsComponent.vm.$emit('focus', { tagName: selectedTags[1] });
+          await wrapper.vm.$nextTick();
 
           // Last two tags get active
           expect(wrapper.vm.activeTags).toEqual([selectedTags[1], selectedTags[2]]);
@@ -1351,18 +1362,20 @@ describe('FilterInput', () => {
           });
           // Last tag get focus
           selectedTagsComponent.vm.$emit('focus', { tagName: selectedTags[2] });
+          await wrapper.vm.$nextTick();
 
           // Only the last tag get active
           expect(wrapper.vm.activeTags).toEqual([selectedTags[2]]);
         });
 
-        it('unselects tags clicking on them using the meta key', () => {
+        it('unselects tags clicking on them using the meta key', async () => {
           // Press left key + shift on the last tag
           selectedTagsComponent.vm.$emit('keydown', {
             tagName: selectedTags[2],
             event: new KeyboardEvent('keydown.left', { shiftKey: true }),
           });
           selectedTagsComponent.vm.$emit('focus', { tagName: selectedTags[1] });
+          await wrapper.vm.$nextTick();
 
           // Last two tags get active
           expect(wrapper.vm.activeTags).toEqual([selectedTags[1], selectedTags[2]]);
@@ -1377,13 +1390,14 @@ describe('FilterInput', () => {
           expect(spyFocusTag).toHaveBeenCalledTimes(1);
         });
 
-        it('unselects tags clicking on them using the ctrl key', () => {
+        it('unselects tags clicking on them using the ctrl key', async () => {
           // Press left key + shift on the last tag
           selectedTagsComponent.vm.$emit('keydown', {
             tagName: selectedTags[2],
             event: new KeyboardEvent('keydown.left', { shiftKey: true }),
           });
           selectedTagsComponent.vm.$emit('focus', { tagName: selectedTags[1] });
+          await wrapper.vm.$nextTick();
 
           // Last two tags get active
           expect(wrapper.vm.activeTags).toEqual([selectedTags[1], selectedTags[2]]);
@@ -1398,11 +1412,12 @@ describe('FilterInput', () => {
           expect(spyFocusTag).toHaveBeenCalledTimes(1);
         });
 
-        it('does not select tags if user tabs while holding the shift key from input', () => {
+        it('does not select tags if user tabs while holding the shift key from input', async () => {
           input.trigger('keydown', { key: 'Tab', shiftKey: true });
           expect(wrapper.vm.activeTags).toEqual([]);
 
           selectedTagsComponent.vm.$emit('focus', { tagName: selectedTags[2] });
+          await wrapper.vm.$nextTick();
           expect(wrapper.vm.activeTags).toEqual([]);
         });
       });
@@ -1417,12 +1432,13 @@ describe('FilterInput', () => {
         spyFocusTag = jest.spyOn(selectedTagsComponent.vm, 'focusTag').mockReturnValueOnce();
       });
 
-      it('selects the whole range between the init tag index and the focused tag index from right to left', () => {
+      it('selects the whole range between the init tag index and the focused tag index from right to left', async () => {
         selectedTagsComponent.vm.$emit('keydown', {
           tagName: selectedTags[2],
           event: new KeyboardEvent('keydown', { shiftKey: true }),
         });
         selectedTagsComponent.vm.$emit('focus', { tagName: selectedTags[0] });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.activeTags).toEqual(selectedTags);
       });
@@ -1553,7 +1569,7 @@ describe('FilterInput', () => {
         expect(wrapper.vm.activeTags).toEqual([selectedTags[1], selectedTags[0]]);
       });
 
-      it('selects the init tag as the length of selected tags when the selection starts on the input value', () => {
+      it('selects the init tag as the length of selected tags when the selection starts on the input value', async () => {
         input = wrapper.findComponent('input');
         input.trigger('keydown.left', {
           shiftKey: true,
@@ -1563,6 +1579,7 @@ describe('FilterInput', () => {
         expect(wrapper.vm.activeTags).toEqual([selectedTags[selectedTags.length - 1]]);
 
         selectedTagsComponent.vm.$emit('focus', { tagName: selectedTags[0] });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.activeTags).toEqual(selectedTags);
       });

tests/unit/components/Filter/TagList.spec.js

@@ -47,8 +47,9 @@ describe('TagList', () => {
     expect(list.classes('scrolling')).toBe(true);
   });
 
-  it('re-emits `prevent-blur` when tag emitted `prevent-blur`', () => {
+  it('re-emits `prevent-blur` when tag emitted `prevent-blur`', async () => {
     tag1.vm.$emit('prevent-blur');
+    await wrapper.vm.$nextTick();
 
     expect(wrapper.emitted('prevent-blur')).toBeTruthy();
   });
@@ -186,10 +187,11 @@ describe('TagList', () => {
     expect(wrapper.emitted('select-all')).toBeTruthy();
   });
 
-  it('emits up `paste-tags`, when a tag emits a `paste-content` event', () => {
+  it('emits up `paste-tags`, when a tag emits a `paste-content` event', async () => {
     const tag = wrapper.findComponent({ ref: 'tag' });
     const payload = { someData: 'someData' };
     tag.vm.$emit('paste-content', payload);
+    await wrapper.vm.$nextTick();
     // assert its emitted only once
     expect(wrapper.emitted('paste-tags')).toHaveLength(1);
     // assert it passes up the event payload up