Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 9db59d7

Browse files
author
Kerry
authored
Bump react-focus-lock (#7858)
* react-focus-lock to 2.5.1 Signed-off-by: Kerry Archibald <[email protected]> * use enzyme in ASSD test so focus lock finds active element Signed-off-by: Kerry Archibald <[email protected]> * findById and flushPromises to test utils Signed-off-by: Kerry Archibald <[email protected]>
1 parent 8b9263c commit 9db59d7

File tree

7 files changed

+63
-95
lines changed

7 files changed

+63
-95
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@
108108
"react-beautiful-dnd": "^13.1.0",
109109
"react-blurhash": "^0.1.3",
110110
"react-dom": "17.0.2",
111-
"react-focus-lock": "^2.5.0",
111+
"react-focus-lock": "^2.5.1",
112112
"react-transition-group": "^4.4.1",
113113
"rfc4648": "^1.4.0",
114114
"sanitize-html": "^2.3.2",

‎test/components/views/dialogs/AccessSecretStorageDialog-test.js‎

Lines changed: 44 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -15,52 +15,63 @@ limitations under the License.
1515
*/
1616

1717
import React from 'react';
18-
import TestRenderer from 'react-test-renderer';
18+
import { mount } from 'enzyme';
19+
import { act } from 'react-dom/test-utils';
1920

2021
import sdk from '../../../skinned-sdk';
2122
import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
2223
import { stubClient } from '../../../test-utils';
24+
import { findById, flushPromises } from '../../../utils/test-utils';
2325

2426
const AccessSecretStorageDialog = sdk.getComponent("dialogs.security.AccessSecretStorageDialog");
2527

2628
describe("AccessSecretStorageDialog", function() {
27-
it("Closes the dialog if _onRecoveryKeyNext is called with a valid key", (done) => {
28-
const testInstance = TestRenderer.create(
29+
it("Closes the dialog if _onRecoveryKeyNext is called with a valid key", async () => {
30+
const onFinished = jest.fn();
31+
const checkPrivateKey = jest.fn().mockResolvedValue(true);
32+
const wrapper = mount(
2933
<AccessSecretStorageDialog
30-
checkPrivateKey={(p) => p && p.recoveryKey && p.recoveryKey == "a"}
31-
onFinished={(v) => {
32-
if (v) { done(); }
33-
}}
34+
checkPrivateKey={checkPrivateKey}
35+
onFinished={onFinished}
3436
/>,
3537
);
36-
testInstance.getInstance().setState({
38+
wrapper.setState({
3739
recoveryKeyValid: true,
3840
recoveryKey: "a",
3941
});
4042
const e = { preventDefault: () => {} };
41-
testInstance.getInstance().onRecoveryKeyNext(e);
43+
44+
wrapper.find('form').simulate('submit', e);
45+
46+
await flushPromises();
47+
48+
expect(checkPrivateKey).toHaveBeenCalledWith({ recoveryKey: "a" });
49+
expect(onFinished).toHaveBeenCalledWith({ recoveryKey: "a" });
4250
});
4351

4452
it("Considers a valid key to be valid", async function() {
45-
const testInstance = TestRenderer.create(
53+
const wrapper = mount(
4654
<AccessSecretStorageDialog
4755
checkPrivateKey={() => true}
4856
/>,
4957
);
50-
const v = "asdf";
51-
const e = { target: { value: v } };
5258
stubClient();
5359
MatrixClientPeg.get().keyBackupKeyFromRecoveryKey = () => 'a raw key';
5460
MatrixClientPeg.get().checkSecretStorageKey = () => true;
55-
testInstance.getInstance().onRecoveryKeyChange(e);
61+
62+
const v = "asdf";
63+
const e = { target: { value: v } };
64+
act(() => {
65+
findById(wrapper, 'mx_securityKey').find('input').simulate('change', e);
66+
});
5667
// force a validation now because it debounces
57-
await testInstance.getInstance().validateRecoveryKey();
58-
const { recoveryKeyValid } = testInstance.getInstance().state;
68+
await wrapper.instance().validateRecoveryKey();
69+
const { recoveryKeyValid } = wrapper.instance().state;
5970
expect(recoveryKeyValid).toBe(true);
6071
});
6172

6273
it("Notifies the user if they input an invalid Security Key", async function() {
63-
const testInstance = TestRenderer.create(
74+
const wrapper = mount(
6475
<AccessSecretStorageDialog
6576
checkPrivateKey={async () => false}
6677
/>,
@@ -70,22 +81,24 @@ describe("AccessSecretStorageDialog", function() {
7081
MatrixClientPeg.get().keyBackupKeyFromRecoveryKey = () => {
7182
throw new Error("that's no key");
7283
};
73-
testInstance.getInstance().onRecoveryKeyChange(e);
84+
85+
act(() => {
86+
findById(wrapper, 'mx_securityKey').find('input').simulate('change', e);
87+
});
7488
// force a validation now because it debounces
75-
await testInstance.getInstance().validateRecoveryKey();
89+
await wrapper.instance().validateRecoveryKey();
7690

77-
const { recoveryKeyValid, recoveryKeyCorrect } = testInstance.getInstance().state;
91+
const { recoveryKeyValid, recoveryKeyCorrect } = wrapper.instance().state;
7892
expect(recoveryKeyValid).toBe(false);
7993
expect(recoveryKeyCorrect).toBe(false);
80-
const notification = testInstance.root.findByProps({
81-
className: "mx_AccessSecretStorageDialog_recoveryKeyFeedback " +
82-
"mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid",
83-
});
84-
expect(notification.props.children).toEqual("Invalid Security Key");
94+
95+
wrapper.setProps({});
96+
const notification = wrapper.find(".mx_AccessSecretStorageDialog_recoveryKeyFeedback");
97+
expect(notification.props().children).toEqual("Invalid Security Key");
8598
});
8699

87100
it("Notifies the user if they input an invalid passphrase", async function() {
88-
const testInstance = TestRenderer.create(
101+
const wrapper = mount(
89102
<AccessSecretStorageDialog
90103
checkPrivateKey={() => false}
91104
onFinished={() => {}}
@@ -100,12 +113,12 @@ describe("AccessSecretStorageDialog", function() {
100113
const e = { target: { value: "a" } };
101114
stubClient();
102115
MatrixClientPeg.get().isValidRecoveryKey = () => false;
103-
testInstance.getInstance().onPassPhraseChange(e);
104-
await testInstance.getInstance().onPassPhraseNext({ preventDefault: () => {} });
105-
const notification = testInstance.root.findByProps({
106-
className: "mx_AccessSecretStorageDialog_keyStatus",
107-
});
108-
expect(notification.props.children).toEqual(
116+
wrapper.instance().onPassPhraseChange(e);
117+
await wrapper.instance().onPassPhraseNext({ preventDefault: () => { } });
118+
119+
wrapper.setProps({});
120+
const notification = wrapper.find(".mx_AccessSecretStorageDialog_keyStatus");
121+
expect(notification.props().children).toEqual(
109122
["\uD83D\uDC4E ", "Unable to access secret storage. Please verify that you " +
110123
"entered the correct Security Phrase."]);
111124
});

‎test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap‎

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -58,22 +58,6 @@ Array [
5858
}
5959
tabIndex={0}
6060
/>
61-
<div
62-
data-focus-guard={true}
63-
key="guard-nearest"
64-
style={
65-
Object {
66-
"height": "0px",
67-
"left": "1px",
68-
"overflow": "hidden",
69-
"padding": 0,
70-
"position": "fixed",
71-
"top": "1px",
72-
"width": "1px",
73-
}
74-
}
75-
tabIndex={1}
76-
/>
7761
<SideEffect(FocusWatcher)
7862
autoFocus={true}
7963
crossFrame={true}
@@ -915,22 +899,6 @@ Array [
915899
}
916900
tabIndex={0}
917901
/>
918-
<div
919-
data-focus-guard={true}
920-
key="guard-nearest"
921-
style={
922-
Object {
923-
"height": "0px",
924-
"left": "1px",
925-
"overflow": "hidden",
926-
"padding": 0,
927-
"position": "fixed",
928-
"top": "1px",
929-
"width": "1px",
930-
}
931-
}
932-
tabIndex={1}
933-
/>
934902
<SideEffect(FocusWatcher)
935903
autoFocus={true}
936904
crossFrame={true}
@@ -1759,22 +1727,6 @@ Array [
17591727
}
17601728
tabIndex={0}
17611729
/>
1762-
<div
1763-
data-focus-guard={true}
1764-
key="guard-nearest"
1765-
style={
1766-
Object {
1767-
"height": "0px",
1768-
"left": "1px",
1769-
"overflow": "hidden",
1770-
"padding": 0,
1771-
"position": "fixed",
1772-
"top": "1px",
1773-
"width": "1px",
1774-
}
1775-
}
1776-
tabIndex={1}
1777-
/>
17781730
<SideEffect(FocusWatcher)
17791731
autoFocus={true}
17801732
crossFrame={true}

‎test/components/views/elements/PollCreateDialog-test.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import {
2929
import { IContent, MatrixEvent } from 'matrix-js-sdk/src/models/event';
3030

3131
import * as TestUtils from "../../../test-utils";
32+
import { findById } from '../../../utils/test-utils';
3233
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
3334
import _PollCreateDialog from "../../../../src/components/views/elements/PollCreateDialog";
3435
const PollCreateDialog = TestUtils.wrapInMatrixClientContext(_PollCreateDialog);
@@ -40,8 +41,6 @@ Date.now = jest.fn(() => 2345678901234);
4041
// eslint-disable-next-line no-extend-native
4142
Date.prototype.toISOString = jest.fn(() => "2021-11-23T14:35:14.240Z");
4243

43-
const findById = (component, id) => component.find(`[id="${id}"]`);
44-
4544
afterAll(() => {
4645
Date.now = realDateNow;
4746
// eslint-disable-next-line no-extend-native

0 commit comments

Comments
 (0)