From 7ac0956137d8ec875422d03370d66d4743d17684 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Thu, 18 Feb 2021 14:14:58 -0600 Subject: [PATCH] migrate utils to TypeScript --- src/utils/{deprecate.js => deprecate.tsx} | 16 ++++++++++------ src/utils/{isNumeric.js => isNumeric.tsx} | 2 +- ...st-deprecations.js => test-deprecations.tsx} | 2 +- .../{test-matchers.js => test-matchers.tsx} | 17 +++++++++++------ src/utils/testing.tsx | 17 ++++++++--------- 5 files changed, 31 insertions(+), 23 deletions(-) rename src/utils/{deprecate.js => deprecate.tsx} (72%) rename src/utils/{isNumeric.js => isNumeric.tsx} (52%) rename src/utils/{test-deprecations.js => test-deprecations.tsx} (89%) rename src/utils/{test-matchers.js => test-matchers.tsx} (83%) diff --git a/src/utils/deprecate.js b/src/utils/deprecate.tsx similarity index 72% rename from src/utils/deprecate.js rename to src/utils/deprecate.tsx index c1755aaf73f..9e7bc62e849 100644 --- a/src/utils/deprecate.js +++ b/src/utils/deprecate.tsx @@ -1,16 +1,17 @@ /* eslint-disable no-console */ import {useRef, useCallback} from 'react' +declare var __DEV__: boolean + +type DeprecationType = {name: string; message: string; version: string} const noop = () => {} // eslint-disable-next-line import/no-mutable-exports -let deprecate = null +let deprecate: ({name, message, version}: DeprecationType) => void | (() => void) = noop if (__DEV__) { - deprecate = ({name, message, version}) => { + deprecate = ({name, message, version}: DeprecationType) => { Deprecations.deprecate({name, message, version}) } -} else { - deprecate = noop } export {deprecate} @@ -19,7 +20,7 @@ export {deprecate} let useDeprecation = null if (__DEV__) { - useDeprecation = ({name, message, version}) => { + useDeprecation = ({name, message, version}: DeprecationType) => { const ref = useRef(false) const logDeprecation = useCallback(() => { if (!ref.current) { @@ -39,6 +40,9 @@ if (__DEV__) { export {useDeprecation} export class Deprecations { + static instance: Deprecations | null = null + deprecations: Array + static get() { if (!Deprecations.instance) { Deprecations.instance = new Deprecations() @@ -51,7 +55,7 @@ export class Deprecations { this.deprecations = [] } - static deprecate({name, message, version}) { + static deprecate({name, message, version}: DeprecationType) { const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}` console.warn(msg) diff --git a/src/utils/isNumeric.js b/src/utils/isNumeric.tsx similarity index 52% rename from src/utils/isNumeric.js rename to src/utils/isNumeric.tsx index a721214f024..6555165d725 100644 --- a/src/utils/isNumeric.js +++ b/src/utils/isNumeric.tsx @@ -1,3 +1,3 @@ -export default function isNumeric(n) { +export default function isNumeric(n: any) { return !isNaN(parseFloat(n)) && isFinite(n) } diff --git a/src/utils/test-deprecations.js b/src/utils/test-deprecations.tsx similarity index 89% rename from src/utils/test-deprecations.js rename to src/utils/test-deprecations.tsx index 6b5f85a3179..fc7d4a34db9 100644 --- a/src/utils/test-deprecations.js +++ b/src/utils/test-deprecations.tsx @@ -1,5 +1,5 @@ import semver from 'semver' -import {Deprecations} from '../utils/deprecate' +import {Deprecations} from './deprecate' const ourVersion = require('../../package.json').version diff --git a/src/utils/test-matchers.js b/src/utils/test-matchers.tsx similarity index 83% rename from src/utils/test-matchers.js rename to src/utils/test-matchers.tsx index 1ff10177c3b..a5326c66864 100644 --- a/src/utils/test-matchers.js +++ b/src/utils/test-matchers.tsx @@ -2,11 +2,13 @@ import React from 'react' import 'jest-styled-components' import {styleSheetSerializer} from 'jest-styled-components/serializer' import theme from '../theme' +import {ReactTestRendererJSON, ReactTestRendererNode} from 'react-test-renderer' import {getClasses, mount, getComputedStyles, render} from './testing' +import {Nullish} from '@testing-library/react' expect.addSnapshotSerializer(styleSheetSerializer) -const stringify = d => JSON.stringify(d, null, ' ') +const stringify = (d: object) => JSON.stringify(d, null, ' ') /** * These are props that styled-system aliases for backwards compatibility. @@ -34,7 +36,9 @@ expect.extend({ toHaveClasses(node, klasses, only = false) { const classes = getClasses(node) - const pass = only ? this.equals(classes.sort(), klasses.sort()) : klasses.every(klass => classes.includes(klass)) + const pass = only + ? this.equals(classes.sort(), klasses.sort()) + : klasses.every((klass: Array) => classes.includes(klass)) return { pass, message: () => `expected ${stringify(classes)} to include: ${stringify(klasses)}` @@ -69,13 +73,14 @@ expect.extend({ const elem = React.cloneElement(element, {sx: sxPropValue}) const rendered = render(elem) - function checkStylesDeep(rendered) { - const className = rendered.props ? rendered.props.className : '' + function checkStylesDeep(rendered: ReactTestRendererJSON): boolean { + const className = rendered?.props ? rendered.props.className : '' const styles = getComputedStyles(className) - if (styles[mediaKey] && styles[mediaKey].color) { + const mediaStyles = styles[mediaKey] as Nullish> + if (mediaStyles && mediaStyles.color) { return true } else if (rendered.children) { - return rendered.children.some(child => checkStylesDeep(child)) + return rendered.children.some((child: ReactTestRendererNode) => checkStylesDeep(child as ReactTestRendererJSON)) } else { return false } diff --git a/src/utils/testing.tsx b/src/utils/testing.tsx index 3f95fd31e18..d3e6b0029cf 100644 --- a/src/utils/testing.tsx +++ b/src/utils/testing.tsx @@ -73,7 +73,7 @@ export function renderClasses(component: React.ReactElement): string { /** * Returns true if a node renders with a single class. */ -export function rendersClass(node: React.ReactElement, klass: string): boolean { +export function rendersClass(node: React.ReactElement, klass: string): boolean { return renderClasses(node).includes(klass) } @@ -96,7 +96,7 @@ export function renderStyles(node: React.ReactElement): any { return getComputedStyles(className) } -export function getComputedStyles(className: string): Record { +export function getComputedStyles(className: string): Record> { const div = document.createElement('div') div.className = className @@ -107,14 +107,14 @@ export function getComputedStyles(className: string): Record { if (rule instanceof CSSMediaRule) { readMedia(rule) } else if (rule instanceof CSSStyleRule) { - readRule(rule, computed) - } else { + readRule(rule, computed) + } else { // console.warn('rule.type =', rule.type) } } } - return computed + return computed function matchesSafe(node: HTMLDivElement, selector: string) { if (!selector) { @@ -194,16 +194,15 @@ export function unloadCSS(path: string) { // to render without errors, you can pass a `toRender` function that // returns an element ready to be rendered. - interface Options { skipAs?: boolean skipSx?: boolean } interface BehavesAsComponent { - Component: React.FunctionComponent, - systemPropArray: any[], - toRender?: () => React.ReactElement, + Component: React.FunctionComponent + systemPropArray: any[] + toRender?: () => React.ReactElement options?: Options }