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

Device manager - add tooltip to device details toggle (#9594)

Browse source 
* add hide/show tooltip to dm details toggle

* use named export, update tests
This commit is contained in:
Kerry 2022-11-21 08:24:56 +13:00 • committed by GitHub
parent acdcda78f0
commit caac059479
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 29 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

4
test/components/views/settings/devices/DeviceExpandDetailsButton-test.tsx
View file

@ -17,7 +17,9 @@ limitations under the License.
import React from 'react';
import { fireEvent, render } from '@testing-library/react';
import DeviceExpandDetailsButton from '../../../../../src/components/views/settings/devices/DeviceExpandDetailsButton';
import {
DeviceExpandDetailsButton,
} from '../../../../../src/components/views/settings/devices/DeviceExpandDetailsButton';
describe('<DeviceExpandDetailsButton />', () => {
const defaultProps = {

2
test/components/views/settings/devices/FilteredDeviceList-test.tsx
View file

@ -221,7 +221,7 @@ describe('<FilteredDeviceList />', () => {
act(() => {
const tile = getByTestId(`device-tile-${hundredDaysOld.device_id}`);
const toggle = tile.querySelector('[aria-label="Toggle device details"]');
const toggle = tile.querySelector('[aria-label="Show details"]');
fireEvent.click(toggle as Element);
});

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

@ -237,7 +237,7 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
class="mx_DeviceTile_actions"
>
<div
aria-label="Toggle device details"
aria-label="Show details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
@ -380,7 +380,7 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
class="mx_DeviceTile_actions"
>
<div
aria-label="Toggle device details"
aria-label="Show details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"

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

@ -4,7 +4,7 @@ exports[`<DeviceExpandDetailsButton /> renders when expanded 1`] = `
{
"container": <div>
<div
aria-label="Toggle device details"
aria-label="Hide details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_DeviceExpandDetailsButton_expanded mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
role="button"
tabindex="0"
@ -21,7 +21,7 @@ exports[`<DeviceExpandDetailsButton /> renders when not expanded 1`] = `
{
"container": <div>
<div
aria-label="Toggle device details"
aria-label="Show details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
role="button"
tabindex="0"

7
test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
View file

@ -108,10 +108,12 @@ describe('<SessionManagerTab />', () => {
const toggleDeviceDetails = (
getByTestId: ReturnType<typeof render>['getByTestId'],
deviceId: ExtendedDevice['device_id'],
isOpen?: boolean,
): void => {
// open device detail
const tile = getByTestId(`device-tile-${deviceId}`);
const toggle = tile.querySelector('[aria-label="Toggle device details"]') as Element;
const label = isOpen ? 'Hide details' : 'Show details';
const toggle = tile.querySelector(`[aria-label="${label}"]`) as Element;
fireEvent.click(toggle);
};
@ -449,7 +451,8 @@ describe('<SessionManagerTab />', () => {
expect(getByTestId(`device-detail-${alicesOlderMobileDevice.device_id}`)).toBeTruthy();
expect(getByTestId(`device-detail-${alicesMobileDevice.device_id}`)).toBeTruthy();
toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
// toggle closed
toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id, true);
// alicesMobileDevice was toggled off
expect(queryByTestId(`device-detail-${alicesMobileDevice.device_id}`)).toBeFalsy();

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

@ -94,7 +94,7 @@ exports[`<SessionManagerTab /> current session section renders current session s
class="mx_DeviceTile_actions"
>
<div
aria-label="Toggle device details"
aria-label="Show details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
@ -223,7 +223,7 @@ exports[`<SessionManagerTab /> current session section renders current session s
class="mx_DeviceTile_actions"
>
<div
aria-label="Toggle device details"
aria-label="Show details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
@ -397,7 +397,7 @@ exports[`<SessionManagerTab /> sets device verification status correctly 1`] = `
class="mx_DeviceTile_actions"
>
<div
aria-label="Toggle device details"
aria-label="Show details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"