prefer-find-by.test.ts

import {
  InvalidTestCase,
  ValidTestCase,
} from '@typescript-eslint/experimental-utils/dist/ts-eslint';
import { createRuleTester } from '../test-utils';
import {
  ASYNC_QUERIES_COMBINATIONS,
  SYNC_QUERIES_COMBINATIONS,
} from '../../../lib/utils';
import rule, {
  WAIT_METHODS,
  RULE_NAME,
  getFindByQueryVariant,
  MessageIds,
} from '../../../lib/rules/prefer-find-by';

const ruleTester = createRuleTester();

function buildFindByMethod(queryMethod: string) {
  return `${getFindByQueryVariant(queryMethod)}${queryMethod.split('By')[1]}`;
}

function createScenario<
  T extends ValidTestCase<[]> | InvalidTestCase<MessageIds, []>
>(callback: (waitMethod: string, queryMethod: string) => T) {
  return WAIT_METHODS.reduce(
    (acc: T[], waitMethod) =>
      acc.concat(
        SYNC_QUERIES_COMBINATIONS.map((queryMethod) =>
          callback(waitMethod, queryMethod)
        )
      ),
    []
  );
}

ruleTester.run(RULE_NAME, rule, {
  valid: [
    ...ASYNC_QUERIES_COMBINATIONS.map((queryMethod) => ({
      code: `
        it('tests', async () => {
          const { ${queryMethod} } = setup()
          const submitButton = await ${queryMethod}('foo')
        })
      `,
    })),
    ...ASYNC_QUERIES_COMBINATIONS.map((queryMethod) => ({
      code: `
        import {screen} from '@testing-library/foo';
        it('tests', async () => {
          const submitButton = await screen.${queryMethod}('foo')
        })
      `,
    })),
    ...SYNC_QUERIES_COMBINATIONS.map((queryMethod) => ({
      code: `
        import {waitForElementToBeRemoved} from '@testing-library/foo';
        it('tests', async () => {
          await waitForElementToBeRemoved(() => ${queryMethod}(baz))
        })
      `,
    })),
    ...SYNC_QUERIES_COMBINATIONS.map((queryMethod) => ({
      code: `
        import {waitFor} from '@testing-library/foo';

        it('tests', async () => {
          await waitFor(function() {
            return ${queryMethod}('baz', { name: 'foo' })
          })
        })
        `,
    })),
    {
      code: `
        import {waitFor} from '@testing-library/foo';
        
        it('tests', async () => {
          await waitFor(() => myCustomFunction())
        })
      `,
    },
    {
      code: `
        import {waitFor} from '@testing-library/foo';
        it('tests', async () => {
          await waitFor(customFunctionReference)
        })
      `,
    },
    {
      code: `
      import {waitForElementToBeRemoved} from '@testing-library/foo';
      it('tests', async () => {
        const { container } = render()
        await waitForElementToBeRemoved(container.querySelector('foo'))
      })
      `,
    },
    ...SYNC_QUERIES_COMBINATIONS.map((queryMethod) => ({
      code: `
        import {waitFor} from '@testing-library/foo';
        it('tests', async () => {
          await waitFor(() => {
            foo()
            return ${queryMethod}()
          })
        })
      `,
    })),
    ...SYNC_QUERIES_COMBINATIONS.map((queryMethod) => ({
      code: `
        import {screen, waitFor} from '@testing-library/foo';
        it('tests', async () => {
          await waitFor(() => expect(screen.${queryMethod}('baz')).toBeDisabled());
        })
      `,
    })),
    ...SYNC_QUERIES_COMBINATIONS.map((queryMethod) => ({
      code: `
        import {waitFor} from '@testing-library/foo';
        it('tests', async () => {
          await waitFor(() => expect(${queryMethod}('baz')).toBeInTheDocument());
        })
      `,
    })),
    {
      code: `
        import {waitFor} from '@testing-library/foo';
        it('tests', async () => {
          await waitFor();
          await wait();
        })
      `,
    },
  ],
  invalid: [
    ...createScenario((waitMethod: string, queryMethod: string) => ({
      code: `
        import {${waitMethod}} from '@testing-library/foo';
        it('tests', async () => {
          const { ${queryMethod} } = render()
          const submitButton = await ${waitMethod}(() => ${queryMethod}('foo', { name: 'baz' }))
        })
      `,
      errors: [
        {
          messageId: 'preferFindBy',
          data: {
            queryVariant: getFindByQueryVariant(queryMethod),
            queryMethod: queryMethod.split('By')[1],
            fullQuery: `${waitMethod}(() => ${queryMethod}('foo', { name: 'baz' }))`,
          },
        },
      ],
      output: `
        import {${waitMethod}} from '@testing-library/foo';
        it('tests', async () => {
          const { ${queryMethod}, ${buildFindByMethod(queryMethod)} } = render()
          const submitButton = await ${buildFindByMethod(
            queryMethod
          )}('foo', { name: 'baz' })
        })
      `,
    })),
    ...createScenario((waitMethod: string, queryMethod: string) => ({
      code: `
        import {${waitMethod}, screen} from '@testing-library/foo';
        it('tests', async () => {
          const submitButton = await ${waitMethod}(() => screen.${queryMethod}('foo', { name: 'baz' }))
        })
      `,
      errors: [
        {
          messageId: 'preferFindBy',
          data: {
            queryVariant: getFindByQueryVariant(queryMethod),
            queryMethod: queryMethod.split('By')[1],
            fullQuery: `${waitMethod}(() => screen.${queryMethod}('foo', { name: 'baz' }))`,
          },
        },
      ],
      output: `
        import {${waitMethod}, screen} from '@testing-library/foo';
        it('tests', async () => {
          const submitButton = await screen.${buildFindByMethod(
            queryMethod
          )}('foo', { name: 'baz' })
        })
      `,
    })),
    // // this scenario verifies it works when the render function is defined in another scope
    ...WAIT_METHODS.map((waitMethod: string) => ({
      code: `
        import {${waitMethod}} from '@testing-library/foo';
        const { getByText, queryByLabelText, findAllByRole } = customRender()
        it('tests', async () => {
          const submitButton = await ${waitMethod}(() => getByText('baz', { name: 'button' }))
        })
      `,
      errors: [
        {
          messageId: 'preferFindBy',
          data: {
            queryVariant: 'findBy',
            queryMethod: 'Text',
            fullQuery: `${waitMethod}(() => getByText('baz', { name: 'button' }))`,
          },
        },
      ],
      output: `
        import {${waitMethod}} from '@testing-library/foo';
        const { getByText, queryByLabelText, findAllByRole, findByText } = customRender()
        it('tests', async () => {
          const submitButton = await findByText('baz', { name: 'button' })
        })
      `,
    })),
    // // this scenario verifies when findBy* were already defined (because it was used elsewhere)
    ...WAIT_METHODS.map((waitMethod: string) => ({
      code: `
        import {${waitMethod}} from '@testing-library/foo';
        const { getAllByRole, findAllByRole } = customRender()
        it('tests', async () => {
          const submitButton = await ${waitMethod}(() => getAllByRole('baz', { name: 'button' }))
        })
      `,
      errors: [
        {
          messageId: 'preferFindBy',
          data: {
            queryVariant: 'findAllBy',
            queryMethod: 'Role',
            fullQuery: `${waitMethod}(() => getAllByRole('baz', { name: 'button' }))`,
          },
        },
      ],
      output: `
        import {${waitMethod}} from '@testing-library/foo';
        const { getAllByRole, findAllByRole } = customRender()
        it('tests', async () => {
          const submitButton = await findAllByRole('baz', { name: 'button' })
        })
      `,
    })),
    // invalid code, as we need findBy* to be defined somewhere, but required for getting 100% coverage
    {
      code: `const submitButton = await waitFor(() => getByText('baz', { name: 'button' }))`,
      errors: [
        {
          messageId: 'preferFindBy',
          data: {
            queryVariant: 'findBy',
            queryMethod: 'Text',
            fullQuery: `waitFor(() => getByText('baz', { name: 'button' }))`,
          },
        },
      ],
      output: `const submitButton = await findByText('baz', { name: 'button' })`,
    },
    // this code would be invalid too, as findByRole is not defined anywhere.
    {
      code: `
        const getByRole = render().getByRole
        const submitButton = await waitFor(() => getByRole('baz', { name: 'button' }))
      `,
      errors: [
        {
          messageId: 'preferFindBy',
          data: {
            queryVariant: 'findBy',
            queryMethod: 'Role',
            fullQuery: `waitFor(() => getByRole('baz', { name: 'button' }))`,
          },
        },
      ],
      output: `
        const getByRole = render().getByRole
        const submitButton = await findByRole('baz', { name: 'button' })
      `,
    },
  ],
});