Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Added CoursewareSearchResults UI component
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import React from 'react'; | ||
| import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; | ||
| import { | ||
| Folder, TextFields, VideoCamera, Article, | ||
| } from '@edx/paragon/icons'; | ||
| import { Icon } from '@edx/paragon'; | ||
| import PropTypes from 'prop-types'; | ||
| import messages from './messages'; | ||
|
|
||
| const iconTypeMapping = { | ||
| document: Folder, | ||
| text: TextFields, | ||
| video: VideoCamera, | ||
| }; | ||
| const defaultIcon = Article; | ||
|
|
||
| const CoursewareSearchResults = ({ intl, results }) => { | ||
| if (!results.length) { | ||
| return ( | ||
| <div className="courseware-search-results"> | ||
| <p data-testid="no-results">{intl.formatMessage(messages.searchResultsNone)}</p> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="courseware-search-results"> | ||
| {results.map(({ | ||
| title, href, type, breadcrumbs, contentMatches, isExternal, | ||
| }) => { | ||
| const key = type.toLowerCase(); | ||
| const icon = iconTypeMapping[key] || defaultIcon; | ||
|
|
||
| const linkProps = { href }; | ||
|
|
||
| if (isExternal) { | ||
| linkProps.target = '_blank'; | ||
| linkProps.rel = 'nofollow'; | ||
| } | ||
|
|
||
| return ( | ||
| <a className="courseware-search-results__item" {...linkProps}> | ||
| <div className="courseware-search-results__icon"><Icon src={icon} /></div> | ||
| <div className="courseware-search-results__info"> | ||
| <div className="courseware-search-results__title"> | ||
| <span>{title}</span> | ||
| {contentMatches ? (<em>{contentMatches}</em>) : null } | ||
| </div> | ||
| {breadcrumbs?.length ? ( | ||
| <ul className="courseware-search-results__breadcrumbs"> | ||
| {breadcrumbs.map(bc => (<li><div>{bc}</div></li>))} | ||
| </ul> | ||
| ) : null} | ||
| </div> | ||
| </a> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| CoursewareSearchResults.propTypes = { | ||
| intl: intlShape.isRequired, | ||
| results: PropTypes.arrayOf(PropTypes.objectOf({ | ||
| title: PropTypes.string.isRequired, | ||
| href: PropTypes.string.isRequired, | ||
| type: PropTypes.string, | ||
| breadcrumbs: PropTypes.arrayOf(PropTypes.string), | ||
| contentMatches: PropTypes.number, | ||
| isExternal: PropTypes.bool, | ||
| })), | ||
| }; | ||
|
|
||
| CoursewareSearchResults.defaultProps = { | ||
| results: [], | ||
| }; | ||
|
|
||
| export default injectIntl(CoursewareSearchResults); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import React from 'react'; | ||
| import { | ||
| initializeMockApp, | ||
| render, | ||
| screen, | ||
| } from '../../setupTest'; | ||
| import CoursewareSearchResults from './CoursewareSearchResults'; | ||
| import messages from './messages'; | ||
| import mockedData from './test-data/mockedResults'; | ||
|
|
||
| jest.mock('react-redux'); | ||
|
|
||
| function renderComponent({ results }) { | ||
| const { container } = render(<CoursewareSearchResults results={results} />); | ||
| return container; | ||
| } | ||
|
|
||
| describe('CoursewareSearchResults', () => { | ||
| beforeAll(async () => { | ||
| initializeMockApp(); | ||
| }); | ||
|
|
||
| describe('when an empty array is provided', () => { | ||
| beforeEach(() => { renderComponent({ results: [] }); }); | ||
|
|
||
| it('should render a "no results found" message.', () => { | ||
| expect(screen.getByTestId('no-results').textContent).toBe(messages.searchResultsNone.defaultMessage); | ||
| }); | ||
| }); | ||
|
|
||
| describe('when list of results is provided', () => { | ||
| beforeEach(() => { renderComponent({ results: mockedData }); }); | ||
|
|
||
| it('should match the snapshot', () => { | ||
| expect(screen).toMatchSnapshot(); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`CoursewareSearchResults when list of results is provided should match the snapshot 1`] = ` | ||
| Object { | ||
| "debug": [Function], | ||
| "findAllByAltText": [Function], | ||
| "findAllByDisplayValue": [Function], | ||
| "findAllByLabelText": [Function], | ||
| "findAllByPlaceholderText": [Function], | ||
| "findAllByRole": [Function], | ||
| "findAllByTestId": [Function], | ||
| "findAllByText": [Function], | ||
| "findAllByTitle": [Function], | ||
| "findByAltText": [Function], | ||
| "findByDisplayValue": [Function], | ||
| "findByLabelText": [Function], | ||
| "findByPlaceholderText": [Function], | ||
| "findByRole": [Function], | ||
| "findByTestId": [Function], | ||
| "findByText": [Function], | ||
| "findByTitle": [Function], | ||
| "getAllByAltText": [Function], | ||
| "getAllByDisplayValue": [Function], | ||
| "getAllByLabelText": [Function], | ||
| "getAllByPlaceholderText": [Function], | ||
| "getAllByRole": [Function], | ||
| "getAllByTestId": [Function], | ||
| "getAllByText": [Function], | ||
| "getAllByTitle": [Function], | ||
| "getByAltText": [Function], | ||
| "getByDisplayValue": [Function], | ||
| "getByLabelText": [Function], | ||
| "getByPlaceholderText": [Function], | ||
| "getByRole": [Function], | ||
| "getByTestId": [Function], | ||
| "getByText": [Function], | ||
| "getByTitle": [Function], | ||
| "logTestingPlaygroundURL": [Function], | ||
| "queryAllByAltText": [Function], | ||
| "queryAllByDisplayValue": [Function], | ||
| "queryAllByLabelText": [Function], | ||
| "queryAllByPlaceholderText": [Function], | ||
| "queryAllByRole": [Function], | ||
| "queryAllByTestId": [Function], | ||
| "queryAllByText": [Function], | ||
| "queryAllByTitle": [Function], | ||
| "queryByAltText": [Function], | ||
| "queryByDisplayValue": [Function], | ||
| "queryByLabelText": [Function], | ||
| "queryByPlaceholderText": [Function], | ||
| "queryByRole": [Function], | ||
| "queryByTestId": [Function], | ||
| "queryByText": [Function], | ||
| "queryByTitle": [Function], | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.