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

ee/spec/frontend/packages/list/components/packages_list_app_spec.js

@@ -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: {

ee/spec/frontend/packages/list/components/packages_list_spec.js

@@ -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, {

spec/frontend/registry/components/app_spec.js

@@ -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',
       );

spec/frontend/registry/components/collapsible_container_spec.js

@@ -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);
     });
   });

spec/frontend/registry/components/table_registry_spec.js

@@ -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);
     });
   });