import React from 'react';
import { screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { accountList } from 'src/__fixtures__/graphql/account-list';
import * as accountQuery from 'src/apollo/queries/account';
import { AccountList } from 'src/components/account-list/account-list';
import type { GetAccountsListQuery } from 'src/apollo/queries/account/__generated__/get-accounts-list';

describe('<AccountList>', () => {
    let requestSpy: any;

    afterEach(jest.restoreAllMocks);

    beforeEach(() => {
        requestSpy = jest
            .spyOn(accountQuery, 'useAccountList')
            .mockReturnValue({
                data: accountList as GetAccountsListQuery,
                error: undefined,
                loading: false,
            });
    });

    const render = () => renderInAppContext(<AccountList />);

    it('requests a list of accounts on render', () => {
        render();
        expect(requestSpy).toHaveBeenCalled();
    });

    it('renders a list of accounts', () => {
        render();
        const bodyText: any = [];
        document
            .querySelectorAll('div.GridTable-cell')
            .forEach((body: any) => bodyText.push(body.textContent));
        expect(bodyText).toEqual([
            'Test Account 1',
            '1',
            '1',
            'OAAccounting',
            'Test Account 2',
            '2',
            '2',
            'OAAccounting',
            'Test Account 3',
            '3',
            '2',
            'OAAccounting',
        ]);
    });

    it('renders account search filter', () => {
        render();
        expect(
            screen.getByPlaceholderText('Filter by Account Name or ID')
        ).toBeDefined();
        expect(screen.queryByText('Clear Filters')).toBeNull();
    });
});