Implement push notification toggle in device detail (#9308)

Co-authored-by: Travis Ralston <travisr@matrix.org>

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

@@ -40,6 +40,7 @@ describe('<CurrentDeviceSection />', () => {
         isLoading: false,
         isSigningOut: false,
     };
+
     const getComponent = (props = {}): React.ReactElement =>
         (<CurrentDeviceSection {...defaultProps} {...props} />);
 

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

@@ -15,9 +15,11 @@ limitations under the License.
 */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
+import { PUSHER_ENABLED } from 'matrix-js-sdk/src/@types/event';
 
 import DeviceDetails from '../../../../../src/components/views/settings/devices/DeviceDetails';
+import { mkPusher } from '../../../../test-utils/test-utils';
 
 describe('<DeviceDetails />', () => {
     const baseDevice = {
@@ -26,12 +28,17 @@ describe('<DeviceDetails />', () => {
     };
     const defaultProps = {
         device: baseDevice,
+        pusher: null,
         isSigningOut: false,
         isLoading: false,
         onSignOutDevice: jest.fn(),
         saveDeviceName: jest.fn(),
+        setPusherEnabled: jest.fn(),
+        supportsMSC3881: true,
     };
+
     const getComponent = (props = {}) => <DeviceDetails {...defaultProps} {...props} />;
+
     // 14.03.2022 16:15
     const now = 1647270879403;
     jest.useFakeTimers();
@@ -74,4 +81,82 @@ describe('<DeviceDetails />', () => {
             getByTestId('device-detail-sign-out-cta').getAttribute('aria-disabled'),
         ).toEqual("true");
     });
+
+    it('renders the push notification section when a pusher exists', () => {
+        const device = {
+            ...baseDevice,
+        };
+        const pusher = mkPusher({
+            device_id: device.device_id,
+        });
+
+        const { getByTestId } = render(getComponent({
+            device,
+            pusher,
+            isSigningOut: true,
+        }));
+
+        expect(getByTestId('device-detail-push-notification')).toBeTruthy();
+    });
+
+    it('hides the push notification section when no pusher', () => {
+        const device = {
+            ...baseDevice,
+        };
+
+        const { getByTestId } = render(getComponent({
+            device,
+            pusher: null,
+            isSigningOut: true,
+        }));
+
+        expect(() => getByTestId('device-detail-push-notification')).toThrow();
+    });
+
+    it('disables the checkbox when there is no server support', () => {
+        const device = {
+            ...baseDevice,
+        };
+        const pusher = mkPusher({
+            device_id: device.device_id,
+            [PUSHER_ENABLED.name]: false,
+        });
+
+        const { getByTestId } = render(getComponent({
+            device,
+            pusher,
+            isSigningOut: true,
+            supportsMSC3881: false,
+        }));
+
+        const checkbox = getByTestId('device-detail-push-notification-checkbox');
+
+        expect(checkbox.getAttribute('aria-disabled')).toEqual("true");
+        expect(checkbox.getAttribute('aria-checked')).toEqual("false");
+    });
+
+    it('changes the pusher status when clicked', () => {
+        const device = {
+            ...baseDevice,
+        };
+
+        const enabled = false;
+
+        const pusher = mkPusher({
+            device_id: device.device_id,
+            [PUSHER_ENABLED.name]: enabled,
+        });
+
+        const { getByTestId } = render(getComponent({
+            device,
+            pusher,
+            isSigningOut: true,
+        }));
+
+        const checkbox = getByTestId('device-detail-push-notification-checkbox');
+
+        fireEvent.click(checkbox);
+
+        expect(defaultProps.setPusherEnabled).toHaveBeenCalledWith(device.device_id, !enabled);
+    });
 });

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

@@ -45,6 +45,7 @@ describe('<FilteredDeviceList />', () => {
         onDeviceExpandToggle: jest.fn(),
         onSignOutDevices: jest.fn(),
         saveDeviceName: jest.fn(),
+        setPusherEnabled: jest.fn(),
         expandedDeviceIds: [],
         signingOutDeviceIds: [],
         devices: {
@@ -54,7 +55,10 @@ describe('<FilteredDeviceList />', () => {
             [hundredDaysOld.device_id]: hundredDaysOld,
             [hundredDaysOldUnverified.device_id]: hundredDaysOldUnverified,
         },
+        pushers: [],
+        supportsMSC3881: true,
     };
+
     const getComponent = (props = {}) =>
         (<FilteredDeviceList {...defaultProps} {...props} />);