Device manager - scroll to filtered list from security recommendations (PSG-640) (#9227)

* scroll to filtered list from security recommendations

* test sessionmanager scroll to

* stable snapshot

* fix strict errors

* prtidy

* use smooth scrolling
This commit is contained in:
Kerry 2022-08-31 14:34:22 +02:00 committed by GitHub
parent 0d6a550c33
commit 54a66bd242
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 201 additions and 91 deletions

View file

@ -17,7 +17,7 @@ limitations under the License.
import React from 'react';
import { act, fireEvent, render } from '@testing-library/react';
import FilteredDeviceList from '../../../../../src/components/views/settings/devices/FilteredDeviceList';
import { FilteredDeviceList } from '../../../../../src/components/views/settings/devices/FilteredDeviceList';
import { DeviceSecurityVariation } from '../../../../../src/components/views/settings/devices/types';
import { flushPromises, mockPlatformPeg } from '../../../../test-utils';

View file

@ -15,9 +15,10 @@ limitations under the License.
*/
import React from 'react';
import { render } from '@testing-library/react';
import { act, fireEvent, render } from '@testing-library/react';
import SecurityRecommendations from '../../../../../src/components/views/settings/devices/SecurityRecommendations';
import { DeviceSecurityVariation } from '../../../../../src/components/views/settings/devices/types';
const MS_DAY = 24 * 60 * 60 * 1000;
describe('<SecurityRecommendations />', () => {
@ -32,6 +33,7 @@ describe('<SecurityRecommendations />', () => {
const defaultProps = {
devices: {},
goToFilteredList: jest.fn(),
};
const getComponent = (props = {}) =>
(<SecurityRecommendations {...defaultProps} {...props} />);
@ -69,4 +71,36 @@ describe('<SecurityRecommendations />', () => {
const { container } = render(getComponent({ devices }));
expect(container).toMatchSnapshot();
});
it('clicking view all unverified devices button works', () => {
const goToFilteredList = jest.fn();
const devices = {
[verifiedNoMetadata.device_id]: verifiedNoMetadata,
[hundredDaysOld.device_id]: hundredDaysOld,
[unverifiedNoMetadata.device_id]: unverifiedNoMetadata,
};
const { getByTestId } = render(getComponent({ devices, goToFilteredList }));
act(() => {
fireEvent.click(getByTestId('unverified-devices-cta'));
});
expect(goToFilteredList).toHaveBeenCalledWith(DeviceSecurityVariation.Unverified);
});
it('clicking view all inactive devices button works', () => {
const goToFilteredList = jest.fn();
const devices = {
[verifiedNoMetadata.device_id]: verifiedNoMetadata,
[hundredDaysOld.device_id]: hundredDaysOld,
[unverifiedNoMetadata.device_id]: unverifiedNoMetadata,
};
const { getByTestId } = render(getComponent({ devices, goToFilteredList }));
act(() => {
fireEvent.click(getByTestId('inactive-devices-cta'));
});
expect(goToFilteredList).toHaveBeenCalledWith(DeviceSecurityVariation.Inactive);
});
});

View file

@ -48,6 +48,7 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
data-testid="unverified-devices-cta"
role="button"
tabindex="0"
>
@ -88,6 +89,7 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
data-testid="inactive-devices-cta"
role="button"
tabindex="0"
>
@ -149,6 +151,7 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
data-testid="unverified-devices-cta"
role="button"
tabindex="0"
>
@ -189,6 +192,7 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
data-testid="inactive-devices-cta"
role="button"
tabindex="0"
>
@ -250,6 +254,7 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
data-testid="unverified-devices-cta"
role="button"
tabindex="0"
>
@ -290,6 +295,7 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
data-testid="inactive-devices-cta"
role="button"
tabindex="0"
>