diff options
Diffstat (limited to 'spec/frontend/registry/explorer/pages/details_spec.js')
-rw-r--r-- | spec/frontend/registry/explorer/pages/details_spec.js | 53 |
1 files changed, 34 insertions, 19 deletions
diff --git a/spec/frontend/registry/explorer/pages/details_spec.js b/spec/frontend/registry/explorer/pages/details_spec.js index b7e01cad9bc..9bc0bae5c23 100644 --- a/spec/frontend/registry/explorer/pages/details_spec.js +++ b/spec/frontend/registry/explorer/pages/details_spec.js @@ -5,6 +5,7 @@ import component from '~/registry/explorer/pages/details.vue'; import DeleteAlert from '~/registry/explorer/components/details_page/delete_alert.vue'; import DetailsHeader from '~/registry/explorer/components/details_page/details_header.vue'; import TagsLoader from '~/registry/explorer/components/details_page/tags_loader.vue'; +import TagsList from '~/registry/explorer/components/details_page/tags_list.vue'; import EmptyTagsState from '~/registry/explorer/components/details_page/empty_tags_state.vue'; import { createStore } from '~/registry/explorer/stores/'; import { @@ -15,7 +16,7 @@ import { } from '~/registry/explorer/stores/mutation_types/'; import { tagsListResponse } from '../mock_data'; -import { TagsTable, DeleteModal } from '../stubs'; +import { DeleteModal } from '../stubs'; describe('Details Page', () => { let wrapper; @@ -25,18 +26,23 @@ describe('Details Page', () => { const findDeleteModal = () => wrapper.find(DeleteModal); const findPagination = () => wrapper.find(GlPagination); const findTagsLoader = () => wrapper.find(TagsLoader); - const findTagsTable = () => wrapper.find(TagsTable); + const findTagsList = () => wrapper.find(TagsList); const findDeleteAlert = () => wrapper.find(DeleteAlert); const findDetailsHeader = () => wrapper.find(DetailsHeader); const findEmptyTagsState = () => wrapper.find(EmptyTagsState); const routeId = window.btoa(JSON.stringify({ name: 'foo', tags_path: 'bar' })); + const tagsArrayToSelectedTags = tags => + tags.reduce((acc, c) => { + acc[c.name] = true; + return acc; + }, {}); + const mountComponent = options => { wrapper = shallowMount(component, { store, stubs: { - TagsTable, DeleteModal, }, mocks: { @@ -66,15 +72,18 @@ describe('Details Page', () => { describe('when isLoading is true', () => { beforeEach(() => { - mountComponent(); store.commit(SET_MAIN_LOADING, true); - return wrapper.vm.$nextTick(); + mountComponent(); }); afterEach(() => store.commit(SET_MAIN_LOADING, false)); - it('binds isLoading to tags-table', () => { - expect(findTagsTable().props('isLoading')).toBe(true); + it('shows the loader', () => { + expect(findTagsLoader().exists()).toBe(true); + }); + + it('does not show the list', () => { + expect(findTagsList().exists()).toBe(false); }); it('does not show pagination', () => { @@ -82,8 +91,9 @@ describe('Details Page', () => { }); }); - describe('table slots', () => { + describe('when the list of tags is empty', () => { beforeEach(() => { + store.commit(SET_TAGS_LIST_SUCCESS, []); mountComponent(); }); @@ -91,32 +101,37 @@ describe('Details Page', () => { expect(findEmptyTagsState().exists()).toBe(true); }); - it('has a skeleton loader', () => { - expect(findTagsLoader().exists()).toBe(true); + it('does not show the loader', () => { + expect(findTagsLoader().exists()).toBe(false); + }); + + it('does not show the list', () => { + expect(findTagsList().exists()).toBe(false); }); }); - describe('table', () => { + describe('list', () => { beforeEach(() => { mountComponent(); }); it('exists', () => { - expect(findTagsTable().exists()).toBe(true); + expect(findTagsList().exists()).toBe(true); }); it('has the correct props bound', () => { - expect(findTagsTable().props()).toMatchObject({ + expect(findTagsList().props()).toMatchObject({ isDesktop: true, - isLoading: false, tags: store.state.tags, }); }); describe('deleteEvent', () => { describe('single item', () => { + let tagToBeDeleted; beforeEach(() => { - findTagsTable().vm.$emit('delete', [store.state.tags[0].name]); + [tagToBeDeleted] = store.state.tags; + findTagsList().vm.$emit('delete', { [tagToBeDeleted.name]: true }); }); it('open the modal', () => { @@ -124,7 +139,7 @@ describe('Details Page', () => { }); it('maps the selection to itemToBeDeleted', () => { - expect(wrapper.vm.itemsToBeDeleted).toEqual([store.state.tags[0]]); + expect(wrapper.vm.itemsToBeDeleted).toEqual([tagToBeDeleted]); }); it('tracks a single delete event', () => { @@ -136,7 +151,7 @@ describe('Details Page', () => { describe('multiple items', () => { beforeEach(() => { - findTagsTable().vm.$emit('delete', store.state.tags.map(t => t.name)); + findTagsList().vm.$emit('delete', tagsArrayToSelectedTags(store.state.tags)); }); it('open the modal', () => { @@ -202,7 +217,7 @@ describe('Details Page', () => { describe('when one item is selected to be deleted', () => { beforeEach(() => { mountComponent(); - findTagsTable().vm.$emit('delete', [store.state.tags[0].name]); + findTagsList().vm.$emit('delete', { [store.state.tags[0].name]: true }); }); it('dispatch requestDeleteTag with the right parameters', () => { @@ -217,7 +232,7 @@ describe('Details Page', () => { describe('when more than one item is selected to be deleted', () => { beforeEach(() => { mountComponent(); - findTagsTable().vm.$emit('delete', store.state.tags.map(t => t.name)); + findTagsList().vm.$emit('delete', tagsArrayToSelectedTags(store.state.tags)); }); it('dispatch requestDeleteTags with the right parameters', () => { |