Await nextTick after trigger function

Author: marinaaisa

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

@@ -85,19 +85,21 @@ describe('EndpointExample', () => {
     expect(wrapper.findComponent('.controls').exists()).toBe(false);
   });
 
-  it('expands/collapses the CollapsibleCodeListing when the more/less toggle is clicked', () => {
+  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);
 
     const codeListing = wrapper.findComponent(CollapsibleCodeListing);
 
     wrapper.findComponent('.toggle').trigger('click');
+    await wrapper.vm.$nextTick();
 
     expect(codeListing.props('collapsed')).toBe(false);
     expect(wrapper.findComponent('.toggle').text()).toBe('less');
     expect(wrapper.findComponent(InlineMinusCircleSolidIcon).exists()).toBe(true);
 
     wrapper.findComponent('.toggle').trigger('click');
+    await wrapper.vm.$nextTick();
 
     expect(codeListing.props('collapsed')).toBe(true);
     expect(wrapper.findComponent('.toggle').text()).toBe('more');

tests/unit/components/DocumentationTopic.spec.js

@@ -849,6 +849,7 @@ describe('DocumentationTopic', () => {
     const toggle = wrapper.findComponent('.declaration-list-toggle');
     expect(toggle.exists()).toBe(true);
     toggle.trigger('click');
+    await wrapper.vm.$nextTick();
 
     declListMenu = wrapper.findComponent('.declaration-list-menu');
     expect(declListMenu.exists()).toBe(true);

tests/unit/components/DocumentationTopic/DocumentationNav.spec.js

@@ -224,10 +224,12 @@ describe('DocumentationNav', () => {
     wrapper.findComponent(BreakpointEmitter).vm.$emit('change', BreakpointName.medium);
     await flushPromises();
     wrapper.findComponent('.nav-menucta').trigger('click');
+    await wrapper.vm.$nextTick();
     expect(wrapper.classes()).toContain('nav--is-open');
     const toggle = wrapper.findComponent('.sidenav-toggle');
     expect(toggle.attributes()).toHaveProperty('tabindex', '-1');
     toggle.trigger('click');
+    await wrapper.vm.$nextTick();
     wrapper.findComponent('.nav-menu-tray').trigger('transitionend', { propertyName: 'max-height' });
     expect(wrapper.classes()).not.toContain('nav--is-open');
     expect(wrapper.emitted('toggle-sidenav')).toBeFalsy();

tests/unit/components/DocumentationTopic/DocumentationNav/LanguageToggle.spec.js

@@ -172,6 +172,7 @@ describe('LanguageToggle', () => {
 
     wrapper.findAll('#language-toggle option').at(1).element.selected = true;
     wrapper.findComponent('#language-toggle').trigger('change');
+    await wrapper.vm.$nextTick();
 
     expect(wrapper.findComponent('.current-language').text()).toBe(Language.objectiveC.name);
     expect(closeNav).toHaveBeenCalledTimes(1);

tests/unit/components/DropdownCustom.spec.js

@@ -270,9 +270,10 @@ describe('DropdownCustom', () => {
     });
   });
 
-  it('closes the dropdown of you `click` outside', () => {
+  it('closes the dropdown of you `click` outside', async () => {
     wrapper = createWrapper();
     wrapper.findComponent({ ref: 'dropdownToggle' }).trigger('click');
+    await wrapper.vm.$nextTick();
     const label = wrapper.findComponent('.visuallyhidden').element;
     expect(wrapper.classes()).toContain(OpenedClass);
     const event = new Event('click');

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

@@ -527,9 +527,10 @@ describe('FilterInput', () => {
     const relatedTargetCard = document.createElement('a');
     document.body.appendChild(relatedTargetCard);
 
-    beforeEach(() => {
+    beforeEach(async () => {
       // show the suggested tags
       wrapper.findComponent('.filter').trigger('focus');
+      await wrapper.vm.$nextTick();
 
       suggestedTags = wrapper.findComponent({ ref: 'suggestedTags' });
       deleteButton = wrapper.findComponent('.filter__delete-button');
@@ -568,17 +569,19 @@ describe('FilterInput', () => {
       expect(suggestedTags.props()).toHaveProperty('ariaLabel', 'filter.suggested-tags');
     });
 
-    it('keeps `suggestedTags` component when `deleteButton` gets focus instead of `input`', () => {
+    it('keeps `suggestedTags` component when `deleteButton` gets focus instead of `input`', async () => {
       deleteButton = wrapper.findComponent('.filter__delete-button');
       deleteButton.trigger('focus');
+      await wrapper.vm.$nextTick();
       expect(wrapper.emitted('show-suggested-tags')).toBeTruthy();
       suggestedTags = wrapper.findComponent({ ref: 'suggestedTags' });
       expect(suggestedTags.exists()).toBe(true);
     });
 
-    it('keeps `suggestedTags` component when `deleteButton` gets focus instead of `input`', () => {
+    it('keeps `suggestedTags` component when `deleteButton` gets focus instead of `input`', async () => {
       const deleteBtnFocus = wrapper.findComponent('.filter__delete-button');
       deleteBtnFocus.trigger('focus');
+      await wrapper.vm.$nextTick();
       expect(wrapper.emitted('show-suggested-tags')).toBeTruthy();
       suggestedTags = wrapper.findComponent({ ref: 'suggestedTags' });
       expect(suggestedTags.exists()).toBe(true);
@@ -587,6 +590,7 @@ describe('FilterInput', () => {
     it('removes `suggestedTags` component when `suggestedTags` looses its focus on an external component', async () => {
       suggestedTags = wrapper.findComponent({ ref: 'suggestedTags' });
       suggestedTags.trigger('focus');
+      await wrapper.vm.$nextTick();
       expect(wrapper.emitted('show-suggested-tags')).toEqual([[true]]);
       expect(wrapper.findComponent({ ref: 'suggestedTags' }).exists()).toBe(true);
 
@@ -606,6 +610,7 @@ describe('FilterInput', () => {
       const deleteBtnFocus = wrapper.findComponent('.filter__delete-button');
       if (deleteBtnFocus.exists()) {
         deleteBtnFocus.trigger('focus');
+        await wrapper.vm.$nextTick();
       }
       const deleteBtnExists = wrapper.findComponent('.filter__delete-button');
       expect(deleteBtnExists.exists()).toBe(true);

tests/unit/components/NavBase.spec.js

@@ -210,6 +210,7 @@ describe('NavBase', () => {
     const label = toggle.find('.visuallyhidden');
     expect(label.text()).toBe('documentation.nav.open-menu');
     toggle.trigger('click');
+    await wrapper.vm.$nextTick();
     expect(label.text()).toBe('documentation.nav.close-menu');
   });
 
@@ -252,6 +253,7 @@ describe('NavBase', () => {
     });
     const tray = wrapper.findComponent(NavMenuItems);
     tray.find('.foo').trigger('click');
+    await wrapper.vm.$nextTick();
     expect(wrapper.classes()).toContain(NavStateClasses.isOpen);
     tray.find('.with-anchor a').trigger('click');
     expect(wrapper.classes()).not.toContain(NavStateClasses.isOpen);
@@ -509,6 +511,7 @@ describe('NavBase', () => {
 
     expect(changeElementVOVisibility.show).toHaveBeenCalledTimes(0);
     wrapper.findComponent({ ref: 'axToggle' }).trigger('click');
+    await wrapper.vm.$nextTick();
     expect(changeElementVOVisibility.hide).toHaveBeenCalledTimes(1);
     wrapper.findComponent({ ref: 'axToggle' }).trigger('click');
     expect(changeElementVOVisibility.show).toHaveBeenCalledTimes(1);

tests/unit/components/Navigator/NavigatorCardItem.spec.js

@@ -249,6 +249,7 @@ describe('NavigatorCardItem', () => {
   it('adds a temporary `animating` class, on `@toggle`', async () => {
     const wrapper = createWrapper();
     wrapper.findComponent('.tree-toggle').trigger('click');
+    await wrapper.vm.$nextTick();
     expect(wrapper.emitted('toggle')).toEqual([[defaultProps.item]]);
     // assert it adds the animating class
     expect(wrapper.findComponent('.icon-inline').classes()).toContain('animating');
@@ -266,6 +267,7 @@ describe('NavigatorCardItem', () => {
   it('adds a temporary `animating` class, on `@toggle-full` when @keydown.right + alt/option the tree-toggle button', async () => {
     const wrapper = createWrapper();
     wrapper.findComponent('.tree-toggle').trigger('keydown.right', { altKey: true });
+    await wrapper.vm.$nextTick();
     expect(wrapper.emitted('toggle-full')).toEqual([[defaultProps.item]]);
     // assert it adds the animating class
     expect(wrapper.findComponent('.icon-inline').classes()).toContain('animating');
@@ -283,6 +285,7 @@ describe('NavigatorCardItem', () => {
   it('adds a temporary `animating` class, on `@toggle-full` with alt + rightkey', async () => {
     const wrapper = createWrapper();
     wrapper.findComponent('.tree-toggle').trigger('click', { altKey: true });
+    await wrapper.vm.$nextTick();
     expect(wrapper.emitted('toggle-full')).toEqual([[defaultProps.item]]);
     // assert it adds the animating class
     expect(wrapper.findComponent('.icon-inline').classes()).toContain('animating');
@@ -300,6 +303,7 @@ describe('NavigatorCardItem', () => {
   it('adds a temporary `animating` class, on `@toggle-siblings`', async () => {
     const wrapper = createWrapper();
     wrapper.findComponent('.tree-toggle').trigger('click', { metaKey: true });
+    await wrapper.vm.$nextTick();
     expect(wrapper.emitted('toggle-siblings')).toEqual([[defaultProps.item]]);
     // assert it adds the animating class
     expect(wrapper.findComponent('.icon-inline').classes()).toContain('animating');

tests/unit/components/Navigator/QuickNavigationModal.spec.js

@@ -300,6 +300,7 @@ describe('QuickNavigationModal', () => {
       debouncedInput: inputValue,
     });
     wrapper.findComponent('.quick-navigation__refs').trigger('keydown.enter');
+    await wrapper.vm.$nextTick();
     wrapper.findComponent(FilterInput).trigger('keydown.enter');
     expect(handleKeyEnter).toHaveBeenCalledTimes(2);
   });

tests/unit/components/Tutorial/Assessments/Quiz.spec.js

@@ -186,45 +186,54 @@ describe('Quiz', () => {
 
       expect(choice.classes('active')).toBe(false);
       choice.trigger('click');
+      await wrapper.vm.$nextTick();
       expect(choice.classes('active')).toBe(true);
     });
 
-    it('renders a success icon, only for the chosen choice', () => {
+    it('renders a success icon, only for the chosen choice', async () => {
       const choice = choices.at(0);
       choice.trigger('click');
+      await wrapper.vm.$nextTick();
       submit.trigger('click');
+      await wrapper.vm.$nextTick();
 
       expect(choice.classes()).toContain('correct');
       expect(wrapper.findAll('.choice-icon')).toHaveLength(1);
       // cant match directly with element, VTU is buggy
       expect(choice.find('.choice-icon').html()).toContain('<checkcircleicon');
     });
 
-    it('renders an error icon only for the chosen choice', () => {
+    it('renders an error icon only for the chosen choice', async () => {
       const choice = choices.at(1);
       choice.trigger('click');
+      await wrapper.vm.$nextTick();
       submit.trigger('click');
+      await wrapper.vm.$nextTick();
 
       expect(wrapper.findAll('.choice-icon')).toHaveLength(1);
       // cant match directly with element, VTU is buggy
       expect(choice.find('.choice-icon').html()).toContain('<resetcircleicon');
     });
 
-    it('updates the aria live text telling the user if the answer chosen is correct or incorrect', () => {
+    it('updates the aria live text telling the user if the answer chosen is correct or incorrect', async () => {
       let ariaLive = wrapper.findComponent('[aria-live="assertive"].visuallyhidden');
       expect(ariaLive.exists()).toBe(true);
       expect(ariaLive.text()).toBe('');
 
       let choice = choices.at(1);
       choice.trigger('click');
+      await wrapper.vm.$nextTick();
       submit.trigger('click');
+      await wrapper.vm.$nextTick();
 
       ariaLive = wrapper.findComponent('[aria-live="assertive"].visuallyhidden > span');
       expect(ariaLive.text()).toBe('Answer is tutorials.assessment.incorrect');
 
       choice = choices.at(0);
       choice.trigger('click');
+      await wrapper.vm.$nextTick();
       submit.trigger('click');
+      await wrapper.vm.$nextTick();
 
       ariaLive = wrapper.findComponent('[aria-live="assertive"].visuallyhidden > span');
       expect(ariaLive.text()).toBe('Answer is tutorials.assessment.correct');