2022-05-07 20:08:51 +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';
|
|
|
|
import runnerDeleteMutation from '~/runner/graphql/shared/runner_delete.mutation.graphql';
|
|
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
|
|
|
import { captureException } from '~/runner/sentry_utils';
|
|
|
|
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
|
|
|
|
import { createAlert } from '~/flash';
|
2022-06-21 17:19:12 +05:30
|
|
|
import {
|
|
|
|
I18N_DELETE_RUNNER,
|
|
|
|
I18N_DELETE_DISABLED_MANY_PROJECTS,
|
|
|
|
I18N_DELETE_DISABLED_UNKNOWN_REASON,
|
|
|
|
} from '~/runner/constants';
|
2022-05-07 20:08:51 +05:30
|
|
|
|
|
|
|
import RunnerDeleteButton from '~/runner/components/runner_delete_button.vue';
|
|
|
|
import RunnerDeleteModal from '~/runner/components/runner_delete_modal.vue';
|
|
|
|
import { runnersData } from '../mock_data';
|
|
|
|
|
|
|
|
const mockRunner = runnersData.data.runners.nodes[0];
|
|
|
|
const mockRunnerId = getIdFromGraphQLId(mockRunner.id);
|
|
|
|
|
|
|
|
Vue.use(VueApollo);
|
|
|
|
|
|
|
|
jest.mock('~/flash');
|
|
|
|
jest.mock('~/runner/sentry_utils');
|
|
|
|
|
|
|
|
describe('RunnerDeleteButton', () => {
|
|
|
|
let wrapper;
|
2022-06-21 17:19:12 +05:30
|
|
|
let apolloProvider;
|
|
|
|
let apolloCache;
|
2022-05-07 20:08:51 +05:30
|
|
|
let runnerDeleteHandler;
|
|
|
|
|
|
|
|
const findBtn = () => wrapper.findComponent(GlButton);
|
|
|
|
const findModal = () => wrapper.findComponent(RunnerDeleteModal);
|
|
|
|
|
2022-06-21 17:19:12 +05:30
|
|
|
const getTooltip = () => getBinding(wrapper.element, 'gl-tooltip').value;
|
|
|
|
const getModal = () => getBinding(findBtn().element, 'gl-modal').value;
|
|
|
|
|
2022-05-07 20:08:51 +05:30
|
|
|
const createComponent = ({ props = {}, mountFn = shallowMountExtended } = {}) => {
|
|
|
|
const { runner, ...propsData } = props;
|
|
|
|
|
|
|
|
wrapper = mountFn(RunnerDeleteButton, {
|
|
|
|
propsData: {
|
|
|
|
runner: {
|
2022-06-21 17:19:12 +05:30
|
|
|
// We need typename so that cache.identify works
|
|
|
|
// eslint-disable-next-line no-underscore-dangle
|
|
|
|
__typename: mockRunner.__typename,
|
2022-05-07 20:08:51 +05:30
|
|
|
id: mockRunner.id,
|
|
|
|
shortSha: mockRunner.shortSha,
|
|
|
|
...runner,
|
|
|
|
},
|
|
|
|
...propsData,
|
|
|
|
},
|
2022-06-21 17:19:12 +05:30
|
|
|
apolloProvider,
|
2022-05-07 20:08:51 +05:30
|
|
|
directives: {
|
|
|
|
GlTooltip: createMockDirective(),
|
|
|
|
GlModal: createMockDirective(),
|
|
|
|
},
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const clickOkAndWait = async () => {
|
|
|
|
findModal().vm.$emit('primary');
|
|
|
|
await waitForPromises();
|
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
runnerDeleteHandler = jest.fn().mockImplementation(() => {
|
|
|
|
return Promise.resolve({
|
|
|
|
data: {
|
|
|
|
runnerDelete: {
|
|
|
|
errors: [],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
2022-06-21 17:19:12 +05:30
|
|
|
apolloProvider = createMockApollo([[runnerDeleteMutation, runnerDeleteHandler]]);
|
|
|
|
apolloCache = apolloProvider.defaultClient.cache;
|
|
|
|
|
|
|
|
jest.spyOn(apolloCache, 'evict');
|
|
|
|
jest.spyOn(apolloCache, 'gc');
|
2022-05-07 20:08:51 +05:30
|
|
|
|
|
|
|
createComponent();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Displays a delete button without an icon', () => {
|
|
|
|
expect(findBtn().props()).toMatchObject({
|
|
|
|
loading: false,
|
|
|
|
icon: '',
|
|
|
|
});
|
|
|
|
expect(findBtn().classes('btn-icon')).toBe(false);
|
|
|
|
expect(findBtn().text()).toBe(I18N_DELETE_RUNNER);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Displays a modal with the runner name', () => {
|
|
|
|
expect(findModal().props('runnerName')).toBe(`#${mockRunnerId} (${mockRunner.shortSha})`);
|
|
|
|
});
|
|
|
|
|
2022-06-21 17:19:12 +05:30
|
|
|
it('Does not have tabindex when button is enabled', () => {
|
|
|
|
expect(wrapper.attributes('tabindex')).toBeUndefined();
|
|
|
|
});
|
|
|
|
|
2022-05-07 20:08:51 +05:30
|
|
|
it('Displays a modal when clicked', () => {
|
|
|
|
const modalId = `delete-runner-modal-${mockRunnerId}`;
|
|
|
|
|
|
|
|
expect(getModal()).toBe(modalId);
|
|
|
|
expect(findModal().attributes('modal-id')).toBe(modalId);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Does not display redundant text for screen readers', () => {
|
|
|
|
expect(findBtn().attributes('aria-label')).toBe(undefined);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe(`Before the delete button is clicked`, () => {
|
|
|
|
it('The mutation has not been called', () => {
|
|
|
|
expect(runnerDeleteHandler).toHaveBeenCalledTimes(0);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('Immediately after the delete button is clicked', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
findModal().vm.$emit('primary');
|
|
|
|
});
|
|
|
|
|
|
|
|
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 delete button', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
await clickOkAndWait();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('The mutation to delete is called', () => {
|
|
|
|
expect(runnerDeleteHandler).toHaveBeenCalledTimes(1);
|
|
|
|
expect(runnerDeleteHandler).toHaveBeenCalledWith({
|
|
|
|
input: {
|
|
|
|
id: mockRunner.id,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('The user can be notified with an event', () => {
|
|
|
|
const deleted = wrapper.emitted('deleted');
|
|
|
|
|
|
|
|
expect(deleted).toHaveLength(1);
|
|
|
|
expect(deleted[0][0].message).toMatch(`#${mockRunnerId}`);
|
|
|
|
expect(deleted[0][0].message).toMatch(`${mockRunner.shortSha}`);
|
|
|
|
});
|
2022-06-21 17:19:12 +05:30
|
|
|
|
|
|
|
it('evicts runner from apollo cache', () => {
|
|
|
|
expect(apolloCache.evict).toHaveBeenCalledWith({
|
|
|
|
id: apolloCache.identify(mockRunner),
|
|
|
|
});
|
|
|
|
expect(apolloCache.gc).toHaveBeenCalled();
|
|
|
|
});
|
2022-05-07 20:08:51 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
describe('When update fails', () => {
|
|
|
|
describe('On a network error', () => {
|
|
|
|
const mockErrorMsg = 'Update error!';
|
|
|
|
|
|
|
|
beforeEach(async () => {
|
|
|
|
runnerDeleteHandler.mockRejectedValueOnce(new Error(mockErrorMsg));
|
|
|
|
|
|
|
|
await clickOkAndWait();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('error is reported to sentry', () => {
|
|
|
|
expect(captureException).toHaveBeenCalledWith({
|
|
|
|
error: new Error(mockErrorMsg),
|
|
|
|
component: 'RunnerDeleteButton',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
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 () => {
|
|
|
|
runnerDeleteHandler.mockResolvedValueOnce({
|
|
|
|
data: {
|
|
|
|
runnerDelete: {
|
|
|
|
errors: [mockErrorMsg, mockErrorMsg2],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
await clickOkAndWait();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('error is reported to sentry', () => {
|
|
|
|
expect(captureException).toHaveBeenCalledWith({
|
|
|
|
error: new Error(`${mockErrorMsg} ${mockErrorMsg2}`),
|
|
|
|
component: 'RunnerDeleteButton',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('error is shown to the user', () => {
|
|
|
|
expect(createAlert).toHaveBeenCalledTimes(1);
|
|
|
|
});
|
2022-06-21 17:19:12 +05:30
|
|
|
|
|
|
|
it('does not evict runner from apollo cache', () => {
|
|
|
|
expect(apolloCache.evict).not.toHaveBeenCalled();
|
|
|
|
expect(apolloCache.gc).not.toHaveBeenCalled();
|
|
|
|
});
|
2022-05-07 20:08:51 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
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('');
|
|
|
|
expect(findBtn().classes('btn-icon')).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Display correctly for screen readers', () => {
|
|
|
|
expect(findBtn().attributes('aria-label')).toBe(I18N_DELETE_RUNNER);
|
|
|
|
expect(getTooltip()).toBe(I18N_DELETE_RUNNER);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('Immediately after the button is clicked', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
findModal().vm.$emit('primary');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('The button has a loading state', async () => {
|
|
|
|
expect(findBtn().props('loading')).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('The stale tooltip is removed', async () => {
|
|
|
|
expect(getTooltip()).toBe('');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2022-06-21 17:19:12 +05:30
|
|
|
|
|
|
|
describe.each`
|
|
|
|
reason | runner | tooltip
|
|
|
|
${'runner belongs to more than 1 project'} | ${{ projectCount: 2 }} | ${I18N_DELETE_DISABLED_MANY_PROJECTS}
|
|
|
|
${'unknown reason'} | ${{}} | ${I18N_DELETE_DISABLED_UNKNOWN_REASON}
|
|
|
|
`('When button is disabled because $reason', ({ runner, tooltip }) => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({
|
|
|
|
props: {
|
|
|
|
disabled: true,
|
|
|
|
runner,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Displays a disabled delete button', () => {
|
|
|
|
expect(findBtn().props('disabled')).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it(`Tooltip "${tooltip}" is shown`, () => {
|
|
|
|
// tabindex is required for a11y
|
|
|
|
expect(wrapper.attributes('tabindex')).toBe('0');
|
|
|
|
expect(getTooltip()).toBe(tooltip);
|
|
|
|
});
|
|
|
|
});
|
2022-05-07 20:08:51 +05:30
|
|
|
});
|