Commit 9643798a authored by Brandon Labuschagne's avatar Brandon Labuschagne

Merge branch 'tor/defect/duplicate-collapse-banners-single-file-mr' into 'master'

Don't display the collapsed files warning banner when there is only one file

See merge request gitlab-org/gitlab!65359
parents 1c9a3538 f7173bf1
<script>
import { GlAlert, GlButton } from '@gitlab/ui';
import { mapState } from 'vuex';
import { CENTERED_LIMITED_CONTAINER_CLASSES, EVT_EXPAND_ALL_FILES } from '../constants';
import eventHub from '../event_hub';
......@@ -27,11 +28,15 @@ export default {
};
},
computed: {
...mapState('diffs', ['diffFiles']),
containerClasses() {
return {
[CENTERED_LIMITED_CONTAINER_CLASSES]: this.limited,
};
},
shouldDisplay() {
return !this.isDismissed && this.diffFiles.length > 1;
},
},
methods: {
......@@ -48,7 +53,7 @@ export default {
</script>
<template>
<div v-if="!isDismissed" data-testid="root" :class="containerClasses" class="col-12">
<div v-if="shouldDisplay" data-testid="root" :class="containerClasses" class="col-12">
<gl-alert
:dismissible="true"
:title="__('Some changes are not shown')"
......
import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
import { nextTick } from 'vue';
import Vuex from 'vuex';
import CollapsedFilesWarning from '~/diffs/components/collapsed_files_warning.vue';
import { CENTERED_LIMITED_CONTAINER_CLASSES, EVT_EXPAND_ALL_FILES } from '~/diffs/constants';
import eventHub from '~/diffs/event_hub';
import createStore from '~/diffs/store/modules';
import file from '../mock_data/diff_file';
const propsData = {
limited: true,
mergeable: true,
......@@ -12,6 +15,13 @@ const propsData = {
};
const limitedClasses = CENTERED_LIMITED_CONTAINER_CLASSES.split(' ');
async function files(store, count) {
const copies = Array(count).fill(file);
store.state.diffs.diffFiles.push(...copies);
return nextTick();
}
describe('CollapsedFilesWarning', () => {
const localVue = createLocalVue();
let store;
......@@ -42,48 +52,63 @@ describe('CollapsedFilesWarning', () => {
wrapper.destroy();
});
it.each`
limited | containerClasses
${true} | ${limitedClasses}
${false} | ${[]}
`(
'has the correct container classes when limited is $limited',
({ limited, containerClasses }) => {
createComponent({ limited });
expect(wrapper.classes()).toEqual(['col-12'].concat(containerClasses));
},
);
it.each`
present | dismissed
${false} | ${true}
${true} | ${false}
`('toggles the alert when dismissed is $dismissed', ({ present, dismissed }) => {
createComponent({ dismissed });
expect(wrapper.find('[data-testid="root"]').exists()).toBe(present);
});
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));
},
);
it('dismisses the component when the alert "x" is clicked', async () => {
createComponent({}, { full: true });
it.each`
present | dismissed
${false} | ${true}
${true} | ${false}
`('toggles the alert when dismissed is $dismissed', async ({ present, dismissed }) => {
createComponent({ dismissed });
await files(store, 2);
expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
expect(wrapper.find('[data-testid="root"]').exists()).toBe(present);
});
getAlertCloseButton().element.click();
it('dismisses the component when the alert "x" is clicked', async () => {
createComponent({}, { full: true });
await files(store, 2);
await wrapper.vm.$nextTick();
expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
expect(wrapper.find('[data-testid="root"]').exists()).toBe(false);
});
getAlertCloseButton().element.click();
it(`emits the \`${EVT_EXPAND_ALL_FILES}\` event when the alert action button is clicked`, () => {
createComponent({}, { full: true });
await wrapper.vm.$nextTick();
jest.spyOn(eventHub, '$emit');
expect(wrapper.find('[data-testid="root"]').exists()).toBe(false);
});
getAlertActionButton().vm.$emit('click');
it(`emits the \`${EVT_EXPAND_ALL_FILES}\` event when the alert action button is clicked`, async () => {
createComponent({}, { full: true });
await files(store, 2);
expect(eventHub.$emit).toHaveBeenCalledWith(EVT_EXPAND_ALL_FILES);
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);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment