diff --git a/packages/scxa-faceted-search-results/__test__/FacetGroups.test.js b/packages/scxa-faceted-search-results/__test__/FacetGroups.test.js index 8227436a..cf00cdc8 100644 --- a/packages/scxa-faceted-search-results/__test__/FacetGroups.test.js +++ b/packages/scxa-faceted-search-results/__test__/FacetGroups.test.js @@ -1,10 +1,10 @@ import React from 'react' import renderer from 'react-test-renderer' import Enzyme from 'enzyme' -import {mount} from 'enzyme' +import { mount } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' -import {getRandomInt, vindicators} from './TestUtils' +import { getRandomInt, vindicators } from './TestUtils' import CheckboxFacetGroup from '../src/facetgroups/CheckboxFacetGroup' import MultiselectDropdownFacetGroup from '../src/facetgroups/MultiselectDropdownFacetGroup' diff --git a/packages/scxa-faceted-search-results/__test__/FacetedSearchContainer.test.js b/packages/scxa-faceted-search-results/__test__/FacetedSearchContainer.test.js index b2dd4446..19311cd6 100644 --- a/packages/scxa-faceted-search-results/__test__/FacetedSearchContainer.test.js +++ b/packages/scxa-faceted-search-results/__test__/FacetedSearchContainer.test.js @@ -1,7 +1,7 @@ import React from 'react' import renderer from 'react-test-renderer' import Enzyme from 'enzyme' -import {mount} from 'enzyme' +import { mount } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' import {episodes, EpisodeCard} from './TestUtils' diff --git a/packages/scxa-faceted-search-results/__test__/FilterList.test.js b/packages/scxa-faceted-search-results/__test__/FilterList.test.js index b2a539b0..b2f60b20 100644 --- a/packages/scxa-faceted-search-results/__test__/FilterList.test.js +++ b/packages/scxa-faceted-search-results/__test__/FilterList.test.js @@ -1,10 +1,10 @@ import React from 'react' import renderer from 'react-test-renderer' import Enzyme from 'enzyme' -import {shallow} from 'enzyme' +import { shallow } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' -import {episodes, EpisodeCard} from './TestUtils' +import { episodes, EpisodesHeader, EpisodeCard } from './TestUtils' import FilterList from '../src/FilterList' @@ -12,14 +12,16 @@ Enzyme.configure({ adapter: new Adapter() }) const props = { filteredResults: episodes, + ResultsHeaderClass: EpisodesHeader, ResultElementClass: EpisodeCard } describe(`FilterList`, () => { test(`renders as many components of ResultElementClass as filtered results`, () => { - const randomFilteredResults=episodes.filter(() => Math.random() > 0.5) + const randomFilteredResults = episodes.filter(() => Math.random() > 0.5) const wrapper = shallow() - expect(wrapper.find(props.ResultElementClass)).toHaveLength(randomFilteredResults.length) + expect(wrapper.find(EpisodesHeader)).toHaveLength(1) + expect(wrapper.find(EpisodeCard)).toHaveLength(randomFilteredResults.length) }) test(`matches snapshot`, () => { diff --git a/packages/scxa-faceted-search-results/__test__/FilterSidebar.test.js b/packages/scxa-faceted-search-results/__test__/FilterSidebar.test.js index 0edd4f32..0ed46902 100644 --- a/packages/scxa-faceted-search-results/__test__/FilterSidebar.test.js +++ b/packages/scxa-faceted-search-results/__test__/FilterSidebar.test.js @@ -1,10 +1,10 @@ import React from 'react' import renderer from 'react-test-renderer' import Enzyme from 'enzyme' -import {mount} from 'enzyme' +import { mount } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' -import {getRandomInt, episodes} from './TestUtils' +import { getRandomInt, episodes } from './TestUtils' import FilterSidebar from '../src/FilterSidebar' diff --git a/packages/scxa-faceted-search-results/__test__/TestUtils.js b/packages/scxa-faceted-search-results/__test__/TestUtils.js index 7f26dca0..8fe63a41 100644 --- a/packages/scxa-faceted-search-results/__test__/TestUtils.js +++ b/packages/scxa-faceted-search-results/__test__/TestUtils.js @@ -10,6 +10,11 @@ EpisodeCard.propTypes = { title: PropTypes.string.isRequired } +const EpisodesHeader = () => +
+ Episode title +
+ // Stolen from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random const getRandomInt = (min, max) => { min = Math.ceil(min) @@ -172,4 +177,4 @@ const episodes = [ } ] -export {getRandomInt, vindicators, episodes, EpisodeCard} +export {getRandomInt, vindicators, episodes, EpisodesHeader, EpisodeCard} diff --git a/packages/scxa-faceted-search-results/__test__/__snapshots__/FilterList.test.js.snap b/packages/scxa-faceted-search-results/__test__/__snapshots__/FilterList.test.js.snap index 5fc401b2..0f35ba20 100644 --- a/packages/scxa-faceted-search-results/__test__/__snapshots__/FilterList.test.js.snap +++ b/packages/scxa-faceted-search-results/__test__/__snapshots__/FilterList.test.js.snap @@ -5,6 +5,11 @@ exports[`FilterList matches snapshot 1`] = `

+
+ + Episode title + +

diff --git a/packages/scxa-faceted-search-results/html/EpisodesHeader.js b/packages/scxa-faceted-search-results/html/EpisodesHeader.js new file mode 100644 index 00000000..5294f26d --- /dev/null +++ b/packages/scxa-faceted-search-results/html/EpisodesHeader.js @@ -0,0 +1,8 @@ +import React from 'react' + +const EpisodesHeader = ({title}) => +

+ Episode Title +
+ +export default EpisodesHeader diff --git a/packages/scxa-faceted-search-results/html/facetedSearchContainerDemo.js b/packages/scxa-faceted-search-results/html/facetedSearchContainerDemo.js index 2cca83a0..70e18839 100644 --- a/packages/scxa-faceted-search-results/html/facetedSearchContainerDemo.js +++ b/packages/scxa-faceted-search-results/html/facetedSearchContainerDemo.js @@ -3,6 +3,7 @@ import FacetedSearchContainer from '../src/FacetedSearchContainer' import EpisodeCard from './EpisodeCard' + import EpisodesHeader from './EpisodesHeader' const render = (target) => { const episodes = [ @@ -153,6 +154,7 @@ ReactDOM.render( , diff --git a/packages/scxa-faceted-search-results/package-lock.json b/packages/scxa-faceted-search-results/package-lock.json index ede015c6..22d68cf4 100644 --- a/packages/scxa-faceted-search-results/package-lock.json +++ b/packages/scxa-faceted-search-results/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-faceted-search", - "version": "2.4.0", + "version": "2.5.0-beta", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/scxa-faceted-search-results/package.json b/packages/scxa-faceted-search-results/package.json index 76f39847..3567bd7b 100644 --- a/packages/scxa-faceted-search-results/package.json +++ b/packages/scxa-faceted-search-results/package.json @@ -1,6 +1,6 @@ { "name": "react-faceted-search", - "version": "2.4.0", + "version": "2.5.0-beta", "description": "Faceted experiments list for Single Cell Expression Atlas gene search results", "main": "lib/index.js", "scripts": { diff --git a/packages/scxa-faceted-search-results/src/FacetedSearchContainer.js b/packages/scxa-faceted-search-results/src/FacetedSearchContainer.js index e941879c..37b62104 100644 --- a/packages/scxa-faceted-search-results/src/FacetedSearchContainer.js +++ b/packages/scxa-faceted-search-results/src/FacetedSearchContainer.js @@ -114,7 +114,7 @@ class FacetedSearchContainer extends React.Component { render() { const {facets} = this.state - const {checkboxFacetGroups, ResultElementClass, resultsMessage} = this.props + const {checkboxFacetGroups, ResultElementClass, ResultsHeaderClass, resultsMessage} = this.props const {selectedFacets} = this.state return( @@ -127,7 +127,7 @@ class FacetedSearchContainer extends React.Component { }
-
@@ -142,8 +142,9 @@ FacetedSearchContainer.propTypes = { results: PropTypes.arrayOf(ResultPropTypes).isRequired, checkboxFacetGroups: PropTypes.arrayOf(PropTypes.string), resultsMessage: PropTypes.string, - // Must be a class that extends React.Component, sadly there’s no such prop type :( + // Must be classes that extends React.Component, sadly there’s no such prop type :( // See also https://stackoverflow.com/questions/45315918/react-proptypes-component-class + ResultsHeaderClass: PropTypes.func, ResultElementClass: PropTypes.func.isRequired } diff --git a/packages/scxa-faceted-search-results/src/FetchLoader.js b/packages/scxa-faceted-search-results/src/FetchLoader.js index 2d6e6320..5f37c42e 100644 --- a/packages/scxa-faceted-search-results/src/FetchLoader.js +++ b/packages/scxa-faceted-search-results/src/FetchLoader.js @@ -34,7 +34,7 @@ class FetchLoader extends React.Component { } render() { - const { ResultElementClass, noResultsMessageFormatter, resultsMessageFormatter } = this.props + const { ResultsHeaderClass, ResultElementClass, noResultsMessageFormatter, resultsMessageFormatter } = this.props const { data, loading, error } = this.state return( @@ -49,6 +49,7 @@ class FetchLoader extends React.Component { data.results && data.results.length > 0 ? :
@@ -109,6 +110,7 @@ class FetchLoader extends React.Component { FetchLoader.propTypes = { host: PropTypes.string.isRequired, resource: PropTypes.string.isRequired, + ResultsHeaderClass: PropTypes.func, ResultElementClass: PropTypes.func.isRequired, noResultsMessageFormatter: PropTypes.func, resultsMessageFormatter: PropTypes.func diff --git a/packages/scxa-faceted-search-results/src/FilterList.js b/packages/scxa-faceted-search-results/src/FilterList.js index f0daa394..2a72959e 100644 --- a/packages/scxa-faceted-search-results/src/FilterList.js +++ b/packages/scxa-faceted-search-results/src/FilterList.js @@ -2,13 +2,14 @@ import React from 'react' import PropTypes from 'prop-types' import {ResultPropTypes} from './ResultPropTypes' -const FilterList = ({filteredResults, resultsMessage, ResultElementClass}) => { +const FilterList = ({filteredResults, resultsMessage, ResultsHeaderClass, ResultElementClass}) => { const filteredElements = filteredResults.map((result) => result.element) return (

{resultsMessage}

- {filteredElements.map((element, index) =>
)} + { filteredElements.length && ResultsHeaderClass && } + { filteredElements.map((element, index) =>
) }
) } @@ -16,6 +17,7 @@ const FilterList = ({filteredResults, resultsMessage, ResultElementClass}) => { FilterList.propTypes = { filteredResults: PropTypes.arrayOf(ResultPropTypes).isRequired, resultsMessage: PropTypes.string, + ResultsHeaderClass: PropTypes.func, ResultElementClass: PropTypes.func.isRequired }