Merge branch 'pb-manual-variables-from-spec-refactor' into 'master'

Clean up manual variables form spec

See merge request gitlab-org/gitlab!58493

app/assets/javascripts/jobs/components/manual_variables_form.vue

@@ -117,7 +117,12 @@ export default {
         <div class="table-section section-50" role="rowheader">{{ s__('CiVariables|Value') }}</div>
       </div>
 
-      <div v-for="variable in variables" :key="variable.id" class="gl-responsive-table-row">
+      <div
+        v-for="variable in variables"
+        :key="variable.id"
+        class="gl-responsive-table-row"
+        data-testid="ci-variable-row"
+      >
         <div class="table-section section-50">
           <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Key') }}</div>
           <div class="table-mobile-content gl-mr-3">
@@ -126,6 +131,7 @@ export default {
               v-model="variable.key"
               :placeholder="$options.i18n.keyPlaceholder"
               class="ci-variable-body-item form-control"
+              data-testid="ci-variable-key"
             />
           </div>
         </div>
@@ -138,6 +144,7 @@ export default {
               v-model="variable.secret_value"
               :placeholder="$options.i18n.valuePlaceholder"
               class="ci-variable-body-item form-control"
+              data-testid="ci-variable-value"
             />
           </div>
         </div>
@@ -149,6 +156,7 @@ export default {
               category="tertiary"
               icon="clear"
               :aria-label="__('Delete variable')"
+              data-testid="delete-variable-btn"
               @click="deleteVariable(variable.id)"
             />
           </div>
@@ -181,7 +189,7 @@ export default {
       </div>
     </div>
     <div class="d-flex gl-mt-3 justify-content-center">
-      <p class="text-muted" v-html="helpText"></p>
+      <p class="text-muted" data-testid="form-help-text" v-html="helpText"></p>
     </div>
     <div class="d-flex justify-content-center">
       <gl-button

spec/frontend/jobs/components/manual_variables_form_spec.js

-import { GlButton } from '@gitlab/ui';
 import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import Form from '~/jobs/components/manual_variables_form.vue';
 
 const localVue = createLocalVue();
@@ -21,49 +21,48 @@ describe('Manual Variables Form', () => {
     variablesSettingsUrl: '/settings',
   };
 
-  const createComponent = (props = {}, mountFn = shallowMount) => {
+  const createComponent = ({ props = {}, mountFn = shallowMount } = {}) => {
     store = new Vuex.Store({
       actions: {
         triggerManualJob: jest.fn(),
       },
     });
 
-    wrapper = mountFn(localVue.extend(Form), {
-      propsData: props,
+    wrapper = extendedWrapper(
+      mountFn(localVue.extend(Form), {
+        propsData: { ...requiredProps, ...props },
         localVue,
         store,
-    });
+      }),
+    );
   };
 
-  const findTriggerBtn = () => wrapper.find('[data-testid="trigger-manual-job-btn"]');
+  const findInputKey = () => wrapper.findComponent({ ref: 'inputKey' });
+  const findInputValue = () => wrapper.findComponent({ ref: 'inputSecretValue' });
 
-  afterEach((done) => {
-    // The component has a `nextTick` callback after some events so we need
-    // to wait for those to finish before destroying.
-    setImmediate(() => {
-      wrapper.destroy();
-      wrapper = null;
+  const findTriggerBtn = () => wrapper.findByTestId('trigger-manual-job-btn');
+  const findHelpText = () => wrapper.findByTestId('form-help-text');
+  const findDeleteVarBtn = () => wrapper.findByTestId('delete-variable-btn');
+  const findCiVariableKey = () => wrapper.findByTestId('ci-variable-key');
+  const findCiVariableValue = () => wrapper.findByTestId('ci-variable-value');
+  const findAllVariables = () => wrapper.findAllByTestId('ci-variable-row');
 
-      done();
-    });
+  afterEach(() => {
+    wrapper.destroy();
   });
 
   describe('shallowMount', () => {
     beforeEach(() => {
-      createComponent(requiredProps);
+      createComponent();
     });
 
     it('renders empty form with correct placeholders', () => {
-      expect(wrapper.find({ ref: 'inputKey' }).attributes('placeholder')).toBe(
-        'Input variable key',
-      );
-      expect(wrapper.find({ ref: 'inputSecretValue' }).attributes('placeholder')).toBe(
-        'Input variable value',
-      );
+      expect(findInputKey().attributes('placeholder')).toBe('Input variable key');
+      expect(findInputValue().attributes('placeholder')).toBe('Input variable value');
     });
 
     it('renders help text with provided link', () => {
-      expect(wrapper.find('p').text()).toBe(
+      expect(findHelpText().text()).toBe(
         'Specify variable values to be used in this run. The values specified in CI/CD settings will be used as default',
       );
 
@@ -71,57 +70,47 @@ describe('Manual Variables Form', () => {
     });
 
     describe('when adding a new variable', () => {
-      it('creates a new variable when user types a new key and resets the form', (done) => {
-        wrapper.vm
-          .$nextTick()
-          .then(() => wrapper.find({ ref: 'inputKey' }).setValue('new key'))
-          .then(() => {
-            expect(wrapper.vm.variables.length).toBe(1);
-            expect(wrapper.vm.variables[0].key).toBe('new key');
-            expect(wrapper.find({ ref: 'inputKey' }).attributes('value')).toBe(undefined);
-          })
-          .then(done)
-          .catch(done.fail);
+      it('creates a new variable when user types a new key and resets the form', async () => {
+        await findInputKey().setValue('new key');
+
+        expect(findAllVariables()).toHaveLength(1);
+        expect(findCiVariableKey().element.value).toBe('new key');
+        expect(findInputKey().attributes('value')).toBe(undefined);
       });
 
-      it('creates a new variable when user types a new value and resets the form', (done) => {
-        wrapper.vm
-          .$nextTick()
-          .then(() => wrapper.find({ ref: 'inputSecretValue' }).setValue('new value'))
-          .then(() => {
-            expect(wrapper.vm.variables.length).toBe(1);
-            expect(wrapper.vm.variables[0].secret_value).toBe('new value');
-            expect(wrapper.find({ ref: 'inputSecretValue' }).attributes('value')).toBe(undefined);
-          })
-          .then(done)
-          .catch(done.fail);
+      it('creates a new variable when user types a new value and resets the form', async () => {
+        await findInputValue().setValue('new value');
+
+        expect(findAllVariables()).toHaveLength(1);
+        expect(findCiVariableValue().element.value).toBe('new value');
+        expect(findInputValue().attributes('value')).toBe(undefined);
+      });
     });
   });
 
+  describe('mount', () => {
+    beforeEach(() => {
+      createComponent({ mountFn: mount });
+    });
+
     describe('when deleting a variable', () => {
-      beforeEach((done) => {
-        wrapper.vm.variables = [
+      it('removes the variable row', async () => {
+        await wrapper.setData({
+          variables: [
             {
               key: 'new key',
               secret_value: 'value',
               id: '1',
             },
-        ];
-
-        wrapper.vm.$nextTick(done);
+          ],
         });
 
-      it('removes the variable row', () => {
-        wrapper.find(GlButton).vm.$emit('click');
+        findDeleteVarBtn().trigger('click');
 
-        expect(wrapper.vm.variables.length).toBe(0);
-      });
-    });
-  });
+        await wrapper.vm.$nextTick();
 
-  describe('mount', () => {
-    beforeEach(() => {
-      createComponent(requiredProps, mount);
+        expect(findAllVariables()).toHaveLength(0);
+      });
     });
 
     it('trigger button is disabled after trigger action', async () => {