Courtside Devlog 5: Account Setup and Testing

Testing

For unit testing, I decided to use Jest since it is well integrated with React, React Native, and Expo. In addition, React Native Testing Library was added to allow us to create tests that are easier to maintain and are more reliable. This is done by providing functions that wrap functionality in the bare-bones React test renderer, which also enforce best testing practices. This library also provides more ways to match and find React Native elements and components.

I also wrote some basic tests to demonstrate for the team how to write unit tests in Jest. As an example, I used the DangerButton component, which shows an alert after pushing the button to ensure the user wants to do the button’s action.

Two DangerButtons in the app

The alert from pushing the Clear Data button

describe("Testing Danger Button Component", () => {
    beforeEach(() => jest.resetAllMocks());

    it("Displays the button text", () => {
        render(<DangerButton text="Button Text" onPress={jest.fn()} />)
        const text = screen.getByText('Button Text');
        expect(text).toBeOnTheScreen();
    });

    it("Shows an alert when pressed", () => {
        const mockFn = jest.fn();
        jest.spyOn(Alert, 'alert');
        render(<DangerButton text="test" onPress={mockFn} />);

        fireEvent.press(screen.getByText('test'));
        expect(Alert.alert).toHaveBeenCalled();
    });
})

The tests check to make sure the button displays the given text, that it shows an alert when pressed, and that it doesn’t show an alert when pressed and disabled.

Account Setup

The user can now set up parts of their account while they are creating an account. This required me to create two new screens: a screen that allows users to select what sports they want to follow (Basketball is still the only option) and a screen that allows users to follow teams. The team following screen for setup had to be different from the team following screen within the main navigation due to how the data has to be packaged and processed after the user makes their selection.

The team following screen was also updated to have a search bar like the stat selection screen.

After picking their initial preferences, the user is sent to the sign-up screen that we have had all along. The initial preferences are sent to the Flask API with the HTTP request that creates an account. This required some small changes to be made to the /users/signUp route (i.e., sending more information in the request body.)

Now, after the user verifies their email, their initial team preferences will be in the app.