Commit 1cd16360 authored by Fatih Acet's avatar Fatih Acet

Merge branch '36827-refactor-package-and-container-registry-tests-helpers-function' into 'master'

Refactor package and container registry tests helpers

Closes #36827

See merge request gitlab-org/gitlab!20484
parents c6ddde61 5348be41
......@@ -6,9 +6,9 @@ describe('packages_list_app', () => {
let wrapper;
const emptyListHelpUrl = 'helpUrl';
const findGlEmptyState = (w = wrapper) => w.find({ name: 'gl-empty-state-stub' });
const findListComponent = (w = wrapper) => w.find({ name: 'package-list' });
const findLoadingComponent = (w = wrapper) => w.find({ name: 'gl-loading-icon' });
const findGlEmptyState = () => wrapper.find({ name: 'gl-empty-state-stub' });
const findListComponent = () => wrapper.find({ name: 'package-list' });
const findLoadingComponent = () => wrapper.find({ name: 'gl-loading-icon' });
const componentConfig = {
stubs: {
......
......@@ -8,13 +8,13 @@ import { packageList } from '../../mock_data';
describe('packages_list', () => {
let wrapper;
const findFirstActionColumn = (w = wrapper) => w.find({ ref: 'action-delete' });
const findPackageListTable = (w = wrapper) => w.find({ ref: 'packageListTable' });
const findPackageListSorting = (w = wrapper) => w.find({ ref: 'packageListSorting' });
const findPackageListPagination = (w = wrapper) => w.find({ ref: 'packageListPagination' });
const findPackageListDeleteModal = (w = wrapper) => w.find({ ref: 'packageListDeleteModal' });
const findSortingItems = (w = wrapper) => w.findAll({ name: 'sorting-item-stub' });
const findFirstProjectColumn = (w = wrapper) => w.find({ ref: 'col-project' });
const findFirstActionColumn = () => wrapper.find({ ref: 'action-delete' });
const findPackageListTable = () => wrapper.find({ ref: 'packageListTable' });
const findPackageListSorting = () => wrapper.find({ ref: 'packageListSorting' });
const findPackageListPagination = () => wrapper.find({ ref: 'packageListPagination' });
const findPackageListDeleteModal = () => wrapper.find({ ref: 'packageListDeleteModal' });
const findSortingItems = () => wrapper.findAll({ name: 'sorting-item-stub' });
const findFirstProjectColumn = () => wrapper.find({ ref: 'col-project' });
const defaultShallowMountOptions = {
stubs: {
......@@ -143,7 +143,7 @@ describe('packages_list', () => {
});
describe('when the list is empty', () => {
const findEmptySlot = (w = wrapper) => w.find({ name: 'empty-slot-stub' });
const findEmptySlot = () => wrapper.find({ name: 'empty-slot-stub' });
beforeEach(() => {
wrapper = shallowMount(PackagesList, {
......
......@@ -7,11 +7,11 @@ 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 findCollapsibleContainer = () => wrapper.findAll({ name: 'CollapsibeContainerRegisty' });
const findProjectEmptyState = () => wrapper.find({ name: 'ProjectEmptyState' });
const findGroupEmptyState = () => wrapper.find({ name: 'GroupEmptyState' });
const findSpinner = () => wrapper.find('.gl-spinner');
const findCharacterErrorText = () => wrapper.find('.js-character-error-text');
const propsData = {
endpoint: `${TEST_HOST}/foo`,
......@@ -59,16 +59,15 @@ describe('Registry List', () => {
describe('with data', () => {
it('should render a list of CollapsibeContainerRegisty', () => {
const containers = findCollapsibleContainer(wrapper);
const containers = findCollapsibleContainer();
expect(wrapper.vm.repos.length).toEqual(reposServerResponse.length);
expect(containers.length).toEqual(reposServerResponse.length);
});
});
describe('without data', () => {
let localWrapper;
beforeEach(() => {
localWrapper = mount(registry, {
wrapper = mount(registry, {
attachToDocument: true,
sync: false,
propsData,
......@@ -82,16 +81,14 @@ describe('Registry List', () => {
});
it('should render project empty message', () => {
const projectEmptyState = findProjectEmptyState(localWrapper);
const projectEmptyState = findProjectEmptyState();
expect(projectEmptyState.exists()).toBe(true);
});
});
describe('while loading data', () => {
let localWrapper;
beforeEach(() => {
localWrapper = mount(registry, {
wrapper = mount(registry, {
propsData,
computed: {
repos() {
......@@ -106,16 +103,14 @@ describe('Registry List', () => {
});
it('should render a loading spinner', () => {
const spinner = findSpinner(localWrapper);
const spinner = findSpinner();
expect(spinner.exists()).toBe(true);
});
});
describe('invalid characters in path', () => {
let localWrapper;
beforeEach(() => {
localWrapper = mount(registry, {
wrapper = mount(registry, {
propsData: {
...propsData,
characterError: true,
......@@ -130,7 +125,7 @@ describe('Registry List', () => {
});
it('should render invalid characters error message', () => {
const characterErrorText = findCharacterErrorText(localWrapper);
const characterErrorText = findCharacterErrorText();
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',
);
......
......@@ -17,10 +17,10 @@ describe('collapsible registry container', () => {
let wrapper;
let store;
const findDeleteBtn = (w = wrapper) => w.find('.js-remove-repo');
const findContainerImageTags = (w = wrapper) => w.find('.container-image-tags');
const findToggleRepos = (w = wrapper) => w.findAll('.js-toggle-repo');
const findDeleteModal = (w = wrapper) => w.find({ ref: 'deleteModal' });
const findDeleteBtn = () => wrapper.find('.js-remove-repo');
const findContainerImageTags = () => wrapper.find('.container-image-tags');
const findToggleRepos = () => wrapper.findAll('.js-toggle-repo');
const findDeleteModal = () => wrapper.find({ ref: 'deleteModal' });
const mountWithStore = config =>
mount(collapsibleComponent, {
......@@ -62,7 +62,7 @@ describe('collapsible registry container', () => {
});
const expectIsClosed = () => {
const container = findContainerImageTags(wrapper);
const container = findContainerImageTags();
expect(container.exists()).toBe(false);
expect(wrapper.vm.iconName).toEqual('angle-right');
};
......@@ -70,18 +70,20 @@ describe('collapsible registry container', () => {
it('should be closed by default', () => {
expectIsClosed();
});
it('should be open when user clicks on closed repo', done => {
const toggleRepos = findToggleRepos(wrapper);
const toggleRepos = findToggleRepos();
toggleRepos.at(0).trigger('click');
Vue.nextTick(() => {
const container = findContainerImageTags(wrapper);
const container = findContainerImageTags();
expect(container.exists()).toBe(true);
expect(wrapper.vm.fetchList).toHaveBeenCalled();
done();
});
});
it('should be closed when the user clicks on an opened repo', done => {
const toggleRepos = findToggleRepos(wrapper);
const toggleRepos = findToggleRepos();
toggleRepos.at(0).trigger('click');
Vue.nextTick(() => {
toggleRepos.at(0).trigger('click');
......@@ -95,7 +97,7 @@ describe('collapsible registry container', () => {
describe('delete repo', () => {
it('should be possible to delete a repo', () => {
const deleteBtn = findDeleteBtn(wrapper);
const deleteBtn = findDeleteBtn();
expect(deleteBtn.exists()).toBe(true);
});
......@@ -132,7 +134,7 @@ describe('collapsible registry container', () => {
});
it('should not render delete button', () => {
const deleteBtn = findDeleteBtn(wrapper);
const deleteBtn = findDeleteBtn();
expect(deleteBtn.exists()).toBe(false);
});
});
......
......@@ -19,13 +19,13 @@ describe('table registry', () => {
let wrapper;
let store;
const findSelectAllCheckbox = (w = wrapper) => w.find('.js-select-all-checkbox > input');
const findSelectCheckboxes = (w = wrapper) => w.findAll('.js-select-checkbox > input');
const findDeleteButton = (w = wrapper) => w.find({ ref: 'bulkDeleteButton' });
const findDeleteButtonsRow = (w = wrapper) => w.findAll('.js-delete-registry-row');
const findPagination = (w = wrapper) => w.find('.js-registry-pagination');
const findDeleteModal = (w = wrapper) => w.find({ ref: 'deleteModal' });
const findImageId = (w = wrapper) => w.find({ ref: 'imageId' });
const findSelectAllCheckbox = () => wrapper.find('.js-select-all-checkbox > input');
const findSelectCheckboxes = () => wrapper.findAll('.js-select-checkbox > input');
const findDeleteButton = () => wrapper.find({ ref: 'bulkDeleteButton' });
const findDeleteButtonsRow = () => wrapper.findAll('.js-delete-registry-row');
const findPagination = () => wrapper.find('.js-registry-pagination');
const findDeleteModal = () => wrapper.find({ ref: 'deleteModal' });
const findImageId = () => wrapper.find({ ref: 'imageId' });
const bulkDeletePath = 'path';
const mountWithStore = config =>
......@@ -83,8 +83,8 @@ describe('table registry', () => {
describe('multi select', () => {
it('selecting a row should enable delete button', done => {
const deleteBtn = findDeleteButton(wrapper);
const checkboxes = findSelectCheckboxes(wrapper);
const deleteBtn = findDeleteButton();
const checkboxes = findSelectCheckboxes();
expect(deleteBtn.attributes('disabled')).toBe('disabled');
......@@ -96,8 +96,8 @@ describe('table registry', () => {
});
it('selecting all checkbox should select all rows and enable delete button', done => {
const selectAll = findSelectAllCheckbox(wrapper);
const checkboxes = findSelectCheckboxes(wrapper);
const selectAll = findSelectAllCheckbox();
const checkboxes = findSelectCheckboxes();
selectAll.trigger('click');
Vue.nextTick(() => {
......@@ -108,8 +108,8 @@ describe('table registry', () => {
});
it('deselecting select all checkbox should deselect all rows and disable delete button', done => {
const checkboxes = findSelectCheckboxes(wrapper);
const selectAll = findSelectAllCheckbox(wrapper);
const checkboxes = findSelectCheckboxes();
const selectAll = findSelectAllCheckbox();
selectAll.trigger('click');
selectAll.trigger('click');
......@@ -123,11 +123,11 @@ describe('table registry', () => {
it('should delete multiple items when multiple items are selected', done => {
const multiDeleteItems = jest.fn().mockResolvedValue();
wrapper.setMethods({ multiDeleteItems });
const selectAll = findSelectAllCheckbox(wrapper);
const selectAll = findSelectAllCheckbox();
selectAll.trigger('click');
Vue.nextTick(() => {
const deleteBtn = findDeleteButton(wrapper);
const deleteBtn = findDeleteButton();
expect(wrapper.vm.selectedItems).toEqual([0, 1]);
expect(deleteBtn.attributes('disabled')).toEqual(undefined);
wrapper.setData({ itemsToBeDeleted: [...wrapper.vm.selectedItems] });
......@@ -165,8 +165,8 @@ describe('table registry', () => {
});
it('should be possible to delete a registry', () => {
const deleteBtn = findDeleteButton(wrapper);
const deleteBtns = findDeleteButtonsRow(wrapper);
const deleteBtn = findDeleteButton();
const deleteBtns = findDeleteButtonsRow();
expect(wrapper.vm.selectedItems).toEqual([0]);
expect(deleteBtn).toBeDefined();
expect(deleteBtn.attributes('disable')).toBe(undefined);
......@@ -174,7 +174,7 @@ describe('table registry', () => {
});
it('should allow deletion row by row', () => {
const deleteBtns = findDeleteButtonsRow(wrapper);
const deleteBtns = findDeleteButtonsRow();
const deleteSingleItem = jest.fn();
const deleteItem = jest.fn().mockResolvedValue();
wrapper.setMethods({ deleteSingleItem, deleteItem });
......@@ -225,11 +225,11 @@ describe('table registry', () => {
});
it('should exist', () => {
const pagination = findPagination(wrapper);
const pagination = findPagination();
expect(pagination.exists()).toBe(true);
});
it('should be visible when pagination is needed', () => {
const pagination = findPagination(wrapper);
const pagination = findPagination();
expect(pagination.isVisible()).toBe(true);
wrapper.setProps({
repo: {
......@@ -283,22 +283,22 @@ describe('table registry', () => {
});
it('should not render select all', () => {
const selectAll = findSelectAllCheckbox(wrapper);
const selectAll = findSelectAllCheckbox();
expect(selectAll.exists()).toBe(false);
});
it('should not render any select checkbox', () => {
const selects = findSelectCheckboxes(wrapper);
const selects = findSelectCheckboxes();
expect(selects.length).toBe(0);
});
it('should not render delete registry button', () => {
const deleteBtn = findDeleteButton(wrapper);
const deleteBtn = findDeleteButton();
expect(deleteBtn.exists()).toBe(false);
});
it('should not render delete row button', () => {
const deleteBtns = findDeleteButtonsRow(wrapper);
const deleteBtns = findDeleteButtonsRow();
expect(deleteBtns.length).toBe(0);
});
});
......
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