imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Device manager - device tile main click target (#9409)

Browse source 
* change device tile click to toggle details instead of selection

* lint

* test current device section click

* stuck cypress
This commit is contained in:
Kerry 2022-10-14 13:43:20 +02:00 • committed by GitHub
parent 77543b32d4
commit 17fce6ccb2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 69 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

17
test/components/views/settings/devices/CurrentDeviceSection-test.tsx
View file

@ -67,6 +67,23 @@ describe('<CurrentDeviceSection />', () => {
expect(container).toMatchSnapshot();
});
it('displays device details on main tile click', () => {
const { getByTestId, container } = render(getComponent({ device: alicesUnverifiedDevice }));
act(() => {
fireEvent.click(getByTestId(`device-tile-${alicesUnverifiedDevice.device_id}`));
});
expect(container.getElementsByClassName('mx_DeviceDetails').length).toBeTruthy();
act(() => {
fireEvent.click(getByTestId(`device-tile-${alicesUnverifiedDevice.device_id}`));
});
// device details are hidden
expect(container.getElementsByClassName('mx_DeviceDetails').length).toBeFalsy();
});
it('displays device details on toggle click', () => {
const { container, getByTestId } = render(getComponent({ device: alicesUnverifiedDevice }));

8
test/components/views/settings/devices/DeviceTile-test.tsx
View file

@ -46,6 +46,14 @@ describe('<DeviceTile />', () => {
expect(container).toMatchSnapshot();
});
it('applies interactive class when tile has click handler', () => {
const onClick = jest.fn();
const { getByTestId } = render(getComponent({ onClick }));
expect(
getByTestId('device-tile-123').className.includes('mx_DeviceTile_interactive'),
).toBeTruthy();
});
it('renders a verified device with no metadata', () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();

9
test/components/views/settings/devices/SelectableDeviceTile-test.tsx
View file

@ -30,6 +30,7 @@ describe('<SelectableDeviceTile />', () => {
deviceType: DeviceType.Unknown,
};
const defaultProps = {
onSelect: jest.fn(),
onClick: jest.fn(),
device,
children: <div>test</div>,
@ -48,15 +49,15 @@ describe('<SelectableDeviceTile />', () => {
expect(container.querySelector(`#device-tile-checkbox-${device.device_id}`)).toMatchSnapshot();
});
it('calls onClick on checkbox click', () => {
const onClick = jest.fn();
const { container } = render(getComponent({ onClick }));
it('calls onSelect on checkbox click', () => {
const onSelect = jest.fn();
const { container } = render(getComponent({ onSelect }));
act(() => {
fireEvent.click(container.querySelector(`#device-tile-checkbox-${device.device_id}`));
});
expect(onClick).toHaveBeenCalled();
expect(onSelect).toHaveBeenCalled();
});
it('calls onClick on device tile info click', () => {

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

@ -181,7 +181,7 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
class="mx_SettingsSubsection_content"
>
<div
class="mx_DeviceTile"
class="mx_DeviceTile mx_DeviceTile_interactive"
data-testid="device-tile-alices_device"
>
<div
@ -317,7 +317,7 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
class="mx_SettingsSubsection_content"
>
<div
class="mx_DeviceTile"
class="mx_DeviceTile mx_DeviceTile_interactive"
data-testid="device-tile-alices_device"
>
<div

2
test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
View file

@ -35,7 +35,7 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
</label>
</span>
<div
class="mx_DeviceTile"
class="mx_DeviceTile mx_DeviceTile_interactive"
data-testid="device-tile-my-device"
>
<div

6
test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
View file

@ -45,7 +45,7 @@ exports[`<SessionManagerTab /> current session section renders current session s
class="mx_SettingsSubsection_content"
>
<div
class="mx_DeviceTile"
class="mx_DeviceTile mx_DeviceTile_interactive"
data-testid="device-tile-alices_device"
>
<div
@ -167,7 +167,7 @@ exports[`<SessionManagerTab /> current session section renders current session s
class="mx_SettingsSubsection_content"
>
<div
class="mx_DeviceTile"
class="mx_DeviceTile mx_DeviceTile_interactive"
data-testid="device-tile-alices_device"
>
<div
@ -334,7 +334,7 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
exports[`<SessionManagerTab /> sets device verification status correctly 1`] = `
<div
class="mx_DeviceTile"
class="mx_DeviceTile mx_DeviceTile_interactive"
data-testid="device-tile-alices_device"
>
<div