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

Commit 0c38bd7

Browse files
t3chguyt3chguy
authored
Fix import e2e key dialog staying disabled after paste (#10375)
1 parent ad65b4e commit 0c38bd7

File tree

3 files changed

+181
-2
lines changed

3 files changed

+181
-2
lines changed

‎src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,7 @@ export default class ImportE2eKeysDialog extends React.Component<IProps, IState>
8484
};
8585

8686
private onPassphraseChange = (ev: React.ChangeEvent<HTMLInputElement>): void => {
87-
this.setState({ passphrase: ev.target.value });
88-
this.onFormChange(); // update general form state too
87+
this.setState({ passphrase: ev.target.value }, this.onFormChange); // update general form state too
8988
};
9089

9190
private onFormSubmit = (ev: React.FormEvent): boolean => {

‎test/components/views/dialogs/security/ImportE2eKeysDialog-test.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/*
2+
Copyright 2023 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import React from "react";
18+
import { fireEvent, render } from "@testing-library/react";
19+
import userEvent from "@testing-library/user-event";
20+
21+
import ImportE2eKeysDialog from "../../../../../src/async-components/views/dialogs/security/ImportE2eKeysDialog";
22+
import { createTestClient } from "../../../../test-utils";
23+
24+
describe("ImportE2eKeysDialog", () => {
25+
it("renders", () => {
26+
const cli = createTestClient();
27+
const onFinished = jest.fn();
28+
const { asFragment } = render(<ImportE2eKeysDialog matrixClient={cli} onFinished={onFinished} />);
29+
expect(asFragment()).toMatchSnapshot();
30+
});
31+
32+
it("should have disabled submit button initially", () => {
33+
const cli = createTestClient();
34+
const onFinished = jest.fn();
35+
const { container } = render(<ImportE2eKeysDialog matrixClient={cli} onFinished={onFinished} />);
36+
expect(container.querySelector("[type=submit]")!).toBeDisabled();
37+
});
38+
39+
it("should enable submit once file is uploaded and passphrase typed in", () => {
40+
const cli = createTestClient();
41+
const onFinished = jest.fn();
42+
const file = new File(["test"], "file.txt", { type: "text/plain" });
43+
44+
const { container } = render(<ImportE2eKeysDialog matrixClient={cli} onFinished={onFinished} />);
45+
fireEvent.change(container.querySelector("[type=file]")!, {
46+
target: { files: [file] },
47+
});
48+
fireEvent.change(container.querySelector("[type=password]")!, {
49+
target: { value: "passphrase" },
50+
});
51+
expect(container.querySelector("[type=submit]")!).toBeEnabled();
52+
});
53+
54+
it("should enable submit once file is uploaded and passphrase pasted in", async () => {
55+
const cli = createTestClient();
56+
const onFinished = jest.fn();
57+
const file = new File(["test"], "file.txt", { type: "text/plain" });
58+
59+
const { container } = render(<ImportE2eKeysDialog matrixClient={cli} onFinished={onFinished} />);
60+
fireEvent.change(container.querySelector("[type=file]")!, {
61+
target: { files: [file] },
62+
});
63+
await userEvent.click(container.querySelector("[type=password]")!);
64+
await userEvent.paste("passphrase");
65+
expect(container.querySelector("[type=submit]")!).toBeEnabled();
66+
});
67+
});

‎test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`ImportE2eKeysDialog renders 1`] = `
4+
<DocumentFragment>
5+
<div
6+
data-focus-guard="true"
7+
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
8+
tabindex="0"
9+
/>
10+
<div
11+
aria-labelledby="mx_BaseDialog_title"
12+
class="mx_importE2eKeysDialog mx_Dialog_fixedWidth"
13+
data-focus-lock-disabled="false"
14+
role="dialog"
15+
>
16+
<div
17+
class="mx_Dialog_header mx_Dialog_headerWithCancel"
18+
>
19+
<h2
20+
class="mx_Heading_h2 mx_Dialog_title"
21+
id="mx_BaseDialog_title"
22+
>
23+
Import room keys
24+
</h2>
25+
<div
26+
aria-label="Close dialog"
27+
class="mx_AccessibleButton mx_Dialog_cancelButton"
28+
role="button"
29+
tabindex="0"
30+
/>
31+
</div>
32+
<form>
33+
<div
34+
class="mx_Dialog_content"
35+
>
36+
<p>
37+
This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.
38+
</p>
39+
<p>
40+
The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.
41+
</p>
42+
<div
43+
class="error"
44+
/>
45+
<div
46+
class="mx_E2eKeysDialog_inputTable"
47+
>
48+
<div
49+
class="mx_E2eKeysDialog_inputRow"
50+
>
51+
<div
52+
class="mx_E2eKeysDialog_inputLabel"
53+
>
54+
<label
55+
for="importFile"
56+
>
57+
File to import
58+
</label>
59+
</div>
60+
<div
61+
class="mx_E2eKeysDialog_inputCell"
62+
>
63+
<input
64+
id="importFile"
65+
type="file"
66+
/>
67+
</div>
68+
</div>
69+
<div
70+
class="mx_E2eKeysDialog_inputRow"
71+
>
72+
<div
73+
class="mx_Field mx_Field_input"
74+
>
75+
<input
76+
id="mx_Field_1"
77+
label="Enter passphrase"
78+
placeholder="Enter passphrase"
79+
size="64"
80+
type="password"
81+
value=""
82+
/>
83+
<label
84+
for="mx_Field_1"
85+
>
86+
Enter passphrase
87+
</label>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
<div
93+
class="mx_Dialog_buttons"
94+
>
95+
<input
96+
class="mx_Dialog_primary"
97+
disabled=""
98+
type="submit"
99+
value="Import"
100+
/>
101+
<button>
102+
Cancel
103+
</button>
104+
</div>
105+
</form>
106+
</div>
107+
<div
108+
data-focus-guard="true"
109+
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
110+
tabindex="0"
111+
/>
112+
</DocumentFragment>
113+
`;

0 commit comments

Comments
 (0)