debian-mirror-gitlab/spec/frontend/diffs/components/collapsed_files_warning_spec.js

115 lines
3.2 KiB
JavaScript
Raw Normal View History

2020-11-24 15:15:51 +05:30
import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
2021-09-30 23:02:18 +05:30
import { nextTick } from 'vue';
2021-03-11 19:13:27 +05:30
import Vuex from 'vuex';
2020-11-24 15:15:51 +05:30
import CollapsedFilesWarning from '~/diffs/components/collapsed_files_warning.vue';
2021-01-29 00:20:46 +05:30
import { CENTERED_LIMITED_CONTAINER_CLASSES, EVT_EXPAND_ALL_FILES } from '~/diffs/constants';
import eventHub from '~/diffs/event_hub';
2021-03-11 19:13:27 +05:30
import createStore from '~/diffs/store/modules';
2020-11-24 15:15:51 +05:30
2021-09-30 23:02:18 +05:30
import file from '../mock_data/diff_file';
2020-11-24 15:15:51 +05:30
const propsData = {
limited: true,
mergeable: true,
resolutionPath: 'a-path',
};
const limitedClasses = CENTERED_LIMITED_CONTAINER_CLASSES.split(' ');
2021-09-30 23:02:18 +05:30
async function files(store, count) {
const copies = Array(count).fill(file);
store.state.diffs.diffFiles.push(...copies);
return nextTick();
}
2020-11-24 15:15:51 +05:30
describe('CollapsedFilesWarning', () => {
const localVue = createLocalVue();
let store;
let wrapper;
localVue.use(Vuex);
const getAlertActionButton = () =>
wrapper.find(CollapsedFilesWarning).find('button.gl-alert-action:first-child');
const getAlertCloseButton = () => wrapper.find(CollapsedFilesWarning).find('button');
const createComponent = (props = {}, { full } = { full: false }) => {
const mounter = full ? mount : shallowMount;
store = new Vuex.Store({
modules: {
diffs: createStore(),
},
});
wrapper = mounter(CollapsedFilesWarning, {
propsData: { ...propsData, ...props },
localVue,
store,
});
};
afterEach(() => {
wrapper.destroy();
});
2021-09-30 23:02:18 +05:30
describe('when there is more than one file', () => {
it.each`
limited | containerClasses
${true} | ${limitedClasses}
${false} | ${[]}
`(
'has the correct container classes when limited is $limited',
async ({ limited, containerClasses }) => {
createComponent({ limited });
await files(store, 2);
expect(wrapper.classes()).toEqual(['col-12'].concat(containerClasses));
},
);
2020-11-24 15:15:51 +05:30
2021-09-30 23:02:18 +05:30
it.each`
present | dismissed
${false} | ${true}
${true} | ${false}
`('toggles the alert when dismissed is $dismissed', async ({ present, dismissed }) => {
createComponent({ dismissed });
await files(store, 2);
2020-11-24 15:15:51 +05:30
2021-09-30 23:02:18 +05:30
expect(wrapper.find('[data-testid="root"]').exists()).toBe(present);
});
2020-11-24 15:15:51 +05:30
2021-09-30 23:02:18 +05:30
it('dismisses the component when the alert "x" is clicked', async () => {
createComponent({}, { full: true });
await files(store, 2);
2020-11-24 15:15:51 +05:30
2021-09-30 23:02:18 +05:30
expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
2020-11-24 15:15:51 +05:30
2021-09-30 23:02:18 +05:30
getAlertCloseButton().element.click();
2020-11-24 15:15:51 +05:30
2021-09-30 23:02:18 +05:30
await wrapper.vm.$nextTick();
2020-11-24 15:15:51 +05:30
2021-09-30 23:02:18 +05:30
expect(wrapper.find('[data-testid="root"]').exists()).toBe(false);
});
2020-11-24 15:15:51 +05:30
2021-09-30 23:02:18 +05:30
it(`emits the \`${EVT_EXPAND_ALL_FILES}\` event when the alert action button is clicked`, async () => {
createComponent({}, { full: true });
await files(store, 2);
2020-11-24 15:15:51 +05:30
2021-09-30 23:02:18 +05:30
jest.spyOn(eventHub, '$emit');
getAlertActionButton().vm.$emit('click');
expect(eventHub.$emit).toHaveBeenCalledWith(EVT_EXPAND_ALL_FILES);
});
});
describe('when there is a single file', () => {
it('should not display', async () => {
createComponent();
await files(store, 1);
expect(wrapper.find('[data-testid="root"]').exists()).toBe(false);
});
2020-11-24 15:15:51 +05:30
});
});