integration-ish test client information in metadata

src/components/views/settings/devices/DeviceDetails.tsx

@@ -33,6 +33,7 @@ interface Props {
 }
 
 interface MetadataTable {
+    id: string;
     heading?: string;
     values: { label: string, value?: string | React.ReactNode }[];
 }
@@ -46,6 +47,7 @@ const DeviceDetails: React.FC<Props> = ({
 }) => {
     const metadata: MetadataTable[] = [
         {
+            id: 'session',
             values: [
                 { label: _t('Session ID'), value: device.device_id },
                 {
@@ -55,6 +57,7 @@ const DeviceDetails: React.FC<Props> = ({
             ],
         },
         {
+            id: 'application',
             heading: _t('Application'),
             values: [
                 { label: _t('Name'), value: device.clientName },
@@ -63,6 +66,7 @@ const DeviceDetails: React.FC<Props> = ({
             ],
         },
         {
+            id: 'device',
             heading: _t('Device'),
             values: [
                 { label: _t('IP address'), value: device.last_seen_ip },
@@ -88,9 +92,10 @@ const DeviceDetails: React.FC<Props> = ({
         </section>
         <section className='mx_DeviceDetails_section'>
             <p className='mx_DeviceDetails_sectionHeading'>{ _t('Session details') }</p>
-            { metadata.map(({ heading, values }, index) => <table
+            { metadata.map(({ heading, values, id }, index) => <table
                 className='mx_DeviceDetails_metadataTable'
                 key={index}
+                data-testid={`device-detail-metadata-${id}`}
             >
                 { heading &&
                     <thead>

test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap

@@ -76,6 +76,7 @@ HTMLCollection [
       </p>
       <table
         class="mx_DeviceDetails_metadataTable"
+        data-testid="device-detail-metadata-session"
       >
         <tbody>
           <tr>

test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap

@@ -64,6 +64,7 @@ exports[`<DeviceDetails /> renders a verified device 1`] = `
       </p>
       <table
         class="mx_DeviceDetails_metadataTable"
+        data-testid="device-detail-metadata-session"
       >
         <tbody>
           <tr>
@@ -165,6 +166,7 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
       </p>
       <table
         class="mx_DeviceDetails_metadataTable"
+        data-testid="device-detail-metadata-session"
       >
         <tbody>
           <tr>
@@ -195,6 +197,7 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
       </table>
       <table
         class="mx_DeviceDetails_metadataTable"
+        data-testid="device-detail-metadata-device"
       >
         <thead>
           <tr>
@@ -303,6 +306,7 @@ exports[`<DeviceDetails /> renders device without metadata 1`] = `
       </p>
       <table
         class="mx_DeviceDetails_metadataTable"
+        data-testid="device-detail-metadata-session"
       >
         <tbody>
           <tr>

test/components/views/settings/tabs/user/SessionManagerTab-test.tsx

@@ -22,7 +22,7 @@ import { logger } from 'matrix-js-sdk/src/logger';
 import { DeviceTrustLevel } from 'matrix-js-sdk/src/crypto/CrossSigning';
 import { VerificationRequest } from 'matrix-js-sdk/src/crypto/verification/request/VerificationRequest';
 import { sleep } from 'matrix-js-sdk/src/utils';
-import { IMyDevice } from 'matrix-js-sdk/src/matrix';
+import { IMyDevice, MatrixEvent } from 'matrix-js-sdk/src/matrix';
 
 import SessionManagerTab from '../../../../../../src/components/views/settings/tabs/user/SessionManagerTab';
 import MatrixClientContext from '../../../../../../src/contexts/MatrixClientContext';
@@ -102,6 +102,8 @@ describe('<SessionManagerTab />', () => {
         mockClient.getDevices
             .mockReset()
             .mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
+
+        mockClient.getAccountData.mockReturnValue(undefined);
     });
 
     it('renders spinner while devices load', () => {
@@ -167,6 +169,48 @@ describe('<SessionManagerTab />', () => {
         expect(getByTestId(`device-tile-${alicesDevice.device_id}`)).toMatchSnapshot();
     });
 
+    it('extends device with client information when available', async () => {
+        mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
+        mockClient.getAccountData.mockImplementation((eventType: string) => {
+            const content = {
+                    name: 'Element Web',
+                    version: '1.2.3',
+                    url: 'test.com',
+                };
+            return new MatrixEvent({
+                type: eventType,
+                content,
+            });
+        });
+
+        const { getByTestId } = render(getComponent());
+
+        await act(async () => {
+            await flushPromisesWithFakeTimers();
+        });
+
+        // once for each device
+        expect(mockClient.getAccountData).toHaveBeenCalledTimes(2);
+
+        toggleDeviceDetails(getByTestId, alicesDevice.device_id);
+        // application metadata section rendered
+        expect(getByTestId('device-detail-metadata-application')).toBeTruthy();
+    });
+
+    it('renders devices without available client information without error', async () => {
+        mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
+
+        const { getByTestId, queryByTestId } = render(getComponent());
+
+        await act(async () => {
+            await flushPromisesWithFakeTimers();
+        });
+
+        toggleDeviceDetails(getByTestId, alicesDevice.device_id);
+        // application metadata section not rendered
+        expect(queryByTestId('device-detail-metadata-application')).toBeFalsy();
+    });
+
     it('renders current session section with an unverified session', async () => {
         mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
         const { getByTestId } = render(getComponent());