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

test/components/views/settings/devices/SecurityRecommendations-test.tsx

@@ -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);
+    });
 });