From e7341aa32afe42232692a32ff50c3db4140a074e Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 20 Dec 2022 18:41:14 +1300
Subject: [PATCH 1/5] indent device details

---
 res/css/_components.pcss                      |  1 +
 .../devices/_CurrentDeviceSection.pcss        | 20 +++++++++++++++++++
 .../settings/devices/_DeviceDetails.pcss      |  2 --
 .../settings/devices/_FilteredDeviceList.pcss |  5 +++++
 .../settings/devices/CurrentDeviceSection.tsx |  1 +
 .../views/settings/devices/DeviceDetails.tsx  |  5 ++++-
 .../settings/devices/FilteredDeviceList.tsx   |  1 +
 .../CurrentDeviceSection-test.tsx.snap        |  2 +-
 8 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 res/css/components/views/settings/devices/_CurrentDeviceSection.pcss

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index 1abf50ee411..c8fe59d3151 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -30,6 +30,7 @@
 @import "./components/views/location/_ZoomButtons.pcss";
 @import "./components/views/messages/_MBeaconBody.pcss";
 @import "./components/views/messages/shared/_MediaProcessingError.pcss";
+@import "./components/views/settings/devices/_CurrentDeviceSection.pcss";
 @import "./components/views/settings/devices/_DeviceDetailHeading.pcss";
 @import "./components/views/settings/devices/_DeviceDetails.pcss";
 @import "./components/views/settings/devices/_DeviceExpandDetailsButton.pcss";
diff --git a/res/css/components/views/settings/devices/_CurrentDeviceSection.pcss b/res/css/components/views/settings/devices/_CurrentDeviceSection.pcss
new file mode 100644
index 00000000000..552270db1d0
--- /dev/null
+++ b/res/css/components/views/settings/devices/_CurrentDeviceSection.pcss
@@ -0,0 +1,20 @@
+/*
+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.
+*/
+
+.mx_CurrentDeviceSection_deviceDetails {
+    // align with text of session tile
+    margin-left: 56px;
+}
diff --git a/res/css/components/views/settings/devices/_DeviceDetails.pcss b/res/css/components/views/settings/devices/_DeviceDetails.pcss
index 8c4aac6cbf2..9b34fa378aa 100644
--- a/res/css/components/views/settings/devices/_DeviceDetails.pcss
+++ b/res/css/components/views/settings/devices/_DeviceDetails.pcss
@@ -19,8 +19,6 @@ limitations under the License.
     flex-direction: column;
     box-sizing: border-box;
 
-    width: 100%;
-
     margin-top: $spacing-16;
     padding: $spacing-24;
     border-radius: 8px;
diff --git a/res/css/components/views/settings/devices/_FilteredDeviceList.pcss b/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
index d34270e8ad8..9f9bd0cc712 100644
--- a/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
+++ b/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
@@ -50,3 +50,8 @@ limitations under the License.
     flex-direction: row;
     gap: $spacing-8;
 }
+
+.mx_FilteredDeviceList_deviceDetails {
+    // align with text of session tile
+    margin-left: 88px;
+}
diff --git a/src/components/views/settings/devices/CurrentDeviceSection.tsx b/src/components/views/settings/devices/CurrentDeviceSection.tsx
index 9044f882ec8..2394e63a50b 100644
--- a/src/components/views/settings/devices/CurrentDeviceSection.tsx
+++ b/src/components/views/settings/devices/CurrentDeviceSection.tsx
@@ -124,6 +124,7 @@ const CurrentDeviceSection: React.FC<Props> = ({
                             onVerifyDevice={onVerifyCurrentDevice}
                             onSignOutDevice={onSignOutCurrentDevice}
                             saveDeviceName={saveDeviceName}
+                            className="mx_CurrentDeviceSection_deviceDetails"
                         />
                     ) : (
                         <>
diff --git a/src/components/views/settings/devices/DeviceDetails.tsx b/src/components/views/settings/devices/DeviceDetails.tsx
index 7e47f835041..ace23be335c 100644
--- a/src/components/views/settings/devices/DeviceDetails.tsx
+++ b/src/components/views/settings/devices/DeviceDetails.tsx
@@ -27,6 +27,7 @@ import ToggleSwitch from "../../elements/ToggleSwitch";
 import { DeviceDetailHeading } from "./DeviceDetailHeading";
 import { DeviceVerificationStatusCard } from "./DeviceVerificationStatusCard";
 import { ExtendedDevice } from "./types";
+import classNames from "classnames";
 
 interface Props {
     device: ExtendedDevice;
@@ -38,6 +39,7 @@ interface Props {
     saveDeviceName: (deviceName: string) => Promise<void>;
     setPushNotifications?: (deviceId: string, enabled: boolean) => Promise<void> | undefined;
     supportsMSC3881?: boolean | undefined;
+    className?: string;
 }
 
 interface MetadataTable {
@@ -56,6 +58,7 @@ const DeviceDetails: React.FC<Props> = ({
     saveDeviceName,
     setPushNotifications,
     supportsMSC3881,
+    className,
 }) => {
     const metadata: MetadataTable[] = [
         {
@@ -113,7 +116,7 @@ const DeviceDetails: React.FC<Props> = ({
     }
 
     return (
-        <div className="mx_DeviceDetails" data-testid={`device-detail-${device.device_id}`}>
+        <div className={classNames("mx_DeviceDetails", className)} data-testid={`device-detail-${device.device_id}`}>
             <section className="mx_DeviceDetails_section">
                 <DeviceDetailHeading device={device} saveDeviceName={saveDeviceName} />
                 <DeviceVerificationStatusCard device={device} onVerifyDevice={onVerifyDevice} />
diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx
index 026add74a40..c31fb8ca30d 100644
--- a/src/components/views/settings/devices/FilteredDeviceList.tsx
+++ b/src/components/views/settings/devices/FilteredDeviceList.tsx
@@ -213,6 +213,7 @@ const DeviceListItem: React.FC<{
                 saveDeviceName={saveDeviceName}
                 setPushNotifications={setPushNotifications}
                 supportsMSC3881={supportsMSC3881}
+                className="mx_FilteredDeviceList_deviceDetails"
             />
         )}
     </li>
diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
index 739f559ad40..34759a9ede8 100644
--- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
@@ -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

From 7460fe8ebc96d53703bb19f2b63d76fb4ba678da Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 20 Dec 2022 18:52:18 +1300
Subject: [PATCH 2/5] udpate copy for current device security warning

---
 .../settings/devices/CurrentDeviceSection.tsx    |  6 +++++-
 .../views/settings/devices/DeviceDetails.tsx     |  4 +++-
 .../devices/DeviceVerificationStatusCard.tsx     | 16 ++++++++++++----
 src/i18n/strings/en_EN.json                      |  4 +++-
 .../CurrentDeviceSection-test.tsx.snap           |  6 +++---
 .../__snapshots__/DeviceDetails-test.tsx.snap    |  6 +++---
 .../SessionManagerTab-test.tsx.snap              |  4 ++--
 7 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/components/views/settings/devices/CurrentDeviceSection.tsx b/src/components/views/settings/devices/CurrentDeviceSection.tsx
index 2394e63a50b..46c6f3e7d12 100644
--- a/src/components/views/settings/devices/CurrentDeviceSection.tsx
+++ b/src/components/views/settings/devices/CurrentDeviceSection.tsx
@@ -129,7 +129,11 @@ const CurrentDeviceSection: React.FC<Props> = ({
                     ) : (
                         <>
                             <br />
-                            <DeviceVerificationStatusCard device={device} onVerifyDevice={onVerifyCurrentDevice} />
+                            <DeviceVerificationStatusCard
+                                device={device}
+                                onVerifyDevice={onVerifyCurrentDevice}
+                                isCurrentDevice
+                            />
                         </>
                     )}
                 </>
diff --git a/src/components/views/settings/devices/DeviceDetails.tsx b/src/components/views/settings/devices/DeviceDetails.tsx
index ace23be335c..313f418d811 100644
--- a/src/components/views/settings/devices/DeviceDetails.tsx
+++ b/src/components/views/settings/devices/DeviceDetails.tsx
@@ -40,6 +40,7 @@ interface Props {
     setPushNotifications?: (deviceId: string, enabled: boolean) => Promise<void> | undefined;
     supportsMSC3881?: boolean | undefined;
     className?: string;
+    isCurrentDevice?: boolean;
 }
 
 interface MetadataTable {
@@ -59,6 +60,7 @@ const DeviceDetails: React.FC<Props> = ({
     setPushNotifications,
     supportsMSC3881,
     className,
+    isCurrentDevice,
 }) => {
     const metadata: MetadataTable[] = [
         {
@@ -119,7 +121,7 @@ const DeviceDetails: React.FC<Props> = ({
         <div className={classNames("mx_DeviceDetails", className)} data-testid={`device-detail-${device.device_id}`}>
             <section className="mx_DeviceDetails_section">
                 <DeviceDetailHeading device={device} saveDeviceName={saveDeviceName} />
-                <DeviceVerificationStatusCard device={device} onVerifyDevice={onVerifyDevice} />
+                <DeviceVerificationStatusCard device={device} onVerifyDevice={onVerifyDevice} isCurrentDevice />
             </section>
             <section className="mx_DeviceDetails_section">
                 <p className="mx_DeviceDetails_sectionHeading">{_t("Session details")}</p>
diff --git a/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx b/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
index 6f7d71ff275..632ca9343ab 100644
--- a/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
+++ b/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
@@ -24,23 +24,28 @@ import { DeviceSecurityVariation, ExtendedDevice } from "./types";
 
 interface Props {
     device: ExtendedDevice;
+    isCurrentDevice?: boolean;
     onVerifyDevice?: () => void;
 }
 
 const getCardProps = (
     device: ExtendedDevice,
+    isCurrentDevice?: boolean,
 ): {
     variation: DeviceSecurityVariation;
     heading: string;
     description: React.ReactNode;
 } => {
     if (device.isVerified) {
+        const descriptionText = isCurrentDevice
+            ? _t("Your current session is ready for secure messaging.")
+            : _t("This session is ready for secure messaging.");
         return {
             variation: DeviceSecurityVariation.Verified,
             heading: _t("Verified session"),
             description: (
                 <>
-                    {_t("This session is ready for secure messaging.")}
+                    {descriptionText}
                     <DeviceSecurityLearnMore variation={DeviceSecurityVariation.Verified} />
                 </>
             ),
@@ -59,20 +64,23 @@ const getCardProps = (
         };
     }
 
+    const descriptionText = isCurrentDevice
+        ? _t("Verify your current session for enhanced secure messaging.")
+        : _t("Verify or sign out from this session for best security and reliability.");
     return {
         variation: DeviceSecurityVariation.Unverified,
         heading: _t("Unverified session"),
         description: (
             <>
-                {_t("Verify or sign out from this session for best security and reliability.")}
+                {descriptionText}
                 <DeviceSecurityLearnMore variation={DeviceSecurityVariation.Unverified} />
             </>
         ),
     };
 };
 
-export const DeviceVerificationStatusCard: React.FC<Props> = ({ device, onVerifyDevice }) => {
-    const securityCardProps = getCardProps(device);
+export const DeviceVerificationStatusCard: React.FC<Props> = ({ device, isCurrentDevice, onVerifyDevice }) => {
+    const securityCardProps = getCardProps(device, isCurrentDevice);
 
     return (
         <DeviceSecurityCard {...securityCardProps}>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 306e0483555..203ed3264a6 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1815,9 +1815,11 @@
     "Mobile session": "Mobile session",
     "Web session": "Web session",
     "Unknown session type": "Unknown session type",
-    "Verified session": "Verified session",
+    "Your current session is ready for secure messaging.": "Your current session is ready for secure messaging.",
     "This session is ready for secure messaging.": "This session is ready for secure messaging.",
+    "Verified session": "Verified session",
     "This session doesn't support encryption and thus can't be verified.": "This session doesn't support encryption and thus can't be verified.",
+    "Verify your current session for enhanced secure messaging.": "Verify your current session for enhanced secure messaging.",
     "Verify or sign out from this session for best security and reliability.": "Verify or sign out from this session for best security and reliability.",
     "Verify session": "Verify session",
     "For best security, sign out from any session that you don't recognize or use anymore.": "For best security, sign out from any session that you don't recognize or use anymore.",
diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
index 34759a9ede8..907e6396ddb 100644
--- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
@@ -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"
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
index ff25c3a2c82..f39be8aaeb2 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
@@ -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"
diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index 166f54a32e3..6e3fe802991 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -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"

From 8e71f77f8e738ab1e691dfc529d374a207f1df63 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 20 Dec 2022 18:59:00 +1300
Subject: [PATCH 3/5] lint

---
 src/components/views/settings/devices/DeviceDetails.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/settings/devices/DeviceDetails.tsx b/src/components/views/settings/devices/DeviceDetails.tsx
index 313f418d811..1793fc8b5ee 100644
--- a/src/components/views/settings/devices/DeviceDetails.tsx
+++ b/src/components/views/settings/devices/DeviceDetails.tsx
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
+import classNames from "classnames";
 import { IPusher } from "matrix-js-sdk/src/@types/PushRules";
 import { PUSHER_ENABLED } from "matrix-js-sdk/src/@types/event";
 import { LocalNotificationSettings } from "matrix-js-sdk/src/@types/local_notifications";
@@ -27,7 +28,6 @@ import ToggleSwitch from "../../elements/ToggleSwitch";
 import { DeviceDetailHeading } from "./DeviceDetailHeading";
 import { DeviceVerificationStatusCard } from "./DeviceVerificationStatusCard";
 import { ExtendedDevice } from "./types";
-import classNames from "classnames";
 
 interface Props {
     device: ExtendedDevice;

From 0a01e8c5a75dbdc271876bb16b6b4d1d617f9448 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 21 Dec 2022 10:47:48 +1300
Subject: [PATCH 4/5] test coverage for copy

---
 .../devices/DeviceVerificationStatusCard.tsx  |   8 +-
 .../DeviceVerificationStatusCard-test.tsx     |  92 +++++++++++++
 ...DeviceVerificationStatusCard-test.tsx.snap | 127 ++++++++++++++++++
 3 files changed, 225 insertions(+), 2 deletions(-)
 create mode 100644 test/components/views/settings/devices/DeviceVerificationStatusCard-test.tsx
 create mode 100644 test/components/views/settings/devices/__snapshots__/DeviceVerificationStatusCard-test.tsx.snap

diff --git a/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx b/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
index 632ca9343ab..2c7af18512c 100644
--- a/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
+++ b/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
@@ -22,7 +22,7 @@ import DeviceSecurityCard from "./DeviceSecurityCard";
 import { DeviceSecurityLearnMore } from "./DeviceSecurityLearnMore";
 import { DeviceSecurityVariation, ExtendedDevice } from "./types";
 
-interface Props {
+export interface DeviceVerificationStatusCardProps {
     device: ExtendedDevice;
     isCurrentDevice?: boolean;
     onVerifyDevice?: () => void;
@@ -79,7 +79,11 @@ const getCardProps = (
     };
 };
 
-export const DeviceVerificationStatusCard: React.FC<Props> = ({ device, isCurrentDevice, onVerifyDevice }) => {
+export const DeviceVerificationStatusCard: React.FC<DeviceVerificationStatusCardProps> = ({
+    device,
+    isCurrentDevice,
+    onVerifyDevice,
+}) => {
     const securityCardProps = getCardProps(device, isCurrentDevice);
 
     return (
diff --git a/test/components/views/settings/devices/DeviceVerificationStatusCard-test.tsx b/test/components/views/settings/devices/DeviceVerificationStatusCard-test.tsx
new file mode 100644
index 00000000000..729aa8f7936
--- /dev/null
+++ b/test/components/views/settings/devices/DeviceVerificationStatusCard-test.tsx
@@ -0,0 +1,92 @@
+/*
+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 { DeviceType } from "../../../../../src/utils/device/parseUserAgent";
+
+describe("<DeviceVerificationStatusCard />", () => {
+    const baseDevice = {
+        device_id: "test-device",
+        isVerified: false,
+        deviceType: DeviceType.Unknown,
+    };
+    const defaultProps = {
+        device: baseDevice,
+        onVerifyDevice: jest.fn(),
+    };
+    const getComponent = (props: Partial<DeviceVerificationStatusCardProps> = {}) => (
+        <DeviceVerificationStatusCard {...defaultProps} {...props} />
+    );
+
+    const verifyButtonTestId = `verification-status-button-${baseDevice.device_id}`;
+
+    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 device = {
+                ...baseDevice,
+                isVerified: null,
+            };
+            const { getByText } = render(getComponent({ device, isCurrentDevice: true }));
+            expect(getByText("This session doesn't support encryption and thus can't be verified.")).toBeTruthy();
+        });
+
+        it("renders a verified device", () => {
+            const device = {
+                ...baseDevice,
+                isVerified: true,
+            };
+            const { getByText } = render(getComponent({ device, 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 device = {
+            ...baseDevice,
+            isVerified: null,
+        };
+        const { container, queryByTestId } = render(getComponent({ device }));
+        expect(container).toMatchSnapshot();
+        expect(queryByTestId(verifyButtonTestId)).toBeFalsy();
+    });
+
+    it("renders a verified device", () => {
+        const device = {
+            ...baseDevice,
+            isVerified: true,
+        };
+        const { container, queryByTestId } = render(getComponent({ device }));
+        expect(container).toMatchSnapshot();
+        expect(queryByTestId(verifyButtonTestId)).toBeFalsy();
+    });
+});
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceVerificationStatusCard-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceVerificationStatusCard-test.tsx.snap
new file mode 100644
index 00000000000..6e42937c281
--- /dev/null
+++ b/test/components/views/settings/devices/__snapshots__/DeviceVerificationStatusCard-test.tsx.snap
@@ -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>
+`;

From c3db02280ecec1544383dea055208f4bb49a7194 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 21 Dec 2022 15:17:43 +1300
Subject: [PATCH 5/5] strict

---
 .../DeviceVerificationStatusCard-test.tsx     | 52 ++++++++++---------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/test/components/views/settings/devices/DeviceVerificationStatusCard-test.tsx b/test/components/views/settings/devices/DeviceVerificationStatusCard-test.tsx
index 729aa8f7936..51af4248167 100644
--- a/test/components/views/settings/devices/DeviceVerificationStatusCard-test.tsx
+++ b/test/components/views/settings/devices/DeviceVerificationStatusCard-test.tsx
@@ -21,23 +21,33 @@ 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 baseDevice = {
-        device_id: "test-device",
+    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: baseDevice,
+        device: unverifiedDevice,
         onVerifyDevice: jest.fn(),
     };
     const getComponent = (props: Partial<DeviceVerificationStatusCardProps> = {}) => (
         <DeviceVerificationStatusCard {...defaultProps} {...props} />
     );
 
-    const verifyButtonTestId = `verification-status-button-${baseDevice.device_id}`;
+    const verifyButtonTestId = `verification-status-button-${deviceId}`;
 
     describe("for the current device", () => {
         // current device uses different copy
@@ -47,20 +57,22 @@ describe("<DeviceVerificationStatusCard />", () => {
         });
 
         it("renders an unverifiable device", () => {
-            const device = {
-                ...baseDevice,
-                isVerified: null,
-            };
-            const { getByText } = render(getComponent({ device, isCurrentDevice: true }));
+            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 device = {
-                ...baseDevice,
-                isVerified: true,
-            };
-            const { getByText } = render(getComponent({ device, isCurrentDevice: true }));
+            const { getByText } = render(
+                getComponent({
+                    device: verifiedDevice,
+                    isCurrentDevice: true,
+                }),
+            );
             expect(getByText("Your current session is ready for secure messaging.")).toBeTruthy();
         });
     });
@@ -71,21 +83,13 @@ describe("<DeviceVerificationStatusCard />", () => {
     });
 
     it("renders an unverifiable device", () => {
-        const device = {
-            ...baseDevice,
-            isVerified: null,
-        };
-        const { container, queryByTestId } = render(getComponent({ device }));
+        const { container, queryByTestId } = render(getComponent({ device: unverifiableDevice }));
         expect(container).toMatchSnapshot();
         expect(queryByTestId(verifyButtonTestId)).toBeFalsy();
     });
 
     it("renders a verified device", () => {
-        const device = {
-            ...baseDevice,
-            isVerified: true,
-        };
-        const { container, queryByTestId } = render(getComponent({ device }));
+        const { container, queryByTestId } = render(getComponent({ device: verifiedDevice }));
         expect(container).toMatchSnapshot();
         expect(queryByTestId(verifyButtonTestId)).toBeFalsy();
     });