-
Notifications
You must be signed in to change notification settings - Fork 220
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(AU-1863): Add feedback widget UI mock
* feat(AU-1863): Add feedback widget UI mock * feat(AU-1863): Add unit tests * feat(AU-1863): Fix snapshot * feat(AU-1863): Clean Sequence component logEvent calls * feat(AU-1863): Clean unit test * feat(AU-1863): Put feedback widget behind whole course translation flag * feat(AU-1863): Fix useFeedbackWidget test
- Loading branch information
Showing
8 changed files
with
377 additions
and
46 deletions.
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
52 changes: 52 additions & 0 deletions
52
src/courseware/course/sequence/Unit/feedback-widget/__snapshots__/index.test.jsx.snap
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,52 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`<FeedbackWidget /> renders 1`] = ` | ||
| <div | ||
| className="sequence w-100" | ||
| > | ||
| <div | ||
| className="ml-4 mr-2" | ||
| > | ||
| <ActionRow> | ||
| Rate this page translation | ||
| <Spacer /> | ||
| <div> | ||
| <IconButton | ||
| alt="positive-feedback" | ||
| className="m-1" | ||
| iconAs="Icon" | ||
| id="positive-feedback-button" | ||
| onClick={[MockFunction sendFeedback]} | ||
| src="ThumbUpOutline" | ||
| variant="secondary" | ||
| /> | ||
| <IconButton | ||
| alt="negative-feedback" | ||
| className="mr-2" | ||
| iconAs="Icon" | ||
| id="negative-feedback-button" | ||
| onClick={[MockFunction sendFeedback]} | ||
| src="ThumbDownOffAlt" | ||
| variant="secondary" | ||
| /> | ||
| </div> | ||
| <div | ||
| className="mb-1 text-light action-row-divider" | ||
| > | ||
| | | ||
| </div> | ||
| <div> | ||
| <IconButton | ||
| alt="close-feedback" | ||
| className="ml-1 mr-2 float-right" | ||
| iconAs="Icon" | ||
| id="close-feedback-button" | ||
| onClick={[MockFunction closeFeedbackWidget]} | ||
| src="Close" | ||
| variant="secondary" | ||
| /> | ||
| </div> | ||
| </ActionRow> | ||
| </div> | ||
| </div> | ||
| `; |
99 changes: 99 additions & 0 deletions
99
src/courseware/course/sequence/Unit/feedback-widget/index.jsx
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,99 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { useIntl } from '@edx/frontend-platform/i18n'; | ||
| import { ActionRow, IconButton, Icon } from '@edx/paragon'; | ||
| import { Close, ThumbUpOutline, ThumbDownOffAlt } from '@edx/paragon/icons'; | ||
|
|
||
| import './index.scss'; | ||
| import messages from './messages'; | ||
| import useFeedbackWidget from './useFeedbackWidget'; | ||
|
|
||
| const FeedbackWidget = ({ | ||
| courseId, | ||
| languageCode, | ||
| unitId, | ||
| userId, | ||
| }) => { | ||
| const { formatMessage } = useIntl(); | ||
| const { | ||
| closeFeedbackWidget, | ||
| sendFeedback, | ||
| showFeedbackWidget, | ||
| showGratitudeText, | ||
| } = useFeedbackWidget({ | ||
| courseId, | ||
| languageCode, | ||
| unitId, | ||
| userId, | ||
| }); | ||
| return ( | ||
| (showFeedbackWidget || showGratitudeText) && ( | ||
| <div className="sequence w-100"> | ||
| { | ||
| showFeedbackWidget && ( | ||
| <div className="ml-4 mr-2"> | ||
| <ActionRow> | ||
| {formatMessage(messages.rateTranslationText)} | ||
| <ActionRow.Spacer /> | ||
| <div> | ||
| <IconButton | ||
| src={ThumbUpOutline} | ||
| iconAs={Icon} | ||
| alt="positive-feedback" | ||
| onClick={sendFeedback} | ||
| variant="secondary" | ||
| className="m-1" | ||
| id="positive-feedback-button" | ||
| /> | ||
| <IconButton | ||
| src={ThumbDownOffAlt} | ||
| iconAs={Icon} | ||
| alt="negative-feedback" | ||
| onClick={sendFeedback} | ||
| variant="secondary" | ||
| className="mr-2" | ||
| id="negative-feedback-button" | ||
| /> | ||
| </div> | ||
| <div className="mb-1 text-light action-row-divider"> | ||
| | | ||
| </div> | ||
| <div> | ||
| <IconButton | ||
| src={Close} | ||
| iconAs={Icon} | ||
| alt="close-feedback" | ||
| onClick={closeFeedbackWidget} | ||
| variant="secondary" | ||
| className="ml-1 mr-2 float-right" | ||
| id="close-feedback-button" | ||
| /> | ||
| </div> | ||
| </ActionRow> | ||
| </div> | ||
| ) | ||
| } | ||
| { | ||
| showGratitudeText && ( | ||
| <div className="ml-4 mr-4"> | ||
| <ActionRow className="m-2 justify-content-center"> | ||
| {formatMessage(messages.gratitudeText)} | ||
| </ActionRow> | ||
| </div> | ||
| ) | ||
| } | ||
| </div> | ||
| ) | ||
| ); | ||
| }; | ||
|
|
||
| FeedbackWidget.propTypes = { | ||
| courseId: PropTypes.string.isRequired, | ||
| languageCode: PropTypes.string.isRequired, | ||
| userId: PropTypes.string.isRequired, | ||
| unitId: PropTypes.string.isRequired, | ||
| }; | ||
|
|
||
| FeedbackWidget.defaultProps = {}; | ||
|
|
||
| export default FeedbackWidget; |
4 changes: 4 additions & 0 deletions
4
src/courseware/course/sequence/Unit/feedback-widget/index.scss
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,4 @@ | ||
| .action-row-divider { | ||
| font-size: 31px; | ||
| font-weight: 100; | ||
| } |
51 changes: 51 additions & 0 deletions
51
src/courseware/course/sequence/Unit/feedback-widget/index.test.jsx
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,51 @@ | ||
| import { shallow } from '@edx/react-unit-test-utils'; | ||
|
|
||
| import FeedbackWidget from './index'; | ||
|
|
||
| jest.mock('@edx/paragon', () => jest.requireActual('@edx/react-unit-test-utils').mockComponents({ | ||
| ActionRow: { | ||
| Spacer: 'Spacer', | ||
| }, | ||
| IconButton: 'IconButton', | ||
| Icon: 'Icon', | ||
| })); | ||
| jest.mock('@edx/paragon/icons', () => ({ | ||
| Close: 'Close', | ||
| ThumbUpOutline: 'ThumbUpOutline', | ||
| ThumbDownOffAlt: 'ThumbDownOffAlt', | ||
| })); | ||
| jest.mock('./useFeedbackWidget', () => () => ({ | ||
| closeFeedbackWidget: jest.fn().mockName('closeFeedbackWidget'), | ||
| openFeedbackWidget: jest.fn().mockName('openFeedbackWidget'), | ||
| sendFeedback: jest.fn().mockName('sendFeedback'), | ||
| showFeedbackWidget: true, | ||
| showGratitudeText: false, | ||
| })); | ||
| jest.mock('@edx/frontend-platform/i18n', () => { | ||
| const i18n = jest.requireActual('@edx/frontend-platform/i18n'); | ||
| const { formatMessage } = jest.requireActual('@edx/react-unit-test-utils'); | ||
| // this provide consistent for the test on different platform/timezone | ||
| const formatDate = jest.fn(date => new Date(date).toISOString()).mockName('useIntl.formatDate'); | ||
| return { | ||
| ...i18n, | ||
| useIntl: jest.fn(() => ({ | ||
| formatMessage, | ||
| formatDate, | ||
| })), | ||
| defineMessages: m => m, | ||
| FormattedMessage: () => 'FormattedMessage', | ||
| }; | ||
| }); | ||
|
|
||
| describe('<FeedbackWidget />', () => { | ||
| const props = { | ||
| courseId: 'course-v1:edX+DemoX+Demo_Course', | ||
| languageCode: 'es', | ||
| unitId: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@37b72b3915204b70acb00c55b604b563', | ||
| userId: '123', | ||
| }; | ||
| it('renders', () => { | ||
| const wrapper = shallow(<FeedbackWidget {...props} />); | ||
| expect(wrapper.snapshot).toMatchSnapshot(); | ||
| }); | ||
| }); |
16 changes: 16 additions & 0 deletions
16
src/courseware/course/sequence/Unit/feedback-widget/messages.js
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,16 @@ | ||
| import { defineMessages } from '@edx/frontend-platform/i18n'; | ||
|
|
||
| const messages = defineMessages({ | ||
| rateTranslationText: { | ||
| id: 'feedbackWidget.rateTranslationText', | ||
| defaultMessage: 'Rate this page translation', | ||
| description: 'Title for the feedback widget action row.', | ||
| }, | ||
| gratitudeText: { | ||
| id: 'feedbackWidget.gratitudeText', | ||
| defaultMessage: 'Thank you! Your feedback matters.', | ||
| description: 'Title for secondary action row.', | ||
| }, | ||
| }); | ||
|
|
||
| export default messages; |
Oops, something went wrong.