diff --git a/package-lock.json b/package-lock.json index cae11489b..3bbc5dfb0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -535,48 +535,66 @@ } }, "@material/dialog": { - "version": "0.43.0", - "resolved": "https://registry.npmjs.org/@material/dialog/-/dialog-0.43.0.tgz", - "integrity": "sha512-1WDYfzs7393Zj2BZyyix1NScUMHC+Je5gjXDTjNgmTJ54fC7izkbTeKtllczehnIOqRLPzwiWEtu4JWd+1SWgQ==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@material/dialog/-/dialog-1.1.0.tgz", + "integrity": "sha512-XbFTTdzzRhjClLMDFxz8SR/mwwCBpQL6N7Z7UzX7SgD51UJmd19SsXPItFquRKk3mkNuoFBBcR4KJ6julAW+Fg==", "dev": true, "requires": { - "@material/animation": "^0.41.0", - "@material/base": "^0.41.0", - "@material/dom": "^0.41.0", - "@material/elevation": "^0.43.0", - "@material/ripple": "^0.43.0", + "@material/animation": "^1.0.0", + "@material/base": "^1.0.0", + "@material/dom": "^1.1.0", + "@material/elevation": "^1.1.0", + "@material/feature-targeting": "^0.44.1", + "@material/ripple": "^1.1.0", "@material/rtl": "^0.42.0", - "@material/shape": "^0.43.0", - "@material/theme": "^0.43.0", - "@material/typography": "^0.43.0", - "focus-trap": "^4.0.2" + "@material/shape": "^1.0.0", + "@material/theme": "^1.1.0", + "@material/typography": "^1.0.0", + "focus-trap": "^4.0.2", + "tslib": "^1.9.3" }, "dependencies": { - "@material/base": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", - "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", - "dev": true + "@material/animation": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/animation/-/animation-1.0.0.tgz", + "integrity": "sha512-Ed5/vggn6ZhSJ87yn3ZS1d826VJNFz73jHF2bSsgRtHDoB8KCuOwQMfdgAgDa4lKDF6CDIPCKBZPKrs2ubehdw==", + "dev": true, + "requires": { + "tslib": "^1.9.3" + } + }, + "@material/dom": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@material/dom/-/dom-1.1.0.tgz", + "integrity": "sha512-+HWW38ZaM2UBPu4+7QCusLDSf4tFT31rsEXHkTkxYSg/QpDivfPx6YDz4OmYtafmhPR1d1YjqB3MYysUHdodyw==", + "dev": true, + "requires": { + "tslib": "^1.9.3" + } }, "@material/elevation": { - "version": "0.43.0", - "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-0.43.0.tgz", - "integrity": "sha512-/OM+7HVS26hCa+AU0dfD/cdEkj2ssYNYIWwmqUVVJUIhB4v/xRsfnCf0Z1KXGtXU+V3AhHp8T9q5LHDzrkOvnA==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-1.1.0.tgz", + "integrity": "sha512-m4eATJvDhWK1BT+yA1iHz5mhAk8cV9olC4mjVzm4PTAqhDH2yya4WzjN1HPVHE/a65ObyZ7V4qopxu9MRocm3A==", "dev": true, "requires": { - "@material/animation": "^0.41.0", - "@material/theme": "^0.43.0" + "@material/animation": "^1.0.0", + "@material/feature-targeting": "^0.44.1", + "@material/theme": "^1.1.0" } }, "@material/ripple": { - "version": "0.43.0", - "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.43.0.tgz", - "integrity": "sha512-5X5xJtE1tM5QYrsvIe5coZNk7nt++vi40CDBVxS2abO+83ky91I5mH/djcm0vcSFmkHM/QOymEQBR3XDjA3XXQ==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-1.1.0.tgz", + "integrity": "sha512-mkfDBZAmxjpRG7V9TrfOmLxt1g/wvGHCXtYPgvH7W8ozjf53edqxLOFENEdvHbie27y9nyixzXn0gzU0HnxSeA==", "dev": true, "requires": { - "@material/animation": "^0.41.0", - "@material/base": "^0.41.0", - "@material/theme": "^0.43.0" + "@material/animation": "^1.0.0", + "@material/base": "^1.0.0", + "@material/dom": "^1.1.0", + "@material/feature-targeting": "^0.44.1", + "@material/theme": "^1.1.0", + "tslib": "^1.9.3" } }, "@material/rtl": { @@ -586,38 +604,31 @@ "dev": true }, "@material/shape": { - "version": "0.43.0", - "resolved": "https://registry.npmjs.org/@material/shape/-/shape-0.43.0.tgz", - "integrity": "sha512-KGnoQV4G2OQbMe5Lr5Xbk8XNlO93Qi/juxXtd2wrAfiaPmktD8ug0CwdVDOPBOmj9a0gX3Ofi9XWcoU+tLEVjg==", - "dev": true + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/shape/-/shape-1.0.0.tgz", + "integrity": "sha512-zfXEacPQZmH+ujVtaFyfAsYiF46j1QCcFzJeZVouG4pznrbA7XD6614Ywg0wbyWX5iB6hD52ld/IN+R/6oxKqA==", + "dev": true, + "requires": { + "@material/feature-targeting": "^0.44.1" + } }, "@material/theme": { - "version": "0.43.0", - "resolved": "https://registry.npmjs.org/@material/theme/-/theme-0.43.0.tgz", - "integrity": "sha512-/zndZL6EihI18v2mYd4O8xvOBAAXmLeHyHVK28LozSAaJ9okQgD25wq5Ktk95oMTmPIC+rH66KcK6371ivNk8g==", - "dev": true + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@material/theme/-/theme-1.1.0.tgz", + "integrity": "sha512-YYUV9Rhbx4r/EMb/zoOYJUWjhXChNaLlH1rqt3vpNVyxRcxGqoVMGp5u1XALBCFiD9dACPKLIkKyRYa928nmPQ==", + "dev": true, + "requires": { + "@material/feature-targeting": "^0.44.1" + } }, "@material/typography": { - "version": "0.43.0", - "resolved": "https://registry.npmjs.org/@material/typography/-/typography-0.43.0.tgz", - "integrity": "sha512-WSg8vDoC2rnmOWbhNdDmSoT1jV0QQSw7CFps1DFbnIe57UaUxgWuGdhc+9XlEPctXUFto4FU4DfnRcdW4ydAig==", - "dev": true - }, - "focus-trap": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-4.0.2.tgz", - "integrity": "sha512-HtLjfAK7Hp2qbBtLS6wEznID1mPT+48ZnP2nkHzgjpL4kroYHg0CdqJ5cTXk+UO5znAxF5fRUkhdyfgrhh8Lzw==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/typography/-/typography-1.0.0.tgz", + "integrity": "sha512-Oeqbjci1cC7jTE8/n3dwnkqKe9ZeWiaE+rgMtRYtRFw1HvAw14SpGA5EEAS/Li2Hu2KZ50FYCe3HYqShfxtChA==", "dev": true, "requires": { - "tabbable": "^3.1.2", - "xtend": "^4.0.1" + "@material/feature-targeting": "^0.44.1" } - }, - "tabbable": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-3.1.2.tgz", - "integrity": "sha512-wjB6puVXTYO0BSFtCmWQubA/KIn7Xvajw0x0l6eJUudMG/EAiJvIUnyNX6xO4NpGrJ16lbD0eUseB9WxW0vlpQ==", - "dev": true } } }, @@ -784,6 +795,12 @@ "dev": true } } + }, + "@material/typography": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/typography/-/typography-0.41.0.tgz", + "integrity": "sha512-15dlqSU+9uGcWdg4KXXcmDzTKJPb7/5Z9kmooONb2Laot1uiuntDXQS0yL+U2FYLW5Ros+WVMosDBKFruWx68A==", + "dev": true } } }, @@ -1244,36 +1261,6 @@ } } }, - "@material/selection-control": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/selection-control/-/selection-control-0.41.0.tgz", - "integrity": "sha512-rRHGiZVPoP4nxAAoeqsgTsxz9GwInGs7HIlEhPfMFygmSZVUHHsuOJXSTpOKYi8GCoKHpB0RKZsAtxM0BYAelw==", - "dev": true, - "requires": { - "@material/ripple": "^0.41.0" - }, - "dependencies": { - "@material/ripple": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", - "integrity": "sha512-rxEUVWM4AByDlTCH0kkthZQmUuY6eeN0X6cOHBoioFN2vUDk0D0Nfzz/N9FF2AlAf8C2lDDLrTuqnJPVIn+NHA==", - "dev": true, - "requires": { - "@material/animation": "^0.41.0", - "@material/base": "^0.41.0", - "@material/theme": "^0.41.0" - }, - "dependencies": { - "@material/base": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", - "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", - "dev": true - } - } - } - } - }, "@material/shape": { "version": "0.41.0", "resolved": "https://registry.npmjs.org/@material/shape/-/shape-0.41.0.tgz", @@ -1774,6 +1761,12 @@ "@material/base": "^0.41.0", "@material/theme": "^0.41.0" } + }, + "@material/typography": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/typography/-/typography-0.41.0.tgz", + "integrity": "sha512-15dlqSU+9uGcWdg4KXXcmDzTKJPb7/5Z9kmooONb2Laot1uiuntDXQS0yL+U2FYLW5Ros+WVMosDBKFruWx68A==", + "dev": true } } }, @@ -1815,14 +1808,23 @@ "@material/base": "^0.41.0", "@material/theme": "^0.41.0" } + }, + "@material/typography": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/typography/-/typography-0.41.0.tgz", + "integrity": "sha512-15dlqSU+9uGcWdg4KXXcmDzTKJPb7/5Z9kmooONb2Laot1uiuntDXQS0yL+U2FYLW5Ros+WVMosDBKFruWx68A==", + "dev": true } } }, "@material/typography": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/typography/-/typography-0.41.0.tgz", - "integrity": "sha512-15dlqSU+9uGcWdg4KXXcmDzTKJPb7/5Z9kmooONb2Laot1uiuntDXQS0yL+U2FYLW5Ros+WVMosDBKFruWx68A==", - "dev": true + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/typography/-/typography-1.0.0.tgz", + "integrity": "sha512-Oeqbjci1cC7jTE8/n3dwnkqKe9ZeWiaE+rgMtRYtRFw1HvAw14SpGA5EEAS/Li2Hu2KZ50FYCe3HYqShfxtChA==", + "dev": true, + "requires": { + "@material/feature-targeting": "^0.44.1" + } }, "@types/caseless": { "version": "0.12.1", diff --git a/package.json b/package.json index 72376643d..40dea300e 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "@material/card": "^0.41.0", "@material/checkbox": "^0.41.0", "@material/chips": "^1.0.0", - "@material/dialog": "^0.43.0", + "@material/dialog": "^1.1.0", "@material/dom": "^0.41.0", "@material/drawer": "^1.0.1", "@material/fab": "^0.41.0", diff --git a/packages/dialog/index.tsx b/packages/dialog/index.tsx index e219eb894..9845c5249 100644 --- a/packages/dialog/index.tsx +++ b/packages/dialog/index.tsx @@ -23,10 +23,11 @@ import * as React from 'react'; import classnames from 'classnames'; -// @ts-ignore no .d.ts file -import {MDCDialogFoundation, MDCDialogAdapter, util} from '@material/dialog/dist/mdc.dialog'; -// @ts-ignore no .d.ts file -import {ponyfill} from '@material/dom/dist/mdc.dom'; +import {MDCDialogFoundation} from '@material/dialog/foundation'; +import {MDCDialogAdapter} from '@material/dialog/adapter'; +import {createFocusTrapInstance, isScrollable, areTopsMisaligned} from '@material/dialog/util'; +import {strings} from '@material/dialog/constants'; +import {ponyfill} from '@material/dom'; /* eslint-disable no-unused-vars */ import DialogContent, {DialogContentProps} from './DialogContent'; import DialogFooter, {DialogFooterProps} from './DialogFooter'; @@ -89,7 +90,7 @@ class Dialog extends React.Component< DialogState > { focusTrap?: FocusTrap; - foundation: MDCDialogFoundation; + foundation!: MDCDialogFoundation; dialogElement: React.RefObject = React.createRef(); labelledBy?: string; describedBy?: string; @@ -103,6 +104,8 @@ class Dialog extends React.Component< id: 'mdc-dialog', open: false, role: 'alertdialog', + escapeKeyAction: strings.CLOSE_ACTION, + scrimClickAction: strings.CLOSE_ACTION, }; state: DialogState = {classList: new Set()}; @@ -116,7 +119,7 @@ class Dialog extends React.Component< this.open(); } if (!autoStackButtons) { - this.foundation.setAutoStackButtons(autoStackButtons); + this.foundation.setAutoStackButtons(autoStackButtons!); } if (typeof escapeKeyAction === 'string') { // set even if empty string @@ -136,15 +139,15 @@ class Dialog extends React.Component< const {open, autoStackButtons, escapeKeyAction, scrimClickAction} = this.props; if (prevProps.autoStackButtons !== autoStackButtons) { - this.foundation.setAutoStackButtons(autoStackButtons); + this.foundation.setAutoStackButtons(autoStackButtons!); } if (prevProps.escapeKeyAction !== escapeKeyAction) { - this.foundation.setEscapeKeyAction(escapeKeyAction); + this.foundation.setEscapeKeyAction(escapeKeyAction!); } if (prevProps.scrimClickAction !== scrimClickAction) { - this.foundation.setScrimClickAction(scrimClickAction); + this.foundation.setScrimClickAction(scrimClickAction!); } if (prevProps.open !== open) { @@ -181,13 +184,12 @@ class Dialog extends React.Component< }; private initializeFocusTrap = (): void => { - this.focusTrap = this.props.children && util.createFocusTrapInstance(this.dialogElement.current); + this.focusTrap = this.props.children && createFocusTrapInstance(this.dialogElement.current!); }; - get adapter(): Partial { + get adapter(): MDCDialogAdapter { const strings = MDCDialogFoundation.strings; const {closest, matches} = ponyfill; - const {isScrollable, areTopsMisaligned} = util; return { addClass: (className: string) => { const {classList} = this.state; @@ -258,8 +260,8 @@ class Dialog extends React.Component< }; handleInteraction = (e: React.MouseEvent | React.KeyboardEvent): void => - this.foundation.handleInteraction(e); - handleDocumentKeyDown = (e: Event): void => + this.foundation.handleInteraction(e.nativeEvent); + handleDocumentKeyDown = (e: KeyboardEvent): void => this.foundation.handleDocumentKeydown(e); handleLayout = (): void => this.foundation.layout(); diff --git a/packages/dialog/package.json b/packages/dialog/package.json index c0d1ec1ac..d38d57bdd 100644 --- a/packages/dialog/package.json +++ b/packages/dialog/package.json @@ -11,8 +11,8 @@ "dialog" ], "dependencies": { - "@material/dialog": "0.43.0", - "@material/dom": "^0.41.0", + "@material/dialog": "1.1.0", + "@material/dom": "^1.0.0", "@material/react-button": "^0.11.0", "classnames": "^2.2.6", "focus-trap": "^4.0.2", diff --git a/test/unit/dialog/index.test.tsx b/test/unit/dialog/index.test.tsx index 3f0e472d0..934580d23 100644 --- a/test/unit/dialog/index.test.tsx +++ b/test/unit/dialog/index.test.tsx @@ -3,12 +3,10 @@ import * as React from 'react'; import {assert} from 'chai'; import * as td from 'testdouble'; import {shallow, mount} from 'enzyme'; -// @ts-ignore import Dialog, { ChildTypes, DialogTitle, DialogContent, DialogFooter, DialogButton, } from '../../../packages/dialog'; -// @ts-ignore no mdc .d.ts file -import {util} from '@material/dialog/dist/mdc.dialog'; +import * as util from '@material/dialog/util'; import {cssClasses, LAYOUT_EVENTS} from '../../../packages/dialog/constants'; import {coerceForTesting} from '../helpers/types'; import {FocusTrap} from 'focus-trap'; @@ -26,6 +24,11 @@ const DialogStub = ( suite('Dialog'); +const getAdapter = (instance: Dialog) => { + // @ts-ignore adapter_ property is protection, we need to override it for testing purposes + return instance.foundation.adapter_; +}; + test('renders a dialog with default tag', () => { const wrapper = shallow(); assert.equal(wrapper.type(), 'div'); @@ -44,7 +47,7 @@ test('creates foundation', () => { test('#componentWillUnmount destroys foundation', () => { const wrapper = shallow(); const foundation = wrapper.instance().foundation; - foundation.destroy = td.func(); + foundation.destroy = td.func<() => void>(); wrapper.unmount(); td.verify(foundation.destroy()); }); @@ -87,14 +90,14 @@ test('#componentDidMount calls #foundaiton.setScrimClickAction if prop present', test('when props.open updates to true, #foundation.open is called ', () => { const wrapper = shallow(); - wrapper.instance().foundation.open = td.func(); + wrapper.instance().foundation.open = td.func<() => void>(); wrapper.setProps({open: true}); td.verify(wrapper.instance().foundation.open(), {times: 1}); }); test('when props.open updates to false from true, #foundation.close is called ', () => { const wrapper = shallow(); - wrapper.instance().foundation.close = td.func(); + wrapper.instance().foundation.close = td.func<(action: string) => null>(); wrapper.setProps({open: false}); td.verify(wrapper.instance().foundation.close(), {times: 1}); }); @@ -103,7 +106,7 @@ test('when props.autoStackButtons updates to true, ' + ' #foundation.setAutoStackButtons is called ', () => { const wrapper = shallow(); assert.isFalse(wrapper.instance().foundation.getAutoStackButtons()); - wrapper.instance().foundation.setAutoStackButtons = td.func(); + wrapper.instance().foundation.setAutoStackButtons = td.func<(autoStack: boolean) => null>(); wrapper.setProps({autoStackButtons: true}); td.verify(wrapper.instance().foundation.setAutoStackButtons(true), {times: 1}); }); @@ -112,7 +115,7 @@ test('when props.autoStackButtons updates to false, ' + ' #foundation.setAutoStackButtons is called ', () => { const wrapper = shallow(); assert.isTrue(wrapper.instance().foundation.getAutoStackButtons()); - wrapper.instance().foundation.setAutoStackButtons = td.func(); + wrapper.instance().foundation.setAutoStackButtons = td.func<(autoStack: boolean) => null>(); wrapper.setProps({autoStackButtons: false}); td.verify(wrapper.instance().foundation.setAutoStackButtons(false), {times: 1}); }); @@ -121,7 +124,7 @@ test('when props.escapeKeyAction updates #foundation.setEscapeKeyAction is calle const wrapper = shallow(); const escapeKeyAction: string = 'meow'; - wrapper.instance().foundation.setEscapeKeyAction = td.func(); + wrapper.instance().foundation.setEscapeKeyAction = td.func<(action: string) => null>(); wrapper.setProps({escapeKeyAction}); td.verify(wrapper.instance().foundation.setEscapeKeyAction(escapeKeyAction), {times: 1}); }); @@ -130,7 +133,7 @@ test('when props.scrimClickAction updates #foundation.setScrimClickAction is cal const wrapper = shallow(); const scrimClickAction: string = 'meow'; - wrapper.instance().foundation.setScrimClickAction = td.func(); + wrapper.instance().foundation.setScrimClickAction = td.func<(action: string) => null>(); wrapper.setProps({scrimClickAction}); td.verify(wrapper.instance().foundation.setScrimClickAction(scrimClickAction), {times: 1}); }); @@ -159,26 +162,26 @@ test('classNames adds classes', () => { test('#adapter.addClass should update state with new className', () => { const wrapper = mount(); - wrapper.instance().foundation.adapter_.addClass('test-class'); + getAdapter(wrapper.instance()).addClass('test-class'); assert.isTrue(wrapper.state().classList.has('test-class')); }); test('#adapter.removeClass should update state with new className', () => { const wrapper = mount(); wrapper.setState({classList: new Set(['test-class'])}); - wrapper.instance().foundation.adapter_.removeClass('test-class'); + getAdapter(wrapper.instance()).removeClass('test-class'); assert.isFalse(wrapper.state().classList.has('test-class')); }); test('#adapter.hasClass returns true if class is contained in classes', () => { const wrapper = mount(); wrapper.setState({classList: new Set(['test-class'])}); - assert.isTrue(wrapper.instance().foundation.adapter_.hasClass('test-class')); + assert.isTrue(getAdapter(wrapper.instance()).hasClass('test-class')); }); test('#adapter.addBodyClass adds a class to the body', () => { const wrapper = shallow(); - wrapper.instance().foundation.adapter_.addBodyClass('test-class'); + getAdapter(wrapper.instance()).addBodyClass('test-class'); const body = document.querySelector('body')!; assert.isTrue(body.classList.contains('test-class')); }); @@ -249,7 +252,7 @@ test('#adapter.getActionFromEvent returns attribute value on event target', () = const wrapper = mount(DialogStub); const buttons = wrapper.instance().buttons!; - const action = wrapper.instance().adapter.getActionFromEvent({target: buttons[1]}); + const action = wrapper.instance().adapter.getActionFromEvent(coerceForTesting({target: buttons[1]})); assert.equal(action, 'accept'); }); @@ -268,7 +271,7 @@ test('#adapter.getActionFromEvent returns attribute value on parent of event tar ); const spanEl = wrapper.instance().content!.getElementsByTagName('span')[0]; - const action = wrapper.instance().adapter.getActionFromEvent({target: spanEl}); + const action = wrapper.instance().adapter.getActionFromEvent(coerceForTesting({target: spanEl})); assert.equal(action, 'pet'); }); @@ -288,7 +291,7 @@ test('#adapter.getActionFromEvent returns null when attribute is not present', ( ); const spanEl = wrapper.instance().content!.getElementsByTagName('span')[0]; - const action = wrapper.instance().adapter.getActionFromEvent({target: spanEl}); + const action = wrapper.instance().adapter.getActionFromEvent(coerceForTesting({target: spanEl})); assert.isNull(action); }); @@ -370,9 +373,9 @@ test('#handleOpening adds keydown handler on document that triggers ' + '#foundation.handleDocumentKeyDown', () => { const wrapper = shallow(); - wrapper.instance().foundation.handleDocumentKeydown = td.func(); + wrapper.instance().foundation.handleDocumentKeydown = td.func<(evt: KeyboardEvent) => null>(); - const e = new Event('keydown'); + const e = new KeyboardEvent('keydown'); document.dispatchEvent(e); td.verify(wrapper.instance().foundation.handleDocumentKeydown(e), {times: 0}); @@ -402,7 +405,7 @@ test('#handleClosing removes keydown handler on document that triggers ' + coerceForTesting<(evt: KeyboardEvent) => void>(td.func()); wrapper.instance().handleOpening(); - const e = new Event('keydown'); + const e = new KeyboardEvent('keydown'); document.dispatchEvent(e); td.verify(wrapper.instance().foundation.handleDocumentKeydown(e), {times: 1}); @@ -419,7 +422,7 @@ test('#handleClosing removes handler for LAYOUT_EVENTS to window', () => { wrapper.instance().handleOpening(); LAYOUT_EVENTS.forEach((eventType) => { - let evt = new Event(eventType); + let evt = new KeyboardEvent(eventType); window.dispatchEvent(evt); // @ts-ignore expected 0 arguments but got 1 td.verify(wrapper.instance().handleLayout(evt), {times: 1}); @@ -521,19 +524,23 @@ test('#setId will set labelledby and from a custom DialogTitle', () => { test('#events.onKeyDown triggers #foundaiton.handleInteraction', () => { const wrapper = shallow(

meow

); - wrapper.instance().foundation.handleInteraction = td.func(); - const e = {}; + wrapper.instance().foundation.handleInteraction = td.func<(e: KeyboardEvent) => null>(); + const e = coerceForTesting({ + nativeEvent: {}, + }); wrapper.simulate('keydown', e); - td.verify(wrapper.instance().foundation.handleInteraction(e), {times: 1}); + td.verify(wrapper.instance().foundation.handleInteraction(e.nativeEvent), {times: 1}); }); test('#events.onClick triggers #foundaiton.handleInteraction', () => { const wrapper = shallow(

meow

); - wrapper.instance().foundation.handleInteraction = td.func(); - const e = {}; + wrapper.instance().foundation.handleInteraction = td.func<(e: KeyboardEvent) => null>(); + const e = coerceForTesting({ + nativeEvent: {}, + }); wrapper.simulate('click', e); - td.verify(wrapper.instance().foundation.handleInteraction(e), {times: 1}); + td.verify(wrapper.instance().foundation.handleInteraction(e.nativeEvent), {times: 1}); }); test('Dialog closes when esc key is pressed', () => {