diff options
Diffstat (limited to 'spec/frontend/registry')
| -rw-r--r-- | spec/frontend/registry/components/__snapshots__/group_empty_state_spec.js.snap | 61 | ||||
| -rw-r--r-- | spec/frontend/registry/components/__snapshots__/project_empty_state_spec.js.snap | 186 | ||||
| -rw-r--r-- | spec/frontend/registry/components/app_spec.js | 160 | ||||
| -rw-r--r-- | spec/frontend/registry/components/collapsible_container_spec.js | 127 | ||||
| -rw-r--r-- | spec/frontend/registry/components/group_empty_state_spec.js | 23 | ||||
| -rw-r--r-- | spec/frontend/registry/components/project_empty_state_spec.js | 27 | ||||
| -rw-r--r-- | spec/frontend/registry/components/table_registry_spec.js | 268 | ||||
| -rw-r--r-- | spec/frontend/registry/mock_data.js | 134 | ||||
| -rw-r--r-- | spec/frontend/registry/stores/actions_spec.js | 203 | ||||
| -rw-r--r-- | spec/frontend/registry/stores/getters_spec.js (renamed from spec/frontend/registry/getters_spec.js) | 6 | ||||
| -rw-r--r-- | spec/frontend/registry/stores/mutations_spec.js | 94 |
11 files changed, 1289 insertions, 0 deletions
diff --git a/spec/frontend/registry/components/__snapshots__/group_empty_state_spec.js.snap b/spec/frontend/registry/components/__snapshots__/group_empty_state_spec.js.snap new file mode 100644 index 00000000000..3f13b7d4d76 --- /dev/null +++ b/spec/frontend/registry/components/__snapshots__/group_empty_state_spec.js.snap @@ -0,0 +1,61 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Registry Group Empty state to match the default snapshot 1`] = ` +<div + class="row container-message empty-state" +> + <div + class="col-12" + > + <div + class="svg-250 svg-content" + > + <img + alt="There are no container images available in this group" + class="" + src="imageUrl" + /> + </div> + </div> + + <div + class="col-12" + > + <div + class="text-content" + > + <h4 + class="center" + style="" + > + There are no container images available in this group + </h4> + + <p + class="center" + style="" + > + <p + class="js-no-container-images-text" + > + With the Container Registry, every project can have its own space to store its Docker images. Push at least one Docker image in one of this group's projects in order to show up here. + <a + href="help" + target="_blank" + > + More Information + </a> + </p> + </p> + + <div + class="text-center" + > + <!----> + + <!----> + </div> + </div> + </div> +</div> +`; diff --git a/spec/frontend/registry/components/__snapshots__/project_empty_state_spec.js.snap b/spec/frontend/registry/components/__snapshots__/project_empty_state_spec.js.snap new file mode 100644 index 00000000000..3084462f5ae --- /dev/null +++ b/spec/frontend/registry/components/__snapshots__/project_empty_state_spec.js.snap @@ -0,0 +1,186 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Registry Project Empty state to match the default snapshot 1`] = ` +<div + class="row container-message empty-state" +> + <div + class="col-12" + > + <div + class="svg-250 svg-content" + > + <img + alt="There are no container images stored for this project" + class="" + src="imageUrl" + /> + </div> + </div> + + <div + class="col-12" + > + <div + class="text-content" + > + <h4 + class="center" + style="" + > + There are no container images stored for this project + </h4> + + <p + class="center" + style="" + > + <p + class="js-no-container-images-text" + > + With the Container Registry, every project can have its own space to store its Docker images. + <a + href="help" + target="_blank" + > + More Information + </a> + </p> + + <h5> + Quick Start + </h5> + + <p + class="js-not-logged-in-to-registry-text" + > + If you are not already logged in, you need to authenticate to the Container Registry by using your GitLab username and password. If you have + <a + href="help_link" + target="_blank" + > + Two-Factor Authentication + </a> + enabled, use a + <a + href="personal_token" + target="_blank" + > + Personal Access Token + </a> + instead of a password. + </p> + + <div + class="input-group append-bottom-10" + > + <input + class="form-control monospace" + readonly="readonly" + type="text" + /> + + <span + class="input-group-append" + > + <button + class="btn input-group-text btn-secondary btn-default" + data-clipboard-text="docker login host" + data-original-title="Copy login command" + title="" + type="button" + > + <svg + aria-hidden="true" + class="s16 ic-duplicate" + > + <use + xlink:href="#duplicate" + /> + </svg> + </button> + </span> + </div> + + <p /> + + <p> + + You can add an image to this registry with the following commands: + + </p> + + <div + class="input-group append-bottom-10" + > + <input + class="form-control monospace" + readonly="readonly" + type="text" + /> + + <span + class="input-group-append" + > + <button + class="btn input-group-text btn-secondary btn-default" + data-clipboard-text="docker build -t url ." + data-original-title="Copy build command" + title="" + type="button" + > + <svg + aria-hidden="true" + class="s16 ic-duplicate" + > + <use + xlink:href="#duplicate" + /> + </svg> + </button> + </span> + </div> + + <div + class="input-group" + > + <input + class="form-control monospace" + readonly="readonly" + type="text" + /> + + <span + class="input-group-append" + > + <button + class="btn input-group-text btn-secondary btn-default" + data-clipboard-text="docker push url" + data-original-title="Copy push command" + title="" + type="button" + > + <svg + aria-hidden="true" + class="s16 ic-duplicate" + > + <use + xlink:href="#duplicate" + /> + </svg> + </button> + </span> + </div> + </p> + + <div + class="text-center" + > + <!----> + + <!----> + </div> + </div> + </div> +</div> +`; diff --git a/spec/frontend/registry/components/app_spec.js b/spec/frontend/registry/components/app_spec.js new file mode 100644 index 00000000000..a69c33c246d --- /dev/null +++ b/spec/frontend/registry/components/app_spec.js @@ -0,0 +1,160 @@ +import Vue from 'vue'; +import { mount } from '@vue/test-utils'; +import registry from '~/registry/components/app.vue'; +import { TEST_HOST } from '../../helpers/test_constants'; +import { reposServerResponse, parsedReposServerResponse } from '../mock_data'; + +describe('Registry List', () => { + let wrapper; + + const findCollapsibleContainer = w => w.findAll({ name: 'CollapsibeContainerRegisty' }); + const findProjectEmptyState = w => w.find({ name: 'ProjectEmptyState' }); + const findGroupEmptyState = w => w.find({ name: 'GroupEmptyState' }); + const findSpinner = w => w.find('.gl-spinner'); + const findCharacterErrorText = w => w.find('.js-character-error-text'); + + const propsData = { + endpoint: `${TEST_HOST}/foo`, + helpPagePath: 'foo', + noContainersImage: 'foo', + containersErrorImage: 'foo', + repositoryUrl: 'foo', + registryHostUrlWithPort: 'foo', + personalAccessTokensHelpLink: 'foo', + twoFactorAuthHelpLink: 'foo', + }; + + const setMainEndpoint = jest.fn(); + const fetchRepos = jest.fn(); + const setIsDeleteDisabled = jest.fn(); + + const methods = { + setMainEndpoint, + fetchRepos, + setIsDeleteDisabled, + }; + + beforeEach(() => { + // This is needed due to console.error called by vue to emit a warning that stop the tests. + // See https://github.com/vuejs/vue-test-utils/issues/532. + Vue.config.silent = true; + wrapper = mount(registry, { + propsData, + computed: { + repos() { + return parsedReposServerResponse; + }, + }, + methods, + }); + }); + + afterEach(() => { + jest.clearAllMocks(); + Vue.config.silent = false; + wrapper.destroy(); + }); + + describe('with data', () => { + it('should render a list of CollapsibeContainerRegisty', () => { + const containers = findCollapsibleContainer(wrapper); + expect(wrapper.vm.repos.length).toEqual(reposServerResponse.length); + expect(containers.length).toEqual(reposServerResponse.length); + }); + }); + + describe('without data', () => { + let localWrapper; + beforeEach(() => { + localWrapper = mount(registry, { + propsData, + computed: { + repos() { + return []; + }, + }, + methods, + }); + }); + + it('should render project empty message', () => { + const projectEmptyState = findProjectEmptyState(localWrapper); + expect(projectEmptyState.exists()).toBe(true); + }); + }); + + describe('while loading data', () => { + let localWrapper; + + beforeEach(() => { + localWrapper = mount(registry, { + propsData, + computed: { + repos() { + return []; + }, + isLoading() { + return true; + }, + }, + methods, + }); + }); + + it('should render a loading spinner', () => { + const spinner = findSpinner(localWrapper); + expect(spinner.exists()).toBe(true); + }); + }); + + describe('invalid characters in path', () => { + let localWrapper; + + beforeEach(() => { + localWrapper = mount(registry, { + propsData: { + ...propsData, + characterError: true, + }, + computed: { + repos() { + return []; + }, + }, + methods, + }); + }); + + it('should render invalid characters error message', () => { + const characterErrorText = findCharacterErrorText(localWrapper); + expect(characterErrorText.text()).toEqual( + 'We are having trouble connecting to Docker, which could be due to an issue with your project name or path. More Information', + ); + }); + }); + + describe('with groupId set', () => { + const isGroupPage = true; + + beforeEach(() => { + wrapper = mount(registry, { + propsData: { + ...propsData, + endpoint: null, + isGroupPage, + }, + methods, + }); + }); + + it('call the right vuex setters', () => { + expect(methods.setMainEndpoint).toHaveBeenLastCalledWith(null); + expect(methods.setIsDeleteDisabled).toHaveBeenLastCalledWith(true); + }); + + it('should render groups empty message', () => { + const groupEmptyState = findGroupEmptyState(wrapper); + expect(groupEmptyState.exists()).toBe(true); + }); + }); +}); diff --git a/spec/frontend/registry/components/collapsible_container_spec.js b/spec/frontend/registry/components/collapsible_container_spec.js new file mode 100644 index 00000000000..f93ebab1a4d --- /dev/null +++ b/spec/frontend/registry/components/collapsible_container_spec.js @@ -0,0 +1,127 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import { mount, createLocalVue } from '@vue/test-utils'; +import collapsibleComponent from '~/registry/components/collapsible_container.vue'; +import { repoPropsData } from '../mock_data'; +import createFlash from '~/flash'; +import * as getters from '~/registry/stores/getters'; + +jest.mock('~/flash.js'); + +const localVue = createLocalVue(); + +localVue.use(Vuex); + +describe('collapsible registry container', () => { + let wrapper; + let store; + + const findDeleteBtn = w => w.find('.js-remove-repo'); + const findContainerImageTags = w => w.find('.container-image-tags'); + const findToggleRepos = w => w.findAll('.js-toggle-repo'); + + const mountWithStore = config => mount(collapsibleComponent, { ...config, store, localVue }); + + beforeEach(() => { + createFlash.mockClear(); + // This is needed due to console.error called by vue to emit a warning that stop the tests + // see https://github.com/vuejs/vue-test-utils/issues/532 + Vue.config.silent = true; + store = new Vuex.Store({ + state: { + isDeleteDisabled: false, + }, + getters, + }); + + wrapper = mountWithStore({ + propsData: { + repo: repoPropsData, + }, + }); + }); + + afterEach(() => { + Vue.config.silent = false; + wrapper.destroy(); + }); + + describe('toggle', () => { + beforeEach(() => { + const fetchList = jest.fn(); + wrapper.setMethods({ fetchList }); + }); + + const expectIsClosed = () => { + const container = findContainerImageTags(wrapper); + expect(container.exists()).toBe(false); + expect(wrapper.vm.iconName).toEqual('angle-right'); + }; + + it('should be closed by default', () => { + expectIsClosed(); + }); + it('should be open when user clicks on closed repo', () => { + const toggleRepos = findToggleRepos(wrapper); + toggleRepos.at(0).trigger('click'); + const container = findContainerImageTags(wrapper); + expect(container.exists()).toBe(true); + expect(wrapper.vm.fetchList).toHaveBeenCalled(); + }); + it('should be closed when the user clicks on an opened repo', done => { + const toggleRepos = findToggleRepos(wrapper); + toggleRepos.at(0).trigger('click'); + Vue.nextTick(() => { + toggleRepos.at(0).trigger('click'); + Vue.nextTick(() => { + expectIsClosed(); + done(); + }); + }); + }); + }); + + describe('delete repo', () => { + it('should be possible to delete a repo', () => { + const deleteBtn = findDeleteBtn(wrapper); + expect(deleteBtn.exists()).toBe(true); + }); + + it('should call deleteItem when confirming deletion', () => { + const deleteItem = jest.fn().mockResolvedValue(); + const fetchRepos = jest.fn().mockResolvedValue(); + wrapper.setMethods({ deleteItem, fetchRepos }); + wrapper.vm.handleDeleteRepository(); + expect(wrapper.vm.deleteItem).toHaveBeenCalledWith(wrapper.vm.repo); + }); + + it('should show an error when there is API error', () => { + const deleteItem = jest.fn().mockRejectedValue('error'); + wrapper.setMethods({ deleteItem }); + return wrapper.vm.handleDeleteRepository().then(() => { + expect(createFlash).toHaveBeenCalled(); + }); + }); + }); + + describe('disabled delete', () => { + beforeEach(() => { + store = new Vuex.Store({ + state: { + isDeleteDisabled: true, + }, + getters, + }); + wrapper = mountWithStore({ + propsData: { + repo: repoPropsData, + }, + }); + }); + + it('should not render delete button', () => { + const deleteBtn = findDeleteBtn(wrapper); + expect(deleteBtn.exists()).toBe(false); + }); + }); +}); diff --git a/spec/frontend/registry/components/group_empty_state_spec.js b/spec/frontend/registry/components/group_empty_state_spec.js new file mode 100644 index 00000000000..f71074b5154 --- /dev/null +++ b/spec/frontend/registry/components/group_empty_state_spec.js @@ -0,0 +1,23 @@ +import { mount } from '@vue/test-utils'; +import groupEmptyState from '~/registry/components/group_empty_state.vue'; + +describe('Registry Group Empty state', () => { + let wrapper; + + beforeEach(() => { + wrapper = mount(groupEmptyState, { + propsData: { + noContainersImage: 'imageUrl', + helpPagePath: 'help', + }, + }); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('to match the default snapshot', () => { + expect(wrapper.element).toMatchSnapshot(); + }); +}); diff --git a/spec/frontend/registry/components/project_empty_state_spec.js b/spec/frontend/registry/components/project_empty_state_spec.js new file mode 100644 index 00000000000..913524db3aa --- /dev/null +++ b/spec/frontend/registry/components/project_empty_state_spec.js @@ -0,0 +1,27 @@ +import { mount } from '@vue/test-utils'; +import projectEmptyState from '~/registry/components/project_empty_state.vue'; + +describe('Registry Project Empty state', () => { + let wrapper; + + beforeEach(() => { + wrapper = mount(projectEmptyState, { + propsData: { + noContainersImage: 'imageUrl', + helpPagePath: 'help', + repositoryUrl: 'url', + twoFactorAuthHelpLink: 'help_link', + personalAccessTokensHelpLink: 'personal_token', + registryHostUrlWithPort: 'host', + }, + }); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('to match the default snapshot', () => { + expect(wrapper.element).toMatchSnapshot(); + }); +}); diff --git a/spec/frontend/registry/components/table_registry_spec.js b/spec/frontend/registry/components/table_registry_spec.js new file mode 100644 index 00000000000..7cb7c012d9d --- /dev/null +++ b/spec/frontend/registry/components/table_registry_spec.js @@ -0,0 +1,268 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import tableRegistry from '~/registry/components/table_registry.vue'; +import { mount, createLocalVue } from '@vue/test-utils'; +import { repoPropsData } from '../mock_data'; +import * as getters from '~/registry/stores/getters'; + +const [firstImage, secondImage] = repoPropsData.list; + +const localVue = createLocalVue(); + +localVue.use(Vuex); + +describe('table registry', () => { + let wrapper; + let store; + + const findSelectAllCheckbox = w => w.find('.js-select-all-checkbox > input'); + const findSelectCheckboxes = w => w.findAll('.js-select-checkbox > input'); + const findDeleteButton = w => w.find('.js-delete-registry'); + const findDeleteButtonsRow = w => w.findAll('.js-delete-registry-row'); + const findPagination = w => w.find('.js-registry-pagination'); + const bulkDeletePath = 'path'; + + const mountWithStore = config => mount(tableRegistry, { ...config, store, localVue }); + + beforeEach(() => { + // This is needed due to console.error called by vue to emit a warning that stop the tests + // see https://github.com/vuejs/vue-test-utils/issues/532 + Vue.config.silent = true; + + store = new Vuex.Store({ + state: { + isDeleteDisabled: false, + }, + getters, + }); + + wrapper = mountWithStore({ + propsData: { + repo: repoPropsData, + canDeleteRepo: true, + }, + }); + }); + + afterEach(() => { + Vue.config.silent = false; + wrapper.destroy(); + }); + + describe('rendering', () => { + it('should render a table with the registry list', () => { + expect(wrapper.findAll('.registry-image-row').length).toEqual(repoPropsData.list.length); + }); + + it('should render registry tag', () => { + const tds = wrapper.findAll('.registry-image-row td'); + expect(tds.at(0).classes()).toContain('check'); + expect(tds.at(1).html()).toContain(repoPropsData.list[0].tag); + expect(tds.at(2).html()).toContain(repoPropsData.list[0].shortRevision); + expect(tds.at(3).html()).toContain(repoPropsData.list[0].layers); + expect(tds.at(3).html()).toContain(repoPropsData.list[0].size); + expect(tds.at(4).html()).toContain(wrapper.vm.timeFormated(repoPropsData.list[0].createdAt)); + }); + }); + + describe('multi select', () => { + it('selecting a row should enable delete button', done => { + const deleteBtn = findDeleteButton(wrapper); + const checkboxes = findSelectCheckboxes(wrapper); + + expect(deleteBtn.attributes('disabled')).toBe('disabled'); + + checkboxes.at(0).trigger('click'); + Vue.nextTick(() => { + expect(deleteBtn.attributes('disabled')).toEqual(undefined); + done(); + }); + }); + + it('selecting all checkbox should select all rows and enable delete button', done => { + const selectAll = findSelectAllCheckbox(wrapper); + const checkboxes = findSelectCheckboxes(wrapper); + selectAll.trigger('click'); + + Vue.nextTick(() => { + const checked = checkboxes.filter(w => w.element.checked); + expect(checked.length).toBe(checkboxes.length); + done(); + }); + }); + + it('deselecting select all checkbox should deselect all rows and disable delete button', done => { + const checkboxes = findSelectCheckboxes(wrapper); + const selectAll = findSelectAllCheckbox(wrapper); + selectAll.trigger('click'); + selectAll.trigger('click'); + + Vue.nextTick(() => { + const checked = checkboxes.filter(w => !w.element.checked); + expect(checked.length).toBe(checkboxes.length); + done(); + }); + }); + + it('should delete multiple items when multiple items are selected', done => { + const multiDeleteItems = jest.fn().mockResolvedValue(); + wrapper.setMethods({ multiDeleteItems }); + const selectAll = findSelectAllCheckbox(wrapper); + selectAll.trigger('click'); + + Vue.nextTick(() => { + const deleteBtn = findDeleteButton(wrapper); + expect(wrapper.vm.selectedItems).toEqual([0, 1]); + expect(deleteBtn.attributes('disabled')).toEqual(undefined); + wrapper.setData({ itemsToBeDeleted: [...wrapper.vm.selectedItems] }); + wrapper.vm.handleMultipleDelete(); + + Vue.nextTick(() => { + expect(wrapper.vm.selectedItems).toEqual([]); + expect(wrapper.vm.itemsToBeDeleted).toEqual([]); + expect(wrapper.vm.multiDeleteItems).toHaveBeenCalledWith({ + path: bulkDeletePath, + items: [firstImage.tag, secondImage.tag], + }); + done(); + }); + }); + }); + + it('should show an error message if bulkDeletePath is not set', () => { + const showError = jest.fn(); + wrapper.setMethods({ showError }); + wrapper.setProps({ + repo: { + ...repoPropsData, + tagsPath: null, + }, + }); + wrapper.vm.handleMultipleDelete(); + expect(wrapper.vm.showError).toHaveBeenCalled(); + }); + }); + + describe('delete registry', () => { + beforeEach(() => { + wrapper.setData({ selectedItems: [0] }); + }); + + it('should be possible to delete a registry', () => { + const deleteBtn = findDeleteButton(wrapper); + const deleteBtns = findDeleteButtonsRow(wrapper); + expect(wrapper.vm.selectedItems).toEqual([0]); + expect(deleteBtn).toBeDefined(); + expect(deleteBtn.attributes('disable')).toBe(undefined); + expect(deleteBtns.is('button')).toBe(true); + }); + + it('should allow deletion row by row', () => { + const deleteBtns = findDeleteButtonsRow(wrapper); + const deleteSingleItem = jest.fn(); + const deleteItem = jest.fn().mockResolvedValue(); + wrapper.setMethods({ deleteSingleItem, deleteItem }); + deleteBtns.at(0).trigger('click'); + expect(wrapper.vm.deleteSingleItem).toHaveBeenCalledWith(0); + wrapper.vm.handleSingleDelete(1); + expect(wrapper.vm.deleteItem).toHaveBeenCalledWith(1); + }); + }); + + describe('pagination', () => { + const repo = { + repoPropsData, + pagination: { + total: 20, + perPage: 2, + nextPage: 2, + }, + }; + + beforeEach(() => { + wrapper = mount(tableRegistry, { + propsData: { + repo, + }, + }); + }); + + it('should exist', () => { + const pagination = findPagination(wrapper); + expect(pagination.exists()).toBe(true); + }); + it('should be visible when pagination is needed', () => { + const pagination = findPagination(wrapper); + expect(pagination.isVisible()).toBe(true); + wrapper.setProps({ + repo: { + pagination: { + total: 0, + perPage: 10, + }, + }, + }); + expect(wrapper.vm.shouldRenderPagination).toBe(false); + }); + it('should have a change function that update the list when run', () => { + const fetchList = jest.fn().mockResolvedValue(); + wrapper.setMethods({ fetchList }); + wrapper.vm.onPageChange(1); + expect(wrapper.vm.fetchList).toHaveBeenCalledWith({ repo, page: 1 }); + }); + }); + + describe('modal content', () => { + it('should show the singular title and image name when deleting a single image', () => { + wrapper.setData({ selectedItems: [1, 2, 3] }); + wrapper.vm.deleteSingleItem(0); + expect(wrapper.vm.modalAction).toBe('Remove tag'); + expect(wrapper.vm.modalDescription).toContain(firstImage.tag); + }); + + it('should show the plural title and image count when deleting more than one image', () => { + wrapper.setData({ selectedItems: [1, 2] }); + wrapper.vm.deleteMultipleItems(); + + expect(wrapper.vm.modalAction).toBe('Remove tags'); + expect(wrapper.vm.modalDescription).toContain('<b>2</b> tags'); + }); + }); + + describe('disabled delete', () => { + beforeEach(() => { + store = new Vuex.Store({ + state: { + isDeleteDisabled: true, + }, + getters, + }); + wrapper = mountWithStore({ + propsData: { + repo: repoPropsData, + canDeleteRepo: false, + }, + }); + }); + + it('should not render select all', () => { + const selectAll = findSelectAllCheckbox(wrapper); + expect(selectAll.exists()).toBe(false); + }); + + it('should not render any select checkbox', () => { + const selects = findSelectCheckboxes(wrapper); + expect(selects.length).toBe(0); + }); + + it('should not render delete registry button', () => { + const deleteBtn = findDeleteButton(wrapper); + expect(deleteBtn.exists()).toBe(false); + }); + + it('should not render delete row button', () => { + const deleteBtns = findDeleteButtonsRow(wrapper); + expect(deleteBtns.length).toBe(0); + }); + }); +}); diff --git a/spec/frontend/registry/mock_data.js b/spec/frontend/registry/mock_data.js new file mode 100644 index 00000000000..130ab298e89 --- /dev/null +++ b/spec/frontend/registry/mock_data.js @@ -0,0 +1,134 @@ +export const defaultState = { + isLoading: false, + endpoint: '', + repos: [], +}; + +export const reposServerResponse = [ + { + destroy_path: 'path', + id: '123', + location: 'location', + path: 'foo', + tags_path: 'tags_path', + }, + { + destroy_path: 'path_', + id: '456', + location: 'location_', + path: 'bar', + tags_path: 'tags_path_', + }, +]; + +export const registryServerResponse = [ + { + name: 'centos7', + short_revision: 'b118ab5b0', + revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43', + total_size: 679, + layers: 19, + location: 'location', + created_at: 1505828744434, + destroy_path: 'path_', + }, + { + name: 'centos6', + short_revision: 'b118ab5b0', + revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43', + total_size: 679, + layers: 19, + location: 'location', + created_at: 1505828744434, + }, +]; + +export const parsedReposServerResponse = [ + { + canDelete: true, + destroyPath: reposServerResponse[0].destroy_path, + id: reposServerResponse[0].id, + isLoading: false, + list: [], + location: reposServerResponse[0].location, + name: reposServerResponse[0].path, + tagsPath: reposServerResponse[0].tags_path, + }, + { + canDelete: true, + destroyPath: reposServerResponse[1].destroy_path, + id: reposServerResponse[1].id, + isLoading: false, + list: [], + location: reposServerResponse[1].location, + name: reposServerResponse[1].path, + tagsPath: reposServerResponse[1].tags_path, + }, +]; + +export const parsedRegistryServerResponse = [ + { + tag: registryServerResponse[0].name, + revision: registryServerResponse[0].revision, + shortRevision: registryServerResponse[0].short_revision, + size: registryServerResponse[0].total_size, + layers: registryServerResponse[0].layers, + location: registryServerResponse[0].location, + createdAt: registryServerResponse[0].created_at, + destroyPath: registryServerResponse[0].destroy_path, + canDelete: true, + }, + { + tag: registryServerResponse[1].name, + revision: registryServerResponse[1].revision, + shortRevision: registryServerResponse[1].short_revision, + size: registryServerResponse[1].total_size, + layers: registryServerResponse[1].layers, + location: registryServerResponse[1].location, + createdAt: registryServerResponse[1].created_at, + destroyPath: registryServerResponse[1].destroy_path, + canDelete: false, + }, +]; + +export const repoPropsData = { + canDelete: true, + destroyPath: 'path', + id: '123', + isLoading: false, + list: [ + { + tag: 'centos6', + revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43', + shortRevision: 'b118ab5b0', + size: 19, + layers: 10, + location: 'location', + createdAt: 1505828744434, + destroyPath: 'path', + canDelete: true, + }, + { + tag: 'test-image', + revision: 'b969de599faea2b3d9b6605a8b0897261c571acaa36db1bdc7349b5775b4e0b4', + shortRevision: 'b969de599', + size: 19, + layers: 10, + location: 'location-2', + createdAt: 1505828744434, + destroyPath: 'path-2', + canDelete: true, + }, + ], + location: 'location', + name: 'foo', + tagsPath: 'path', + pagination: { + perPage: 5, + page: 1, + total: 13, + totalPages: 1, + nextPage: null, + previousPage: null, + }, +}; diff --git a/spec/frontend/registry/stores/actions_spec.js b/spec/frontend/registry/stores/actions_spec.js new file mode 100644 index 00000000000..7937fa82e80 --- /dev/null +++ b/spec/frontend/registry/stores/actions_spec.js @@ -0,0 +1,203 @@ +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import * as actions from '~/registry/stores/actions'; +import * as types from '~/registry/stores/mutation_types'; +import { TEST_HOST } from '../../helpers/test_constants'; +import testAction from '../../helpers/vuex_action_helper'; +import createFlash from '~/flash'; + +import { + reposServerResponse, + registryServerResponse, + parsedReposServerResponse, +} from '../mock_data'; + +jest.mock('~/flash.js'); + +describe('Actions Registry Store', () => { + let mock; + let state; + + beforeEach(() => { + mock = new MockAdapter(axios); + state = { + endpoint: `${TEST_HOST}/endpoint.json`, + }; + }); + + afterEach(() => { + mock.restore(); + }); + + describe('fetchRepos', () => { + beforeEach(() => { + mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(200, reposServerResponse, {}); + }); + + it('should set received repos', done => { + testAction( + actions.fetchRepos, + null, + state, + [ + { type: types.TOGGLE_MAIN_LOADING }, + { type: types.TOGGLE_MAIN_LOADING }, + { type: types.SET_REPOS_LIST, payload: reposServerResponse }, + ], + [], + done, + ); + }); + + it('should create flash on API error', done => { + testAction( + actions.fetchRepos, + null, + { + endpoint: null, + }, + [{ type: types.TOGGLE_MAIN_LOADING }, { type: types.TOGGLE_MAIN_LOADING }], + [], + () => { + expect(createFlash).toHaveBeenCalled(); + done(); + }, + ); + }); + }); + + describe('fetchList', () => { + let repo; + beforeEach(() => { + state.repos = parsedReposServerResponse; + [, repo] = state.repos; + }); + + it('should set received list', done => { + mock.onGet(repo.tagsPath).replyOnce(200, registryServerResponse, {}); + testAction( + actions.fetchList, + { repo }, + state, + [ + { type: types.TOGGLE_REGISTRY_LIST_LOADING, payload: repo }, + { type: types.TOGGLE_REGISTRY_LIST_LOADING, payload: repo }, + { + type: types.SET_REGISTRY_LIST, + payload: { + repo, + resp: registryServerResponse, + headers: expect.anything(), + }, + }, + ], + [], + done, + ); + }); + + it('should create flash on API error', done => { + mock.onGet(repo.tagsPath).replyOnce(400); + const updatedRepo = { + ...repo, + tagsPath: null, + }; + testAction( + actions.fetchList, + { + repo: updatedRepo, + }, + state, + [ + { type: types.TOGGLE_REGISTRY_LIST_LOADING, payload: updatedRepo }, + { type: types.TOGGLE_REGISTRY_LIST_LOADING, payload: updatedRepo }, + ], + [], + () => { + expect(createFlash).toHaveBeenCalled(); + done(); + }, + ); + }); + }); + + describe('setMainEndpoint', () => { + it('should commit set main endpoint', done => { + testAction( + actions.setMainEndpoint, + 'endpoint', + state, + [{ type: types.SET_MAIN_ENDPOINT, payload: 'endpoint' }], + [], + done, + ); + }); + }); + + describe('setIsDeleteDisabled', () => { + it('should commit set is delete disabled', done => { + testAction( + actions.setIsDeleteDisabled, + true, + state, + [{ type: types.SET_IS_DELETE_DISABLED, payload: true }], + [], + done, + ); + }); + }); + + describe('toggleLoading', () => { + it('should commit toggle main loading', done => { + testAction( + actions.toggleLoading, + null, + state, + [{ type: types.TOGGLE_MAIN_LOADING }], + [], + done, + ); + }); + }); + + describe('deleteItem and multiDeleteItems', () => { + let deleted; + const destroyPath = `${TEST_HOST}/mygroup/myproject/container_registry/1.json`; + + const expectDelete = done => { + expect(mock.history.delete.length).toBe(1); + expect(deleted).toBe(true); + done(); + }; + + beforeEach(() => { + deleted = false; + mock.onDelete(destroyPath).replyOnce(() => { + deleted = true; + return [200]; + }); + }); + + it('deleteItem should perform DELETE request on destroyPath', done => { + testAction( + actions.deleteItem, + { + destroyPath, + }, + state, + ) + .then(() => { + expectDelete(done); + }) + .catch(done.fail); + }); + + it('multiDeleteItems should perform DELETE request on path', done => { + testAction(actions.multiDeleteItems, { path: destroyPath, items: [1] }, state) + .then(() => { + expectDelete(done); + }) + .catch(done.fail); + }); + }); +}); diff --git a/spec/frontend/registry/getters_spec.js b/spec/frontend/registry/stores/getters_spec.js index 839aa718997..c16f520223b 100644 --- a/spec/frontend/registry/getters_spec.js +++ b/spec/frontend/registry/stores/getters_spec.js @@ -7,6 +7,7 @@ describe('Getters Registry Store', () => { state = { isLoading: false, endpoint: '/root/empty-project/container_registry.json', + isDeleteDisabled: false, repos: [ { canDelete: true, @@ -43,4 +44,9 @@ describe('Getters Registry Store', () => { expect(getters.repos(state)).toEqual(state.repos); }); }); + describe('isDeleteDisabled', () => { + it('should return isDeleteDisabled', () => { + expect(getters.isDeleteDisabled(state)).toEqual(state.isDeleteDisabled); + }); + }); }); diff --git a/spec/frontend/registry/stores/mutations_spec.js b/spec/frontend/registry/stores/mutations_spec.js new file mode 100644 index 00000000000..1d583028ca6 --- /dev/null +++ b/spec/frontend/registry/stores/mutations_spec.js @@ -0,0 +1,94 @@ +import mutations from '~/registry/stores/mutations'; +import * as types from '~/registry/stores/mutation_types'; +import { + defaultState, + reposServerResponse, + registryServerResponse, + parsedReposServerResponse, + parsedRegistryServerResponse, +} from '../mock_data'; + +describe('Mutations Registry Store', () => { + let mockState; + beforeEach(() => { + mockState = defaultState; + }); + + describe('SET_MAIN_ENDPOINT', () => { + it('should set the main endpoint', () => { + const expectedState = Object.assign({}, mockState, { endpoint: 'foo' }); + mutations[types.SET_MAIN_ENDPOINT](mockState, 'foo'); + + expect(mockState.endpoint).toEqual(expectedState.endpoint); + }); + }); + + describe('SET_IS_DELETE_DISABLED', () => { + it('should set the is delete disabled', () => { + const expectedState = Object.assign({}, mockState, { isDeleteDisabled: true }); + mutations[types.SET_IS_DELETE_DISABLED](mockState, true); + + expect(mockState.isDeleteDisabled).toEqual(expectedState.isDeleteDisabled); + }); + }); + + describe('SET_REPOS_LIST', () => { + it('should set a parsed repository list', () => { + mutations[types.SET_REPOS_LIST](mockState, reposServerResponse); + + expect(mockState.repos).toEqual(parsedReposServerResponse); + }); + }); + + describe('TOGGLE_MAIN_LOADING', () => { + it('should set a parsed repository list', () => { + mutations[types.TOGGLE_MAIN_LOADING](mockState); + + expect(mockState.isLoading).toEqual(true); + }); + }); + + describe('SET_REGISTRY_LIST', () => { + it('should set a list of registries in a specific repository', () => { + mutations[types.SET_REPOS_LIST](mockState, reposServerResponse); + mutations[types.SET_REGISTRY_LIST](mockState, { + repo: mockState.repos[0], + resp: registryServerResponse, + headers: { + 'x-per-page': 2, + 'x-page': 1, + 'x-total': 10, + }, + }); + + expect(mockState.repos[0].list).toEqual(parsedRegistryServerResponse); + expect(mockState.repos[0].pagination).toEqual({ + perPage: 2, + page: 1, + total: 10, + totalPages: NaN, + nextPage: NaN, + previousPage: NaN, + }); + }); + }); + + describe('TOGGLE_REGISTRY_LIST_LOADING', () => { + it('should toggle isLoading property for a specific repository', () => { + mutations[types.SET_REPOS_LIST](mockState, reposServerResponse); + mutations[types.SET_REGISTRY_LIST](mockState, { + repo: mockState.repos[0], + resp: registryServerResponse, + headers: { + 'x-per-page': 2, + 'x-page': 1, + 'x-total': 10, + }, + }); + + mutations[types.TOGGLE_REGISTRY_LIST_LOADING](mockState, mockState.repos[0]); + + expect(mockState.repos[0].isLoading).toEqual(true); + }); + }); +}); |