diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js | 234 |
1 files changed, 133 insertions, 101 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 001b6ee4a6f..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,12 +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], @@ -72,169 +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' }); + + findOsxPlatformButton().element.focus = jest.fn(); - findModal().vm.$emit('shown'); + findModal().vm.$emit('shown'); - expect(findPlatformButtons().at(0).element.focus).toHaveBeenCalled(); + 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(); - - findModal().vm.$emit('shown'); + it('architecture download link is updated', () => { + const architectures = + mockGraphqlRunnerPlatforms.data.runnerPlatforms.nodes[windowsIndex].architectures.nodes; - expect(findOsxPlatformButton().element.focus).toHaveBeenCalled(); + expect(findBinaryDownloadButton().attributes('href')).toBe( + architectures[0].downloadLocation, + ); }); - }); - }); - describe('after a platform and architecture are selected', () => { - const { installInstructions } = mockGraphqlInstructionsWindows.data.runnerSetup; + it('other binary instructions are shown', () => { + const instructions = findBinaryInstructions().text(); - beforeEach(async () => { - runnerSetupInstructionsHandler.mockResolvedValue(mockGraphqlInstructionsWindows); + expect(instructions).toBe(installInstructions); + }); - findPlatformButtons().at(2).vm.$emit('click'); // another option, happens to be windows - await nextTick(); + it('register command is shown', () => { + const command = findRegisterCommand().text(); - findArchitectureDropdownItems().at(1).vm.$emit('click'); // another option - await nextTick(); - }); + expect(command).toBe( + './gitlab-runner.exe register --url http://gdk.test:3000/ --registration-token MY_TOKEN', + ); + }); + + it('runner instructions are requested with another architecture', async () => { + findArchitectureDropdownItems().at(1).vm.$emit('click'); + await waitForPromises(); - it('runner instructions are requested', () => { - expect(runnerSetupInstructionsHandler).toHaveBeenCalledWith({ - platform: 'windows', - architecture: '386', + expect(runnerSetupInstructionsHandler).toHaveBeenLastCalledWith({ + platform: 'windows', + architecture: '386', + }); }); }); - it('other binary instructions are shown', () => { - const instructions = findBinaryInstructions().text(); + describe('when the modal resizes', () => { + it('to an xs viewport', async () => { + MockResizeObserver.mockResize('xs'); + await nextTick(); - expect(instructions).toBe(installInstructions); - }); + expect(findPlatformButtonGroup().attributes('vertical')).toBeTruthy(); + }); - it('register command is shown', () => { - const command = findRegisterCommand().text(); + it('to a non-xs viewport', async () => { + MockResizeObserver.mockResize('sm'); + await nextTick(); - expect(command).toBe( - './gitlab-runner.exe register --url http://gdk.test:3000/ --registration-token MY_TOKEN', - ); + 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(); @@ -242,7 +275,6 @@ describe('RunnerInstructionsModal component', () => { }); it('once loaded, should not show a loading state', async () => { - createComponent(); await waitForPromises(); expect(findSkeletonLoader().exists()).toBe(false); @@ -255,7 +287,6 @@ describe('RunnerInstructionsModal component', () => { runnerSetupInstructionsHandler.mockRejectedValue(); createComponent(); - await waitForPromises(); }); @@ -287,6 +318,7 @@ describe('RunnerInstructionsModal component', () => { mockShow = jest.fn(); createComponent({ + shown: false, stubs: { GlModal: getGlModalStub({ show: mockShow }), }, |