From 17fce6ccb251eac59cff0c7c1ccb3db6c67f196d Mon Sep 17 00:00:00 2001 From: Kerry Date: Fri, 14 Oct 2022 13:43:20 +0200 Subject: [PATCH] Device manager - device tile main click target (#9409) * change device tile click to toggle details instead of selection * lint * test current device section click * stuck cypress --- cypress/e2e/settings/device-management.spec.ts | 6 +++--- .../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 ++++++++++++--- .../settings/devices/FilteredDeviceList.tsx | 3 ++- .../settings/devices/SelectableDeviceTile.tsx | 13 ++++++++++--- .../devices/CurrentDeviceSection-test.tsx | 17 +++++++++++++++++ .../views/settings/devices/DeviceTile-test.tsx | 8 ++++++++ .../devices/SelectableDeviceTile-test.tsx | 9 +++++---- .../CurrentDeviceSection-test.tsx.snap | 4 ++-- .../SelectableDeviceTile-test.tsx.snap | 2 +- .../SessionManagerTab-test.tsx.snap | 6 +++--- 14 files changed, 69 insertions(+), 22 deletions(-) diff --git a/cypress/e2e/settings/device-management.spec.ts b/cypress/e2e/settings/device-management.spec.ts index 67b05dd7c6..1709475e17 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(); diff --git a/res/css/components/views/settings/devices/_DeviceTile.pcss b/res/css/components/views/settings/devices/_DeviceTile.pcss index d89fd9c76e..18224362c2 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 5d6a497e02..aa0cf91a9c 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 aa152826bf..0e2908c96a 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 f597086565..af6a950143 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 c2e8786052..31ed9f2dca 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('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 })); diff --git a/test/components/views/settings/devices/DeviceTile-test.tsx b/test/components/views/settings/devices/DeviceTile-test.tsx index 5f4816a2b0..6651630732 100644 --- a/test/components/views/settings/devices/DeviceTile-test.tsx +++ b/test/components/views/settings/devices/DeviceTile-test.tsx @@ -46,6 +46,14 @@ describe('', () => { 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 2f41ff1a79..c2cb3f7f31 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 d9d55f05c5..0edf12289d 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`] = `