diff --git a/src/components/__tests__/__snapshots__/checker.js.snap b/src/components/__tests__/__snapshots__/checker.js.snap index bdb884b..bb8383c 100644 --- a/src/components/__tests__/__snapshots__/checker.js.snap +++ b/src/components/__tests__/__snapshots__/checker.js.snap @@ -5,6 +5,7 @@ exports[`render matches snapshot with errors 1`] = ` { fakeEditor = { getContainer: () => ({ querySelector: () => fakeIframe - }) + }), + on: jest.fn(), + focus: jest.fn() } child = node.appendChild(document.createElement("div")) child2 = node.appendChild(document.createElement("div")) @@ -166,7 +168,7 @@ describe("check", () => { }) test("does nothing if props.getBody() returns falsy", () => { - component = shallow( false} />) + component = shallow( false} editor={fakeEditor} />) instance = component.instance() const spy = jest.fn() instance.check(spy) @@ -184,6 +186,35 @@ describe("check", () => { }).not.toThrow() }) }) + + describe("close", () => { + beforeEach(() => jest.useFakeTimers()) + afterEach(() => { + jest.useRealTimers() + jest.restoreAllMocks() + component.unmount() + }) + + it("calls editor.on('Remove') when mounted", () => { + component = mount( node} editor={fakeEditor} />) + instance = component.instance() + instance.check() // open it + jest.runAllTimers() + expect(fakeEditor.on).toHaveBeenCalled() + expect(fakeEditor.on.mock.calls[0][0]).toEqual("Remove") + }) + + it("calls focus on the editor on closing the tray", () => { + component = mount( node} editor={fakeEditor} />) + instance = component.instance() + instance.check() // opens it + jest.runAllTimers() + const closeButton = document.querySelector("[data-mce-component] button") + closeButton.click() + jest.runAllTimers() + expect(instance.props.editor.focus).toHaveBeenCalled() + }) + }) }) describe("setErrorIndex", () => { diff --git a/src/components/checker.js b/src/components/checker.js index 16bb8f8..4183f69 100644 --- a/src/components/checker.js +++ b/src/components/checker.js @@ -51,6 +51,12 @@ export default class Checker extends React.Component { additionalRules: [] } + componentDidMount() { + this.props.editor.on("Remove", editor => { + this.setState({ open: false }) + }) + } + setConfig(config) { this.setState({ config }) } @@ -285,6 +291,10 @@ export default class Checker extends React.Component { this.setState({ open: false }) } + handleExited() { + this.props.editor.focus(false) + } + render() { const rule = this.errorRule() const issueNumberMessage = formatMessage("Issue { num }/{ total }", { @@ -295,9 +305,11 @@ export default class Checker extends React.Component { return ( this.handleClose()} + onExited={() => this.handleExited()} placement="end" contentRef={e => (this.trayElement = e)} >