diff --git a/src/components/control-text/control-text.tsx b/src/components/control-text/control-text.tsx index ddb95d18..18c4ba72 100644 --- a/src/components/control-text/control-text.tsx +++ b/src/components/control-text/control-text.tsx @@ -5,7 +5,6 @@ import ControlLabel from '../control-label'; import ControlWrapper from '../control-wrapper'; import Popover from '../popover'; import Icon from '../icon'; -import getWindow from '../utils/get-window'; import {InputProps, PopoverProps} from '../typings'; interface Props extends Omit { @@ -71,9 +70,11 @@ export default function ControlText({ }; const isActive = () => { + if (typeof window === 'undefined') return false + return ( - getWindow().document.activeElement === inputElement.current || - getWindow().document.activeElement === errorElement.current + window.document.activeElement === inputElement.current || + window.document.activeElement === errorElement.current ); }; diff --git a/src/components/copiable/copiable.tsx b/src/components/copiable/copiable.tsx index a5bb1495..d64987e5 100644 --- a/src/components/copiable/copiable.tsx +++ b/src/components/copiable/copiable.tsx @@ -5,7 +5,6 @@ import CopyButton from '../copy-button'; import Popover from '../popover'; import OSKey from 'os-key'; import select from 'select'; -import getWindow from '../utils/get-window'; const DISABLE_CLICK_TO_SELECT_THRESHOLD = 640; const FEEDBACK_TIME = 2000; @@ -59,7 +58,8 @@ export default function Copiable({ }, [copyTooltipActive]); const handleTextFocus = () => { - if (getWindow().innerWidth < DISABLE_CLICK_TO_SELECT_THRESHOLD) return; + if (typeof window === 'undefined') return + if (window.innerWidth < DISABLE_CLICK_TO_SELECT_THRESHOLD) return; select(() => textEl.current); setCopyTooltipActive(true); }; @@ -80,14 +80,18 @@ export default function Copiable({ ); - const renderCopyHintText = ( - - - {getCopyKeys(getWindow().navigator.userAgent)} - {' '} - to copy - - ); + const renderCopyHintText = () => { + if (typeof window === 'undefined') return + + return ( + + + {getCopyKeys(window.navigator.userAgent)} + {' '} + to copy + + ) + } const textClasses = classnames('my3 txt-mono txt-s mr24', { 'txt-truncate': truncated diff --git a/src/components/icon/__tests__/__snapshots__/icon.test.tsx.snap b/src/components/icon/__tests__/__snapshots__/icon.test.tsx.snap deleted file mode 100644 index 9b593d34..00000000 --- a/src/components/icon/__tests__/__snapshots__/icon.test.tsx.snap +++ /dev/null @@ -1,123 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`inline renders 1`] = ` - -
- - - check - -
- -`; - -exports[`renders basic 1`] = ` - -
- - - bike - -
- -`; - -exports[`renders passthrough prop 1`] = ` - -
- - - alert - -
- -`; - -exports[`renders special size 1`] = ` - -
- - - alert - -
- -`; - -exports[`renders special size via style 1`] = ` - -
- - - alert - -
- -`; diff --git a/src/components/icon/__tests__/icon.test.tsx b/src/components/icon/__tests__/icon.test.tsx deleted file mode 100644 index 228be728..00000000 --- a/src/components/icon/__tests__/icon.test.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import React from 'react'; -import { screen, render } from '@testing-library/react'; -import getWindow from '../../utils/get-window'; -import Icon from '../icon'; - -jest.mock('../../utils/get-window'); - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const getWindowMock = getWindow as any; - -describe('renders', () => { - test('basic', () => { - const { baseElement } = render() - expect(baseElement).toMatchSnapshot(); - }); - - test('passthrough prop', () => { - const props = { - name: 'alert', - passthroughProps: { - 'data-test': 'alert-icon' - } - }; - - const { baseElement } = render() - expect(baseElement).toMatchSnapshot(); - }); - - test('special size', () => { - const props = { - name: 'alert', - size: 36 - }; - - const { baseElement } = render() - expect(baseElement).toMatchSnapshot(); - }); - - test('special size via style', () => { - const props = { - name: 'alert', - passthroughProps: { - 'data-test': 'alert-icon', - style: { height: 36, width: 36 } - } - }; - - const { baseElement } = render() - expect(baseElement).toMatchSnapshot(); - }); -}); - -describe('inline', () => { - beforeEach(() => { - const mockWindow = { - getComputedStyle: jest.fn(() => ({ - 'line-height': '14px' - })) - }; - getWindowMock.mockReturnValue(mockWindow); - }); - - test('renders', () => { - const props = { - name: 'check', - inline: true - }; - - const { baseElement } = render() - expect(baseElement).toMatchSnapshot(); - expect(screen.getByTestId('icon-check')).toHaveClass('inline-block'); - }); - - test('renders inline with derived height from computed line height', () => { - const props = { - name: 'check', - inline: true - }; - - render() - expect(screen.getByTestId('icon-check').style.height).toBe('14px'); - }); - - test('after update, adjusts height to match line-height', () => { - const props = { - name: 'check', - inline: true - }; - - const { rerender } = render() - rerender(); - - expect(screen.getByTestId('icon-check').style.width).toBe('45px'); - expect(screen.getByTestId('icon-check').style.height).toBe('14px'); - }); -}); diff --git a/src/components/icon/icon.test.tsx b/src/components/icon/icon.test.tsx index fc5f46c9..d950176e 100644 --- a/src/components/icon/icon.test.tsx +++ b/src/components/icon/icon.test.tsx @@ -1,13 +1,7 @@ import React from 'react'; import { screen, render } from '@testing-library/react'; -import getWindow from '../utils/get-window'; import Icon from './icon'; -jest.mock('../utils/get-window'); - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const getWindowMock = getWindow as any; - describe('basic', () => { test('renders', () => { const { baseElement } = render() @@ -52,12 +46,11 @@ describe('basic', () => { describe('inline', () => { beforeEach(() => { - const mockWindow = { - getComputedStyle: jest.fn(() => ({ + Object.defineProperty(window, 'getComputedStyle', { + value: () => ({ 'line-height': '14px' - })) - }; - getWindowMock.mockReturnValue(mockWindow); + }) + }); }); test('renders', () => { diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx index 679f252e..a24c186d 100644 --- a/src/components/icon/icon.tsx +++ b/src/components/icon/icon.tsx @@ -1,6 +1,5 @@ import React, { ReactElement, useRef, useEffect, SVGProps, DetailedHTMLProps } from 'react'; import PropTypes from 'prop-types'; -import getWindow from '../utils/get-window'; import * as AccessibleIcon from '@radix-ui/react-accessible-icon'; interface Props { @@ -28,8 +27,8 @@ export default function Icon({ const el = useRef(null); useEffect(() => { - if (inline && el.current) { - const lineHeight = getWindow().getComputedStyle(el.current)[ + if (inline && el.current && typeof window !== 'undefined') { + const lineHeight = window.getComputedStyle(el.current)[ 'line-height' ]; el.current.style.height = lineHeight; diff --git a/src/components/utils/README.md b/src/components/utils/README.md index 7813508a..403b2234 100644 --- a/src/components/utils/README.md +++ b/src/components/utils/README.md @@ -2,14 +2,6 @@ All utils can be imported from `@mapbox/mr-ui/utils/{name}`. -## getWindow - -```js -import getWindow from '@mapbox/mr-ui/utils/get-window'; -``` - -Wraps `window` to make it easy to mock aspects of the browser environment while testing. - ## shallowEqualObjects ```js diff --git a/src/components/utils/get-window.ts b/src/components/utils/get-window.ts deleted file mode 100644 index 40376cf8..00000000 --- a/src/components/utils/get-window.ts +++ /dev/null @@ -1,9 +0,0 @@ -// For the purposes of correctly mocking the window object in Jest, -// this is a safe way of returning it for tests to work as expected. -export default function getWindow(): typeof window { - if (typeof window !== 'object') { - throw new Error('window not available'); - } - - return window; -}