Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate off Input Select Paragon Deprecation. #302

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Migrate off Input Select Paragon Deprecation. #302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
58b045e
refactor: migrate off input select paragon deprecation in change enroll
Jan 21, 2023
49fd5ea
refactor: fixed by default value of select options
Jan 21, 2023
c5290b1
refactor: migrate off inputSelect deprecation in change enroll aand f…
Jan 22, 2023
f99e695
refactor: fixed default value option
Jan 23, 2023
7594d33
refactor: added key to map
Jan 23, 2023
0135993
refactor: add key to modeList map
Jan 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 58 additions & 34 deletions src/users/enrollments/ChangeEnrollmentForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useCallback, useState, useContext } from 'react';
import PropTypes from 'prop-types';
import {
ActionRow,
Button, Input, InputSelect, ModalDialog,
Button, ModalDialog, Form,
} from '@edx/paragon';
import AlertList from '../../userMessages/AlertList';
import { patchEnrollment } from '../data/api';
Expand All @@ -28,9 +28,18 @@ export default function ChangeEnrollmentForm({

const getModes = () => {
const modeList = [];
modeList.push({ label: 'New Mode', value: '', disabled: true });

modeList.push(
<option value="" disabled="true" selected="true">
New Mode
</option>,
);
enrollment.courseModes.map(enrollmentMode => (
!(enrollmentMode.slug === enrollment.mode) && modeList.push(enrollmentMode.slug)
!(enrollmentMode.slug === enrollment.mode) && modeList.push(
<option key={enrollmentMode.slug}>
{enrollmentMode.slug}
</option>,
)
));
return modeList;
};
Expand Down Expand Up @@ -98,37 +107,52 @@ export default function ChangeEnrollmentForm({
</div>
</div>
<hr />
<Form.Group>
<Form.Control
as="select"
id="mode"
name="mode"
disabled={hideOnSubmit}
onChange={(event) => setMode(event.target.value)}
>
{getModes()}

<InputSelect
className="mb-n3"
type="select"
options={getModes()}
value=""
id="mode"
name="mode"
onChange={(event) => setMode(event)}
disabled={hideOnSubmit}
/>
<InputSelect
className="mb-4"
type="select"
options={reasons}
id="reason"
name="reason"
value=""
onChange={(event) => setReason(event)}
disabled={hideOnSubmit}
/>
<Input
placeholder="Explanation"
type="textarea"
id="comments"
name="comments"
defaultValue=""
onChange={(event) => setComments(event.target.value)}
disabled={hideOnSubmit}
ref={forwardedRef}
/>
</Form.Control>
</Form.Group>
<Form.Group>
<Form.Control
className="mb-4"
as="select"
id="reason"
value=""
name="reason"
disabled={hideOnSubmit}
onChange={(event) => setReason(event.target.value)}
>
{reasons.map(item => (
<option
value={item.value}
key={item.value}
disabled={item.disabled}
>
{item.label}
</option>
))}
</Form.Control>
</Form.Group>
<Form.Group>
<Form.Control
placeholder="Explanation"
as="textarea"
autoResize
id="comments"
name="comments"
defaultValue=""
disabled={hideOnSubmit}
ref={forwardedRef}
onChange={(event) => setComments(event.target.value)}
/>
</Form.Group>
</div>
</form>
);
Expand Down Expand Up @@ -172,7 +196,7 @@ export default function ChangeEnrollmentForm({
>
Submit
</Button>
)},
)}
</ActionRow>
</ModalDialog.Footer>
</ModalDialog>
Expand Down
20 changes: 10 additions & 10 deletions src/users/enrollments/ChangeEnrollmentForm.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ describe('Enrollment Change form', () => {
it('Default form rendering', () => {
let changeFormModal = wrapper.find('ModalDialog#change-enrollment');
expect(changeFormModal.prop('isOpen')).toEqual(true);
const modeSelectionDropdown = wrapper.find('select#mode');
const modeChangeReasonDropdown = wrapper.find('select#reason');
const commentsTextarea = wrapper.find('textarea#comments');
const modeSelectionDropdown = wrapper.find('#mode');
const modeChangeReasonDropdown = wrapper.find('#reason');
const commentsTextarea = wrapper.find('#comments');
expect(modeSelectionDropdown.find('option')).toHaveLength(2);
expect(modeChangeReasonDropdown.find('option')).toHaveLength(5);
expect(commentsTextarea.text()).toEqual('');
Expand All @@ -44,9 +44,10 @@ describe('Enrollment Change form', () => {
const apiMock = jest.spyOn(api, 'patchEnrollment').mockImplementationOnce(() => Promise.resolve({}));
expect(apiMock).toHaveBeenCalledTimes(0);

wrapper.find('select#reason').simulate('change', { target: { value: 'Other' } });
wrapper.find('select#mode').simulate('change', { target: { value: 'verified' } });
wrapper.find('textarea#comments').simulate('change', { target: { value: 'test mode change' } });
wrapper.find('select.form-control').at(0).simulate('change', { target: { value: 'verified' } });
wrapper.find('select.form-control').at(1).simulate('change', { target: { value: 'Other' } });

wrapper.find('textarea.form-control').simulate('change', { target: { value: 'test mode change' } });
expect(wrapper.find('div.spinner-border').length).toEqual(0);
wrapper.find('button.btn-primary').simulate('click');
expect(wrapper.find('div.spinner-border').length).toEqual(1);
Expand Down Expand Up @@ -74,11 +75,10 @@ describe('Enrollment Change form', () => {
],
}));
expect(apiMock).toHaveBeenCalledTimes(0);
wrapper.find('select.form-control').at(0).simulate('change', { target: { value: 'Other' } });

wrapper.find('select#reason').simulate('change', { target: { value: 'Other' } });

wrapper.find('select#mode').simulate('change', { target: { value: 'verified' } });
wrapper.find('textarea#comments').simulate('change', { target: { value: 'test mode change' } });
wrapper.find('select.form-control').at(1).simulate('change', { target: { value: 'verified' } });
wrapper.find('textarea.form-control').simulate('change', { target: { value: 'test mode change' } });
wrapper.find('button.btn-primary').simulate('click');
await waitForComponentToPaint(wrapper);

Expand Down
68 changes: 46 additions & 22 deletions src/users/enrollments/CreateEnrollmentForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useCallback, useState, useContext } from 'react';
import PropTypes from 'prop-types';
import {
ActionRow,
Button, Input, InputSelect, ModalDialog,
Button, Form, ModalDialog,
} from '@edx/paragon';

import AlertList from '../../userMessages/AlertList';
Expand Down Expand Up @@ -52,45 +52,69 @@ export default function CreateEnrollmentForm({
});

const createEnrollmentForm = (

<form>
<AlertList topic="createEnrollments" className="mb-3" />
<div className="form-group">
<Input
type="text"
<Form.Group>
<Form.Control
id="courseID"
name="courseID"
placeholder="Course Run ID"
name="courseID"
onChange={(event) => setCourseID(event.target.value)}
ref={forwardedRef}
/>
<InputSelect
className="mb-n3 small"
type="select"
options={modes}
</Form.Group>
<Form.Group>
<Form.Control
as="select"
id="mode"
name="mode"
value=""
onChange={(event) => setMode(event)}
/>
<InputSelect
className="mb-4 small"
type="select"
options={reasons}
onChange={(event) => setMode(event.target.value)}
>
{modes.map(item => (
<option
value={item.value}
disabled={item.disabled}
key={item.value}
selected={item.selected}
>
{item.label}
</option>
))}
</Form.Control>
</Form.Group>
<Form.Group>
<Form.Control
as="select"
id="reason"
name="reason"
value=""
onChange={(event) => setReason(event)}
/>
<Input
onChange={(event) => setReason(event.target.value)}
>
{reasons.map(item => (
<option
value={item.value}
disabled={item.disabled}
selected={item.selected}
key={item.value}
>
{item.label}
</option>
))}
</Form.Control>
</Form.Group>
<Form.Group>
<Form.Control
placeholder="Explanation"
type="textarea"
as="textarea"
autoResize
id="comments"
name="comments"
defaultValue=""
onChange={(event) => setComments(event.target.value)}
/>
</div>
</Form.Group>
</form>

);

return (
Expand Down
25 changes: 12 additions & 13 deletions src/users/enrollments/CreateEnrollmentForm.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ describe('Enrollment Create form', () => {
it('Default form rendering', () => {
let createFormModal = wrapper.find('ModalDialog#create-enrollment');
expect(createFormModal.prop('isOpen')).toEqual(true);
const modeSelectionDropdown = wrapper.find('select#mode');
const modeChangeReasonDropdown = wrapper.find('select#reason');
const commentsTextarea = wrapper.find('textarea#comments');
const modeSelectionDropdown = wrapper.find('#mode');
const modeChangeReasonDropdown = wrapper.find('#reason');
const commentsTextarea = wrapper.find('#comments');
expect(modeSelectionDropdown.find('option')).toHaveLength(9);
expect(modeChangeReasonDropdown.find('option')).toHaveLength(5);
expect(commentsTextarea.text()).toEqual('');
Expand All @@ -43,14 +43,14 @@ describe('Enrollment Create form', () => {
it('Successful form submission', async () => {
const apiMock = jest.spyOn(api, 'postEnrollment').mockImplementationOnce(() => Promise.resolve({}));
expect(apiMock).toHaveBeenCalledTimes(0);

wrapper.find('input#courseID').simulate('change', { target: { value: 'course-v1:testX+test123+2030' } });
wrapper.find('select#reason').simulate('change', { target: { value: 'Other' } });
wrapper.find('select#mode').simulate('change', { target: { value: 'verified' } });
wrapper.find('textarea#comments').simulate('change', { target: { value: 'test create enrollment' } });
wrapper.find('input.form-control').simulate('change', { target: { value: 'course-v1:testX+test123+2030' } });
wrapper.find('select.form-control').at(0).simulate('change', { target: { value: 'Other' } });
wrapper.find('select.form-control').at(1).simulate('change', { target: { value: 'verified' } });
wrapper.find('textarea.form-control').simulate('change', { target: { value: 'test create enrollment' } });
expect(wrapper.find('div.spinner-border').length).toEqual(0);
wrapper.find('button.btn-primary').simulate('click');
expect(wrapper.find('div.spinner-border').length).toEqual(1);

expect(apiMock).toHaveBeenCalledTimes(1);

await waitForComponentToPaint(wrapper);
Expand All @@ -72,14 +72,13 @@ describe('Enrollment Create form', () => {
],
}));
expect(apiMock).toHaveBeenCalledTimes(0);
wrapper.find('input#courseID').simulate('change', { target: { value: 'course-v1:testX+test123+2030' } });
wrapper.find('input.form-control').simulate('change', { target: { value: 'course-v1:testX+test123+2030' } });

wrapper.find('select#reason').simulate('change', { target: { value: 'Other' } });
wrapper.find('select#mode').simulate('change', { target: { value: 'verified' } });
wrapper.find('textarea#comments').simulate('change', { target: { value: 'test create enrollment' } });
wrapper.find('select.form-control').at(0).simulate('change', { target: { value: 'Other' } });
wrapper.find('select.form-control').at(1).simulate('change', { target: { value: 'verified' } });
wrapper.find('textarea.form-control').simulate('change', { target: { value: 'test create enrollment' } });
wrapper.find('button.btn-primary').simulate('click');
await waitForComponentToPaint(wrapper);

expect(apiMock).toHaveBeenCalledTimes(1);
expect(wrapper.find('.alert').text()).toEqual('Error creating enrollment');
});
Expand Down
8 changes: 6 additions & 2 deletions src/users/enrollments/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ export const CHANGE = 'change';
export const CREATE = 'create';

export const modes = [
{ label: 'Mode', value: '', disabled: true },
{
label: 'Mode', value: '', disabled: true, selected: 'true',
},
{ label: 'Honor', value: 'honor' },
{ label: 'Professional', value: 'professional' },
{ label: 'Verified', value: 'verified' },
Expand All @@ -14,7 +16,9 @@ export const modes = [
];

export const reasons = [
{ label: 'Reason', value: '', disabled: true },
{
label: 'Reason', value: '', disabled: true, selected: 'true',
},
{ label: 'Financial Assistance', value: 'Financial Assistance' },
{ label: 'Upset Learner', value: 'Upset Learner' },
{ label: 'Teaching Assistant', value: 'Teaching Assistant' },
Expand Down