Query Helpers

function buildQueries<Arguments extends any[]>(
  queryAllBy: GetAllBy<Arguments>,
  getMultipleError: GetErrorFunction<Arguments>,
  getMissingError: GetErrorFunction<Arguments>
): BuiltQueryMethods<Arguments>;

type BuiltQueryMethods<Arguments extends any[]> = [
  QueryBy<Arguments>,     // queryBy variant
  GetAllBy<Arguments>,   // getAllBy variant
  GetBy<Arguments>,       // getBy variant
  FindAllBy<Arguments>,  // findAllBy variant
  FindBy<Arguments>       // findBy variant
];

import {buildQueries, queryAllByAttribute} from '@testing-library/dom';

// Create custom query for data-cy
const queryAllByDataCy = (container, id) =>
  queryAllByAttribute('data-cy', container, id);

const getMultipleError = (c, id) => `Found multiple with data-cy="${id}"`;
const getMissingError = (c, id) => `Unable to find with data-cy="${id}"`;

const [
  queryByDataCy,
  getAllByDataCy,
  getByDataCy,
  findAllByDataCy,
  findByDataCy,
] = buildQueries(queryAllByDataCy, getMultipleError, getMissingError);

// Use the queries
const element = getByDataCy(container, 'submit-button');
const maybe = queryByDataCy(container, 'optional');
const asyncEl = await findByDataCy(container, 'async-element');

function queryByAttribute(
  attribute: string,
  container: HTMLElement,
  id: Matcher,
  options?: MatcherOptions
): HTMLElement | null;

const element = queryByAttribute('data-id', container, '123');
const link = queryByAttribute('href', container, '/about');
const element = queryByAttribute('data-name', container, 'test', {
  exact: true
});

function queryAllByAttribute(
  attribute: string,
  container: HTMLElement,
  id: Matcher,
  options?: MatcherOptions
): HTMLElement[];

const elements = queryAllByAttribute('data-category', container, 'featured');
const links = queryAllByAttribute('href', container, /\/products\//);

function getElementError(
  message: string | null,
  container: HTMLElement
): Error;

function customQuery(container, id) {
  const elements = container.querySelectorAll(`[data-custom="${id}"]`);
  
  if (elements.length === 0) {
    throw getElementError(`Unable to find with data-custom="${id}"`, container);
  }
  
  if (elements.length > 1) {
    throw getElementError(`Found multiple with data-custom="${id}"`, container);
  }
  
  return elements[0];
}

import {buildQueries, queryAllByAttribute, within} from '@testing-library/dom';

// Step 1: Create queryAll function
const queryAllByDataTestAttr = (container, value, options) => {
  return queryAllByAttribute('data-test', container, value, options);
};

// Step 2: Define error messages
const getMultipleError = (container, value) =>
  `Found multiple with data-test="${value}"`;
const getMissingError = (container, value) =>
  `Unable to find with data-test="${value}"`;

// Step 3: Build all variants
const [
  queryByDataTest,
  getAllByDataTest,
  getByDataTest,
  findAllByDataTest,
  findByDataTest,
] = buildQueries(queryAllByDataTestAttr, getMultipleError, getMissingError);

// Step 4: Export
export {queryByDataTest, getAllByDataTest, getByDataTest,
        findAllByDataTest, findByDataTest};

// Step 5: Use
const element = getByDataTest(document.body, 'submit-btn');

// Or with within
const customQueries = {
  queryByDataTest, getAllByDataTest, getByDataTest,
  findAllByDataTest, findByDataTest
};
const container = document.getElementById('app');
const {getByDataTest} = within(container, customQueries);

import {buildQueries} from '@testing-library/dom';

// Query by computed style
const queryAllByColor = (container, color) => {
  return Array.from(container.querySelectorAll('*')).filter(element => {
    const style = window.getComputedStyle(element);
    return style.color === color;
  });
};

const [queryByColor, getAllByColor, getByColor, findAllByColor, findByColor] =
  buildQueries(
    queryAllByColor,
    (c, color) => `Found multiple with color "${color}"`,
    (c, color) => `Unable to find with color "${color}"`
  );

// Use
const redElement = getByColor(container, 'rgb(255, 0, 0)');