Assessment: New Edit Assessment form

[pchunky]

Before	After

Notable changes

• Fields are now categorised and responsive
• Unavailable fields are now disabled and clearly annotated
• Radio buttons for Visibility and Grading mode
• Submission password is now Session unlock password, available when Session protection is enabled
• New FileManager with multi-file selection support
• Replace toggle switches with checkboxes for better discoverability
• In the New Assessment dialog, the prompt to discard changes will only appear when the form has been modified
• In the New Assessment dialog, Submit has been relabeled Create as Draft
• AssessmentForm/index is now in TypeScript
• Add AssessmentForm and AssessmentIndex tests in TypeScript with React Testing Library

Notes on testing inputs on FormTextFields

It is made known that our FormTextField component's value currently cannot be programmatically changed due to the way the onChange listener is written. Therefore, tests involving entering texts into FormTextFields will not work either because as per Testing Library's documentation, this is how one does it:

const input = form.getByLabelText('Title *');
fireEvent.change(input, { target: { value: 'New Title' } });
expect(input).toHaveValue('New Title');     // <- will fail!

which involves an dispatchEvent of type 'change' to the HTMLElement.

Until or unless FormTextField.onChange is changed, developers should use @testing-library/user-event to simulate "a more natural typing behaviour" and test FormTextField inputs. See 2afe473. For example:

import userEvent from '@testing-library/user-event';

const user = userEvent.setup();
const input = form.getByLabelText('Title *');   // <- assume value is currently 'Hello'
await user.type(input, ' World');
expect(input).toHaveValue('Hello World');       // <- will succeed!

user-event can also test for clicks and other user interactions, however, the author suggests using it only when the built-in fireEvent fails.

[ekowidianto]

Hi @purfectliterature awesome work!! Thanks for this!

Some comments and nits below:

• the save button placement is off in small screen.
  
• Remove paddings/reduce row height in the material table
  
• Can add download link for the materials uploaded (open in new tab)

[pchunky]

Request	Current state	Remarks
Fix Save button placement on mobile screens		Styling for this button is temporary. The New Assessment button is injected to .pull-right from Rails, but I did not want to do it that way. Once the entire header is ported to React, then we can properly place this.
Reduce row height in FileManager		None
Add URL to view files in new tab		Only uploaded materials will have this hyperlink.

[ekowidianto]

LGTM Thanks!