Device manager - sign out of multiple sessions (#9325)
* add device selection that does nothing * multi select and sign out of sessions * test multiple selection * fix type after rebase
This commit is contained in:
parent
7a33818bd7
commit
772df30212
13 changed files with 224 additions and 33 deletions
|
@ -100,6 +100,19 @@ describe('<SessionManagerTab />', () => {
|
|||
fireEvent.click(toggle);
|
||||
};
|
||||
|
||||
const toggleDeviceSelection = (
|
||||
getByTestId: ReturnType<typeof render>['getByTestId'],
|
||||
deviceId: DeviceWithVerification['device_id'],
|
||||
) => {
|
||||
const checkbox = getByTestId(`device-tile-checkbox-${deviceId}`);
|
||||
fireEvent.click(checkbox);
|
||||
};
|
||||
|
||||
const isDeviceSelected = (
|
||||
getByTestId: ReturnType<typeof render>['getByTestId'],
|
||||
deviceId: DeviceWithVerification['device_id'],
|
||||
): boolean => !!(getByTestId(`device-tile-checkbox-${deviceId}`) as HTMLInputElement).checked;
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
jest.spyOn(logger, 'error').mockRestore();
|
||||
|
@ -597,6 +610,33 @@ describe('<SessionManagerTab />', () => {
|
|||
'[data-testid="device-detail-sign-out-cta"]',
|
||||
) as Element).getAttribute('aria-disabled')).toEqual(null);
|
||||
});
|
||||
|
||||
it('deletes multiple devices', async () => {
|
||||
mockClient.getDevices.mockResolvedValue({ devices: [
|
||||
alicesDevice, alicesMobileDevice, alicesOlderMobileDevice,
|
||||
] });
|
||||
mockClient.deleteMultipleDevices.mockResolvedValue({});
|
||||
|
||||
const { getByTestId } = render(getComponent());
|
||||
|
||||
await act(async () => {
|
||||
await flushPromisesWithFakeTimers();
|
||||
});
|
||||
|
||||
toggleDeviceSelection(getByTestId, alicesMobileDevice.device_id);
|
||||
toggleDeviceSelection(getByTestId, alicesOlderMobileDevice.device_id);
|
||||
|
||||
fireEvent.click(getByTestId('sign-out-selection-cta'));
|
||||
|
||||
// delete called with both ids
|
||||
expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith(
|
||||
[
|
||||
alicesMobileDevice.device_id,
|
||||
alicesOlderMobileDevice.device_id,
|
||||
],
|
||||
undefined,
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -702,6 +742,77 @@ describe('<SessionManagerTab />', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('Multiple selection', () => {
|
||||
beforeEach(() => {
|
||||
mockClient.getDevices.mockResolvedValue({ devices: [
|
||||
alicesDevice, alicesMobileDevice, alicesOlderMobileDevice,
|
||||
] });
|
||||
});
|
||||
|
||||
it('toggles session selection', async () => {
|
||||
const { getByTestId, getByText } = render(getComponent());
|
||||
|
||||
await act(async () => {
|
||||
await flushPromisesWithFakeTimers();
|
||||
});
|
||||
|
||||
toggleDeviceSelection(getByTestId, alicesMobileDevice.device_id);
|
||||
toggleDeviceSelection(getByTestId, alicesOlderMobileDevice.device_id);
|
||||
|
||||
// header displayed correctly
|
||||
expect(getByText('2 sessions selected')).toBeTruthy();
|
||||
|
||||
expect(isDeviceSelected(getByTestId, alicesMobileDevice.device_id)).toBeTruthy();
|
||||
expect(isDeviceSelected(getByTestId, alicesOlderMobileDevice.device_id)).toBeTruthy();
|
||||
|
||||
toggleDeviceSelection(getByTestId, alicesMobileDevice.device_id);
|
||||
|
||||
// unselected
|
||||
expect(isDeviceSelected(getByTestId, alicesMobileDevice.device_id)).toBeFalsy();
|
||||
// still selected
|
||||
expect(isDeviceSelected(getByTestId, alicesOlderMobileDevice.device_id)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('cancel button clears selection', async () => {
|
||||
const { getByTestId, getByText } = render(getComponent());
|
||||
|
||||
await act(async () => {
|
||||
await flushPromisesWithFakeTimers();
|
||||
});
|
||||
|
||||
toggleDeviceSelection(getByTestId, alicesMobileDevice.device_id);
|
||||
toggleDeviceSelection(getByTestId, alicesOlderMobileDevice.device_id);
|
||||
|
||||
// header displayed correctly
|
||||
expect(getByText('2 sessions selected')).toBeTruthy();
|
||||
|
||||
fireEvent.click(getByTestId('cancel-selection-cta'));
|
||||
|
||||
// unselected
|
||||
expect(isDeviceSelected(getByTestId, alicesMobileDevice.device_id)).toBeFalsy();
|
||||
expect(isDeviceSelected(getByTestId, alicesOlderMobileDevice.device_id)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('changing the filter clears selection', async () => {
|
||||
const { getByTestId } = render(getComponent());
|
||||
|
||||
await act(async () => {
|
||||
await flushPromisesWithFakeTimers();
|
||||
});
|
||||
|
||||
toggleDeviceSelection(getByTestId, alicesMobileDevice.device_id);
|
||||
expect(isDeviceSelected(getByTestId, alicesMobileDevice.device_id)).toBeTruthy();
|
||||
|
||||
fireEvent.click(getByTestId('unverified-devices-cta'));
|
||||
|
||||
// our session manager waits a tick for rerender
|
||||
await flushPromisesWithFakeTimers();
|
||||
|
||||
// unselected
|
||||
expect(isDeviceSelected(getByTestId, alicesOlderMobileDevice.device_id)).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
it("lets you change the pusher state", async () => {
|
||||
const { getByTestId } = render(getComponent());
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue