Skip to content

Commit

Permalink
refactor: merges TaxonomyCardMenu and TaxonomyDetailMenu
Browse files Browse the repository at this point in the history
  • Loading branch information
@rpenido
rpenido committed Nov 28, 2023
1 parent 4202c27 commit 689071c
Show file tree
Hide file tree
Showing 13 changed files with 328 additions and 399 deletions.
107 changes: 55 additions & 52 deletions src/taxonomy/export-modal/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React, { useState } from 'react';
import { useState } from 'react';
import {
ActionRow,
Button,
Container,
Form,
ModalDialog,
} from '@edx/paragon';
Expand All @@ -24,59 +25,61 @@ const ExportModal = ({
};

return (
<ModalDialog
title={intl.formatMessage(messages.exportModalTitle)}
isOpen={isOpen}
onClose={onClose}
size="lg"
hasCloseButton
isFullscreenOnMobile
>
<ModalDialog.Header>
<ModalDialog.Title>
{intl.formatMessage(messages.exportModalTitle)}
</ModalDialog.Title>
</ModalDialog.Header>
<ModalDialog.Body className="pb-5 mt-2">
<Form.Group>
<Form.Label>
{intl.formatMessage(messages.exportModalBodyDescription)}
</Form.Label>
<Form.RadioSet
name="export-format"
value={outputFormat}
onChange={(e) => setOutputFormat(e.target.value)}
>
<Form.Radio
key={`export-csv-format-${taxonomyId}`}
value="csv"
<Container onClick={(e) => e.stopPropagation() /* This prevents calling onClick handler from the parent */}>
<ModalDialog
title={intl.formatMessage(messages.exportModalTitle)}
isOpen={isOpen}
onClose={onClose}
size="lg"
hasCloseButton
isFullscreenOnMobile
>
<ModalDialog.Header>
<ModalDialog.Title>
{intl.formatMessage(messages.exportModalTitle)}
</ModalDialog.Title>
</ModalDialog.Header>
<ModalDialog.Body className="pb-5 mt-2">
<Form.Group>
<Form.Label>
{intl.formatMessage(messages.exportModalBodyDescription)}
</Form.Label>
<Form.RadioSet
name="export-format"
value={outputFormat}
onChange={(e) => setOutputFormat(e.target.value)}
>
{intl.formatMessage(messages.taxonomyCSVFormat)}
</Form.Radio>
<Form.Radio
key={`export-json-format-${taxonomyId}`}
value="json"
<Form.Radio
key={`export-csv-format-${taxonomyId}`}
value="csv"
>
{intl.formatMessage(messages.taxonomyCSVFormat)}
</Form.Radio>
<Form.Radio
key={`export-json-format-${taxonomyId}`}
value="json"
>
{intl.formatMessage(messages.taxonomyJSONFormat)}
</Form.Radio>
</Form.RadioSet>
</Form.Group>
</ModalDialog.Body>
<ModalDialog.Footer>
<ActionRow>
<ModalDialog.CloseButton variant="tertiary">
{intl.formatMessage(messages.taxonomyModalsCancelLabel)}
</ModalDialog.CloseButton>
<Button
variant="primary"
onClick={onClickExport}
data-testid={`export-button-${taxonomyId}`}
>
{intl.formatMessage(messages.taxonomyJSONFormat)}
</Form.Radio>
</Form.RadioSet>
</Form.Group>
</ModalDialog.Body>
<ModalDialog.Footer>
<ActionRow>
<ModalDialog.CloseButton variant="tertiary">
{intl.formatMessage(messages.taxonomyModalsCancelLabel)}
</ModalDialog.CloseButton>
<Button
variant="primary"
onClick={onClickExport}
data-testid={`export-button-${taxonomyId}`}
>
{intl.formatMessage(messages.exportModalSubmitButtonLabel)}
</Button>
</ActionRow>
</ModalDialog.Footer>
</ModalDialog>
{intl.formatMessage(messages.exportModalSubmitButtonLabel)}
</Button>
</ActionRow>
</ModalDialog.Footer>
</ModalDialog>
</Container>
);
};

Expand Down
78 changes: 1 addition & 77 deletions src/taxonomy/taxonomy-card/TaxonomyCard.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,15 @@ import React from 'react';
import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
import { initializeMockApp } from '@edx/frontend-platform';
import { AppProvider } from '@edx/frontend-platform/react';
import { render, fireEvent } from '@testing-library/react';
import { render } from '@testing-library/react';
import PropTypes from 'prop-types';

import initializeStore from '../../store';
import { getTaxonomyExportFile } from '../data/api';
import { importTaxonomyTags } from '../import-tags';
import TaxonomyCard from '.';

let store;
const taxonomyId = 1;

jest.mock('../import-tags', () => ({
importTaxonomyTags: jest.fn().mockResolvedValue({}),
}));

const data = {
id: taxonomyId,
name: 'Taxonomy 1',
Expand Down Expand Up @@ -92,74 +86,4 @@ describe('<TaxonomyCard />', async () => {
const { getByText } = render(<TaxonomyCardComponent original={cardData} />);
expect(getByText('Assigned to 6 orgs')).toBeInTheDocument();
});

test('should open and close menu on button click', () => {
const { getByTestId } = render(<TaxonomyCardComponent original={data} />);

// Menu closed/doesn't exist yet
expect(() => getByTestId('taxonomy-card-menu-1')).toThrow();

// Click on the menu button to open
fireEvent.click(getByTestId('taxonomy-card-menu-button-1'));

// Menu opened
expect(getByTestId('taxonomy-card-menu-1')).toBeVisible();

// Click on button again to close the menu
fireEvent.click(getByTestId('taxonomy-card-menu-button-1'));

// Menu closed
// Jest bug: toBeVisible() isn't checking opacity correctly
// expect(getByTestId('taxonomy-card-menu-1')).not.toBeVisible();
expect(getByTestId('taxonomy-card-menu-1').style.opacity).toEqual('0');

// Menu button still visible
expect(getByTestId('taxonomy-card-menu-button-1')).toBeVisible();
});

test('should open export modal on export menu click', () => {
const { getByTestId, getByText } = render(<TaxonomyCardComponent original={data} />);

// Modal closed
expect(() => getByText('Select format to export')).toThrow();

// Click on export menu
fireEvent.click(getByTestId('taxonomy-card-menu-button-1'));
fireEvent.click(getByTestId('taxonomy-card-menu-export-1'));

// Modal opened
expect(getByText('Select format to export')).toBeInTheDocument();

// Click on cancel button
fireEvent.click(getByText('Cancel'));

// Modal closed
expect(() => getByText('Select format to export')).toThrow();
});

test('should call import tags when menu click', () => {
const { getByTestId } = render(<TaxonomyCardComponent original={data} />);

// Click on import menu
fireEvent.click(getByTestId('taxonomy-card-menu-button-1'));
fireEvent.click(getByTestId('taxonomy-card-menu-import-1'));

expect(importTaxonomyTags).toHaveBeenCalled();
});

test('should export a taxonomy', () => {
const { getByTestId, getByText } = render(<TaxonomyCardComponent original={data} />);

// Click on export menu
fireEvent.click(getByTestId('taxonomy-card-menu-button-1'));
fireEvent.click(getByTestId('taxonomy-card-menu-export-1'));

// Select JSON format and click on export
fireEvent.click(getByText('JSON file'));
fireEvent.click(getByTestId('export-button-1'));

// Modal closed
expect(() => getByText('Select format to export')).toThrow();
expect(getTaxonomyExportFile).toHaveBeenCalledWith(taxonomyId, 'json');
});
});
59 changes: 0 additions & 59 deletions src/taxonomy/taxonomy-card/TaxonomyCardMenu.jsx
View file

This file was deleted.

Loading

0 comments on commit 689071c

Please sign in to comment.