chore: Convert screen.js to TypeScript (#1002)

Co-authored-by: Rayat Rahman <rayat@adaptilab.com>
Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>

Author: 3 people

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",

src/screen.js renamed to 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> | 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<keyof typeof something> 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',
           )