OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix import e2e key dialog staying disabled after paste (#10375)

pull/28217/head
Michael Telatynski 2023-03-15 09:20:20 +00:00 committed by GitHub
parent ad65b4e444
commit 0c38bd7beb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 181 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx
View File

@ -84,8 +84,7 @@ export default class ImportE2eKeysDialog extends React.Component<IProps, IState>
};
private onPassphraseChange = (ev: React.ChangeEvent<HTMLInputElement>): void => {
this.setState({ passphrase: ev.target.value });
this.onFormChange(); // update general form state too
this.setState({ passphrase: ev.target.value }, this.onFormChange); // update general form state too
};
private onFormSubmit = (ev: React.FormEvent): boolean => {

67
test/components/views/dialogs/security/ImportE2eKeysDialog-test.tsx Normal file
View File

@ -0,0 +1,67 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import { fireEvent, render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import ImportE2eKeysDialog from "../../../../../src/async-components/views/dialogs/security/ImportE2eKeysDialog";
import { createTestClient } from "../../../../test-utils";
describe("ImportE2eKeysDialog", () => {
it("renders", () => {
const cli = createTestClient();
const onFinished = jest.fn();
const { asFragment } = render(<ImportE2eKeysDialog matrixClient={cli} onFinished={onFinished} />);
expect(asFragment()).toMatchSnapshot();
});
it("should have disabled submit button initially", () => {
const cli = createTestClient();
const onFinished = jest.fn();
const { container } = render(<ImportE2eKeysDialog matrixClient={cli} onFinished={onFinished} />);
expect(container.querySelector("[type=submit]")!).toBeDisabled();
});
it("should enable submit once file is uploaded and passphrase typed in", () => {
const cli = createTestClient();
const onFinished = jest.fn();
const file = new File(["test"], "file.txt", { type: "text/plain" });
const { container } = render(<ImportE2eKeysDialog matrixClient={cli} onFinished={onFinished} />);
fireEvent.change(container.querySelector("[type=file]")!, {
target: { files: [file] },
});
fireEvent.change(container.querySelector("[type=password]")!, {
target: { value: "passphrase" },
});
expect(container.querySelector("[type=submit]")!).toBeEnabled();
});
it("should enable submit once file is uploaded and passphrase pasted in", async () => {
const cli = createTestClient();
const onFinished = jest.fn();
const file = new File(["test"], "file.txt", { type: "text/plain" });
const { container } = render(<ImportE2eKeysDialog matrixClient={cli} onFinished={onFinished} />);
fireEvent.change(container.querySelector("[type=file]")!, {
target: { files: [file] },
});
await userEvent.click(container.querySelector("[type=password]")!);
await userEvent.paste("passphrase");
expect(container.querySelector("[type=submit]")!).toBeEnabled();
});
});

113
test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap Normal file
View File

@ -0,0 +1,113 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ImportE2eKeysDialog renders 1`] = `
<DocumentFragment>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
aria-labelledby="mx_BaseDialog_title"
class="mx_importE2eKeysDialog mx_Dialog_fixedWidth"
data-focus-lock-disabled="false"
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
>
<h2
class="mx_Heading_h2 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Import room keys
</h2>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<form>
<div
class="mx_Dialog_content"
>
<p>
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.
</p>
<p>
The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.
</p>
<div
class="error"
/>
<div
class="mx_E2eKeysDialog_inputTable"
>
<div
class="mx_E2eKeysDialog_inputRow"
>
<div
class="mx_E2eKeysDialog_inputLabel"
>
<label
for="importFile"
>
File to import
</label>
</div>
<div
class="mx_E2eKeysDialog_inputCell"
>
<input
id="importFile"
type="file"
/>
</div>
</div>
<div
class="mx_E2eKeysDialog_inputRow"
>
<div
class="mx_Field mx_Field_input"
>
<input
id="mx_Field_1"
label="Enter passphrase"
placeholder="Enter passphrase"
size="64"
type="password"
value=""
/>
<label
for="mx_Field_1"
>
Enter passphrase
</label>
</div>
</div>
</div>
</div>
<div
class="mx_Dialog_buttons"
>
<input
class="mx_Dialog_primary"
disabled=""
type="submit"
value="Import"
/>
<button>
Cancel
</button>
</div>
</form>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</DocumentFragment>
`;