From 2e3185a4bc131151f652d861f34fd81d4efa4f80 Mon Sep 17 00:00:00 2001 From: Kerry Date: Fri, 6 May 2022 10:25:18 +0200 Subject: [PATCH] test typescriptification - dialogs (#8497) * /Users/kerry/code/matrix-react-sdk/test/components/views/dialogs/InteractiveAuthDialog-test.js -> tsx Signed-off-by: Kerry Archibald * fix ts issues Signed-off-by: Kerry Archibald * test/components/views/dialogs/AccessSecretStorageDialog-test.js -> tsx Signed-off-by: Kerry Archibald * fix ts issues in AccessSecretSstorageDialog-test Signed-off-by: Kerry Archibald * update copyrights Signed-off-by: Kerry Archibald * lint Signed-off-by: Kerry Archibald --- .../dialogs/AccessSecretStorageDialog-test.js | 123 ------------- .../AccessSecretStorageDialog-test.tsx | 166 ++++++++++++++++++ .../dialogs/InteractiveAuthDialog-test.js | 106 ----------- .../dialogs/InteractiveAuthDialog-test.tsx | 106 +++++++++++ 4 files changed, 272 insertions(+), 229 deletions(-) delete mode 100644 test/components/views/dialogs/AccessSecretStorageDialog-test.js create mode 100644 test/components/views/dialogs/AccessSecretStorageDialog-test.tsx delete mode 100644 test/components/views/dialogs/InteractiveAuthDialog-test.js create mode 100644 test/components/views/dialogs/InteractiveAuthDialog-test.tsx diff --git a/test/components/views/dialogs/AccessSecretStorageDialog-test.js b/test/components/views/dialogs/AccessSecretStorageDialog-test.js deleted file mode 100644 index d90b23baac..0000000000 --- a/test/components/views/dialogs/AccessSecretStorageDialog-test.js +++ /dev/null @@ -1,123 +0,0 @@ -/* -Copyright 2020 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 { mount } from 'enzyme'; -import { act } from 'react-dom/test-utils'; - -import { MatrixClientPeg } from '../../../../src/MatrixClientPeg'; -import { stubClient } from '../../../test-utils'; -import { findById, flushPromises } from '../../../test-utils'; -import AccessSecretStorageDialog from "../../../../src/components/views/dialogs/security/AccessSecretStorageDialog"; - -describe("AccessSecretStorageDialog", function() { - 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( - , - ); - wrapper.setState({ - recoveryKeyValid: true, - recoveryKey: "a", - }); - const e = { preventDefault: () => {} }; - - 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 wrapper = mount( - true} - />, - ); - stubClient(); - MatrixClientPeg.get().keyBackupKeyFromRecoveryKey = () => 'a raw key'; - MatrixClientPeg.get().checkSecretStorageKey = () => true; - - 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 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 wrapper = mount( - false} - />, - ); - const e = { target: { value: "a" } }; - stubClient(); - MatrixClientPeg.get().keyBackupKeyFromRecoveryKey = () => { - throw new Error("that's no key"); - }; - - 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); - - 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 wrapper = mount( - false} - onFinished={() => {}} - keyInfo={{ - passphrase: { - salt: 'nonempty', - iterations: 2, - }, - }} - />, - ); - const e = { target: { value: "a" } }; - stubClient(); - MatrixClientPeg.get().isValidRecoveryKey = () => false; - 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/AccessSecretStorageDialog-test.tsx b/test/components/views/dialogs/AccessSecretStorageDialog-test.tsx new file mode 100644 index 0000000000..1376c18c3b --- /dev/null +++ b/test/components/views/dialogs/AccessSecretStorageDialog-test.tsx @@ -0,0 +1,166 @@ +/* +Copyright 2020, 2022 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 { mount, ReactWrapper } from 'enzyme'; +import { act } from 'react-dom/test-utils'; +import { IPassphraseInfo } from 'matrix-js-sdk/src/crypto/api'; + +import { findByTestId, getMockClientWithEventEmitter, unmockClientPeg } from '../../../test-utils'; +import { findById, flushPromises } from '../../../test-utils'; +import AccessSecretStorageDialog from "../../../../src/components/views/dialogs/security/AccessSecretStorageDialog"; + +describe("AccessSecretStorageDialog", () => { + const mockClient = getMockClientWithEventEmitter({ + keyBackupKeyFromRecoveryKey: jest.fn(), + checkSecretStorageKey: jest.fn(), + isValidRecoveryKey: jest.fn(), + }); + const defaultProps = { + onFinished: jest.fn(), + checkPrivateKey: jest.fn(), + keyInfo: undefined, + }; + const getComponent = (props ={}): ReactWrapper => + mount(); + + beforeEach(() => { + jest.clearAllMocks(); + mockClient.keyBackupKeyFromRecoveryKey.mockReturnValue('a raw key' as unknown as Uint8Array); + mockClient.isValidRecoveryKey.mockReturnValue(false); + }); + + afterAll(() => { + unmockClientPeg(); + }); + + it("Closes the dialog when the form is submitted with a valid key", async () => { + const onFinished = jest.fn(); + const checkPrivateKey = jest.fn().mockResolvedValue(true); + const wrapper = getComponent({ onFinished, checkPrivateKey }); + + // force into valid state + act(() => { + wrapper.setState({ + recoveryKeyValid: true, + recoveryKey: "a", + }); + }); + const e = { preventDefault: () => {} }; + + act(() => { + 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 () => { + const checkPrivateKey = jest.fn().mockResolvedValue(true); + const wrapper = getComponent({ checkPrivateKey }); + mockClient.keyBackupKeyFromRecoveryKey.mockReturnValue('a raw key' as unknown as Uint8Array); + mockClient.checkSecretStorageKey.mockResolvedValue(true); + + const v = "asdf"; + const e = { target: { value: v } }; + act(() => { + findById(wrapper, 'mx_securityKey').find('input').simulate('change', e); + wrapper.setProps({}); + }); + await act(async () => { + // force a validation now because it debounces + // @ts-ignore + await wrapper.instance().validateRecoveryKey(); + wrapper.setProps({}); + }); + + const submitButton = findByTestId(wrapper, 'dialog-primary-button').at(0); + // submit button is enabled when key is valid + expect(submitButton.props().disabled).toBeFalsy(); + expect(wrapper.find('.mx_AccessSecretStorageDialog_recoveryKeyFeedback').text()).toEqual('Looks good!'); + }); + + it("Notifies the user if they input an invalid Security Key", async () => { + const checkPrivateKey = jest.fn().mockResolvedValue(false); + const wrapper = getComponent({ checkPrivateKey }); + const e = { target: { value: "a" } }; + mockClient.keyBackupKeyFromRecoveryKey.mockImplementation(() => { + throw new Error("that's no key"); + }); + + act(() => { + findById(wrapper, 'mx_securityKey').find('input').simulate('change', e); + }); + // force a validation now because it debounces + // @ts-ignore private + await wrapper.instance().validateRecoveryKey(); + + const submitButton = findByTestId(wrapper, 'dialog-primary-button').at(0); + // submit button is disabled when recovery key is invalid + expect(submitButton.props().disabled).toBeTruthy(); + expect( + wrapper.find('.mx_AccessSecretStorageDialog_recoveryKeyFeedback').text(), + ).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 keyInfo = { + name: 'test', + algorithm: 'test', + iv: 'test', + mac: '1:2:3:4', + passphrase: { + // this type is weird in js-sdk + // cast 'm.pbkdf2' to itself + algorithm: 'm.pbkdf2' as IPassphraseInfo['algorithm'], + iterations: 2, + salt: 'nonempty', + }, + }; + const checkPrivateKey = jest.fn().mockResolvedValue(false); + const wrapper = getComponent({ checkPrivateKey, keyInfo }); + mockClient.isValidRecoveryKey.mockReturnValue(false); + + // update passphrase + act(() => { + const e = { target: { value: "a" } }; + findById(wrapper, 'mx_passPhraseInput').at(1).simulate('change', e); + }); + wrapper.setProps({}); + + // input updated + expect(findById(wrapper, 'mx_passPhraseInput').at(0).props().value).toEqual('a'); + + // submit the form + act(() => { + wrapper.find('form').at(0).simulate('submit'); + }); + await flushPromises(); + + 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/InteractiveAuthDialog-test.js b/test/components/views/dialogs/InteractiveAuthDialog-test.js deleted file mode 100644 index 798a30886c..0000000000 --- a/test/components/views/dialogs/InteractiveAuthDialog-test.js +++ /dev/null @@ -1,106 +0,0 @@ -/* -Copyright 2016 OpenMarket Ltd - -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 ReactDOM from 'react-dom'; -import ReactTestUtils from 'react-dom/test-utils'; -import MatrixReactTestUtils from 'matrix-react-test-utils'; -import { sleep } from "matrix-js-sdk/src/utils"; - -import { MatrixClientPeg } from '../../../../src/MatrixClientPeg'; -import * as TestUtilsMatrix from '../../../test-utils'; -import InteractiveAuthDialog from "../../../../src/components/views/dialogs/InteractiveAuthDialog"; - -describe('InteractiveAuthDialog', function() { - let parentDiv; - - beforeEach(function() { - TestUtilsMatrix.stubClient(); - parentDiv = document.createElement('div'); - document.body.appendChild(parentDiv); - }); - - afterEach(function() { - ReactDOM.unmountComponentAtNode(parentDiv); - parentDiv.remove(); - }); - - it('Should successfully complete a password flow', function() { - const onFinished = jest.fn(); - const doRequest = jest.fn().mockResolvedValue({ a: 1 }); - - // tell the stub matrixclient to return a real userid - const client = MatrixClientPeg.get(); - client.credentials = { userId: "@user:id" }; - - const dlg = ReactDOM.render( - , parentDiv); - - // wait for a password box and a submit button - return MatrixReactTestUtils.waitForRenderedDOMComponentWithTag(dlg, "form", 2).then((formNode) => { - const inputNodes = ReactTestUtils.scryRenderedDOMComponentsWithTag( - dlg, "input", - ); - let passwordNode; - let submitNode; - for (const node of inputNodes) { - if (node.type == 'password') { - passwordNode = node; - } else if (node.type == 'submit') { - submitNode = node; - } - } - expect(passwordNode).toBeTruthy(); - expect(submitNode).toBeTruthy(); - - // submit should be disabled - expect(submitNode.disabled).toBe(true); - - // put something in the password box, and hit enter; that should - // trigger a request - passwordNode.value = "s3kr3t"; - ReactTestUtils.Simulate.change(passwordNode); - expect(submitNode.disabled).toBe(false); - ReactTestUtils.Simulate.submit(formNode, {}); - - expect(doRequest).toHaveBeenCalledTimes(1); - expect(doRequest).toBeCalledWith(expect.objectContaining({ - session: "sess", - type: "m.login.password", - password: "s3kr3t", - identifier: { - type: "m.id.user", - user: "@user:id", - }, - })); - // let the request complete - return sleep(1); - }).then(sleep(1)).then(() => { - expect(onFinished).toBeCalledTimes(1); - expect(onFinished).toBeCalledWith(true, { a: 1 }); - }); - }); -}); diff --git a/test/components/views/dialogs/InteractiveAuthDialog-test.tsx b/test/components/views/dialogs/InteractiveAuthDialog-test.tsx new file mode 100644 index 0000000000..787dbd2cd5 --- /dev/null +++ b/test/components/views/dialogs/InteractiveAuthDialog-test.tsx @@ -0,0 +1,106 @@ +/* +Copyright 2016 OpenMarket Ltd +Copyright 2022 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 { act } from 'react-dom/test-utils'; +import { mount, ReactWrapper } from 'enzyme'; + +import InteractiveAuthDialog from "../../../../src/components/views/dialogs/InteractiveAuthDialog"; +import { flushPromises, getMockClientWithEventEmitter, unmockClientPeg } from '../../../test-utils'; + +describe('InteractiveAuthDialog', function() { + const mockClient = getMockClientWithEventEmitter({ + generateClientSecret: jest.fn().mockReturnValue('t35tcl1Ent5ECr3T'), + }); + + const defaultProps = { + matrixClient: mockClient, + makeRequest: jest.fn().mockResolvedValue(undefined), + onFinished: jest.fn(), + }; + const getComponent = (props = {}) => mount(); + + beforeEach(function() { + jest.clearAllMocks(); + mockClient.credentials = null; + }); + + afterAll(() => { + unmockClientPeg(); + }); + + const getSubmitButton = (wrapper: ReactWrapper) => wrapper.find('[type="submit"]').at(0); + + it('Should successfully complete a password flow', async () => { + const onFinished = jest.fn(); + const makeRequest = jest.fn().mockResolvedValue({ a: 1 }); + + mockClient.credentials = { userId: "@user:id" }; + const authData = { + session: "sess", + flows: [ + { "stages": ["m.login.password"] }, + ], + }; + + const wrapper = getComponent({ makeRequest, onFinished, authData }); + + const passwordNode = wrapper.find('input[type="password"]').at(0); + const submitNode = getSubmitButton(wrapper); + + const formNode = wrapper.find('form').at(0); + expect(passwordNode).toBeTruthy(); + expect(submitNode).toBeTruthy(); + + // submit should be disabled + expect(submitNode.props().disabled).toBe(true); + + // put something in the password box + act(() => { + passwordNode.simulate('change', { target: { value: "s3kr3t" } }); + wrapper.setProps({}); + }); + + expect(wrapper.find('input[type="password"]').at(0).props().value).toEqual("s3kr3t"); + expect(getSubmitButton(wrapper).props().disabled).toBe(false); + + // hit enter; that should trigger a request + act(() => { + formNode.simulate('submit'); + }); + + // wait for auth request to resolve + await flushPromises(); + + expect(makeRequest).toHaveBeenCalledTimes(1); + expect(makeRequest).toBeCalledWith(expect.objectContaining({ + session: "sess", + type: "m.login.password", + password: "s3kr3t", + identifier: { + type: "m.id.user", + user: "@user:id", + }, + })); + + expect(onFinished).toBeCalledTimes(1); + expect(onFinished).toBeCalledWith(true, { a: 1 }); + }); +});