diff --git a/src/account-settings/demographics/Checkboxes.jsx b/src/account-settings/demographics/Checkboxes.jsx index 4a037f1..d593404 100644 --- a/src/account-settings/demographics/Checkboxes.jsx +++ b/src/account-settings/demographics/Checkboxes.jsx @@ -29,7 +29,7 @@ export const Checkboxes = (props) => { setSelected(newSelected); } - // If unchecked, make sure this option is NOT in `seleted` + // If unchecked, make sure this option is NOT in `selected` if (!value) { setSelected(selected.filter(i => i !== option)); } diff --git a/src/account-settings/demographics/data/service.js b/src/account-settings/demographics/data/service.js index bf2041a..a6e2b6a 100644 --- a/src/account-settings/demographics/data/service.js +++ b/src/account-settings/demographics/data/service.js @@ -86,7 +86,7 @@ export async function patchDemographics(userId, commitValues) { /** * If there was an error making the PATCH call then we create an apiError object containing a 'demographicsError' * fieldError. The content of the error itself isn't particularly important. This will trigger the - * `renderDemographicsServiceIssueWarningMessage()` (DemographicsSection.jsx) to display an Alert to let the + * `renderDemographicsServiceIssueWarningMessage()` (in DemographicsSection.jsx) to display an Alert to let the * end-user know that there may be an issue communicating with the Demographics service. * * @param {Error} error diff --git a/src/account-settings/demographics/test/DemographicsSection.test.jsx b/src/account-settings/demographics/test/DemographicsSection.test.jsx index 8868443..bf99236 100644 --- a/src/account-settings/demographics/test/DemographicsSection.test.jsx +++ b/src/account-settings/demographics/test/DemographicsSection.test.jsx @@ -6,10 +6,7 @@ import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n'; import DemographicsSection from '../DemographicsSection'; import { Provider } from 'react-redux'; import React from 'react'; -import { SELF_DESCRIBE } from '../../data/constants'; -import { act } from 'react-dom/test-utils'; import configureStore from 'redux-mock-store'; -import { faItalic } from '@fortawesome/free-solid-svg-icons'; import renderer from 'react-test-renderer'; jest.mock('@edx/frontend-platform/auth'); @@ -25,7 +22,6 @@ const mockStore = configureStore(); describe('DemographicsSection', () => { let props = {}; let store = {}; - selectors.mockClear(); // TJ thinks this may not be needed, I can test with removing it and see if everything still works const reduxWrapper = children => ( @@ -33,11 +29,10 @@ describe('DemographicsSection', () => { ); - // same as a "Setup method" beforeEach(() => { store = mockStore(); props = { - updateDraft: undefined, //? + updateDraft: jest.fn(), formValues: { demographics_gender: 'declined', demographics_gender_description: '', @@ -61,16 +56,15 @@ describe('DemographicsSection', () => { catch: () => {}, }), })); - auth.getAuthenticatedUser = jest.fn(() => ({ userId: 3 })); + auth.getAuthenticatedUser = jest.fn(() => ({ userId: 1 })); }); - // each "it" is an individual unit test it('should render', () => { const wrapper = renderer.create(reduxWrapper()).toJSON(); expect(wrapper).toMatchSnapshot(); }); - it('should render alert if error occurred', () => { + it('should render an Alert if an error occurs', () => { props = { ...props, formErrors: { @@ -81,4 +75,54 @@ describe('DemographicsSection', () => { const wrapper = renderer.create(reduxWrapper()).toJSON(); expect(wrapper).toMatchSnapshot(); }); + + it('should set user input correctly when user provides gender self-description', () => { + props = { + ...props, + formValues: { + demographics_gender: 'self-describe', + demographics_gender_description: 'test', + }, + }; + + const wrapper = renderer.create(reduxWrapper()).toJSON(); + expect(wrapper).toMatchSnapshot(); + }); + + it('should set user input correctly when user provides answers to work_status question', () => { + props = { + ...props, + formValues: { + demographics_work_status: 'other', + demographics_work_status_description: 'test', + } + } + + const wrapper = renderer.create(reduxWrapper()).toJSON(); + expect(wrapper).toMatchSnapshot(); + }); + + it('should render ethnicity text correctly', () => { + props = { + ...props, + formValues: { + demographics_user_ethnicity: ['asian'] + } + } + + const wrapper = renderer.create(reduxWrapper()).toJSON(); + expect(wrapper).toMatchSnapshot(); + }); + + it('should render ethnicity correctly when multiple options are selected', () => { + props = { + ...props, + formValues: { + demographics_user_ethnicity: ['hispanic-latin-spanish', 'white'] + } + } + + const wrapper = renderer.create(reduxWrapper()).toJSON(); + expect(wrapper).toMatchSnapshot(); + }); }); diff --git a/src/account-settings/demographics/test/__snapshots__/DemographicsSection.test.jsx.snap b/src/account-settings/demographics/test/__snapshots__/DemographicsSection.test.jsx.snap index fd9af2e..9e2e422 100644 --- a/src/account-settings/demographics/test/__snapshots__/DemographicsSection.test.jsx.snap +++ b/src/account-settings/demographics/test/__snapshots__/DemographicsSection.test.jsx.snap @@ -579,7 +579,7 @@ exports[`DemographicsSection should render 1`] = ` `; -exports[`DemographicsSection should render alert if error occurred 1`] = ` +exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
`; + +exports[`DemographicsSection should render ethnicity correctly when multiple options are selected 1`] = ` +
+

+ Optional Information +

+
+
+
+
+
+ Gender identity +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Race/Ethnicity identity +
+ +
+

+ Hispanic, Latin, or Spanish origin, White +

+

+

+
+
+
+
+
+
+
+ Family income +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ U.S. Military status +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Your education level +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Parents/Guardians education level +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Employment status +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Current work industry +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Future work industry +
+ +
+

+ +

+

+

+
+
+
+`; + +exports[`DemographicsSection should render ethnicity text correctly 1`] = ` +
+

+ Optional Information +

+
+
+
+
+
+ Gender identity +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Race/Ethnicity identity +
+ +
+

+ Asian +

+

+

+
+
+
+
+
+
+
+ Family income +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ U.S. Military status +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Your education level +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Parents/Guardians education level +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Employment status +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Current work industry +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Future work industry +
+ +
+

+ +

+

+

+
+
+
+`; + +exports[`DemographicsSection should set user input correctly when user provides answers to work_status question 1`] = ` +
+

+ Optional Information +

+
+
+
+
+
+ Gender identity +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Race/Ethnicity identity +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Family income +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ U.S. Military status +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Your education level +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Parents/Guardians education level +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Employment status +
+ +
+

+ Other: test +

+

+

+
+
+
+
+
+
+
+ Current work industry +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Future work industry +
+ +
+

+ +

+

+

+
+
+
+`; + +exports[`DemographicsSection should set user input correctly when user provides gender self-description 1`] = ` +
+

+ Optional Information +

+
+
+
+
+
+ Gender identity +
+ +
+

+ Prefer to self-describe: test +

+

+

+
+
+
+
+
+
+
+ Race/Ethnicity identity +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Family income +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ U.S. Military status +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Your education level +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Parents/Guardians education level +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Employment status +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Current work industry +
+ +
+

+ +

+

+

+
+
+
+
+
+
+
+ Future work industry +
+ +
+

+ +

+

+

+
+
+
+`;