Add browser testing for cases that jsdom can't handle (notably scroll position)

[JRJurman]

Summary

While we've been able to use jsdom and jest for almost every test case (potentially more than we should be), there are some layout dependent pieces of code - most notably scroll position inside an input - that can't be tested with jsdom. In order to effectively test these parts of the code, we should introduce a library that runs tests in a real browser (such as cypress and cypress-testing-library).

Below is the test case that we wanted to introduce, but were unable to:

// This test is not possible in jsdom, since it doesn't implement layout
// recommendations are to use Cypress and cypress-testing-library for this
xit('should keep scroll position on input when components rerender', async () => {
	// start the app
	const { container } = startApp();

	// focus on the input
	userEvent.click(getByLabelText(container, 'New Task Type'));

	// verify that the element has focus (before we start changing text)
	await waitFor(() => {
		expect(getByLabelText(container, 'New Task Type')).toHaveFocus();
	});

	// clear the input
	userEvent.type(getByLabelText(container, 'New Task Type'), '{selectall}{backspace}');

	// wait for mutation observer to reapply focus
	await waitFor(() => {
		expect(getByLabelText(container, 'New Task Type')).toHaveFocus();
	});

	// update the state by typing
	const longText = 'This is some really long text that should go beyond the default scroll position';
	userEvent.type(getByLabelText(container, 'New Task Type'), longText);

	// verify the element has the new value
	expect(getByLabelText(container, 'New Task Type')).toHaveValue(longText);
	userEvent.click(getByLabelText(container, 'New Task Type'));
	expect(getByLabelText(container, 'New Task Type').scrollLeft).toBe(270);

	// wait for mutation observer to re-attach focus
	// expect the input to keep focus and scroll position after the change event
	await waitFor(() => {
		expect(getByLabelText(container, 'New Task Type')).toHaveFocus();
		expect(getByLabelText(container, 'New Task Type').scrollLeft).toBe(270);
	});
});