// @flow
import * as React from 'react';
import { queryMock } from '../../__testUtils__/queryMock'; // Or wherever your queryMock is located
import { App } from '../App';
import { render, wait } from 'react-testing-library';

describe('App', () => {
  it('should render the current user count', async () => {
    /**
     * App fetches the query AppQuery. Here, we mock all requests for that query.
     */

    queryMock.mockQuery({
      name: 'AppQuery',
      data: {
        viewer: {
          id: '1',
          currentUserCount: 12
        }
      }
    });

    /**
     * We mount the app and wait for our element that displays the app's content
     * to be visible.
     */

    const r = render(<App />);

    // If App works, we'll see "User count: 12" when it has made its request and rendered.
    await wait(() => r.getByText('User count: 12'));

    // There! That's all that's needed. If "User count: 12" does not appear within the timeout, something's up and the test will fail.
  });
});