2022-04-04 11:22:00 +05:30
|
|
|
import Vue from 'vue';
|
|
|
|
import { GlButton } from '@gitlab/ui';
|
|
|
|
import VueApollo from 'vue-apollo';
|
|
|
|
import createMockApollo from 'helpers/mock_apollo_helper';
|
|
|
|
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
|
|
|
|
import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
|
2022-05-07 20:08:51 +05:30
|
|
|
import runnerToggleActiveMutation from '~/runner/graphql/shared/runner_toggle_active.mutation.graphql';
|
2022-04-04 11:22:00 +05:30
|
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
|
|
|
import { captureException } from '~/runner/sentry_utils';
|
|
|
|
import { createAlert } from '~/flash';
|
2022-05-07 20:08:51 +05:30
|
|
|
import {
|
|
|
|
I18N_PAUSE,
|
|
|
|
I18N_PAUSE_TOOLTIP,
|
|
|
|
I18N_RESUME,
|
|
|
|
I18N_RESUME_TOOLTIP,
|
|
|
|
} from '~/runner/constants';
|
2022-04-04 11:22:00 +05:30
|
|
|
|
|
|
|
import RunnerPauseButton from '~/runner/components/runner_pause_button.vue';
|
|
|
|
import { runnersData } from '../mock_data';
|
|
|
|
|
|
|
|
const mockRunner = runnersData.data.runners.nodes[0];
|
|
|
|
|
|
|
|
Vue.use(VueApollo);
|
|
|
|
|
|
|
|
jest.mock('~/flash');
|
|
|
|
jest.mock('~/runner/sentry_utils');
|
|
|
|
|
|
|
|
describe('RunnerPauseButton', () => {
|
|
|
|
let wrapper;
|
|
|
|
let runnerToggleActiveHandler;
|
|
|
|
|
|
|
|
const getTooltip = () => getBinding(wrapper.element, 'gl-tooltip').value;
|
|
|
|
const findBtn = () => wrapper.findComponent(GlButton);
|
|
|
|
|
|
|
|
const createComponent = ({ props = {}, mountFn = shallowMountExtended } = {}) => {
|
|
|
|
const { runner, ...propsData } = props;
|
|
|
|
|
|
|
|
wrapper = mountFn(RunnerPauseButton, {
|
|
|
|
propsData: {
|
|
|
|
runner: {
|
|
|
|
id: mockRunner.id,
|
|
|
|
active: mockRunner.active,
|
|
|
|
...runner,
|
|
|
|
},
|
|
|
|
...propsData,
|
|
|
|
},
|
|
|
|
apolloProvider: createMockApollo([[runnerToggleActiveMutation, runnerToggleActiveHandler]]),
|
|
|
|
directives: {
|
|
|
|
GlTooltip: createMockDirective(),
|
|
|
|
},
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const clickAndWait = async () => {
|
|
|
|
findBtn().vm.$emit('click');
|
|
|
|
await waitForPromises();
|
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
runnerToggleActiveHandler = jest.fn().mockImplementation(({ input }) => {
|
|
|
|
return Promise.resolve({
|
|
|
|
data: {
|
|
|
|
runnerUpdate: {
|
|
|
|
runner: {
|
|
|
|
id: input.id,
|
|
|
|
active: input.active,
|
|
|
|
},
|
|
|
|
errors: [],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
createComponent();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('Pause/Resume action', () => {
|
|
|
|
describe.each`
|
2022-05-07 20:08:51 +05:30
|
|
|
runnerState | icon | content | tooltip | isActive | newActiveValue
|
|
|
|
${'paused'} | ${'play'} | ${I18N_RESUME} | ${I18N_RESUME_TOOLTIP} | ${false} | ${true}
|
|
|
|
${'active'} | ${'pause'} | ${I18N_PAUSE} | ${I18N_PAUSE_TOOLTIP} | ${true} | ${false}
|
|
|
|
`('When the runner is $runnerState', ({ icon, content, tooltip, isActive, newActiveValue }) => {
|
2022-04-04 11:22:00 +05:30
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({
|
|
|
|
props: {
|
|
|
|
runner: {
|
|
|
|
active: isActive,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it(`Displays a ${icon} button`, () => {
|
|
|
|
expect(findBtn().props('loading')).toBe(false);
|
|
|
|
expect(findBtn().props('icon')).toBe(icon);
|
2022-05-07 20:08:51 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('Displays button content', () => {
|
2022-04-04 11:22:00 +05:30
|
|
|
expect(findBtn().text()).toBe(content);
|
2022-05-07 20:08:51 +05:30
|
|
|
expect(getTooltip()).toBe(tooltip);
|
2022-04-04 11:22:00 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('Does not display redundant text for screen readers', () => {
|
|
|
|
expect(findBtn().attributes('aria-label')).toBe(undefined);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe(`Before the ${icon} button is clicked`, () => {
|
|
|
|
it('The mutation has not been called', () => {
|
|
|
|
expect(runnerToggleActiveHandler).toHaveBeenCalledTimes(0);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe(`Immediately after the ${icon} button is clicked`, () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
findBtn().vm.$emit('click');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('The button has a loading state', async () => {
|
|
|
|
expect(findBtn().props('loading')).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('The stale tooltip is removed', async () => {
|
|
|
|
expect(getTooltip()).toBe('');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe(`After clicking on the ${icon} button`, () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
await clickAndWait();
|
|
|
|
});
|
|
|
|
|
|
|
|
it(`The mutation to that sets active to ${newActiveValue} is called`, async () => {
|
|
|
|
expect(runnerToggleActiveHandler).toHaveBeenCalledTimes(1);
|
|
|
|
expect(runnerToggleActiveHandler).toHaveBeenCalledWith({
|
|
|
|
input: {
|
|
|
|
id: mockRunner.id,
|
|
|
|
active: newActiveValue,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('The button does not have a loading state', () => {
|
|
|
|
expect(findBtn().props('loading')).toBe(false);
|
|
|
|
});
|
2022-06-21 17:19:12 +05:30
|
|
|
|
|
|
|
it('The button emits toggledPaused', () => {
|
|
|
|
expect(wrapper.emitted('toggledPaused')).toHaveLength(1);
|
|
|
|
});
|
2022-04-04 11:22:00 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
describe('When update fails', () => {
|
|
|
|
describe('On a network error', () => {
|
|
|
|
const mockErrorMsg = 'Update error!';
|
|
|
|
|
|
|
|
beforeEach(async () => {
|
|
|
|
runnerToggleActiveHandler.mockRejectedValueOnce(new Error(mockErrorMsg));
|
|
|
|
|
|
|
|
await clickAndWait();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('error is reported to sentry', () => {
|
|
|
|
expect(captureException).toHaveBeenCalledWith({
|
|
|
|
error: new Error(mockErrorMsg),
|
|
|
|
component: 'RunnerPauseButton',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('error is shown to the user', () => {
|
|
|
|
expect(createAlert).toHaveBeenCalledTimes(1);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('On a validation error', () => {
|
|
|
|
const mockErrorMsg = 'Runner not found!';
|
|
|
|
const mockErrorMsg2 = 'User not allowed!';
|
|
|
|
|
|
|
|
beforeEach(async () => {
|
|
|
|
runnerToggleActiveHandler.mockResolvedValueOnce({
|
|
|
|
data: {
|
|
|
|
runnerUpdate: {
|
|
|
|
runner: {
|
|
|
|
id: mockRunner.id,
|
|
|
|
active: isActive,
|
|
|
|
},
|
|
|
|
errors: [mockErrorMsg, mockErrorMsg2],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
await clickAndWait();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('error is reported to sentry', () => {
|
|
|
|
expect(captureException).toHaveBeenCalledWith({
|
|
|
|
error: new Error(`${mockErrorMsg} ${mockErrorMsg2}`),
|
|
|
|
component: 'RunnerPauseButton',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('error is shown to the user', () => {
|
|
|
|
expect(createAlert).toHaveBeenCalledTimes(1);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('When displaying a compact button for an active runner', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({
|
|
|
|
props: {
|
|
|
|
runner: {
|
|
|
|
active: true,
|
|
|
|
},
|
|
|
|
compact: true,
|
|
|
|
},
|
|
|
|
mountFn: mountExtended,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Displays no text', () => {
|
|
|
|
expect(findBtn().text()).toBe('');
|
|
|
|
|
|
|
|
// Note: Use <template v-if> to ensure rendering a
|
|
|
|
// text-less button. Ensure we don't send even empty an
|
|
|
|
// content slot to prevent a distorted/rectangular button.
|
|
|
|
expect(wrapper.find('.gl-button-text').exists()).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Display correctly for screen readers', () => {
|
2022-05-07 20:08:51 +05:30
|
|
|
expect(findBtn().attributes('aria-label')).toBe(I18N_PAUSE);
|
|
|
|
expect(getTooltip()).toBe(I18N_PAUSE_TOOLTIP);
|
2022-04-04 11:22:00 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
describe('Immediately after the button is clicked', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
findBtn().vm.$emit('click');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('The button has a loading state', async () => {
|
|
|
|
expect(findBtn().props('loading')).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('The stale tooltip is removed', async () => {
|
|
|
|
expect(getTooltip()).toBe('');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|