summaryrefslogtreecommitdiff
path: root/spec/frontend/registry/explorer/components/details_page/tags_table_spec.js
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/registry/explorer/components/details_page/tags_table_spec.js')
-rw-r--r--spec/frontend/registry/explorer/components/details_page/tags_table_spec.js286
1 files changed, 0 insertions, 286 deletions
diff --git a/spec/frontend/registry/explorer/components/details_page/tags_table_spec.js b/spec/frontend/registry/explorer/components/details_page/tags_table_spec.js
deleted file mode 100644
index a60a362dcfe..00000000000
--- a/spec/frontend/registry/explorer/components/details_page/tags_table_spec.js
+++ /dev/null
@@ -1,286 +0,0 @@
-import { mount } from '@vue/test-utils';
-import stubChildren from 'helpers/stub_children';
-import component from '~/registry/explorer/components/details_page/tags_table.vue';
-import { tagsListResponse } from '../../mock_data';
-
-describe('tags_table', () => {
- let wrapper;
- const tags = [...tagsListResponse.data];
-
- const findMainCheckbox = () => wrapper.find('[data-testid="mainCheckbox"]');
- const findFirstRowItem = testid => wrapper.find(`[data-testid="${testid}"]`);
- const findBulkDeleteButton = () => wrapper.find('[data-testid="bulkDeleteButton"]');
- const findAllDeleteButtons = () => wrapper.findAll('[data-testid="singleDeleteButton"]');
- const findAllCheckboxes = () => wrapper.findAll('[data-testid="rowCheckbox"]');
- const findCheckedCheckboxes = () => findAllCheckboxes().filter(c => c.attributes('checked'));
- const findFirsTagColumn = () => wrapper.find('.js-tag-column');
- const findFirstTagNameText = () => wrapper.find('[data-testid="rowNameText"]');
-
- const findLoaderSlot = () => wrapper.find('[data-testid="loaderSlot"]');
- const findEmptySlot = () => wrapper.find('[data-testid="emptySlot"]');
-
- const mountComponent = (propsData = { tags, isDesktop: true }) => {
- wrapper = mount(component, {
- stubs: {
- ...stubChildren(component),
- GlTable: false,
- },
- propsData,
- slots: {
- loader: '<div data-testid="loaderSlot"></div>',
- empty: '<div data-testid="emptySlot"></div>',
- },
- });
- };
-
- afterEach(() => {
- wrapper.destroy();
- wrapper = null;
- });
-
- it.each([
- 'rowCheckbox',
- 'rowName',
- 'rowShortRevision',
- 'rowSize',
- 'rowTime',
- 'singleDeleteButton',
- ])('%s exist in the table', element => {
- mountComponent();
-
- expect(findFirstRowItem(element).exists()).toBe(true);
- });
-
- describe('header checkbox', () => {
- it('exists', () => {
- mountComponent();
- expect(findMainCheckbox().exists()).toBe(true);
- });
-
- it('if selected selects all the rows', () => {
- mountComponent();
- findMainCheckbox().vm.$emit('change');
- return wrapper.vm.$nextTick().then(() => {
- expect(findMainCheckbox().attributes('checked')).toBeTruthy();
- expect(findCheckedCheckboxes()).toHaveLength(tags.length);
- });
- });
-
- it('if deselect deselects all the row', () => {
- mountComponent();
- findMainCheckbox().vm.$emit('change');
- return wrapper.vm
- .$nextTick()
- .then(() => {
- expect(findMainCheckbox().attributes('checked')).toBeTruthy();
- findMainCheckbox().vm.$emit('change');
- return wrapper.vm.$nextTick();
- })
- .then(() => {
- expect(findMainCheckbox().attributes('checked')).toBe(undefined);
- expect(findCheckedCheckboxes()).toHaveLength(0);
- });
- });
- });
-
- describe('row checkbox', () => {
- beforeEach(() => {
- mountComponent();
- });
-
- it('selecting and deselecting the checkbox works as intended', () => {
- findFirstRowItem('rowCheckbox').vm.$emit('change');
- return wrapper.vm
- .$nextTick()
- .then(() => {
- expect(wrapper.vm.selectedItems).toEqual([tags[0].name]);
- expect(findFirstRowItem('rowCheckbox').attributes('checked')).toBeTruthy();
- findFirstRowItem('rowCheckbox').vm.$emit('change');
- return wrapper.vm.$nextTick();
- })
- .then(() => {
- expect(wrapper.vm.selectedItems.length).toBe(0);
- expect(findFirstRowItem('rowCheckbox').attributes('checked')).toBe(undefined);
- });
- });
- });
-
- describe('header delete button', () => {
- beforeEach(() => {
- mountComponent();
- });
-
- it('exists', () => {
- expect(findBulkDeleteButton().exists()).toBe(true);
- });
-
- it('is disabled if no item is selected', () => {
- expect(findBulkDeleteButton().attributes('disabled')).toBe('true');
- });
-
- it('is enabled if at least one item is selected', () => {
- expect(findBulkDeleteButton().attributes('disabled')).toBe('true');
- findFirstRowItem('rowCheckbox').vm.$emit('change');
- return wrapper.vm.$nextTick().then(() => {
- expect(findBulkDeleteButton().attributes('disabled')).toBeFalsy();
- });
- });
-
- describe('on click', () => {
- it('when one item is selected', () => {
- findFirstRowItem('rowCheckbox').vm.$emit('change');
- findBulkDeleteButton().vm.$emit('click');
- expect(wrapper.emitted('delete')).toEqual([[['centos6']]]);
- });
-
- it('when multiple items are selected', () => {
- findMainCheckbox().vm.$emit('change');
- findBulkDeleteButton().vm.$emit('click');
-
- expect(wrapper.emitted('delete')).toEqual([[tags.map(t => t.name)]]);
- });
- });
- });
-
- describe('row delete button', () => {
- beforeEach(() => {
- mountComponent();
- });
-
- it('exists', () => {
- expect(
- findAllDeleteButtons()
- .at(0)
- .exists(),
- ).toBe(true);
- });
-
- it('is disabled if the item has no destroy_path', () => {
- expect(
- findAllDeleteButtons()
- .at(1)
- .attributes('disabled'),
- ).toBe('true');
- });
-
- it('on click', () => {
- findAllDeleteButtons()
- .at(0)
- .vm.$emit('click');
-
- expect(wrapper.emitted('delete')).toEqual([[['centos6']]]);
- });
- });
-
- describe('name cell', () => {
- it('tag column has a tooltip with the tag name', () => {
- mountComponent();
- expect(findFirstTagNameText().attributes('title')).toBe(tagsListResponse.data[0].name);
- });
-
- describe('on desktop viewport', () => {
- beforeEach(() => {
- mountComponent();
- });
-
- it('table header has class w-25', () => {
- expect(findFirsTagColumn().classes()).toContain('w-25');
- });
-
- it('tag column has the mw-m class', () => {
- expect(findFirstRowItem('rowName').classes()).toContain('mw-m');
- });
- });
-
- describe('on mobile viewport', () => {
- beforeEach(() => {
- mountComponent({ tags, isDesktop: false });
- });
-
- it('table header does not have class w-25', () => {
- expect(findFirsTagColumn().classes()).not.toContain('w-25');
- });
-
- it('tag column has the gl-justify-content-end class', () => {
- expect(findFirstRowItem('rowName').classes()).toContain('gl-justify-content-end');
- });
- });
- });
-
- describe('last updated cell', () => {
- let timeCell;
-
- beforeEach(() => {
- mountComponent();
- timeCell = findFirstRowItem('rowTime');
- });
-
- it('displays the time in string format', () => {
- expect(timeCell.text()).toBe('2 years ago');
- });
-
- it('has a tooltip timestamp', () => {
- expect(timeCell.attributes('title')).toBe('Sep 19, 2017 1:45pm GMT+0000');
- });
- });
-
- describe('empty state slot', () => {
- describe('when the table is empty', () => {
- beforeEach(() => {
- mountComponent({ tags: [], isDesktop: true });
- });
-
- it('does not show table rows', () => {
- expect(findFirstTagNameText().exists()).toBe(false);
- });
-
- it('has the empty state slot', () => {
- expect(findEmptySlot().exists()).toBe(true);
- });
- });
-
- describe('when the table is not empty', () => {
- beforeEach(() => {
- mountComponent({ tags, isDesktop: true });
- });
-
- it('does show table rows', () => {
- expect(findFirstTagNameText().exists()).toBe(true);
- });
-
- it('does not show the empty state', () => {
- expect(findEmptySlot().exists()).toBe(false);
- });
- });
- });
-
- describe('loader slot', () => {
- describe('when the data is loading', () => {
- beforeEach(() => {
- mountComponent({ isLoading: true, tags });
- });
-
- it('show the loader', () => {
- expect(findLoaderSlot().exists()).toBe(true);
- });
-
- it('does not show the table rows', () => {
- expect(findFirstTagNameText().exists()).toBe(false);
- });
- });
-
- describe('when the data is not loading', () => {
- beforeEach(() => {
- mountComponent({ isLoading: false, tags });
- });
-
- it('does not show the loader', () => {
- expect(findLoaderSlot().exists()).toBe(false);
- });
-
- it('shows the table rows', () => {
- expect(findFirstTagNameText().exists()).toBe(true);
- });
- });
- });
-});
View Lorry Controller Status