Skip to content

Commit

Permalink
fix(types): add generics for within queries (#54)
Browse files Browse the repository at this point in the history 
* fix(types): add generics for within queries

* prettier

* fix syntax issues

* fix broken test
  • Loading branch information
@KonnorRogers
KonnorRogers authored Dec 20, 2023
1 parent ee18a95 commit f5a8bf6
Show file tree
Hide file tree
Showing 2 changed files with 332 additions and 10 deletions.
12 changes: 2 additions & 10 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { queries, within, configure, getConfig } from "@testing-library/dom";
import { configure, getConfig } from "@testing-library/dom";

import * as shadowQueries from "./shadow-queries";
import { debug } from "./debug";
import { logShadowDOM } from "./log-shadow-dom";
import { prettyShadowDOM } from "./pretty-shadow-dom";
import { shadowScreen } from "./shadow-screen";
import { shadowWithin } from "./shadow-within";

configure({
// https://github.com/testing-library/dom-testing-library/blob/39a64d4b862f706d09f0cd225ce9eda892f1e8d8/src/config.ts#L36-L51
Expand All @@ -25,15 +26,6 @@ configure({
},
});

const allQueries = {
...queries,
...shadowQueries,
};

function shadowWithin(element: HTMLElement) {
return within(element, allQueries);
}

export * from "./types";
export * from "./shadow-queries";

Expand Down
330 changes: 330 additions & 0 deletions src/shadow-within.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,330 @@
import { queries, within } from "@testing-library/dom";

import * as shadowQueries from "./shadow-queries";

const allQueries = {
...queries,
...shadowQueries,
};

export function shadowWithin(element: HTMLElement) {
const withinObj = within(element, allQueries);

// This is a gross and ugly hack. However, the `allQueries` function from RTL doesn't
// preserve generics, so we generate the within object, and then overwrite the "shadow" functions to properly
// support generics.
const shadowWithinObj = {
// Role
queryAllByShadowRole: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.queryAllByShadowRole>
) =>
withinObj.queryAllByShadowRole(...args) as ReturnType<
typeof shadowQueries.queryAllByShadowRole<T>
>,
queryByShadowRole: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.queryByShadowRole>
) =>
withinObj.queryByShadowRole(...args) as ReturnType<
typeof shadowQueries.queryByShadowRole<T>
>,
getAllByShadowRole: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.getAllByShadowRole>
) =>
withinObj.getAllByShadowRole(...args) as ReturnType<
typeof shadowQueries.getAllByShadowRole<T>
>,
getByShadowRole: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.getByShadowRole>
) =>
withinObj.getByShadowRole(...args) as ReturnType<
typeof shadowQueries.getByShadowRole<T>
>,
findAllByShadowRole: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.findAllByShadowRole>
) =>
withinObj.findAllByShadowRole(...args) as ReturnType<
typeof shadowQueries.findAllByShadowRole<T>
>,
findByShadowRole: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.findByShadowRole>
) =>
withinObj.findByShadowRole(...args) as ReturnType<
typeof shadowQueries.findByShadowRole<T>
>,

// Label Text
queryAllByShadowLabelText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.queryAllByShadowLabelText>
) =>
withinObj.queryAllByShadowLabelText(...args) as ReturnType<
typeof shadowQueries.queryAllByShadowLabelText<T>
>,
queryByShadowLabelText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.queryByShadowLabelText>
) =>
withinObj.queryByShadowLabelText(...args) as ReturnType<
typeof shadowQueries.queryByShadowLabelText<T>
>,
getAllByShadowLabelText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.getAllByShadowLabelText>
) =>
withinObj.getAllByShadowLabelText(...args) as ReturnType<
typeof shadowQueries.getAllByShadowLabelText<T>
>,
getByShadowLabelText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.getByShadowLabelText>
) =>
withinObj.getByShadowLabelText(...args) as ReturnType<
typeof shadowQueries.getByShadowLabelText<T>
>,
findAllByShadowLabelText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.findAllByShadowLabelText>
) =>
withinObj.findAllByShadowLabelText(...args) as ReturnType<
typeof shadowQueries.findAllByShadowLabelText<T>
>,
findByShadowLabelText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.findByShadowLabelText>
) =>
withinObj.findByShadowLabelText(...args) as ReturnType<
typeof shadowQueries.findByShadowLabelText<T>
>,

// Placeholder Text
queryAllByShadowPlaceholderText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.queryAllByShadowPlaceholderText>
) =>
withinObj.queryAllByShadowPlaceholderText(...args) as ReturnType<
typeof shadowQueries.queryAllByShadowPlaceholderText<T>
>,
queryByShadowPlaceholderText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.queryByShadowPlaceholderText>
) =>
withinObj.queryByShadowPlaceholderText(...args) as ReturnType<
typeof shadowQueries.queryByShadowPlaceholderText<T>
>,
getAllByShadowPlaceholderText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.getAllByShadowPlaceholderText>
) =>
withinObj.getAllByShadowPlaceholderText(...args) as ReturnType<
typeof shadowQueries.getAllByShadowPlaceholderText<T>
>,
getByShadowPlaceholderText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.getByShadowPlaceholderText>
) =>
withinObj.getByShadowPlaceholderText(...args) as ReturnType<
typeof shadowQueries.getByShadowPlaceholderText<T>
>,
findAllByShadowPlaceholderText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.findAllByShadowPlaceholderText>
) =>
withinObj.findAllByShadowPlaceholderText(...args) as ReturnType<
typeof shadowQueries.findAllByShadowPlaceholderText<T>
>,
findByShadowPlaceholderText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.findByShadowPlaceholderText>
) =>
withinObj.findByShadowPlaceholderText(...args) as ReturnType<
typeof shadowQueries.findByShadowPlaceholderText<T>
>,

// Text
queryAllByShadowText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.queryAllByShadowText>
) =>
withinObj.queryAllByShadowText(...args) as ReturnType<
typeof shadowQueries.queryAllByShadowText<T>
>,
queryByShadowText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.queryByShadowText>
) =>
withinObj.queryByShadowText(...args) as ReturnType<
typeof shadowQueries.queryByShadowText<T>
>,
getAllByShadowText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.getAllByShadowText>
) =>
withinObj.getAllByShadowText(...args) as ReturnType<
typeof shadowQueries.getAllByShadowText<T>
>,
getByShadowText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.getByShadowText>
) =>
withinObj.getByShadowText(...args) as ReturnType<
typeof shadowQueries.getByShadowText<T>
>,
findAllByShadowText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.findAllByShadowText>
) =>
withinObj.findAllByShadowText(...args) as ReturnType<
typeof shadowQueries.findAllByShadowText<T>
>,
findByShadowText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.findByShadowText>
) =>
withinObj.findByShadowText(...args) as ReturnType<
typeof shadowQueries.findByShadowText<T>
>,

// Display Value
queryAllByShadowDisplayValue: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.queryAllByShadowDisplayValue>
) =>
withinObj.queryAllByShadowDisplayValue(...args) as ReturnType<
typeof shadowQueries.queryAllByShadowDisplayValue<T>
>,
queryByShadowDisplayValue: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.queryByShadowDisplayValue>
) =>
withinObj.queryByShadowDisplayValue(...args) as ReturnType<
typeof shadowQueries.queryByShadowDisplayValue<T>
>,
getAllByShadowDisplayValue: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.getAllByShadowDisplayValue>
) =>
withinObj.getAllByShadowDisplayValue(...args) as ReturnType<
typeof shadowQueries.getAllByShadowDisplayValue<T>
>,
getByShadowDisplayValue: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.getByShadowDisplayValue>
) =>
withinObj.getByShadowDisplayValue(...args) as ReturnType<
typeof shadowQueries.getByShadowDisplayValue<T>
>,
findAllByShadowDisplayValue: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.findAllByShadowDisplayValue>
) =>
withinObj.findAllByShadowDisplayValue(...args) as ReturnType<
typeof shadowQueries.findAllByShadowDisplayValue<T>
>,
findByShadowDisplayValue: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.findByShadowDisplayValue>
) =>
withinObj.findByShadowDisplayValue(...args) as ReturnType<
typeof shadowQueries.findByShadowDisplayValue<T>
>,

// Alt Text
queryAllByShadowAltText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.queryAllByShadowAltText>
) =>
withinObj.queryAllByShadowAltText(...args) as ReturnType<
typeof shadowQueries.queryAllByShadowAltText<T>
>,
queryByShadowAltText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.queryByShadowAltText>
) =>
withinObj.queryByShadowAltText(...args) as ReturnType<
typeof shadowQueries.queryByShadowAltText<T>
>,
getAllByShadowAltText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.getAllByShadowAltText>
) =>
withinObj.getAllByShadowAltText(...args) as ReturnType<
typeof shadowQueries.getAllByShadowAltText<T>
>,
getByShadowAltText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.getByShadowAltText>
) =>
withinObj.getByShadowAltText(...args) as ReturnType<
typeof shadowQueries.getByShadowAltText<T>
>,
findAllByShadowAltText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.findAllByShadowAltText>
) =>
withinObj.findAllByShadowAltText(...args) as ReturnType<
typeof shadowQueries.findAllByShadowAltText<T>
>,
findByShadowAltText: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.findByShadowAltText>
) =>
withinObj.findByShadowAltText(...args) as ReturnType<
typeof shadowQueries.findByShadowAltText<T>
>,

// Title
queryAllByShadowTitle: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.queryAllByShadowTitle>
) =>
withinObj.queryAllByShadowTitle(...args) as ReturnType<
typeof shadowQueries.queryAllByShadowTitle<T>
>,
queryByShadowTitle: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.queryByShadowTitle>
) =>
withinObj.queryByShadowTitle(...args) as ReturnType<
typeof shadowQueries.queryByShadowTitle<T>
>,
getAllByShadowTitle: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.getAllByShadowTitle>
) =>
withinObj.getAllByShadowTitle(...args) as ReturnType<
typeof shadowQueries.getAllByShadowTitle<T>
>,
getByShadowTitle: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.getByShadowTitle>
) =>
withinObj.getByShadowTitle(...args) as ReturnType<
typeof shadowQueries.getByShadowTitle<T>
>,
findAllByShadowTitle: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.findAllByShadowTitle>
) =>
withinObj.findAllByShadowTitle(...args) as ReturnType<
typeof shadowQueries.findAllByShadowTitle<T>
>,
findByShadowTitle: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.findByShadowTitle>
) =>
withinObj.findByShadowTitle(...args) as ReturnType<
typeof shadowQueries.findByShadowTitle<T>
>,

// Test Id
queryAllByShadowTestId: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.queryAllByShadowTestId>
) =>
withinObj.queryAllByShadowTestId(...args) as ReturnType<
typeof shadowQueries.queryAllByShadowTestId<T>
>,
queryByShadowTestId: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.queryByShadowTestId>
) =>
withinObj.queryByShadowTestId(...args) as ReturnType<
typeof shadowQueries.queryByShadowTestId<T>
>,
getAllByShadowTestId: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.getAllByShadowTestId>
) =>
withinObj.getAllByShadowTestId(...args) as ReturnType<
typeof shadowQueries.getAllByShadowTestId<T>
>,
getByShadowTestId: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.getByShadowTestId>
) =>
withinObj.getByShadowTestId(...args) as ReturnType<
typeof shadowQueries.getByShadowTestId<T>
>,
findAllByShadowTestId: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.findAllByShadowTestId>
) =>
withinObj.findAllByShadowTestId(...args) as ReturnType<
typeof shadowQueries.findAllByShadowTestId<T>
>,
findByShadowTestId: <T extends HTMLElement>(
...args: Parameters<typeof withinObj.findByShadowTestId>
) =>
withinObj.findByShadowTestId(...args) as ReturnType<
typeof shadowQueries.findByShadowTestId<T>
>,
};

// return withinFn

const finalObj = {
...withinObj,
...shadowWithinObj,
};

return finalObj;
}

0 comments on commit f5a8bf6

Please sign in to comment.