setup integration tests

[stipsan]

I'm dying to rewrite more internals, but all the manual testing is too time consuming so it's time to figure out what the best way to test highly interactive, drag gesture-y and animated packages like this one.

Anything using jsdom is automatically a no go as it doesn't even try to deal with getBoundingClientRect, scrolling or animations. And cypress, puppeteer, all these e2e solutions... I have yet to find true love but maybe playwright is the one I've been looking for all along? Open for any suggestions but if nobody interjects then I think I'll try playwright 😄

[ChromeQ]

I've been recently trying to write tests using react testing library and it seems impossible to get the bottom sheet to "be visible" to jsdom. Seeing as most of my app content lives inside a bottom sheet then this makes it impossible to test well, has this been processed at all since December 2020?

[rjohnsonbade-dcs]

We have just come across this issue too.

I came to the repo hoping there would be unit tests that could be referenced but unfortunately there's no tests at all in the codebase :(.

[ChromeQ]

There is a workaround @rjohnsonbade-dcs , I found that you can mock 'react-spring' and bottom sheet relies on that for calculations. Something similar to this should get you 90% of the way...

jest.mock('react-spring', () => {
    const actualReactSpring = jest.requireActual('react-spring');

    return {
        ...actualReactSpring,
        useSpring: (): ReturnType<typeof useSpring> =>
            actualReactSpring.useSpring(() => mockSpring),
    };
});

let mockSpring: {
    y: number;
    ready: number;
    maxHeight: number;
    minSnap: number;
    maxSnap: number;
};
const maxHeight = window.innerHeight;

describe('BottomSheet', () => {
    beforeEach(() => {
        mockSpring = {
            y: maxHeight / 2,
            ready: 1,
            maxHeight,
            minSnap: maxHeight / 2,
            maxSnap: maxHeight,
        };
    });

I set as a let mockSpring (naming beginning with "mock" is important for jest's mock) as I want to be able to set the height and y positions per test. It should be self explanatory but ensure your y value is between the min and max snaps, and ready is 1. This ensures the opacity is set to 1 and then react-testing-library can tell you that it is in the document and visible.

If you want to test the interactions and swiping then you cannot do that as far as I am aware as jsdom will not do animations or layout stuff. So you may need to use something more suitable such as cypress for that but in my tests I want to be able to simply test the content renders in the Bottom Sheet.