Merge branch 'refactor-lm-spec-to-jest' into 'master'

Resolve "Migrate license_management_spec to Jest"

Closes #32460

See merge request gitlab-org/gitlab!17395

ee/spec/frontend/license_management/license_management_spec.js

+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import Vuex from 'vuex';
+import LicenseManagement from 'ee/vue_shared/license_management/license_management.vue';
+import AddLicenseForm from 'ee/vue_shared/license_management/components/add_license_form.vue';
+import DeleteConfirmationModal from 'ee/vue_shared/license_management/components/delete_confirmation_modal.vue';
+import { TEST_HOST } from 'helpers/test_constants';
+import { approvedLicense, blacklistedLicense } from './mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const PaginatedListMock = {
+  name: 'PaginatedList',
+  props: ['list'],
+  template: `
+    <div>
+      <slot name="header"></slot>
+      <slot name="subheader"></slot>
+      <slot :listItem="list[0]"></slot>
+    </div>
+  `,
+};
+
+const noop = () => {};
+
+describe('LicenseManagement', () => {
+  const apiUrl = `${TEST_HOST}/license_management`;
+  const managedLicenses = [approvedLicense, blacklistedLicense];
+  let wrapper;
+
+  const createComponent = ({ state, props, actionMocks }) => {
+    const fakeStore = new Vuex.Store({
+      state: {
+        managedLicenses,
+        isLoadingManagedLicenses: true,
+        ...state,
+      },
+      actions: {
+        loadManagedLicenses: noop,
+        setAPISettings: noop,
+        setLicenseApproval: noop,
+        ...actionMocks,
+      },
+    });
+
+    wrapper = shallowMount(LicenseManagement, {
+      propsData: {
+        apiUrl,
+        ...props,
+      },
+      stubs: {
+        LicenseManagementRow: true,
+        PaginatedList: PaginatedListMock,
+      },
+      sync: false,
+      store: fakeStore,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('when loading should render loading icon', () => {
+    createComponent({ state: { isLoadingManagedLicenses: true } });
+    expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+  });
+
+  describe('when not loading', () => {
+    beforeEach(() => {
+      createComponent({ state: { isLoadingManagedLicenses: false } });
+    });
+
+    it('should render the form if the form is open and disable the form button', () => {
+      wrapper.find(GlButton).vm.$emit('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find(AddLicenseForm).exists()).toBe(true);
+        expect(wrapper.find(GlButton).attributes('disabled')).toBe('true');
+      });
+    });
+
+    it('should not render the form if the form is closed and have active button', () => {
+      expect(wrapper.find(AddLicenseForm).exists()).toBe(false);
+      expect(wrapper.find(GlButton).attributes('disabled')).not.toBe('true');
+    });
+
+    it('should render delete confirmation modal', () => {
+      expect(wrapper.find(DeleteConfirmationModal).exists()).toBe(true);
+    });
+
+    it('should render list of managed licenses', () => {
+      expect(wrapper.find({ name: 'PaginatedList' }).props('list')).toBe(managedLicenses);
+    });
+  });
+
+  it('should invoke `setLicenseAprroval` action on `addLicense` event on form', () => {
+    const setLicenseApprovalMock = jest.fn();
+    createComponent({
+      state: { isLoadingManagedLicenses: false },
+      actionMocks: { setLicenseApproval: setLicenseApprovalMock },
+    });
+    wrapper.find(GlButton).vm.$emit('click');
+
+    return wrapper.vm.$nextTick().then(() => {
+      wrapper.find(AddLicenseForm).vm.$emit('addLicense');
+      expect(setLicenseApprovalMock).toHaveBeenCalled();
+    });
+  });
+
+  it('should set api settings after mount and init API calls', () => {
+    const setAPISettingsMock = jest.fn();
+    const loadManagedLicensesMock = jest.fn();
+
+    createComponent({
+      state: { isLoadingManagedLicenses: false },
+      actionMocks: {
+        setAPISettings: setAPISettingsMock,
+        loadManagedLicenses: loadManagedLicensesMock,
+      },
+    });
+
+    expect(setAPISettingsMock).toHaveBeenCalledWith(
+      expect.any(Object),
+      {
+        apiUrlManageLicenses: apiUrl,
+      },
+      undefined,
+    );
+
+    expect(loadManagedLicensesMock).toHaveBeenCalledWith(expect.any(Object), undefined, undefined);
+  });
+});

ee/spec/frontend/license_management/mock_data.js

+import { LICENSE_APPROVAL_STATUS } from 'ee/vue_shared/license_management/constants';
+
+export const approvedLicense = {
+  id: 5,
+  name: 'MIT',
+  approvalStatus: LICENSE_APPROVAL_STATUS.APPROVED,
+};
+
+export const blacklistedLicense = {
+  id: 6,
+  name: 'New BSD',
+  approvalStatus: LICENSE_APPROVAL_STATUS.BLACKLISTED,
+};
+
+export const licenseBaseIssues = {
+  licenses: [
+    {
+      count: 1,
+      name: 'MIT',
+    },
+  ],
+  dependencies: [
+    {
+      license: {
+        name: 'MIT',
+        url: 'http://opensource.org/licenses/mit-license',
+      },
+      dependency: {
+        name: 'bundler',
+        url: 'http://bundler.io',
+        description: "The best way to manage your application's dependencies",
+        paths: ['.'],
+      },
+    },
+  ],
+};
+
+export const licenseHeadIssues = {
+  licenses: [
+    {
+      count: 3,
+      name: 'New BSD',
+    },
+    {
+      count: 1,
+      name: 'MIT',
+    },
+  ],
+  dependencies: [
+    {
+      license: {
+        name: 'New BSD',
+        url: 'http://opensource.org/licenses/BSD-3-Clause',
+      },
+      dependency: {
+        name: 'pg',
+        url: 'https://bitbucket.org/ged/ruby-pg',
+        description:
+          'Pg is the Ruby interface to the {PostgreSQL RDBMS}[http://www.postgresql.org/]',
+        paths: ['.'],
+      },
+    },
+    {
+      license: {
+        name: 'New BSD',
+        url: 'http://opensource.org/licenses/BSD-3-Clause',
+      },
+      dependency: {
+        name: 'puma',
+        url: 'http://puma.io',
+        description:
+          'Puma is a simple, fast, threaded, and highly concurrent HTTP 1.1 server for Ruby/Rack applications',
+        paths: ['.'],
+      },
+    },
+    {
+      license: {
+        name: 'New BSD',
+        url: 'http://opensource.org/licenses/BSD-3-Clause',
+      },
+      dependency: {
+        name: 'foo',
+        url: 'http://foo.io',
+        description:
+          'Foo is a simple, fast, threaded, and highly concurrent HTTP 1.1 server for Ruby/Rack applications',
+        paths: ['.'],
+      },
+    },
+    {
+      license: {
+        name: 'MIT',
+        url: 'http://opensource.org/licenses/mit-license',
+      },
+      dependency: {
+        name: 'execjs',
+        url: 'https://github.com/rails/execjs',
+        description: 'Run JavaScript code from Ruby',
+        paths: ['.'],
+      },
+    },
+  ],
+};
+
+export const licenseReport = [
+  {
+    name: 'New BSD',
+    count: 5,
+    url: 'http://opensource.org/licenses/BSD-3-Clause',
+    packages: [
+      {
+        name: 'pg',
+        url: 'https://bitbucket.org/ged/ruby-pg',
+        description:
+          'Pg is the Ruby interface to the {PostgreSQL RDBMS}[http://www.postgresql.org/]',
+        paths: ['.'],
+      },
+      {
+        name: 'puma',
+        url: 'http://puma.io',
+        description:
+          'Puma is a simple, fast, threaded, and highly concurrent HTTP 1.1 server for Ruby/Rack applications',
+        paths: ['.'],
+      },
+      {
+        name: 'foo',
+        url: 'https://bitbucket.org/ged/ruby-pg',
+        description:
+          'Pg is the Ruby interface to the {PostgreSQL RDBMS}[http://www.postgresql.org/]',
+        paths: ['.'],
+      },
+      {
+        name: 'bar',
+        url: 'http://puma.io',
+        description:
+          'Puma is a simple, fast, threaded, and highly concurrent HTTP 1.1 server for Ruby/Rack applications',
+        paths: ['.'],
+      },
+      {
+        name: 'baz',
+        url: 'https://bitbucket.org/ged/ruby-pg',
+        description:
+          'Pg is the Ruby interface to the {PostgreSQL RDBMS}[http://www.postgresql.org/]',
+        paths: ['.'],
+      },
+    ],
+  },
+];
+
+export default () => {};

ee/spec/javascripts/license_management/license_management_spec.js

-import Vue from 'vue';
-import Vuex from 'vuex';
-import LicenseManagement from 'ee/vue_shared/license_management/license_management.vue';
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { trimText } from 'spec/helpers/text_helper';
-import { TEST_HOST } from 'spec/test_constants';
-import { approvedLicense, blacklistedLicense } from 'ee_spec/license_management/mock_data';
-
-describe('LicenseManagement', () => {
-  const Component = Vue.extend(LicenseManagement);
-  const apiUrl = `${TEST_HOST}/license_management`;
-
-  let vm;
-  let actions;
-
-  const initVue = (mergeState = {}) => {
-    const store = new Vuex.Store({
-      state: {
-        managedLicenses: [approvedLicense, blacklistedLicense],
-        currentLicenseInModal: approvedLicense,
-        isLoadingManagedLicenses: true,
-        ...mergeState,
-      },
-      actions,
-    });
-    return mountComponentWithStore(Component, { props: { apiUrl }, store });
-  };
-
-  beforeEach(() => {
-    actions = {
-      setAPISettings: jasmine.createSpy('setAPISettings').and.callFake(() => {}),
-      loadManagedLicenses: jasmine.createSpy('loadManagedLicenses').and.callFake(() => {}),
-    };
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('License Form', () => {
-    it('should render the form if the form is open and disable the form button', done => {
-      vm = initVue({ isLoadingManagedLicenses: false });
-      vm.formIsOpen = true;
-
-      return Vue.nextTick()
-        .then(() => {
-          const formEl = vm.$el.querySelector('.js-add-license-form');
-
-          expect(formEl).not.toBeNull();
-          const buttonEl = vm.$el.querySelector('.js-open-form');
-
-          expect(buttonEl).toHaveClass('disabled');
-          done();
-        })
-        .catch(done.fail);
-    });
-
-    it('should render the button if the form is closed', done => {
-      vm = initVue({ isLoadingManagedLicenses: false });
-      vm.formIsOpen = false;
-
-      return Vue.nextTick()
-        .then(() => {
-          const formEl = vm.$el.querySelector('.js-add-license-form');
-
-          expect(formEl).toBeNull();
-          const buttonEl = vm.$el.querySelector('.js-open-form');
-
-          expect(buttonEl).not.toBeNull();
-          done();
-        })
-        .catch(done.fail);
-    });
-
-    it('clicking the Add a license button opens the form', done => {
-      vm = initVue({ isLoadingManagedLicenses: false });
-
-      return Vue.nextTick()
-        .then(() => {
-          const linkEl = vm.$el.querySelector('.js-open-form');
-
-          expect(vm.formIsOpen).toBe(false);
-
-          linkEl.click();
-
-          expect(vm.formIsOpen).toBe(true);
-          done();
-        })
-        .catch(done.fail);
-    });
-  });
-
-  it('should render loading icon', done => {
-    vm = initVue({ isLoadingManagedLicenses: true });
-
-    return Vue.nextTick()
-      .then(() => {
-        expect(vm.$el.classList.contains('loading-container')).toEqual(true);
-        done();
-      })
-      .catch(done.fail);
-  });
-
-  it('should render callout if no licenses are managed', done => {
-    vm = initVue({ managedLicenses: [], isLoadingManagedLicenses: false });
-
-    return Vue.nextTick()
-      .then(() => {
-        const callout = vm.$el.querySelector('.bs-callout');
-
-        expect(callout).not.toBeNull();
-        expect(trimText(callout.innerText)).toBe(vm.$options.emptyMessage);
-        done();
-      })
-      .catch(done.fail);
-  });
-
-  it('should render delete confirmation modal', done => {
-    vm = initVue({ isLoadingManagedLicenses: false });
-
-    return Vue.nextTick()
-      .then(() => {
-        expect(vm.$el.querySelector('#modal-license-delete-confirmation')).not.toBeNull();
-        done();
-      })
-      .catch(done.fail);
-  });
-
-  it('should render list of managed licenses', done => {
-    vm = initVue({ isLoadingManagedLicenses: false });
-
-    return Vue.nextTick()
-      .then(() => {
-        expect(vm.$el.querySelector('.list-group')).not.toBeNull();
-        expect(vm.$el.querySelector('.list-group .list-group-item')).not.toBeNull();
-        expect(vm.$el.querySelectorAll('.list-group .list-group-item').length).toBe(2);
-        done();
-      })
-      .catch(done.fail);
-  });
-
-  it('should set api settings after mount and init API calls', done => {
-    vm = initVue();
-
-    return Vue.nextTick()
-      .then(() => {
-        expect(actions.setAPISettings).toHaveBeenCalledWith(
-          jasmine.any(Object),
-          { apiUrlManageLicenses: apiUrl },
-          undefined,
-        );
-
-        expect(actions.loadManagedLicenses).toHaveBeenCalledWith(
-          jasmine.any(Object),
-          undefined,
-          undefined,
-        );
-        done();
-      })
-      .catch(done.fail);
-  });
-});

ee/spec/javascripts/license_management/mock_data.js

-import { LICENSE_APPROVAL_STATUS } from 'ee/vue_shared/license_management/constants';
-
-export const approvedLicense = {
-  id: 5,
-  name: 'MIT',
-  approvalStatus: LICENSE_APPROVAL_STATUS.APPROVED,
-};
-
-export const blacklistedLicense = {
-  id: 6,
-  name: 'New BSD',
-  approvalStatus: LICENSE_APPROVAL_STATUS.BLACKLISTED,
-};
-
-export const licenseBaseIssues = {
-  licenses: [
-    {
-      count: 1,
-      name: 'MIT',
-    },
-  ],
-  dependencies: [
-    {
-      license: {
-        name: 'MIT',
-        url: 'http://opensource.org/licenses/mit-license',
-      },
-      dependency: {
-        name: 'bundler',
-        url: 'http://bundler.io',
-        description: "The best way to manage your application's dependencies",
-        paths: ['.'],
-      },
-    },
-  ],
-};
-
-export const licenseHeadIssues = {
-  licenses: [
-    {
-      count: 3,
-      name: 'New BSD',
-    },
-    {
-      count: 1,
-      name: 'MIT',
-    },
-  ],
-  dependencies: [
-    {
-      license: {
-        name: 'New BSD',
-        url: 'http://opensource.org/licenses/BSD-3-Clause',
-      },
-      dependency: {
-        name: 'pg',
-        url: 'https://bitbucket.org/ged/ruby-pg',
-        description:
-          'Pg is the Ruby interface to the {PostgreSQL RDBMS}[http://www.postgresql.org/]',
-        paths: ['.'],
-      },
-    },
-    {
-      license: {
-        name: 'New BSD',
-        url: 'http://opensource.org/licenses/BSD-3-Clause',
-      },
-      dependency: {
-        name: 'puma',
-        url: 'http://puma.io',
-        description:
-          'Puma is a simple, fast, threaded, and highly concurrent HTTP 1.1 server for Ruby/Rack applications',
-        paths: ['.'],
-      },
-    },
-    {
-      license: {
-        name: 'New BSD',
-        url: 'http://opensource.org/licenses/BSD-3-Clause',
-      },
-      dependency: {
-        name: 'foo',
-        url: 'http://foo.io',
-        description:
-          'Foo is a simple, fast, threaded, and highly concurrent HTTP 1.1 server for Ruby/Rack applications',
-        paths: ['.'],
-      },
-    },
-    {
-      license: {
-        name: 'MIT',
-        url: 'http://opensource.org/licenses/mit-license',
-      },
-      dependency: {
-        name: 'execjs',
-        url: 'https://github.com/rails/execjs',
-        description: 'Run JavaScript code from Ruby',
-        paths: ['.'],
-      },
-    },
-  ],
-};
-
-export const licenseReport = [
-  {
-    name: 'New BSD',
-    count: 5,
-    url: 'http://opensource.org/licenses/BSD-3-Clause',
-    packages: [
-      {
-        name: 'pg',
-        url: 'https://bitbucket.org/ged/ruby-pg',
-        description:
-          'Pg is the Ruby interface to the {PostgreSQL RDBMS}[http://www.postgresql.org/]',
-        paths: ['.'],
-      },
-      {
-        name: 'puma',
-        url: 'http://puma.io',
-        description:
-          'Puma is a simple, fast, threaded, and highly concurrent HTTP 1.1 server for Ruby/Rack applications',
-        paths: ['.'],
-      },
-      {
-        name: 'foo',
-        url: 'https://bitbucket.org/ged/ruby-pg',
-        description:
-          'Pg is the Ruby interface to the {PostgreSQL RDBMS}[http://www.postgresql.org/]',
-        paths: ['.'],
-      },
-      {
-        name: 'bar',
-        url: 'http://puma.io',
-        description:
-          'Puma is a simple, fast, threaded, and highly concurrent HTTP 1.1 server for Ruby/Rack applications',
-        paths: ['.'],
-      },
-      {
-        name: 'baz',
-        url: 'https://bitbucket.org/ged/ruby-pg',
-        description:
-          'Pg is the Ruby interface to the {PostgreSQL RDBMS}[http://www.postgresql.org/]',
-        paths: ['.'],
-      },
-    ],
-  },
-];
-
-export default () => {};
+export * from '../../frontend/license_management/mock_data';