it(`flows between All Clients and Client Detail pages`, async () => {

        // setup component and mock api calls
        const clientsList = MockApiData.successData([
            MockApiData.partialClientData({
                client_first_name: "Sammy",
                partner_first_name: "David",
                upcoming_shoot_date: "2020-07-17T14:00:00Z",
                uuid: client_uuid
            }),
            MockApiData.partialClientData({
                uuid: "0000",
                client_first_name: "Natasha",
                partner_first_name: "Zihao",
                package_name: "Wedding Classic",
                upcoming_shoot_date: "2020-09-17T14:00:00Z",
                current_stage: MockApiData.taskData({
                    category: "Proposal & Retainer",
                    step: "Confirm Proposal & Retainer"
                })
            })
        ])
        const client = MockApiData.successData(
            MockApiData.allClientData({ uuid: client_uuid })
        )
        const apiHandler = new MockAPIHandler({
            [Endpoints.getClients(user_uuid)]: [clientsList],
            [Endpoints.getClient(client_uuid)]: [client]
        });

        let component;

        // mounts the entire application as we are testing the flow between 2 pages
        await act(async () => {
            component = render(
                <MemoryRouter initialEntries={["/clients"]} initialIndex={0}>
                    <App apiHandler={apiHandler} authUser={authUser}/>
                </MemoryRouter>
            )
        })

        const { findByText, getByText, getAllByText } = component;

        // asserts expected text to be found on All Clients Page
        await waitForElement(() =>
            findByText(/Sammy & David/i)
        )

        getByText(/Wedding Premier/i)
        getByText(/July 17, 2020/i)
        getByText(/New Client Inquiry/i)
        getByText(/Request More Information/i)

        getByText(/Natasha & Zihao/i)
        getByText(/September 17, 2020/i)
        getByText(/Confirm Proposal & Retainer/i)

        // Clicking the View button to navigate to a client detail page
        await act(async () => {
            fireEvent.click(getAllByText("View")[0]);
        })

        // asserts expected text to be found on the Client Detail Page
        await waitForElement(() =>
            findByText(/sammy lee/i)
        )
        getByText(/client information/i)
        getAllByText(/package/i)
        getAllByText(/new client inquiry/i)
    })