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);
    });
});