);
-FilterBadge.defaultProps = {
- showValue: true,
-};
+
FilterBadge.propTypes = {
- name: PropTypes.string.isRequired,
- value: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.bool,
- ]).isRequired,
- onClick: PropTypes.func.isRequired,
- showValue: PropTypes.bool,
+ handleClose: PropTypes.func.isRequired,
+ // eslint-disable-next-line
+ filterName: PropTypes.string.isRequired,
+ // redux
+ config: PropTypes.shape({
+ connectedFilters: PropTypes.arrayOf(PropTypes.string),
+ displayName: PropTypes.string.isRequired,
+ isDefault: PropTypes.bool.isRequired,
+ hideValue: PropTypes.bool,
+ value: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.bool,
+ ]),
+ }).isRequired,
};
-export default FilterBadge;
+export const mapStateToProps = (state, ownProps) => ({
+ config: selectors.root.filterBadgeConfig(state, ownProps.filterName),
+});
+
+export default connect(mapStateToProps)(FilterBadge);
diff --git a/src/components/FilterBadges/FilterBadge.test.jsx b/src/components/FilterBadges/FilterBadge.test.jsx
new file mode 100644
index 0000000..f09ba24
--- /dev/null
+++ b/src/components/FilterBadges/FilterBadge.test.jsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Button } from '@edx/paragon';
+import selectors from 'data/selectors';
+import { FilterBadge, mapStateToProps } from './FilterBadge';
+
+jest.mock('@edx/paragon', () => ({
+ Button: () => 'Button',
+}));
+jest.mock('data/selectors', () => ({
+ __esModule: true,
+ default: {
+ root: {
+ filterBadgeConfig: jest.fn(state => ({ filterBadgeConfig: state })),
+ },
+ },
+}));
+
+describe('FilterBadge', () => {
+ describe('component', () => {
+ const config = {
+ displayName: 'a common name',
+ isDefault: false,
+ hideValue: false,
+ value: 'a common value',
+ connectedFilters: ['some', 'filters'],
+ };
+ const filterName = 'api.filter.name';
+ let handleClose;
+ let el;
+ let props;
+ beforeEach(() => {
+ handleClose = (filters) => ({ handleClose: filters });
+ props = { filterName, handleClose, config };
+ });
+ describe('with default value', () => {
+ beforeEach(() => {
+ el = shallow(
+ ,
+ );
+ });
+ test('snapshot - empty', () => {
+ expect(el).toMatchSnapshot();
+ });
+ it('does not display', () => {
+ expect(el).toEqual({});
+ });
+ });
+ describe('with non-default value (active)', () => {
+ describe('if hideValue is true', () => {
+ beforeEach(() => {
+ el = shallow(
+ ,
+ );
+ });
+ test('snapshot - shows displayName but not value in span', () => {
+ expect(el).toMatchSnapshot();
+ });
+ it('shows displayName but not value in span', () => {
+ expect(el.find('span.badge').childAt(0).text()).toEqual(config.displayName);
+ });
+ it('calls a handleClose event for connected filters on button click', () => {
+ expect(el.find(Button).props().onClick).toEqual(handleClose(config.connectedFilters));
+ });
+ });
+ describe('if hideValue is false (default)', () => {
+ beforeEach(() => {
+ el = shallow();
+ });
+ test('snapshot', () => {
+ expect(el).toMatchSnapshot();
+ });
+ it('shows displayName and value in span', () => {
+ expect(el.find('span.badge').childAt(0).text()).toEqual(
+ `${config.displayName}: ${config.value}`,
+ );
+ });
+ it('calls a handleClose event for connected filters on button click', () => {
+ expect(el.find(Button).props().onClick).toEqual(handleClose(config.connectedFilters));
+ });
+ });
+ });
+ });
+ describe('mapStateToProps', () => {
+ const testState = { some: 'kind', of: 'alien' };
+ const filterName = 'Lilu Dallas Multipass';
+ test('config loads config from root.filterBadgeConfig with ownProps.filterName', () => {
+ const { config } = mapStateToProps(testState, { filterName });
+ expect(config).toEqual(selectors.root.filterBadgeConfig(testState, filterName));
+ });
+ });
+});
diff --git a/src/components/FilterBadges/RangeFilterBadge.jsx b/src/components/FilterBadges/RangeFilterBadge.jsx
deleted file mode 100644
index 50cf51e..0000000
--- a/src/components/FilterBadges/RangeFilterBadge.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import initialFilters from 'data/constants/filters';
-
-import FilterBadge from './FilterBadge';
-
-/**
- * RangeFilterBadge
- * Simple override to base FilterBadge component for range-value types.
- * Only displays if either filter is not at its default value
- * @param {string} displayName - string to display as filter name
- * @param {string} filterName1 - 1st filter name/key in the data model
- * @param {string/bool} filterValue1 - 1st filterValue
- * @param {string} filterName2 - 2nd filter name/key in the data model
- * @param {string/bool} filterValue2 - 2nd filterValue
- * @param {func} handleBadgeClose - filter close/reset event
- */
-const RangeFilterBadge = ({
- displayName,
- filterName1,
- filterValue1,
- filterName2,
- filterValue2,
- handleBadgeClose,
-}) => (
- (
- (filterValue1 !== initialFilters[filterName1])
- || (filterValue2 !== initialFilters[filterName2])
- ) && (
-
- )
-);
-RangeFilterBadge.propTypes = {
- displayName: PropTypes.string.isRequired,
- filterName1: PropTypes.string.isRequired,
- filterValue1: PropTypes.string.isRequired,
- filterName2: PropTypes.string.isRequired,
- filterValue2: PropTypes.string.isRequired,
- handleBadgeClose: PropTypes.func.isRequired,
-};
-
-export default RangeFilterBadge;
diff --git a/src/components/FilterBadges/SingleValueFilterBadge.jsx b/src/components/FilterBadges/SingleValueFilterBadge.jsx
deleted file mode 100644
index 0273d5a..0000000
--- a/src/components/FilterBadges/SingleValueFilterBadge.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import initialFilters from 'data/constants/filters';
-
-import FilterBadge from './FilterBadge';
-
-/**
- * SingleValueFilterBadge
- * Simple override to base FilterBadge component for single-value filter types
- * Only displays if the filter is not at its default value
- * @param {string} displayName - string to display as filter name
- * @param {string} filterName - filter name/key in the data model
- * @param {string/bool} filterValue - filterValue
- * @param {func} handleBadgeClose - filter close/reset event
- * @param {bool} showValue - should show value string?
- */
-const SingleValueFilterBadge = ({
- displayName,
- filterName,
- filterValue,
- handleBadgeClose,
- showValue,
-}) => (
- (filterValue !== initialFilters[filterName]) && (
-
- )
-);
-SingleValueFilterBadge.defaultProps = {
- showValue: true,
-};
-SingleValueFilterBadge.propTypes = {
- displayName: PropTypes.string.isRequired,
- filterName: PropTypes.string.isRequired,
- filterValue: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.bool,
- ]).isRequired,
- handleBadgeClose: PropTypes.func.isRequired,
- showValue: PropTypes.bool,
-};
-
-export default SingleValueFilterBadge;
diff --git a/src/components/FilterBadges/__snapshots__/FilterBadge.test.jsx.snap b/src/components/FilterBadges/__snapshots__/FilterBadge.test.jsx.snap
new file mode 100644
index 0000000..f69754f
--- /dev/null
+++ b/src/components/FilterBadges/__snapshots__/FilterBadge.test.jsx.snap
@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FilterBadge component with default value snapshot - empty 1`] = `""`;
+
+exports[`FilterBadge component with non-default value (active) if hideValue is false (default) snapshot 1`] = `
+
+
+
+ a common name
+ : a common value
+
+
+
+
+
+`;
+
+exports[`FilterBadge component with non-default value (active) if hideValue is true snapshot - shows displayName but not value in span 1`] = `
+
+
+
+ a common name
+
+
+
+
+
+`;
diff --git a/src/components/FilterBadges/__snapshots__/test.jsx.snap b/src/components/FilterBadges/__snapshots__/test.jsx.snap
new file mode 100644
index 0000000..5d97e37
--- /dev/null
+++ b/src/components/FilterBadges/__snapshots__/test.jsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FilterBadges component snapshot - has a filterbadge with handleClose for each filter in badgeOrder 1`] = `
+
+
+
+
+
+`;
diff --git a/src/components/FilterBadges/index.jsx b/src/components/FilterBadges/index.jsx
index 2900733..d6449ec 100644
--- a/src/components/FilterBadges/index.jsx
+++ b/src/components/FilterBadges/index.jsx
@@ -1,123 +1,25 @@
-import { connect } from 'react-redux';
-
+/* eslint-disable import/no-named-as-default */
import React from 'react';
import PropTypes from 'prop-types';
-import initialFilters from 'data/constants/filters';
-import selectors from 'data/selectors';
+import { badgeOrder } from 'data/constants/filters';
-import RangeFilterBadge from './RangeFilterBadge';
-import SingleValueFilterBadge from './SingleValueFilterBadge';
+import FilterBadge from './FilterBadge';
/**
* FilterBadges
* Displays a FilterBadge for each filter type in the data model with their current values.
- * @param {func} handleFilterBadgeClose - event taking a list of filternames to reset
+ * @param {func} handleClose - event taking a list of filternames to reset
*/
-export const FilterBadges = ({
- assignment,
- assignmentType,
- cohortEntry,
- trackEntry,
- assignmentGradeMin,
- assignmentGradeMax,
- courseGradeMin,
- courseGradeMax,
- includeCourseRoleMembers,
- handleFilterBadgeClose,
-}) => (
+export const FilterBadges = ({ handleClose }) => (