diff --git a/package.json b/package.json index 78ddf6c9..be6cb65a 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ }, "devDependencies": { "@testing-library/jest-dom": "^5.11.6", + "@types/lz-string": "^1.3.34", "jest-in-case": "^1.0.2", "jest-serializer-ansi": "^1.0.3", "jest-watch-select-projects": "^2.0.0", diff --git a/src/screen.js b/src/screen.ts similarity index 59% rename from src/screen.js rename to src/screen.ts index 5cbdd2de..caae921d 100644 --- a/src/screen.js +++ b/src/screen.ts @@ -1,33 +1,40 @@ import {compressToEncodedURIComponent} from 'lz-string' -import * as queries from './queries' +import type {OptionsReceived} from 'pretty-format' import {getQueriesForElement} from './get-queries-for-element' -import {logDOM} from './pretty-dom' import {getDocument} from './helpers' +import {logDOM} from './pretty-dom' +import * as queries from './queries' -function unindent(string) { +function unindent(string: string) { // remove white spaces first, to save a few bytes. // testing-playground will reformat on load any ways. return string.replace(/[ \t]*[\n][ \t]*/g, '\n') } -function encode(value) { +function encode(value: string) { return compressToEncodedURIComponent(unindent(value)) } -function getPlaygroundUrl(markup) { +function getPlaygroundUrl(markup: string) { return `https://testing-playground.com/#markup=${encode(markup)}` } -const debug = (element, maxLength, options) => +const debug = ( + element?: Array | Element | HTMLDocument, + maxLength?: number, + options?: OptionsReceived, +): void => Array.isArray(element) ? element.forEach(el => logDOM(el, maxLength, options)) : logDOM(element, maxLength, options) const logTestingPlaygroundURL = (element = getDocument().body) => { + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition if (!element || !('innerHTML' in element)) { console.log(`The element you're providing isn't a valid DOM element.`) return } + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition if (!element.innerHTML) { console.log(`The provided element doesn't have any children.`) return @@ -38,11 +45,15 @@ const logTestingPlaygroundURL = (element = getDocument().body) => { } const initialValue = {debug, logTestingPlaygroundURL} + export const screen = - typeof document !== 'undefined' && document.body + typeof document !== 'undefined' && document.body // eslint-disable-line @typescript-eslint/no-unnecessary-condition ? getQueriesForElement(document.body, queries, initialValue) : Object.keys(queries).reduce((helpers, key) => { - helpers[key] = () => { + // `key` is for all intents and purposes the type of keyof `helpers`, which itself is the type of `initialValue` plus incoming properties from `queries` + // if `Object.keys(something)` returned Array this explicit type assertion would not be necessary + // see https://stackoverflow.com/questions/55012174/why-doesnt-object-keys-return-a-keyof-type-in-typescript + helpers[key as keyof typeof initialValue] = () => { throw new TypeError( 'For queries bound to document.body a global document has to be available... Learn more: https://testing-library.com/s/screen-global-error', )