Device manager - current session expandable details (PSG-644) (#9185)
* split current device section into component * add dropdown button for currentsession device details * test currentdevicesection * remove unnecc beforeEach * update type imports * i18n and lint
This commit is contained in:
Kerry
GitHub
parent
0c5ad457f0
commit
0dffc582e7
15 changed files with 642 additions and 43 deletions
|
|
@ -0,0 +1,78 @@
|
|||
/*
|
||||
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 { fireEvent, render } from '@testing-library/react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
|
||||
import CurrentDeviceSection from '../../../../../src/components/views/settings/devices/CurrentDeviceSection';
|
||||
|
||||
describe('<CurrentDeviceSection />', () => {
|
||||
const deviceId = 'alices_device';
|
||||
|
||||
const alicesVerifiedDevice = {
|
||||
device_id: deviceId,
|
||||
isVerified: false,
|
||||
};
|
||||
const alicesUnverifiedDevice = {
|
||||
device_id: deviceId,
|
||||
isVerified: false,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
device: alicesVerifiedDevice,
|
||||
isLoading: false,
|
||||
};
|
||||
const getComponent = (props = {}): React.ReactElement =>
|
||||
(<CurrentDeviceSection {...defaultProps} {...props} />);
|
||||
|
||||
it('renders spinner while device is loading', () => {
|
||||
const { container } = render(getComponent({ device: undefined, isLoading: true }));
|
||||
expect(container.getElementsByClassName('mx_Spinner').length).toBeTruthy();
|
||||
});
|
||||
|
||||
it('handles when device is falsy', async () => {
|
||||
const { container } = render(getComponent({ device: undefined }));
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders device and correct security card when device is verified', () => {
|
||||
const { container } = render(getComponent());
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders device and correct security card when device is unverified', () => {
|
||||
const { container } = render(getComponent({ device: alicesUnverifiedDevice }));
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('displays device details on toggle click', () => {
|
||||
const { container, getByTestId } = render(getComponent({ device: alicesUnverifiedDevice }));
|
||||
|
||||
act(() => {
|
||||
fireEvent.click(getByTestId('current-session-toggle-details'));
|
||||
});
|
||||
|
||||
expect(container.getElementsByClassName('mx_DeviceDetails')).toMatchSnapshot();
|
||||
|
||||
act(() => {
|
||||
fireEvent.click(getByTestId('current-session-toggle-details'));
|
||||
});
|
||||
|
||||
// device details are hidden
|
||||
expect(container.getElementsByClassName('mx_DeviceDetails').length).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
/*
|
||||
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 { fireEvent, render } from '@testing-library/react';
|
||||
|
||||
import DeviceExpandDetailsButton from '../../../../../src/components/views/settings/devices/DeviceExpandDetailsButton';
|
||||
|
||||
describe('<DeviceExpandDetailsButton />', () => {
|
||||
const defaultProps = {
|
||||
isExpanded: false,
|
||||
onClick: jest.fn(),
|
||||
};
|
||||
const getComponent = (props = {}) =>
|
||||
<DeviceExpandDetailsButton {...defaultProps} {...props} />;
|
||||
|
||||
it('renders when not expanded', () => {
|
||||
const { container } = render(getComponent());
|
||||
expect({ container }).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders when expanded', () => {
|
||||
const { container } = render(getComponent({ isExpanded: true }));
|
||||
expect({ container }).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('calls onClick', () => {
|
||||
const onClick = jest.fn();
|
||||
const { getByTestId } = render(getComponent({ 'data-testid': 'test', onClick }));
|
||||
fireEvent.click(getByTestId('test'));
|
||||
|
||||
expect(onClick).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,267 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<CurrentDeviceSection /> displays device details on toggle click 1`] = `
|
||||
HTMLCollection [
|
||||
<div
|
||||
class="mx_DeviceDetails"
|
||||
>
|
||||
<section
|
||||
class="mx_DeviceDetails_section"
|
||||
>
|
||||
<h3
|
||||
class="mx_Heading_h3"
|
||||
>
|
||||
alices_device
|
||||
</h3>
|
||||
</section>
|
||||
<section
|
||||
class="mx_DeviceDetails_section"
|
||||
>
|
||||
<p
|
||||
class="mx_DeviceDetails_sectionHeading"
|
||||
>
|
||||
Session details
|
||||
</p>
|
||||
<table
|
||||
class="mxDeviceDetails_metadataTable"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="mxDeviceDetails_metadataLabel"
|
||||
>
|
||||
Session ID
|
||||
</td>
|
||||
<td
|
||||
class="mxDeviceDetails_metadataValue"
|
||||
>
|
||||
alices_device
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="mxDeviceDetails_metadataLabel"
|
||||
>
|
||||
Last activity
|
||||
</td>
|
||||
<td
|
||||
class="mxDeviceDetails_metadataValue"
|
||||
/>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table
|
||||
class="mxDeviceDetails_metadataTable"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Device
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="mxDeviceDetails_metadataLabel"
|
||||
>
|
||||
IP address
|
||||
</td>
|
||||
<td
|
||||
class="mxDeviceDetails_metadataValue"
|
||||
/>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_SettingsSubsection"
|
||||
data-testid="current-session-section"
|
||||
>
|
||||
<h3
|
||||
class="mx_Heading_h3 mx_SettingsSubsection_heading"
|
||||
>
|
||||
Current session
|
||||
</h3>
|
||||
<div
|
||||
class="mx_SettingsSubsection_content"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<CurrentDeviceSection /> renders device and correct security card when device is unverified 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_SettingsSubsection"
|
||||
data-testid="current-session-section"
|
||||
>
|
||||
<h3
|
||||
class="mx_Heading_h3 mx_SettingsSubsection_heading"
|
||||
>
|
||||
Current session
|
||||
</h3>
|
||||
<div
|
||||
class="mx_SettingsSubsection_content"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceTile"
|
||||
data-testid="device-tile-alices_device"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceTile_info"
|
||||
>
|
||||
<h4
|
||||
class="mx_Heading_h4"
|
||||
>
|
||||
alices_device
|
||||
</h4>
|
||||
<div
|
||||
class="mx_DeviceTile_metadata"
|
||||
>
|
||||
<span
|
||||
data-testid="device-metadata-isVerified"
|
||||
>
|
||||
Unverified
|
||||
</span>
|
||||
·
|
||||
·
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_DeviceTile_actions"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
|
||||
data-testid="current-session-toggle-details"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceExpandDetailsButton_icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<CurrentDeviceSection /> renders device and correct security card when device is verified 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_SettingsSubsection"
|
||||
data-testid="current-session-section"
|
||||
>
|
||||
<h3
|
||||
class="mx_Heading_h3 mx_SettingsSubsection_heading"
|
||||
>
|
||||
Current session
|
||||
</h3>
|
||||
<div
|
||||
class="mx_SettingsSubsection_content"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceTile"
|
||||
data-testid="device-tile-alices_device"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceTile_info"
|
||||
>
|
||||
<h4
|
||||
class="mx_Heading_h4"
|
||||
>
|
||||
alices_device
|
||||
</h4>
|
||||
<div
|
||||
class="mx_DeviceTile_metadata"
|
||||
>
|
||||
<span
|
||||
data-testid="device-metadata-isVerified"
|
||||
>
|
||||
Unverified
|
||||
</span>
|
||||
·
|
||||
·
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_DeviceTile_actions"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
|
||||
data-testid="current-session-toggle-details"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceExpandDetailsButton_icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<DeviceExpandDetailsButton /> renders when expanded 1`] = `
|
||||
Object {
|
||||
"container": <div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_DeviceExpandDetailsButton_expanded mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceExpandDetailsButton_icon"
|
||||
/>
|
||||
</div>
|
||||
</div>,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`<DeviceExpandDetailsButton /> renders when not expanded 1`] = `
|
||||
Object {
|
||||
"container": <div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceExpandDetailsButton_icon"
|
||||
/>
|
||||
</div>
|
||||
</div>,
|
||||
}
|
||||
`;
|
||||
|
|
@ -39,7 +39,18 @@ exports[`<SessionManagerTab /> renders current session section with a verified s
|
|||
</div>
|
||||
<div
|
||||
class="mx_DeviceTile_actions"
|
||||
/>
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
|
||||
data-testid="current-session-toggle-details"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceExpandDetailsButton_icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div
|
||||
|
|
@ -111,7 +122,18 @@ exports[`<SessionManagerTab /> renders current session section with an unverifie
|
|||
</div>
|
||||
<div
|
||||
class="mx_DeviceTile_actions"
|
||||
/>
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
|
||||
data-testid="current-session-toggle-details"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceExpandDetailsButton_icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div
|
||||
|
|
@ -171,6 +193,17 @@ exports[`<SessionManagerTab /> sets device verification status correctly 1`] = `
|
|||
</div>
|
||||
<div
|
||||
class="mx_DeviceTile_actions"
|
||||
/>
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
|
||||
data-testid="current-session-toggle-details"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceExpandDetailsButton_icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue