From db950d490138534ae0c358aaf1a88a6b87d37e90 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Thu, 13 Oct 2022 11:28:09 +0200 Subject: [PATCH 1/4] change device tile click to toggle details instead of selection --- cypress/e2e/settings/device-management.spec.ts | 9 +++------ .../views/settings/devices/_DeviceTile.pcss | 4 ++++ .../settings/devices/_SelectableDeviceTile.pcss | 1 - .../views/settings/DevicesPanelEntry.tsx | 2 +- .../settings/devices/CurrentDeviceSection.tsx | 1 + .../views/settings/devices/DeviceTile.tsx | 15 ++++++++++++--- .../views/settings/devices/FilteredDeviceList.tsx | 3 ++- .../settings/devices/SelectableDeviceTile.tsx | 13 ++++++++++--- .../views/settings/devices/DeviceTile-test.tsx | 8 ++++++++ .../devices/SelectableDeviceTile-test.tsx | 9 +++++---- .../CurrentDeviceSection-test.tsx.snap | 4 ++-- .../SelectableDeviceTile-test.tsx.snap | 2 +- .../__snapshots__/SessionManagerTab-test.tsx.snap | 6 +++--- 13 files changed, 52 insertions(+), 25 deletions(-) diff --git a/cypress/e2e/settings/device-management.spec.ts b/cypress/e2e/settings/device-management.spec.ts index c3ef4db8386..1709475e17c 100644 --- a/cypress/e2e/settings/device-management.spec.ts +++ b/cypress/e2e/settings/device-management.spec.ts @@ -74,8 +74,8 @@ describe("Device manager", () => { cy.get('.mx_FilteredDeviceList_list').find('.mx_FilteredDeviceList_listItem').should('have.length', 3); // select two sessions - cy.get('.mx_FilteredDeviceList_list .mx_FilteredDeviceList_listItem').first().click(); - cy.get('.mx_FilteredDeviceList_list .mx_FilteredDeviceList_listItem').last().click(); + cy.get('.mx_FilteredDeviceList_list .mx_FilteredDeviceList_listItem .mx_Checkbox').first().click(); + cy.get('.mx_FilteredDeviceList_list .mx_FilteredDeviceList_listItem .mx_Checkbox').last().click(); // sign out from list selection action buttons cy.get('[data-testid="sign-out-selection-cta"]').click(); // list updated after sign out @@ -84,7 +84,7 @@ describe("Device manager", () => { cy.get('[data-testid="unverified-devices-cta"]').should('have.text', 'View all (1)'); const sessionName = `Alice's device`; - // select the first session + // open the first session cy.get('.mx_FilteredDeviceList_list .mx_FilteredDeviceList_listItem').first().within(() => { cy.get('[aria-label="Toggle device details"]').click(); @@ -107,9 +107,6 @@ describe("Device manager", () => { cy.get('[data-testid="device-detail-sign-out-cta"]').click(); }); - // list updated after sign out - cy.get('.mx_FilteredDeviceList_list').find('.mx_FilteredDeviceList_listItem').should('have.length', 1); - // no other sessions or security recommendations sections when only one session cy.contains('Other sessions').should('not.exist'); cy.get('[data-testid="security-recommendations-section"]').should('not.exist'); diff --git a/res/css/components/views/settings/devices/_DeviceTile.pcss b/res/css/components/views/settings/devices/_DeviceTile.pcss index d89fd9c76eb..18224362c22 100644 --- a/res/css/components/views/settings/devices/_DeviceTile.pcss +++ b/res/css/components/views/settings/devices/_DeviceTile.pcss @@ -21,6 +21,10 @@ limitations under the License. width: 100%; } +.mx_DeviceTile_interactive { + cursor: pointer; +} + .mx_DeviceTile_info { flex: 1 1 0; } diff --git a/res/css/components/views/settings/devices/_SelectableDeviceTile.pcss b/res/css/components/views/settings/devices/_SelectableDeviceTile.pcss index 5d6a497e02c..aa0cf91a9cb 100644 --- a/res/css/components/views/settings/devices/_SelectableDeviceTile.pcss +++ b/res/css/components/views/settings/devices/_SelectableDeviceTile.pcss @@ -19,7 +19,6 @@ limitations under the License. flex-direction: row; align-items: center; width: 100%; - cursor: pointer; } .mx_SelectableDeviceTile_checkbox { diff --git a/src/components/views/settings/DevicesPanelEntry.tsx b/src/components/views/settings/DevicesPanelEntry.tsx index aa152826bf3..0e2908c96a0 100644 --- a/src/components/views/settings/DevicesPanelEntry.tsx +++ b/src/components/views/settings/DevicesPanelEntry.tsx @@ -173,7 +173,7 @@ export default class DevicesPanelEntry extends React.Component { return (
- + { buttons }
diff --git a/src/components/views/settings/devices/CurrentDeviceSection.tsx b/src/components/views/settings/devices/CurrentDeviceSection.tsx index f597086565f..af6a9501431 100644 --- a/src/components/views/settings/devices/CurrentDeviceSection.tsx +++ b/src/components/views/settings/devices/CurrentDeviceSection.tsx @@ -105,6 +105,7 @@ const CurrentDeviceSection: React.FC = ({ { !!device && <> setIsExpanded(!isExpanded)} > = ({ { id: 'deviceId', value: device.device_id }, ]; - return
+ return
-
+
{ metadata.map(({ id, value }, index) => @@ -107,7 +116,7 @@ const DeviceTile: React.FC = ({ ) }
-
+
{})}> { children }
; diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx index c2e8786052a..31ed9f2dca7 100644 --- a/src/components/views/settings/devices/FilteredDeviceList.tsx +++ b/src/components/views/settings/devices/FilteredDeviceList.tsx @@ -179,7 +179,8 @@ const DeviceListItem: React.FC<{ }) =>
  • void; + onSelect: () => void; + onClick?: () => void; } -const SelectableDeviceTile: React.FC = ({ children, device, isSelected, onClick }) => { +const SelectableDeviceTile: React.FC = ({ + children, + device, + isSelected, + onSelect, + onClick, +}) => { return
    ', () => { 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(); diff --git a/test/components/views/settings/devices/SelectableDeviceTile-test.tsx b/test/components/views/settings/devices/SelectableDeviceTile-test.tsx index 2f41ff1a79e..c2cb3f7f312 100644 --- a/test/components/views/settings/devices/SelectableDeviceTile-test.tsx +++ b/test/components/views/settings/devices/SelectableDeviceTile-test.tsx @@ -30,6 +30,7 @@ describe('', () => { deviceType: DeviceType.Unknown, }; const defaultProps = { + onSelect: jest.fn(), onClick: jest.fn(), device, children:
    test
    , @@ -48,15 +49,15 @@ describe('', () => { 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', () => { 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 d9d55f05c5b..0edf12289d2 100644 --- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap @@ -181,7 +181,7 @@ exports[` renders device and correct security card when class="mx_SettingsSubsection_content" >
    renders device and correct security card when class="mx_SettingsSubsection_content" >
    renders unselected device tile with checkbox 1
    current session section renders current session s class="mx_SettingsSubsection_content" >
    current session section renders current session s class="mx_SettingsSubsection_content" >
    goes to filtered list from security recommendatio exports[` sets device verification status correctly 1`] = `
    Date: Thu, 13 Oct 2022 11:28:18 +0200 Subject: [PATCH 2/4] lint --- src/components/views/settings/devices/DeviceTile.tsx | 2 +- test/components/views/settings/devices/DeviceTile-test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/settings/devices/DeviceTile.tsx b/src/components/views/settings/devices/DeviceTile.tsx index 2c47f14dc2f..97c00325e5c 100644 --- a/src/components/views/settings/devices/DeviceTile.tsx +++ b/src/components/views/settings/devices/DeviceTile.tsx @@ -15,6 +15,7 @@ limitations under the License. */ import React, { Fragment } from "react"; +import classNames from "classnames"; import { Icon as InactiveIcon } from '../../../../../res/img/element-icons/settings/inactive.svg'; import { _t } from "../../../../languageHandler"; @@ -23,7 +24,6 @@ import Heading from "../../typography/Heading"; import { INACTIVE_DEVICE_AGE_DAYS, isDeviceInactive } from "./filter"; import { ExtendedDevice } from "./types"; import { DeviceTypeIcon } from "./DeviceTypeIcon"; -import classNames from "classnames"; import { preventDefaultWrapper } from "../../../../utils/NativeEventUtils"; export interface DeviceTileProps { device: ExtendedDevice; diff --git a/test/components/views/settings/devices/DeviceTile-test.tsx b/test/components/views/settings/devices/DeviceTile-test.tsx index 9936f6197ac..6651630732a 100644 --- a/test/components/views/settings/devices/DeviceTile-test.tsx +++ b/test/components/views/settings/devices/DeviceTile-test.tsx @@ -50,7 +50,7 @@ describe('', () => { const onClick = jest.fn(); const { getByTestId } = render(getComponent({ onClick })); expect( - getByTestId('device-tile-123').className.includes('mx_DeviceTile_interactive') + getByTestId('device-tile-123').className.includes('mx_DeviceTile_interactive'), ).toBeTruthy(); }); From e7c51d5ba0bf19267be9adad62ab19e5febe27d7 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Thu, 13 Oct 2022 13:09:48 +0200 Subject: [PATCH 3/4] test current device section click --- .../devices/CurrentDeviceSection-test.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/test/components/views/settings/devices/CurrentDeviceSection-test.tsx b/test/components/views/settings/devices/CurrentDeviceSection-test.tsx index 2466b5ea3d7..21bf95dbe4a 100644 --- a/test/components/views/settings/devices/CurrentDeviceSection-test.tsx +++ b/test/components/views/settings/devices/CurrentDeviceSection-test.tsx @@ -67,6 +67,23 @@ describe('', () => { 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 })); From 380d0c51e9175e8a6d8829abb302b395fa98d944 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Thu, 13 Oct 2022 13:33:44 +0200 Subject: [PATCH 4/4] stuck cypress