Fix invalid props in tests

`setProps` in `@vue/test-utils` bypasses props validation. This is
going to change in 1.x version and just feels wrong

ee/spec/frontend/requirements/components/requirements_tabs_spec.js

@@ -81,7 +81,7 @@ describe('RequirementsTabs', () => {
 
     it('does not render "New requirement" button when current tab is not "Open" tab', () => {
       wrapper.setProps({
-        filterBy: FilterState.closed,
+        filterBy: FilterState.archived,
       });
 
       return wrapper.vm.$nextTick(() => {

spec/frontend/boards/components/issue_time_estimate_spec.js

+import { config as vueConfig } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import IssueTimeEstimate from '~/boards/components/issue_time_estimate.vue';
 
@@ -28,15 +29,20 @@ describe('Issue Time Estimate component', () => {
       expect(wrapper.find('.js-issue-time-estimate').text()).toContain('2 weeks 3 days 1 minute');
     });
 
-    it('prevents tooltip xss', (done) => {
+    it('prevents tooltip xss', async () => {
       const alertSpy = jest.spyOn(window, 'alert');
-      wrapper.setProps({ estimate: 'Foo <script>alert("XSS")</script>' });
-      wrapper.vm.$nextTick(() => {
+
+      try {
+        // This will raise props validating warning by Vue, silencing it
+        vueConfig.silent = true;
+        await wrapper.setProps({ estimate: 'Foo <script>alert("XSS")</script>' });
+      } finally {
+        vueConfig.silent = false;
+      }
+
       expect(alertSpy).not.toHaveBeenCalled();
       expect(wrapper.find('time').text().trim()).toEqual('0m');
       expect(wrapper.find('.js-issue-time-estimate').text()).toContain('0m');
-        done();
-      });
     });
   });
 

spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js

@@ -8,9 +8,9 @@ import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_searc
 
 describe('ClusterFormDropdown', () => {
   let wrapper;
-  const firstItem = { name: 'item 1', value: 1 };
-  const secondItem = { name: 'item 2', value: 2 };
-  const items = [firstItem, secondItem, { name: 'item 3', value: 3 }];
+  const firstItem = { name: 'item 1', value: '1' };
+  const secondItem = { name: 'item 2', value: '2' };
+  const items = [firstItem, secondItem, { name: 'item 3', value: '3' }];
 
   beforeEach(() => {
     wrapper = shallowMount(ClusterFormDropdown);
@@ -55,7 +55,7 @@ describe('ClusterFormDropdown', () => {
   });
 
   describe('when multiple items are selected', () => {
-    const value = [1];
+    const value = ['1'];
 
     beforeEach(() => {
       wrapper.setProps({ items, multiple: true, value });
@@ -104,7 +104,7 @@ describe('ClusterFormDropdown', () => {
     it('displays selected item custom label', () => {
       const labelProperty = 'customLabel';
       const label = 'Name';
-      const currentValue = 1;
+      const currentValue = '1';
       const customLabelItems = [{ [labelProperty]: label, value: currentValue }];
 
       wrapper.setProps({ labelProperty, items: customLabelItems, value: currentValue });
@@ -116,14 +116,11 @@ describe('ClusterFormDropdown', () => {
   });
 
   describe('when loading', () => {
-    it('dropdown button isLoading', () => {
-      wrapper.setProps({ loading: true });
-
-      return wrapper.vm.$nextTick().then(() => {
+    it('dropdown button isLoading', async () => {
+      await wrapper.setProps({ loading: true });
       expect(wrapper.find(DropdownButton).props('isLoading')).toBe(true);
     });
   });
-  });
 
   describe('when loading and loadingText is provided', () => {
     it('uses loading text as toggle button text', () => {