gitlab-org--gitlab-foss/spec/frontend/issuable/components/csv_import_export_buttons_spec.js

import { shallowMount } from '@vue/test-utils';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import CsvExportModal from '~/issuable/components/csv_export_modal.vue';
import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
import CsvImportModal from '~/issuable/components/csv_import_modal.vue';

describe('CsvImportExportButtons', () => {
  let wrapper;
  let glModalDirective;

  const exportCsvPath = '/gitlab-org/gitlab-test/-/issues/export_csv';
  const issuableCount = 10;

  function createComponent(injectedProperties = {}) {
    glModalDirective = jest.fn();
    return extendedWrapper(
      shallowMount(CsvImportExportButtons, {
        directives: {
          GlTooltip: createMockDirective(),
          glModal: {
            bind(_, { value }) {
              glModalDirective(value);
            },
          },
        },
        provide: {
          ...injectedProperties,
        },
        propsData: {
          exportCsvPath,
          issuableCount,
        },
      }),
    );
  }

  afterEach(() => {
    wrapper.destroy();
  });

  const findExportCsvButton = () => wrapper.findByTestId('export-csv-button');
  const findImportDropdown = () => wrapper.findByTestId('import-csv-dropdown');
  const findImportCsvButton = () => wrapper.findByTestId('import-csv-dropdown');
  const findImportFromJiraLink = () => wrapper.findByTestId('import-from-jira-link');
  const findExportCsvModal = () => wrapper.findComponent(CsvExportModal);
  const findImportCsvModal = () => wrapper.findComponent(CsvImportModal);

  describe('template', () => {
    describe('when the showExportButton=true', () => {
      beforeEach(() => {
        wrapper = createComponent({ showExportButton: true });
      });

      it('displays the export button', () => {
        expect(findExportCsvButton().exists()).toBe(true);
      });

      it('export button has a tooltip', () => {
        const tooltip = getBinding(findExportCsvButton().element, 'gl-tooltip');

        expect(tooltip).toBeDefined();
        expect(tooltip.value).toBe('Export as CSV');
      });

      it('renders the export modal', () => {
        expect(findExportCsvModal().props()).toMatchObject({ exportCsvPath, issuableCount });
      });

      it('opens the export modal', () => {
        findExportCsvButton().trigger('click');

        expect(glModalDirective).toHaveBeenCalledWith(wrapper.vm.exportModalId);
      });
    });

    describe('when the showExportButton=false', () => {
      beforeEach(() => {
        wrapper = createComponent({ showExportButton: false });
      });

      it('does not display the export button', () => {
        expect(findExportCsvButton().exists()).toBe(false);
      });

      it('does not render the export modal', () => {
        expect(findExportCsvModal().exists()).toBe(false);
      });
    });

    describe('when the showImportButton=true', () => {
      beforeEach(() => {
        wrapper = createComponent({ showImportButton: true });
      });

      it('displays the import dropdown', () => {
        expect(findImportDropdown().exists()).toBe(true);
      });

      it('renders the import button', () => {
        expect(findImportCsvButton().exists()).toBe(true);
      });

      describe('when showLabel=false', () => {
        beforeEach(() => {
          wrapper = createComponent({ showImportButton: true, showLabel: false });
        });

        it('does not have a button text', () => {
          expect(findImportCsvButton().props('text')).toBe(null);
        });

        it('import button has a tooltip', () => {
          const tooltip = getBinding(findImportDropdown().element, 'gl-tooltip');

          expect(tooltip).toBeDefined();
          expect(tooltip.value).toBe('Import issues');
        });
      });

      describe('when showLabel=true', () => {
        beforeEach(() => {
          wrapper = createComponent({ showImportButton: true, showLabel: true });
        });

        it('displays a button text', () => {
          expect(findImportCsvButton().props('text')).toBe('Import issues');
        });

        it('import button has no tooltip', () => {
          const tooltip = getBinding(findImportDropdown().element, 'gl-tooltip');

          expect(tooltip.value).toBe(null);
        });
      });

      it('renders the import modal', () => {
        expect(findImportCsvModal().exists()).toBe(true);
      });

      it('opens the import modal', () => {
        findImportCsvButton().trigger('click');

        expect(glModalDirective).toHaveBeenCalledWith(wrapper.vm.importModalId);
      });

      describe('import from jira link', () => {
        const projectImportJiraPath = 'gitlab-org/gitlab-test/-/import/jira';

        beforeEach(() => {
          wrapper = createComponent({
            showImportButton: true,
            canEdit: true,
            projectImportJiraPath,
          });
        });

        describe('when canEdit=true', () => {
          it('renders the import dropdown item', () => {
            expect(findImportFromJiraLink().exists()).toBe(true);
          });

          it('passes the proper path to the link', () => {
            expect(findImportFromJiraLink().attributes('href')).toBe(projectImportJiraPath);
          });
        });

        describe('when canEdit=false', () => {
          beforeEach(() => {
            wrapper = createComponent({ showImportButton: true, canEdit: false });
          });

          it('does not render the import dropdown item', () => {
            expect(findImportFromJiraLink().exists()).toBe(false);
          });
        });
      });
    });

    describe('when the showImportButton=false', () => {
      beforeEach(() => {
        wrapper = createComponent({ showImportButton: false });
      });

      it('does not display the import dropdown', () => {
        expect(findImportDropdown().exists()).toBe(false);
      });

      it('does not render the import modal', () => {
        expect(findImportCsvModal().exists()).toBe(false);
      });
    });
  });
});