Add latest changes from gitlab-org/gitlab@master

4 files changed, 163 insertions, 2 deletions

diff --git a/spec/frontend/registry/explorer/components/project_empty_state_spec.js b/spec/frontend/registry/explorer/components/project_empty_state_spec.js
index 8d4b6ca60a2..4b209646da9 100644
--- a/spec/frontend/registry/explorer/components/project_empty_state_spec.js
+++ b/spec/frontend/registry/explorer/components/project_empty_state_spec.js
@@ -3,6 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlSprintf } from '@gitlab/ui';
 import { GlEmptyState } from '../stubs';
 import projectEmptyState from '~/registry/explorer/components/project_empty_state.vue';
+import * as getters from '~/registry/explorer/stores/getters';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -23,6 +24,7 @@ describe('Registry Project Empty state', () => {
           noContainersImage: 'bazFoo',
         },
       },
+      getters,
     });
     wrapper = shallowMount(projectEmptyState, {
       localVue,
diff --git a/spec/frontend/registry/explorer/components/quickstart_dropdown_spec.js b/spec/frontend/registry/explorer/components/quickstart_dropdown_spec.js
new file mode 100644
index 00000000000..3dfe50ebe13
--- /dev/null
+++ b/spec/frontend/registry/explorer/components/quickstart_dropdown_spec.js
@@ -0,0 +1,95 @@
+import Vuex from 'vuex';
+import { mount, createLocalVue } from '@vue/test-utils';
+import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
+import * as getters from '~/registry/explorer/stores/getters';
+import QuickstartDropdown from '~/registry/explorer/components/quickstart_dropdown.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+
+import {
+  QUICK_START,
+  LOGIN_COMMAND_LABEL,
+  COPY_LOGIN_TITLE,
+  BUILD_COMMAND_LABEL,
+  COPY_BUILD_TITLE,
+  PUSH_COMMAND_LABEL,
+  COPY_PUSH_TITLE,
+} from '~/registry/explorer//constants';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('quickstart_dropdown', () => {
+  let wrapper;
+  let store;
+
+  const findDropdownButton = () => wrapper.find(GlDropdown);
+  const findFormGroups = () => wrapper.findAll(GlFormGroup);
+
+  const mountComponent = () => {
+    store = new Vuex.Store({
+      state: {
+        config: {
+          repositoryUrl: 'foo',
+          registryHostUrlWithPort: 'bar',
+        },
+      },
+      getters,
+    });
+    wrapper = mount(QuickstartDropdown, {
+      localVue,
+      store,
+    });
+  };
+
+  beforeEach(() => {
+    mountComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+    store = null;
+  });
+
+  it('shows the correct text on the button', () => {
+    expect(findDropdownButton().text()).toContain(QUICK_START);
+  });
+
+  describe.each`
+    index | id                    | labelText              | titleText           | getter
+    ${0}  | ${'docker-login-btn'} | ${LOGIN_COMMAND_LABEL} | ${COPY_LOGIN_TITLE} | ${'dockerLoginCommand'}
+    ${1}  | ${'docker-build-btn'} | ${BUILD_COMMAND_LABEL} | ${COPY_BUILD_TITLE} | ${'dockerBuildCommand'}
+    ${2}  | ${'docker-push-btn'}  | ${PUSH_COMMAND_LABEL}  | ${COPY_PUSH_TITLE}  | ${'dockerPushCommand'}
+  `('form group at $index', ({ index, id, labelText, titleText, getter }) => {
+    let formGroup;
+
+    const findFormInputGroup = parent => parent.find(GlFormInputGroup);
+    const findClipboardButton = parent => parent.find(ClipboardButton);
+
+    beforeEach(() => {
+      formGroup = findFormGroups().at(index);
+    });
+
+    it('exists', () => {
+      expect(formGroup.exists()).toBe(true);
+    });
+
+    it(`has a label ${labelText}`, () => {
+      expect(formGroup.text()).toBe(labelText);
+    });
+
+    it(`contains a form input group with ${id} id and with value equal to ${getter} getter`, () => {
+      const formInputGroup = findFormInputGroup(formGroup);
+      expect(formInputGroup.exists()).toBe(true);
+      expect(formInputGroup.attributes('id')).toBe(id);
+      expect(formInputGroup.props('value')).toBe(store.getters[getter]);
+    });
+
+    it(`contains a clipboard button with title of ${titleText} and text equal to ${getter} getter`, () => {
+      const clipBoardButton = findClipboardButton(formGroup);
+      expect(clipBoardButton.exists()).toBe(true);
+      expect(clipBoardButton.props('title')).toBe(titleText);
+      expect(clipBoardButton.props('text')).toBe(store.getters[getter]);
+    });
+  });
+});
diff --git a/spec/frontend/registry/explorer/pages/list_spec.js b/spec/frontend/registry/explorer/pages/list_spec.js
index 91c3c242ed4..5b713778495 100644
--- a/spec/frontend/registry/explorer/pages/list_spec.js
+++ b/spec/frontend/registry/explorer/pages/list_spec.js
@@ -3,6 +3,9 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlPagination, GlSkeletonLoader, GlSprintf } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import component from '~/registry/explorer/pages/list.vue';
+import QuickstartDropdown from '~/registry/explorer/components/quickstart_dropdown.vue';
+import GroupEmptyState from '~/registry/explorer/components/group_empty_state.vue';
+import ProjectEmptyState from '~/registry/explorer/components/project_empty_state.vue';
 import store from '~/registry/explorer/stores/';
 import { SET_MAIN_LOADING } from '~/registry/explorer/stores/mutation_types/';
 import { imagesListResponse } from '../mock_data';
@@ -24,6 +27,9 @@ describe('List Page', () => {
   const findDetailsLink = () => wrapper.find({ ref: 'detailsLink' });
   const findClipboardButton = () => wrapper.find({ ref: 'clipboardButton' });
   const findPagination = () => wrapper.find(GlPagination);
+  const findQuickStartDropdown = () => wrapper.find(QuickstartDropdown);
+  const findProjectEmptyState = () => wrapper.find(ProjectEmptyState);
+  const findGroupEmptyState = () => wrapper.find(GroupEmptyState);
 
   beforeEach(() => {
     wrapper = shallowMount(component, {
@@ -76,7 +82,7 @@ describe('List Page', () => {
     });
   });
 
-  describe('when isLoading is true', () => {
+  describe('isLoading is true', () => {
     beforeAll(() => store.commit(SET_MAIN_LOADING, true));
 
     afterAll(() => store.commit(SET_MAIN_LOADING, false));
@@ -88,9 +94,49 @@ describe('List Page', () => {
     it('imagesList is not visible', () => {
       expect(findImagesList().exists()).toBe(false);
     });
+
+    it('quick start is not visible', () => {
+      expect(findQuickStartDropdown().exists()).toBe(false);
+    });
+  });
+
+  describe('list is empty', () => {
+    beforeEach(() => {
+      store.dispatch('receiveImagesListSuccess', { data: [] });
+    });
+
+    it('quick start is not visible', () => {
+      expect(findQuickStartDropdown().exists()).toBe(false);
+    });
+
+    it('project empty state is visible', () => {
+      expect(findProjectEmptyState().exists()).toBe(true);
+    });
+
+    describe('is group page is true', () => {
+      beforeAll(() => {
+        store.dispatch('setInitialState', { isGroupPage: true });
+      });
+
+      afterAll(() => {
+        store.dispatch('setInitialState', { isGroupPage: undefined });
+      });
+
+      it('group empty state is visible', () => {
+        expect(findGroupEmptyState().exists()).toBe(true);
+      });
+
+      it('quick start is not visible', () => {
+        expect(findQuickStartDropdown().exists()).toBe(false);
+      });
+    });
   });
 
-  describe('list', () => {
+  describe('list is not empty', () => {
+    it('quick start is visible', () => {
+      expect(findQuickStartDropdown().exists()).toBe(true);
+    });
+
     describe('listElement', () => {
       let listElements;
       let firstElement;
diff --git a/spec/frontend/registry/explorer/stores/getters_spec.js b/spec/frontend/registry/explorer/stores/getters_spec.js
index c224f076d30..211b8169d82 100644
--- a/spec/frontend/registry/explorer/stores/getters_spec.js
+++ b/spec/frontend/registry/explorer/stores/getters_spec.js
@@ -31,4 +31,22 @@ describe('Getters RegistryExplorer  store', () => {
       });
     });
   });
+
+  describe.each`
+    getter                  | prefix               | configParameter              | suffix
+    ${'dockerBuildCommand'} | ${'docker build -t'} | ${'repositoryUrl'}           | ${'.'}
+    ${'dockerPushCommand'}  | ${'docker push'}     | ${'repositoryUrl'}           | ${null}
+    ${'dockerLoginCommand'} | ${'docker login'}    | ${'registryHostUrlWithPort'} | ${null}
+  `('$getter', ({ getter, prefix, configParameter, suffix }) => {
+    beforeEach(() => {
+      state = {
+        config: { repositoryUrl: 'foo', registryHostUrlWithPort: 'bar' },
+      };
+    });
+
+    it(`returns ${prefix} concatenated with ${configParameter} and optionally suffixed with ${suffix}`, () => {
+      const expectedPieces = [prefix, state.config[configParameter], suffix].filter(p => p);
+      expect(getters[getter](state)).toBe(expectedPieces.join(' '));
+    });
+  });
 });