Add latest changes from gitlab-org/gitlab@master

2 files changed, 140 insertions, 128 deletions

diff --git a/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js b/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js
index 639ca9e7559..7173abe1316 100644
--- a/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js
+++ b/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js
@@ -48,13 +48,12 @@ describe('RunnerInstructionsModal component', () => {
   const findModal = () => wrapper.findComponent(GlModal);
   const findPlatformButtonGroup = () => wrapper.findByTestId('platform-buttons');
   const findPlatformButtons = () => findPlatformButtonGroup().findAllComponents(GlButton);
-  const findOsxPlatformButton = () => wrapper.find({ ref: 'osx' });
   const findArchitectureDropdownItems = () => wrapper.findAllByTestId('architecture-dropdown-item');
   const findBinaryDownloadButton = () => wrapper.findByTestId('binary-download-button');
   const findBinaryInstructions = () => wrapper.findByTestId('binary-instructions');
   const findRegisterCommand = () => wrapper.findByTestId('register-command');
 
-  const createComponent = ({ props, ...options } = {}) => {
+  const createComponent = ({ props, shown = true, ...options } = {}) => {
     const requestHandlers = [
       [getRunnerPlatformsQuery, runnerPlatformsHandler],
       [getRunnerSetupInstructionsQuery, runnerSetupInstructionsHandler],
@@ -73,184 +72,202 @@ describe('RunnerInstructionsModal component', () => {
         ...options,
       }),
     );
+
+    // trigger open modal
+    if (shown) {
+      findModal().vm.$emit('shown');
+    }
   };
 
   beforeEach(async () => {
     runnerPlatformsHandler = jest.fn().mockResolvedValue(mockGraphqlRunnerPlatforms);
     runnerSetupInstructionsHandler = jest.fn().mockResolvedValue(mockGraphqlInstructions);
-
-    createComponent();
-    await waitForPromises();
   });
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  it('should not show alert', () => {
-    expect(findAlert().exists()).toBe(false);
-  });
-
-  it('should contain a number of platforms buttons', () => {
-    expect(runnerPlatformsHandler).toHaveBeenCalledWith({});
+  describe('when the modal is shown', () => {
+    beforeEach(async () => {
+      createComponent();
+      await waitForPromises();
+    });
 
-    const buttons = findPlatformButtons();
+    it('should not show alert', async () => {
+      expect(findAlert().exists()).toBe(false);
+    });
 
-    expect(buttons).toHaveLength(mockGraphqlRunnerPlatforms.data.runnerPlatforms.nodes.length);
-  });
+    it('should contain a number of platforms buttons', () => {
+      expect(runnerPlatformsHandler).toHaveBeenCalledWith({});
 
-  it('should contain a number of dropdown items for the architecture options', () => {
-    expect(findArchitectureDropdownItems()).toHaveLength(
-      mockGraphqlRunnerPlatforms.data.runnerPlatforms.nodes[0].architectures.nodes.length,
-    );
-  });
+      const buttons = findPlatformButtons();
 
-  describe('should display default instructions', () => {
-    const { installInstructions, registerInstructions } = mockGraphqlInstructions.data.runnerSetup;
+      expect(buttons).toHaveLength(mockGraphqlRunnerPlatforms.data.runnerPlatforms.nodes.length);
+    });
 
-    it('runner instructions are requested', () => {
-      expect(runnerSetupInstructionsHandler).toHaveBeenCalledWith({
-        platform: 'linux',
-        architecture: 'amd64',
-      });
+    it('should contain a number of dropdown items for the architecture options', () => {
+      expect(findArchitectureDropdownItems()).toHaveLength(
+        mockGraphqlRunnerPlatforms.data.runnerPlatforms.nodes[0].architectures.nodes.length,
+      );
     });
 
-    it('binary instructions are shown', async () => {
-      await waitForPromises();
-      const instructions = findBinaryInstructions().text();
+    describe('should display default instructions', () => {
+      const {
+        installInstructions,
+        registerInstructions,
+      } = mockGraphqlInstructions.data.runnerSetup;
 
-      expect(instructions).toBe(installInstructions);
-    });
+      it('runner instructions are requested', () => {
+        expect(runnerSetupInstructionsHandler).toHaveBeenCalledWith({
+          platform: 'linux',
+          architecture: 'amd64',
+        });
+      });
 
-    it('register command is shown with a replaced token', async () => {
-      await waitForPromises();
-      const instructions = findRegisterCommand().text();
+      it('binary instructions are shown', async () => {
+        const instructions = findBinaryInstructions().text();
 
-      expect(instructions).toBe(
-        'sudo gitlab-runner register --url http://gdk.test:3000/ --registration-token MY_TOKEN',
-      );
-    });
+        expect(instructions).toBe(installInstructions);
+      });
 
-    describe('when a register token is not shown', () => {
-      beforeEach(async () => {
-        createComponent({ props: { registrationToken: undefined } });
-        await waitForPromises();
+      it('register command is shown with a replaced token', async () => {
+        const command = findRegisterCommand().text();
+
+        expect(command).toBe(
+          'sudo gitlab-runner register --url http://gdk.test:3000/ --registration-token MY_TOKEN',
+        );
       });
 
-      it('register command is shown without a defined registration token', () => {
-        const instructions = findRegisterCommand().text();
+      describe('when a register token is not shown', () => {
+        beforeEach(async () => {
+          createComponent({ props: { registrationToken: undefined } });
+          await waitForPromises();
+        });
+
+        it('register command is shown without a defined registration token', () => {
+          const instructions = findRegisterCommand().text();
 
-        expect(instructions).toBe(registerInstructions);
+          expect(instructions).toBe(registerInstructions);
+        });
       });
-    });
 
-    describe('when the modal is shown', () => {
-      it('sets the focus on the selected platform', () => {
-        findPlatformButtons().at(0).element.focus = jest.fn();
+      describe('when providing a defaultPlatformName', () => {
+        beforeEach(async () => {
+          createComponent({ props: { defaultPlatformName: 'osx' } });
+          await waitForPromises();
+        });
+
+        it('runner instructions for the default selected platform are requested', () => {
+          expect(runnerSetupInstructionsHandler).toHaveBeenCalledWith({
+            platform: 'osx',
+            architecture: 'amd64',
+          });
+        });
+
+        it('sets the focus on the default selected platform', () => {
+          const findOsxPlatformButton = () => wrapper.find({ ref: 'osx' });
 
-        findModal().vm.$emit('shown');
+          findOsxPlatformButton().element.focus = jest.fn();
 
-        expect(findPlatformButtons().at(0).element.focus).toHaveBeenCalled();
+          findModal().vm.$emit('shown');
+
+          expect(findOsxPlatformButton().element.focus).toHaveBeenCalled();
+        });
       });
     });
 
-    describe('when providing a defaultPlatformName', () => {
+    describe('after a platform and architecture are selected', () => {
+      const windowsIndex = 2;
+      const { installInstructions } = mockGraphqlInstructionsWindows.data.runnerSetup;
+
       beforeEach(async () => {
-        createComponent({ props: { defaultPlatformName: 'osx' } });
+        runnerSetupInstructionsHandler.mockResolvedValue(mockGraphqlInstructionsWindows);
+
+        findPlatformButtons().at(windowsIndex).vm.$emit('click');
         await waitForPromises();
       });
 
-      it('runner instructions for the default selected platform are requested', () => {
-        expect(runnerSetupInstructionsHandler).toHaveBeenCalledWith({
-          platform: 'osx',
+      it('runner instructions are requested', () => {
+        expect(runnerSetupInstructionsHandler).toHaveBeenLastCalledWith({
+          platform: 'windows',
           architecture: 'amd64',
         });
       });
 
-      it('sets the focus on the default selected platform', () => {
-        findOsxPlatformButton().element.focus = jest.fn();
+      it('architecture download link is updated', () => {
+        const architectures =
+          mockGraphqlRunnerPlatforms.data.runnerPlatforms.nodes[windowsIndex].architectures.nodes;
 
-        findModal().vm.$emit('shown');
-
-        expect(findOsxPlatformButton().element.focus).toHaveBeenCalled();
+        expect(findBinaryDownloadButton().attributes('href')).toBe(
+          architectures[0].downloadLocation,
+        );
       });
-    });
-  });
-
-  describe('after a platform and architecture are selected', () => {
-    const windowsIndex = 2;
-    const { installInstructions } = mockGraphqlInstructionsWindows.data.runnerSetup;
 
-    beforeEach(async () => {
-      runnerSetupInstructionsHandler.mockResolvedValue(mockGraphqlInstructionsWindows);
+      it('other binary instructions are shown', () => {
+        const instructions = findBinaryInstructions().text();
 
-      findPlatformButtons().at(windowsIndex).vm.$emit('click');
-      await waitForPromises();
-    });
-
-    it('runner instructions are requested', () => {
-      expect(runnerSetupInstructionsHandler).toHaveBeenLastCalledWith({
-        platform: 'windows',
-        architecture: 'amd64',
+        expect(instructions).toBe(installInstructions);
       });
-    });
 
-    it('architecture download link is updated', () => {
-      const architectures =
-        mockGraphqlRunnerPlatforms.data.runnerPlatforms.nodes[windowsIndex].architectures.nodes;
+      it('register command is shown', () => {
+        const command = findRegisterCommand().text();
 
-      expect(findBinaryDownloadButton().attributes('href')).toBe(architectures[0].downloadLocation);
-    });
+        expect(command).toBe(
+          './gitlab-runner.exe register --url http://gdk.test:3000/ --registration-token MY_TOKEN',
+        );
+      });
 
-    it('other binary instructions are shown', () => {
-      const instructions = findBinaryInstructions().text();
+      it('runner instructions are requested with another architecture', async () => {
+        findArchitectureDropdownItems().at(1).vm.$emit('click');
+        await waitForPromises();
 
-      expect(instructions).toBe(installInstructions);
+        expect(runnerSetupInstructionsHandler).toHaveBeenLastCalledWith({
+          platform: 'windows',
+          architecture: '386',
+        });
+      });
     });
 
-    it('register command is shown', () => {
-      const command = findRegisterCommand().text();
+    describe('when the modal resizes', () => {
+      it('to an xs viewport', async () => {
+        MockResizeObserver.mockResize('xs');
+        await nextTick();
 
-      expect(command).toBe(
-        './gitlab-runner.exe register --url http://gdk.test:3000/ --registration-token MY_TOKEN',
-      );
-    });
+        expect(findPlatformButtonGroup().attributes('vertical')).toBeTruthy();
+      });
 
-    it('runner instructions are requested with another architecture', async () => {
-      findArchitectureDropdownItems().at(1).vm.$emit('click');
-      await waitForPromises();
+      it('to a non-xs viewport', async () => {
+        MockResizeObserver.mockResize('sm');
+        await nextTick();
 
-      expect(runnerSetupInstructionsHandler).toHaveBeenLastCalledWith({
-        platform: 'windows',
-        architecture: '386',
+        expect(findPlatformButtonGroup().props('vertical')).toBeFalsy();
       });
     });
   });
 
-  describe('when the modal resizes', () => {
-    it('to an xs viewport', async () => {
-      MockResizeObserver.mockResize('xs');
-      await nextTick();
-
-      expect(findPlatformButtonGroup().attributes('vertical')).toBeTruthy();
+  describe('when the modal is not shown', () => {
+    beforeEach(async () => {
+      createComponent({ shown: false });
+      await waitForPromises();
     });
 
-    it('to a non-xs viewport', async () => {
-      MockResizeObserver.mockResize('sm');
-      await nextTick();
-
-      expect(findPlatformButtonGroup().props('vertical')).toBeFalsy();
+    it('does not fetch instructions', () => {
+      expect(runnerPlatformsHandler).not.toHaveBeenCalled();
+      expect(runnerSetupInstructionsHandler).not.toHaveBeenCalled();
     });
   });
 
   describe('when apollo is loading', () => {
-    it('should show a skeleton loader', async () => {
+    beforeEach(() => {
       createComponent();
+    });
+
+    it('should show a skeleton loader', async () => {
       expect(findSkeletonLoader().exists()).toBe(true);
       expect(findGlLoadingIcon().exists()).toBe(false);
 
-      await nextTick();
-      jest.runOnlyPendingTimers();
+      // wait on fetch of both `platforms` and `instructions`
       await nextTick();
       await nextTick();
 
@@ -258,7 +275,6 @@ describe('RunnerInstructionsModal component', () => {
     });
 
     it('once loaded, should not show a loading state', async () => {
-      createComponent();
       await waitForPromises();
 
       expect(findSkeletonLoader().exists()).toBe(false);
@@ -271,7 +287,6 @@ describe('RunnerInstructionsModal component', () => {
       runnerSetupInstructionsHandler.mockRejectedValue();
 
       createComponent();
-
       await waitForPromises();
     });
 
@@ -303,6 +318,7 @@ describe('RunnerInstructionsModal component', () => {
         mockShow = jest.fn();
 
         createComponent({
+          shown: false,
           stubs: {
             GlModal: getGlModalStub({ show: mockShow }),
           },
diff --git a/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_spec.js b/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_spec.js
index 9a95a838291..986d76d2b95 100644
--- a/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_spec.js
+++ b/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_spec.js
@@ -1,6 +1,5 @@
-import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import RunnerInstructions from '~/vue_shared/components/runner_instructions/runner_instructions.vue';
 import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
 
@@ -11,7 +10,11 @@ describe('RunnerInstructions component', () => {
   const findModal = () => wrapper.findComponent(RunnerInstructionsModal);
 
   const createComponent = () => {
-    wrapper = extendedWrapper(shallowMount(RunnerInstructions));
+    wrapper = shallowMountExtended(RunnerInstructions, {
+      directives: {
+        GlModal: createMockDirective(),
+      },
+    });
   };
 
   beforeEach(() => {
@@ -23,19 +26,12 @@ describe('RunnerInstructions component', () => {
   });
 
   it('should show the "Show runner installation instructions" button', () => {
-    expect(findModalButton().exists()).toBe(true);
     expect(findModalButton().text()).toBe('Show runner installation instructions');
   });
 
-  it('should not render the modal once mounted', () => {
-    expect(findModal().exists()).toBe(false);
-  });
-
-  it('should render the modal once clicked', async () => {
-    findModalButton().vm.$emit('click');
-
-    await nextTick();
+  it('should render the modal', () => {
+    const modalId = getBinding(findModal().element, 'gl-modal');
 
-    expect(findModal().exists()).toBe(true);
+    expect(findModalButton().attributes('modal-id')).toBe(modalId);
   });
 });