Add latest changes from gitlab-org/gitlab@master

5 files changed, 72 insertions, 71 deletions

diff --git a/spec/frontend/captcha/captcha_modal_spec.js b/spec/frontend/captcha/captcha_modal_spec.js
index efe4293190c..6d6d8043797 100644
--- a/spec/frontend/captcha/captcha_modal_spec.js
+++ b/spec/frontend/captcha/captcha_modal_spec.js
@@ -1,6 +1,5 @@
 import { GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import { stubComponent } from 'helpers/stub_component';
 import CaptchaModal from '~/captcha/captcha_modal.vue';
 import { initRecaptchaScript } from '~/captcha/init_recaptcha_script';
@@ -9,10 +8,11 @@ jest.mock('~/captcha/init_recaptcha_script');
 
 describe('Captcha Modal', () => {
   let wrapper;
-  let modal;
   let grecaptcha;
 
   const captchaSiteKey = 'abc123';
+  const showSpy = jest.fn();
+  const hideSpy = jest.fn();
 
   function createComponent({ props = {} } = {}) {
     wrapper = shallowMount(CaptchaModal, {
@@ -21,11 +21,18 @@ describe('Captcha Modal', () => {
         ...props,
       },
       stubs: {
-        GlModal: stubComponent(GlModal),
+        GlModal: stubComponent(GlModal, {
+          methods: {
+            show: showSpy,
+            hide: hideSpy,
+          },
+        }),
       },
     });
   }
 
+  const findGlModal = () => wrapper.findComponent(GlModal);
+
   beforeEach(() => {
     grecaptcha = {
       render: jest.fn(),
@@ -34,33 +41,17 @@ describe('Captcha Modal', () => {
     initRecaptchaScript.mockResolvedValue(grecaptcha);
   });
 
-  const findGlModal = () => {
-    const glModal = wrapper.findComponent(GlModal);
-
-    jest.spyOn(glModal.vm, 'show').mockImplementation(() => glModal.vm.$emit('shown'));
-    jest
-      .spyOn(glModal.vm, 'hide')
-      .mockImplementation(() => glModal.vm.$emit('hide', { trigger: '' }));
-
-    return glModal;
-  };
-
-  const showModal = () => {
-    wrapper.setProps({ needsCaptchaResponse: true });
-  };
-
-  beforeEach(() => {
-    createComponent();
-    modal = findGlModal();
-  });
-
   describe('rendering', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     it('renders', () => {
-      expect(modal.exists()).toBe(true);
+      expect(findGlModal().exists()).toBe(true);
     });
 
     it('assigns the modal a unique ID', () => {
-      const firstInstanceModalId = modal.props('modalId');
+      const firstInstanceModalId = findGlModal().props('modalId');
       createComponent();
       const secondInstanceModalId = findGlModal().props('modalId');
       expect(firstInstanceModalId).not.toEqual(secondInstanceModalId);
@@ -71,13 +62,12 @@ describe('Captcha Modal', () => {
     describe('when modal is shown', () => {
       describe('when initRecaptchaScript promise resolves successfully', () => {
         beforeEach(async () => {
-          showModal();
-
-          await nextTick();
+          createComponent({ props: { needsCaptchaResponse: true } });
+          findGlModal().vm.$emit('shown');
         });
 
         it('shows modal', async () => {
-          expect(findGlModal().vm.show).toHaveBeenCalled();
+          expect(showSpy).toHaveBeenCalled();
         });
 
         it('renders window.grecaptcha', () => {
@@ -103,7 +93,7 @@ describe('Captcha Modal', () => {
           it('hides modal with null trigger', async () => {
             // Assert that hide is called with zero args, so that we don't trigger the logic
             // for hiding the modal via cancel, esc, headerclose, etc, without a captcha response
-            expect(modal.vm.hide).toHaveBeenCalledWith();
+            expect(hideSpy).toHaveBeenCalledWith();
           });
         });
 
@@ -122,7 +112,7 @@ describe('Captcha Modal', () => {
               const bvModalEvent = {
                 trigger,
               };
-              modal.vm.$emit('hide', bvModalEvent);
+              findGlModal().vm.$emit('hide', bvModalEvent);
             });
 
             it(`emits receivedCaptchaResponse with ${JSON.stringify(expected)}`, () => {
@@ -136,21 +126,24 @@ describe('Captcha Modal', () => {
         const fakeError = {};
 
         beforeEach(() => {
-          initRecaptchaScript.mockImplementation(() => Promise.reject(fakeError));
+          createComponent({
+            props: { needsCaptchaResponse: true },
+          });
 
+          initRecaptchaScript.mockImplementation(() => Promise.reject(fakeError));
           jest.spyOn(console, 'error').mockImplementation();
 
-          showModal();
+          findGlModal().vm.$emit('shown');
         });
 
         it('emits receivedCaptchaResponse exactly once with null', () => {
           expect(wrapper.emitted('receivedCaptchaResponse')).toEqual([[null]]);
         });
 
-        it('hides modal with null trigger', async () => {
+        it('hides modal with null trigger', () => {
           // Assert that hide is called with zero args, so that we don't trigger the logic
           // for hiding the modal via cancel, esc, headerclose, etc, without a captcha response
-          expect(modal.vm.hide).toHaveBeenCalledWith();
+          expect(hideSpy).toHaveBeenCalledWith();
         });
 
         it('calls console.error with a message and the exception', () => {
diff --git a/spec/frontend/editor/components/helpers.js b/spec/frontend/editor/components/helpers.js
index 12f90390c18..5cc66dd2ae0 100644
--- a/spec/frontend/editor/components/helpers.js
+++ b/spec/frontend/editor/components/helpers.js
@@ -1,4 +1,3 @@
-import { EDITOR_TOOLBAR_RIGHT_GROUP } from '~/editor/constants';
 import { apolloProvider } from '~/editor/components/source_editor_toolbar_graphql';
 import getToolbarItemsQuery from '~/editor/graphql/get_items.query.graphql';
 
@@ -9,7 +8,7 @@ export const buildButton = (id = 'foo-bar-btn', options = {}) => {
     label: options.label || 'Foo Bar Button',
     icon: options.icon || 'check',
     selected: options.selected || false,
-    group: options.group || EDITOR_TOOLBAR_RIGHT_GROUP,
+    group: options.group,
     onClick: options.onClick || (() => {}),
     category: options.category || 'primary',
     selectedLabel: options.selectedLabel || 'smth',
diff --git a/spec/frontend/editor/components/source_editor_toolbar_spec.js b/spec/frontend/editor/components/source_editor_toolbar_spec.js
index 132b5739be2..f737340a317 100644
--- a/spec/frontend/editor/components/source_editor_toolbar_spec.js
+++ b/spec/frontend/editor/components/source_editor_toolbar_spec.js
@@ -5,7 +5,7 @@ import { shallowMount } from '@vue/test-utils';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import SourceEditorToolbar from '~/editor/components/source_editor_toolbar.vue';
 import SourceEditorToolbarButton from '~/editor/components/source_editor_toolbar_button.vue';
-import { EDITOR_TOOLBAR_LEFT_GROUP, EDITOR_TOOLBAR_RIGHT_GROUP } from '~/editor/constants';
+import { EDITOR_TOOLBAR_BUTTON_GROUPS } from '~/editor/constants';
 import getToolbarItemsQuery from '~/editor/graphql/get_items.query.graphql';
 import { buildButton } from './helpers';
 
@@ -45,18 +45,19 @@ describe('Source Editor Toolbar', () => {
 
   describe('groups', () => {
     it.each`
-      group                         | expectedGroup
-      ${EDITOR_TOOLBAR_LEFT_GROUP}  | ${EDITOR_TOOLBAR_LEFT_GROUP}
-      ${EDITOR_TOOLBAR_RIGHT_GROUP} | ${EDITOR_TOOLBAR_RIGHT_GROUP}
-      ${undefined}                  | ${EDITOR_TOOLBAR_RIGHT_GROUP}
-      ${'non-existing'}             | ${EDITOR_TOOLBAR_RIGHT_GROUP}
+      group                                    | expectedGroup
+      ${EDITOR_TOOLBAR_BUTTON_GROUPS.file}     | ${EDITOR_TOOLBAR_BUTTON_GROUPS.file}
+      ${EDITOR_TOOLBAR_BUTTON_GROUPS.edit}     | ${EDITOR_TOOLBAR_BUTTON_GROUPS.edit}
+      ${EDITOR_TOOLBAR_BUTTON_GROUPS.settings} | ${EDITOR_TOOLBAR_BUTTON_GROUPS.settings}
+      ${undefined}                             | ${EDITOR_TOOLBAR_BUTTON_GROUPS.settings}
+      ${'non-existing'}                        | ${EDITOR_TOOLBAR_BUTTON_GROUPS.settings}
     `('puts item with group="$group" into $expectedGroup group', ({ group, expectedGroup }) => {
       const item = buildButton('first', {
         group,
       });
       createComponentWithApollo([item]);
       expect(findButtons()).toHaveLength(1);
-      [EDITOR_TOOLBAR_RIGHT_GROUP, EDITOR_TOOLBAR_LEFT_GROUP].forEach((g) => {
+      Object.keys(EDITOR_TOOLBAR_BUTTON_GROUPS).forEach((g) => {
         if (g === expectedGroup) {
           expect(wrapper.vm.getGroupItems(g)).toEqual([expect.objectContaining({ id: 'first' })]);
         } else {
@@ -69,7 +70,7 @@ describe('Source Editor Toolbar', () => {
   describe('buttons update', () => {
     it('properly updates buttons on Apollo cache update', async () => {
       const item = buildButton('first', {
-        group: EDITOR_TOOLBAR_RIGHT_GROUP,
+        group: EDITOR_TOOLBAR_BUTTON_GROUPS.edit,
       });
       createComponentWithApollo();
 
@@ -94,12 +95,15 @@ describe('Source Editor Toolbar', () => {
   describe('click handler', () => {
     it('emits the "click" event when a button is clicked', () => {
       const item1 = buildButton('first', {
-        group: EDITOR_TOOLBAR_LEFT_GROUP,
+        group: EDITOR_TOOLBAR_BUTTON_GROUPS.file,
       });
       const item2 = buildButton('second', {
-        group: EDITOR_TOOLBAR_RIGHT_GROUP,
+        group: EDITOR_TOOLBAR_BUTTON_GROUPS.edit,
       });
-      createComponentWithApollo([item1, item2]);
+      const item3 = buildButton('third', {
+        group: EDITOR_TOOLBAR_BUTTON_GROUPS.settings,
+      });
+      createComponentWithApollo([item1, item2, item3]);
       jest.spyOn(wrapper.vm, '$emit');
       expect(wrapper.vm.$emit).not.toHaveBeenCalled();
 
@@ -109,7 +113,10 @@ describe('Source Editor Toolbar', () => {
       findButtons().at(1).vm.$emit('click');
       expect(wrapper.vm.$emit).toHaveBeenCalledWith('click', item2);
 
-      expect(wrapper.vm.$emit.mock.calls).toHaveLength(2);
+      findButtons().at(2).vm.$emit('click');
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('click', item3);
+
+      expect(wrapper.vm.$emit.mock.calls).toHaveLength(3);
     });
   });
 });
diff --git a/spec/frontend/issuable/related_issues/components/related_issues_block_spec.js b/spec/frontend/issuable/related_issues/components/related_issues_block_spec.js
index ff8d5073005..b9580b90c12 100644
--- a/spec/frontend/issuable/related_issues/components/related_issues_block_spec.js
+++ b/spec/frontend/issuable/related_issues/components/related_issues_block_spec.js
@@ -1,5 +1,5 @@
 import { nextTick } from 'vue';
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlCard } from '@gitlab/ui';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import {
   issuable1,
@@ -78,6 +78,9 @@ describe('RelatedIssuesBlock', () => {
           pathIdSeparator: PathIdSeparator.Issue,
           issuableType: 'issue',
         },
+        stubs: {
+          GlCard,
+        },
         slots: { 'header-text': headerText },
       });
 
@@ -94,6 +97,9 @@ describe('RelatedIssuesBlock', () => {
           pathIdSeparator: PathIdSeparator.Issue,
           issuableType: 'issue',
         },
+        stubs: {
+          GlCard,
+        },
         slots: { 'header-actions': headerActions },
       });
 
@@ -222,6 +228,9 @@ describe('RelatedIssuesBlock', () => {
             pathIdSeparator: PathIdSeparator.Issue,
             issuableType,
           },
+          stubs: {
+            GlCard,
+          },
         });
 
         const iconComponent = wrapper.findComponent(GlIcon);
@@ -239,6 +248,9 @@ describe('RelatedIssuesBlock', () => {
           relatedIssues: [issuable1, issuable2, issuable3],
           issuableType: TYPE_ISSUE,
         },
+        stubs: {
+          GlCard,
+        },
       });
     });
 
diff --git a/spec/frontend/ml/experiment_tracking/routes/experiments/show/ml_experiments_show_spec.js b/spec/frontend/ml/experiment_tracking/routes/experiments/show/ml_experiments_show_spec.js
index d1450c4f4ab..97a5049ea88 100644
--- a/spec/frontend/ml/experiment_tracking/routes/experiments/show/ml_experiments_show_spec.js
+++ b/spec/frontend/ml/experiment_tracking/routes/experiments/show/ml_experiments_show_spec.js
@@ -1,5 +1,4 @@
-import { GlAlert, GlTable, GlLink } from '@gitlab/ui';
-import { nextTick } from 'vue';
+import { GlAlert, GlTableLite, GlLink, GlEmptyState } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import MlExperimentsShow from '~/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue';
 import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue';
@@ -28,9 +27,9 @@ describe('MlExperimentsShow', () => {
 
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findPagination = () => wrapper.findComponent(Pagination);
-  const findEmptyState = () => wrapper.findByText('No candidates to display');
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findRegistrySearch = () => wrapper.findComponent(RegistrySearch);
-  const findTable = () => wrapper.findComponent(GlTable);
+  const findTable = () => wrapper.findComponent(GlTableLite);
   const findTableHeaders = () => findTable().findAll('th');
   const findTableRows = () => findTable().findAll('tbody > tr');
   const findNthTableRow = (idx) => findTableRows().at(idx);
@@ -47,8 +46,6 @@ describe('MlExperimentsShow', () => {
   describe('default inputs', () => {
     beforeEach(async () => {
       createWrapper();
-
-      await nextTick();
     });
 
     it('shows empty state', () => {
@@ -59,8 +56,8 @@ describe('MlExperimentsShow', () => {
       expect(findPagination().exists()).toBe(false);
     });
 
-    it('there are no columns', () => {
-      expect(findTable().findAll('th')).toHaveLength(0);
+    it('does not show table', () => {
+      expect(findTable().exists()).toBe(false);
     });
 
     it('initializes sorting correctly', () => {
@@ -197,13 +194,12 @@ describe('MlExperimentsShow', () => {
       const expectedColumnNames = [
         'Name',
         'Created at',
-        'User',
+        'Author',
         'L1 Ratio',
         'Rmse',
         'Auc',
         'Mae',
-        '',
-        '',
+        'Artifacts',
       ];
 
       expect(findTableHeaders().wrappers.map((h) => h.text())).toEqual(expectedColumnNames);
@@ -219,7 +215,9 @@ describe('MlExperimentsShow', () => {
       });
 
       it('shows empty state when no artifact', () => {
-        expect(findColumnInRow(secondCandidateIndex, artifactColumnIndex).text()).toBe('-');
+        expect(findColumnInRow(secondCandidateIndex, artifactColumnIndex).text()).toBe(
+          'No artifacts',
+        );
       });
     });
 
@@ -250,15 +248,7 @@ describe('MlExperimentsShow', () => {
       });
 
       it('when there is no user shows nothing', () => {
-        expect(findColumnInRow(secondCandidateIndex, nameColumnIndex).text()).toBe('');
-      });
-    });
-
-    describe('Detail column', () => {
-      const detailColumn = -2;
-
-      it('is a link to details', () => {
-        expect(hrefInRowAndColumn(firstCandidateIndex, detailColumn)).toBe(firstCandidate.details);
+        expect(findColumnInRow(secondCandidateIndex, nameColumnIndex).text()).toBe('No name');
       });
     });
   });