Device manager - current device design and copy tweaks (#9801)
* indent device details * udpate copy for current device security warning * lint * test coverage for copy * strict
This commit is contained in:
Kerry
GitHub
parent
9a8545bf34
commit
fbc3228143
14 changed files with 292 additions and 20 deletions
|
|
@ -0,0 +1,96 @@
|
|||
/*
|
||||
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 { render } from "@testing-library/react";
|
||||
import React from "react";
|
||||
|
||||
import {
|
||||
DeviceVerificationStatusCard,
|
||||
DeviceVerificationStatusCardProps,
|
||||
} from "../../../../../src/components/views/settings/devices/DeviceVerificationStatusCard";
|
||||
import { ExtendedDevice } from "../../../../../src/components/views/settings/devices/types";
|
||||
import { DeviceType } from "../../../../../src/utils/device/parseUserAgent";
|
||||
|
||||
describe("<DeviceVerificationStatusCard />", () => {
|
||||
const deviceId = "test-device";
|
||||
const unverifiedDevice: ExtendedDevice = {
|
||||
device_id: deviceId,
|
||||
isVerified: false,
|
||||
deviceType: DeviceType.Unknown,
|
||||
};
|
||||
const verifiedDevice: ExtendedDevice = {
|
||||
...unverifiedDevice,
|
||||
isVerified: true,
|
||||
};
|
||||
const unverifiableDevice: ExtendedDevice = {
|
||||
...unverifiedDevice,
|
||||
isVerified: null,
|
||||
};
|
||||
const defaultProps = {
|
||||
device: unverifiedDevice,
|
||||
onVerifyDevice: jest.fn(),
|
||||
};
|
||||
const getComponent = (props: Partial<DeviceVerificationStatusCardProps> = {}) => (
|
||||
<DeviceVerificationStatusCard {...defaultProps} {...props} />
|
||||
);
|
||||
|
||||
const verifyButtonTestId = `verification-status-button-${deviceId}`;
|
||||
|
||||
describe("for the current device", () => {
|
||||
// current device uses different copy
|
||||
it("renders an unverified device", () => {
|
||||
const { getByText } = render(getComponent({ isCurrentDevice: true }));
|
||||
expect(getByText("Verify your current session for enhanced secure messaging.")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("renders an unverifiable device", () => {
|
||||
const { getByText } = render(
|
||||
getComponent({
|
||||
device: unverifiableDevice,
|
||||
isCurrentDevice: true,
|
||||
}),
|
||||
);
|
||||
expect(getByText("This session doesn't support encryption and thus can't be verified.")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("renders a verified device", () => {
|
||||
const { getByText } = render(
|
||||
getComponent({
|
||||
device: verifiedDevice,
|
||||
isCurrentDevice: true,
|
||||
}),
|
||||
);
|
||||
expect(getByText("Your current session is ready for secure messaging.")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("renders an unverified device", () => {
|
||||
const { container } = render(getComponent());
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders an unverifiable device", () => {
|
||||
const { container, queryByTestId } = render(getComponent({ device: unverifiableDevice }));
|
||||
expect(container).toMatchSnapshot();
|
||||
expect(queryByTestId(verifyButtonTestId)).toBeFalsy();
|
||||
});
|
||||
|
||||
it("renders a verified device", () => {
|
||||
const { container, queryByTestId } = render(getComponent({ device: verifiedDevice }));
|
||||
expect(container).toMatchSnapshot();
|
||||
expect(queryByTestId(verifyButtonTestId)).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
exports[`<CurrentDeviceSection /> displays device details on toggle click 1`] = `
|
||||
HTMLCollection [
|
||||
<div
|
||||
class="mx_DeviceDetails"
|
||||
class="mx_DeviceDetails mx_CurrentDeviceSection_deviceDetails"
|
||||
data-testid="device-detail-alices_device"
|
||||
>
|
||||
<section
|
||||
|
|
@ -49,7 +49,7 @@ HTMLCollection [
|
|||
<p
|
||||
class="mx_DeviceSecurityCard_description"
|
||||
>
|
||||
Verify or sign out from this session for best security and reliability.
|
||||
Verify your current session for enhanced secure messaging.
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
|
||||
role="button"
|
||||
|
|
@ -272,7 +272,7 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
|
|||
<p
|
||||
class="mx_DeviceSecurityCard_description"
|
||||
>
|
||||
Verify or sign out from this session for best security and reliability.
|
||||
Verify your current session for enhanced secure messaging.
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
|
||||
role="button"
|
||||
|
|
@ -415,7 +415,7 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
|
|||
<p
|
||||
class="mx_DeviceSecurityCard_description"
|
||||
>
|
||||
Verify or sign out from this session for best security and reliability.
|
||||
Verify your current session for enhanced secure messaging.
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
|
||||
role="button"
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ exports[`<DeviceDetails /> renders a verified device 1`] = `
|
|||
<p
|
||||
class="mx_DeviceSecurityCard_description"
|
||||
>
|
||||
This session is ready for secure messaging.
|
||||
Your current session is ready for secure messaging.
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
|
||||
role="button"
|
||||
|
|
@ -158,7 +158,7 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
|
|||
<p
|
||||
class="mx_DeviceSecurityCard_description"
|
||||
>
|
||||
Verify or sign out from this session for best security and reliability.
|
||||
Verify your current session for enhanced secure messaging.
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
|
||||
role="button"
|
||||
|
|
@ -367,7 +367,7 @@ exports[`<DeviceDetails /> renders device without metadata 1`] = `
|
|||
<p
|
||||
class="mx_DeviceSecurityCard_description"
|
||||
>
|
||||
Verify or sign out from this session for best security and reliability.
|
||||
Verify your current session for enhanced secure messaging.
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
|
||||
role="button"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,127 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<DeviceVerificationStatusCard /> renders a verified device 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_DeviceSecurityCard"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceSecurityCard_icon Verified"
|
||||
>
|
||||
<div
|
||||
height="16"
|
||||
width="16"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_DeviceSecurityCard_content"
|
||||
>
|
||||
<p
|
||||
class="mx_DeviceSecurityCard_heading"
|
||||
>
|
||||
Verified session
|
||||
</p>
|
||||
<p
|
||||
class="mx_DeviceSecurityCard_description"
|
||||
>
|
||||
This session is ready for secure messaging.
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Learn more
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<DeviceVerificationStatusCard /> renders an unverifiable device 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_DeviceSecurityCard"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceSecurityCard_icon Unverified"
|
||||
>
|
||||
<div
|
||||
height="16"
|
||||
width="16"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_DeviceSecurityCard_content"
|
||||
>
|
||||
<p
|
||||
class="mx_DeviceSecurityCard_heading"
|
||||
>
|
||||
Unverified session
|
||||
</p>
|
||||
<p
|
||||
class="mx_DeviceSecurityCard_description"
|
||||
>
|
||||
This session doesn't support encryption and thus can't be verified.
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Learn more
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<DeviceVerificationStatusCard /> renders an unverified device 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_DeviceSecurityCard"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceSecurityCard_icon Unverified"
|
||||
>
|
||||
<div
|
||||
height="16"
|
||||
width="16"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_DeviceSecurityCard_content"
|
||||
>
|
||||
<p
|
||||
class="mx_DeviceSecurityCard_heading"
|
||||
>
|
||||
Unverified session
|
||||
</p>
|
||||
<p
|
||||
class="mx_DeviceSecurityCard_description"
|
||||
>
|
||||
Verify or sign out from this session for best security and reliability.
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Learn more
|
||||
</div>
|
||||
</p>
|
||||
<div
|
||||
class="mx_DeviceSecurityCard_actions"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
data-testid="verification-status-button-test-device"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Verify session
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -167,7 +167,7 @@ exports[`<SessionManagerTab /> current session section renders current session s
|
|||
<p
|
||||
class="mx_DeviceSecurityCard_description"
|
||||
>
|
||||
This session is ready for secure messaging.
|
||||
Your current session is ready for secure messaging.
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
|
||||
role="button"
|
||||
|
|
@ -296,7 +296,7 @@ exports[`<SessionManagerTab /> current session section renders current session s
|
|||
<p
|
||||
class="mx_DeviceSecurityCard_description"
|
||||
>
|
||||
Verify or sign out from this session for best security and reliability.
|
||||
Verify your current session for enhanced secure messaging.
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
|
||||
role="button"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue