From 9db59d75b9874932043f754d6f33b34d85151033 Mon Sep 17 00:00:00 2001 From: Kerry Date: Mon, 21 Feb 2022 18:09:01 +0100 Subject: [PATCH] Bump react-focus-lock (#7858) * react-focus-lock to 2.5.1 Signed-off-by: Kerry Archibald * use enzyme in ASSD test so focus lock finds active element Signed-off-by: Kerry Archibald * findById and flushPromises to test utils Signed-off-by: Kerry Archibald --- package.json | 2 +- .../dialogs/AccessSecretStorageDialog-test.js | 77 +++++++++++-------- .../__snapshots__/ExportDialog-test.tsx.snap | 48 ------------ .../views/elements/PollCreateDialog-test.tsx | 3 +- .../PollCreateDialog-test.tsx.snap | 6 +- test/utils/test-utils.ts | 6 +- yarn.lock | 18 ++--- 7 files changed, 64 insertions(+), 96 deletions(-) diff --git a/package.json b/package.json index f3172be356..ec979623ee 100644 --- a/package.json +++ b/package.json @@ -108,7 +108,7 @@ "react-beautiful-dnd": "^13.1.0", "react-blurhash": "^0.1.3", "react-dom": "17.0.2", - "react-focus-lock": "^2.5.0", + "react-focus-lock": "^2.5.1", "react-transition-group": "^4.4.1", "rfc4648": "^1.4.0", "sanitize-html": "^2.3.2", diff --git a/test/components/views/dialogs/AccessSecretStorageDialog-test.js b/test/components/views/dialogs/AccessSecretStorageDialog-test.js index 54a12be3eb..f6c2db3718 100644 --- a/test/components/views/dialogs/AccessSecretStorageDialog-test.js +++ b/test/components/views/dialogs/AccessSecretStorageDialog-test.js @@ -15,52 +15,63 @@ limitations under the License. */ import React from 'react'; -import TestRenderer from 'react-test-renderer'; +import { mount } from 'enzyme'; +import { act } from 'react-dom/test-utils'; import sdk from '../../../skinned-sdk'; import { MatrixClientPeg } from '../../../../src/MatrixClientPeg'; import { stubClient } from '../../../test-utils'; +import { findById, flushPromises } from '../../../utils/test-utils'; const AccessSecretStorageDialog = sdk.getComponent("dialogs.security.AccessSecretStorageDialog"); describe("AccessSecretStorageDialog", function() { - it("Closes the dialog if _onRecoveryKeyNext is called with a valid key", (done) => { - const testInstance = TestRenderer.create( + it("Closes the dialog if _onRecoveryKeyNext is called with a valid key", async () => { + const onFinished = jest.fn(); + const checkPrivateKey = jest.fn().mockResolvedValue(true); + const wrapper = mount( p && p.recoveryKey && p.recoveryKey == "a"} - onFinished={(v) => { - if (v) { done(); } - }} + checkPrivateKey={checkPrivateKey} + onFinished={onFinished} />, ); - testInstance.getInstance().setState({ + wrapper.setState({ recoveryKeyValid: true, recoveryKey: "a", }); const e = { preventDefault: () => {} }; - testInstance.getInstance().onRecoveryKeyNext(e); + + wrapper.find('form').simulate('submit', e); + + await flushPromises(); + + expect(checkPrivateKey).toHaveBeenCalledWith({ recoveryKey: "a" }); + expect(onFinished).toHaveBeenCalledWith({ recoveryKey: "a" }); }); it("Considers a valid key to be valid", async function() { - const testInstance = TestRenderer.create( + const wrapper = mount( true} />, ); - const v = "asdf"; - const e = { target: { value: v } }; stubClient(); MatrixClientPeg.get().keyBackupKeyFromRecoveryKey = () => 'a raw key'; MatrixClientPeg.get().checkSecretStorageKey = () => true; - testInstance.getInstance().onRecoveryKeyChange(e); + + const v = "asdf"; + const e = { target: { value: v } }; + act(() => { + findById(wrapper, 'mx_securityKey').find('input').simulate('change', e); + }); // force a validation now because it debounces - await testInstance.getInstance().validateRecoveryKey(); - const { recoveryKeyValid } = testInstance.getInstance().state; + await wrapper.instance().validateRecoveryKey(); + const { recoveryKeyValid } = wrapper.instance().state; expect(recoveryKeyValid).toBe(true); }); it("Notifies the user if they input an invalid Security Key", async function() { - const testInstance = TestRenderer.create( + const wrapper = mount( false} />, @@ -70,22 +81,24 @@ describe("AccessSecretStorageDialog", function() { MatrixClientPeg.get().keyBackupKeyFromRecoveryKey = () => { throw new Error("that's no key"); }; - testInstance.getInstance().onRecoveryKeyChange(e); - // force a validation now because it debounces - await testInstance.getInstance().validateRecoveryKey(); - const { recoveryKeyValid, recoveryKeyCorrect } = testInstance.getInstance().state; + act(() => { + findById(wrapper, 'mx_securityKey').find('input').simulate('change', e); + }); + // force a validation now because it debounces + await wrapper.instance().validateRecoveryKey(); + + const { recoveryKeyValid, recoveryKeyCorrect } = wrapper.instance().state; expect(recoveryKeyValid).toBe(false); expect(recoveryKeyCorrect).toBe(false); - const notification = testInstance.root.findByProps({ - className: "mx_AccessSecretStorageDialog_recoveryKeyFeedback " + - "mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid", - }); - expect(notification.props.children).toEqual("Invalid Security Key"); + + wrapper.setProps({}); + const notification = wrapper.find(".mx_AccessSecretStorageDialog_recoveryKeyFeedback"); + expect(notification.props().children).toEqual("Invalid Security Key"); }); it("Notifies the user if they input an invalid passphrase", async function() { - const testInstance = TestRenderer.create( + const wrapper = mount( false} onFinished={() => {}} @@ -100,12 +113,12 @@ describe("AccessSecretStorageDialog", function() { const e = { target: { value: "a" } }; stubClient(); MatrixClientPeg.get().isValidRecoveryKey = () => false; - testInstance.getInstance().onPassPhraseChange(e); - await testInstance.getInstance().onPassPhraseNext({ preventDefault: () => {} }); - const notification = testInstance.root.findByProps({ - className: "mx_AccessSecretStorageDialog_keyStatus", - }); - expect(notification.props.children).toEqual( + wrapper.instance().onPassPhraseChange(e); + await wrapper.instance().onPassPhraseNext({ preventDefault: () => { } }); + + wrapper.setProps({}); + const notification = wrapper.find(".mx_AccessSecretStorageDialog_keyStatus"); + expect(notification.props().children).toEqual( ["\uD83D\uDC4E ", "Unable to access secret storage. Please verify that you " + "entered the correct Security Phrase."]); }); diff --git a/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap index 5c428406af..f97344beff 100644 --- a/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap +++ b/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap @@ -58,22 +58,6 @@ Array [ } tabIndex={0} /> -
-
-
2345678901234); // eslint-disable-next-line no-extend-native Date.prototype.toISOString = jest.fn(() => "2021-11-23T14:35:14.240Z"); -const findById = (component, id) => component.find(`[id="${id}"]`); - afterAll(() => { Date.now = realDateNow; // eslint-disable-next-line no-extend-native diff --git a/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap b/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap index c3e5433d7d..77e40f05e7 100644 --- a/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PollCreateDialog renders a blank poll 1`] = `"

Create poll

Poll type

Voters see results as soon as they have voted

What is your poll question or topic?

Create options

Add option
Cancel
"`; +exports[`PollCreateDialog renders a blank poll 1`] = `"

Create poll

Poll type

Voters see results as soon as they have voted

What is your poll question or topic?

Create options

Add option
Cancel
"`; -exports[`PollCreateDialog renders a question and some options 1`] = `"

Create poll

Poll type

Voters see results as soon as they have voted

What is your poll question or topic?

Create options

Add option
Cancel
"`; +exports[`PollCreateDialog renders a question and some options 1`] = `"

Create poll

Poll type

Voters see results as soon as they have voted

What is your poll question or topic?

Create options

Add option
Cancel
"`; -exports[`PollCreateDialog renders info from a previous event 1`] = `"

Edit poll

Poll type

Voters see results as soon as they have voted

What is your poll question or topic?

Create options

Add option
Cancel
"`; +exports[`PollCreateDialog renders info from a previous event 1`] = `"

Edit poll

Poll type

Voters see results as soon as they have voted

What is your poll question or topic?

Create options

Add option
Cancel
"`; diff --git a/test/utils/test-utils.ts b/test/utils/test-utils.ts index dd98483796..81c05cc6bb 100644 --- a/test/utils/test-utils.ts +++ b/test/utils/test-utils.ts @@ -103,4 +103,8 @@ export const mkSpace = ( export const emitPromise = (e: EventEmitter, k: string | symbol) => new Promise(r => e.once(k, r)); -export const findByTestId = (component: ReactWrapper, id: string) => component.find(`[data-test-id="${id}"]`); +const findByAttr = (attr: string) => (component: ReactWrapper, value: string) => component.find(`[${attr}="${value}"]`); +export const findByTestId = findByAttr('data-test-id'); +export const findById = findByAttr('id'); + +export const flushPromises = async () => await new Promise(resolve => setTimeout(resolve)); diff --git a/yarn.lock b/yarn.lock index 1de8453fa4..81ea0dbb23 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4287,10 +4287,10 @@ flux@2.1.1: fbjs "0.1.0-alpha.7" immutable "^3.7.4" -focus-lock@^0.10.1: - version "0.10.1" - resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.10.1.tgz#5f46fa74fefb87144479c2f8e276f0eedd8081b2" - integrity sha512-b9yUklCi4fTu2GXn7dnaVf4hiLVVBp7xTiZarAHMODV2To6Bitf6F/UI67RmKbdgJQeVwI1UO0d9HYNbXt3GkA== +focus-lock@^0.10.2: + version "0.10.2" + resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.10.2.tgz#561c62bae8387ecba1dd8e58a6df5ec29835c644" + integrity sha512-DSaI/UHZ/02sg1P616aIWgToQcrKKBmcCvomDZ1PZvcJFj350PnWhSJxJ76T3e5/GbtQEARIACtbrdlrF9C5kA== dependencies: tslib "^2.0.3" @@ -7362,13 +7362,13 @@ react-dom@17.0.2: object-assign "^4.1.1" scheduler "^0.20.2" -react-focus-lock@^2.5.0: - version "2.7.1" - resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.7.1.tgz#a9fbb3fa4efaee32162406e5eb96ae658964193b" - integrity sha512-ImSeVmcrLKNMqzUsIdqOkXwTVltj79OPu43oT8tVun7eIckA4VdM7UmYUFo3H/UC2nRVgagMZGFnAOQEDiDYcA== +react-focus-lock@^2.5.1: + version "2.8.1" + resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.8.1.tgz#a28f06a4ef5eab7d4ef0d859512772ec1331d529" + integrity sha512-4kb9I7JIiBm0EJ+CsIBQ+T1t5qtmwPRbFGYFQ0t2q2qIpbFbYTHDjnjJVFB7oMBtXityEOQehblJPjqSIf3Amg== dependencies: "@babel/runtime" "^7.0.0" - focus-lock "^0.10.1" + focus-lock "^0.10.2" prop-types "^15.6.2" react-clientside-effect "^1.2.5" use-callback-ref "^1.2.5"