From f8ad01acfd1c8cc74fce341565ee6fe0a1edc6a4 Mon Sep 17 00:00:00 2001 From: Dima Alipov Date: Tue, 26 Dec 2023 10:59:47 +0100 Subject: [PATCH] fix: Fixed the display of the selection of available time zones. --- src/account-settings/EditableSelectField.jsx | 25 +- src/account-settings/data/selectors.test.js | 16 + .../test/EditableSelectField.test.jsx | 169 ++++++ .../EditableSelectField.test.jsx.snap | 485 ++++++++++++++++++ 4 files changed, 692 insertions(+), 3 deletions(-) create mode 100644 src/account-settings/data/selectors.test.js create mode 100644 src/account-settings/test/EditableSelectField.test.jsx create mode 100644 src/account-settings/test/__snapshots__/EditableSelectField.test.jsx.snap diff --git a/src/account-settings/EditableSelectField.jsx b/src/account-settings/EditableSelectField.jsx index ec2406b0c..8eea426bf 100644 --- a/src/account-settings/EditableSelectField.jsx +++ b/src/account-settings/EditableSelectField.jsx @@ -98,9 +98,28 @@ const EditableSelectField = (props) => { value: confirmationValue, }); }; - const selectOptions = options.map(option => ( - - )); + const selectOptions = options.map((option) => { + if (option.group) { + // If the option has a 'group' property, it represents an element with sub-options. + return ( + + {option.group.map((subOption) => ( + + ))} + + ); + } + return ( + + ); + }); return ( { + it('returns the profileDataManager from the state', () => { + const state = { + accountSettings: { + profileDataManager: { testValue }, + }, + }; + const result = profileDataManagerSelector(state); + + expect(result).toEqual(state.accountSettings.profileDataManager); + }); +}); diff --git a/src/account-settings/test/EditableSelectField.test.jsx b/src/account-settings/test/EditableSelectField.test.jsx new file mode 100644 index 000000000..911749b59 --- /dev/null +++ b/src/account-settings/test/EditableSelectField.test.jsx @@ -0,0 +1,169 @@ +import React from 'react'; +import { BrowserRouter as Router } from 'react-router-dom'; +import { Provider } from 'react-redux'; +import renderer from 'react-test-renderer'; +import configureStore from 'redux-mock-store'; + +import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n'; + +import EditableSelectField from '../EditableSelectField'; + +const mockDispatch = jest.fn(); +jest.mock('react-redux', () => ({ + ...jest.requireActual('react-redux'), + useDispatch: () => mockDispatch, +})); + +jest.mock('@edx/frontend-platform/auth'); +jest.mock('../data/selectors', () => jest.fn().mockImplementation(() => ({ certPreferenceSelector: () => ({}) }))); + +const IntlEditableSelectField = injectIntl(EditableSelectField); + +const mockStore = configureStore(); + +describe('EditableSelectField', () => { + let props = {}; + let store = {}; + + const reduxWrapper = children => ( + + + {children} + + + ); + + beforeEach(() => { + store = mockStore(); + props = { + name: 'testField', + label: 'Main Label', + emptyLabel: 'Empty Main Label', + type: 'text', + value: 'Test Field', + userSuppliedValue: '', + options: [ + { + label: 'Default Option', + value: 'defaultOption', + }, + { + label: 'User Options', + group: [ + { + label: 'Suboption 1', + value: 'suboption1', + }, + ], + }, + { + label: 'Other Options', + group: [ + { + label: 'Suboption 2', + value: 'suboption2', + }, + { + label: 'Suboption 3', + value: 'suboption3', + }, + ], + }, + ], + saveState: 'default', + error: '', + confirmationMessageDefinition: { + id: 'confirmationMessageId', + defaultMessage: 'Default Confirmation Message', + description: 'Description of the confirmation message', + }, + confirmationValue: 'Confirmation Value', + helpText: 'Helpful Text', + isEditing: false, + isEditable: true, + isGrayedOut: false, + }; + }); + + afterEach(() => jest.clearAllMocks()); + + it('renders EditableSelectField correctly with editing disabled', () => { + const tree = renderer.create(reduxWrapper()).toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders EditableSelectField correctly with editing enabled', () => { + props = { + ...props, + isEditing: true, + }; + + const tree = renderer.create(reduxWrapper()).toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders EditableSelectField with an error', () => { + const errorProps = { + ...props, + error: 'This is an error message', + }; + const tree = renderer.create(reduxWrapper()).toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders selectOptions when option has a group', () => { + const propsWithGroup = { + ...props, + options: [ + { + label: 'User Options', + group: [ + { + label: 'Suboption 1', + value: 'suboption1', + }, + ], + }, + ], + }; + const tree = renderer.create(reduxWrapper()).toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders selectOptions when option does not have a group', () => { + const propsWithoutGroup = { + ...props, + options: [ + { + label: 'Default Option', + value: 'defaultOption', + }, + ], + }; + const tree = renderer.create(reduxWrapper()).toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders selectOptions with multiple groups', () => { + const propsWithGroups = { + ...props, + options: [ + { + label: 'Mixed Options', + group: [ + { + label: 'Suboption 1', + value: 'suboption1', + }, + { + label: 'Suboption 2', + value: 'suboption2', + }, + ], + }, + ], + }; + const tree = renderer.create(reduxWrapper()).toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/account-settings/test/__snapshots__/EditableSelectField.test.jsx.snap b/src/account-settings/test/__snapshots__/EditableSelectField.test.jsx.snap new file mode 100644 index 000000000..5bdf6c51e --- /dev/null +++ b/src/account-settings/test/__snapshots__/EditableSelectField.test.jsx.snap @@ -0,0 +1,485 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EditableSelectField renders EditableSelectField correctly with editing disabled 1`] = ` +
+
+
+
+
+ Main Label +
+ +
+

+ Test Field +

+

+ Default Confirmation Message +

+
+
+
+`; + +exports[`EditableSelectField renders EditableSelectField correctly with editing enabled 1`] = ` +
+
+
+
+ +
+ + + + + + + + + + +
+
+
+ Helpful Text +
+
+
+ + + + + +
+ +
+
+
+

+ + +

+
+
+
+`; + +exports[`EditableSelectField renders EditableSelectField with an error 1`] = ` +
+
+
+
+
+ Main Label +
+ +
+

+ Test Field +

+

+ Default Confirmation Message +

+
+
+
+`; + +exports[`EditableSelectField renders selectOptions when option does not have a group 1`] = ` +
+
+
+
+
+ Main Label +
+ +
+

+ Test Field +

+

+ Default Confirmation Message +

+
+
+
+`; + +exports[`EditableSelectField renders selectOptions when option has a group 1`] = ` +
+
+
+
+
+ Main Label +
+ +
+

+ Test Field +

+

+ Default Confirmation Message +

+
+
+
+`; + +exports[`EditableSelectField renders selectOptions with multiple groups 1`] = ` +
+
+
+
+
+ Main Label +
+ +
+

+ Test Field +

+

+ Default Confirmation Message +

+
+
+
+`;