packages/components/containers/messages/MessagesSection.test.tsx

   1 import { render, screen, waitFor } from '@testing-library/react';
   2 import userEvent from '@testing-library/user-event';
   3
   4 import { FeatureCode } from '@proton/features';
   5 import { ALMOST_ALL_MAIL, VIEW_MODE } from '@proton/shared/lib/mail/mailSettings';
   6 import {
   7     mockUseApi,
   8     mockUseEventManager,
   9     mockUseFeature,
  10     mockUseFlag,
  11     mockUseMailSettings,
  12     mockUseNotifications,
  13     mockUseUser,
  14 } from '@proton/testing';
  15
  16 import MessagesSection from './MessagesSection';
  17
  18 describe('MessagesSection', () => {
  19     let mockedApi: jest.Mock;
  20     let mockedCall: jest.Mock;
  21
  22     beforeEach(() => {
  23         mockedApi = jest.fn();
  24         mockedCall = jest.fn();
  25
  26         mockUseApi(mockedApi);
  27         mockUseEventManager({ call: mockedCall });
  28
  29         mockUseNotifications();
  30
  31         mockUseFlag().mockImplementation((code) => {
  32             return code === 'WebMailPageSizeSetting';
  33         });
  34
  35         mockUseUser();
  36         mockUseMailSettings();
  37     });
  38
  39     describe('AlmostAllMail', () => {
  40         describe('when AlmostAllMail is not enabled', () => {
  41             it('should not render AlmostAllMail toggle', () => {
  42                 mockUseFeature().mockImplementation((code) => {
  43                     if (code === FeatureCode.AlmostAllMail) {
  44                         return { feature: { Value: false } } as any;
  45                     }
  46
  47                     return { feature: { Value: true } } as any;
  48                 });
  49
  50                 render(<MessagesSection />);
  51
  52                 expect(screen.queryByText('Exclude Spam/Trash from All mail')).not.toBeInTheDocument();
  53             });
  54         });
  55
  56         describe('when AlmostAllMail is  enabled', () => {
  57             beforeEach(() => {
  58                 mockUseFeature({ feature: { Value: true } });
  59             });
  60
  61             it('should render AlmostAllMail toggle', () => {
  62                 render(<MessagesSection />);
  63
  64                 expect(screen.getByText('Exclude Spam/Trash from All mail')).toBeInTheDocument();
  65             });
  66
  67             it('should toggle setting on click', async () => {
  68                 render(<MessagesSection />);
  69
  70                 const setting = screen.getByText('Exclude Spam/Trash from All mail');
  71                 await userEvent.click(setting);
  72
  73                 await waitFor(() => {
  74                     expect(mockedApi).toHaveBeenCalledTimes(1);
  75                 });
  76                 expect(mockedApi).toHaveBeenCalledWith({
  77                     data: { AlmostAllMail: ALMOST_ALL_MAIL.ENABLED },
  78                     method: 'put',
  79                     url: 'mail/v4/settings/almost-all-mail',
  80                 });
  81
  82                 await userEvent.click(setting);
  83
  84                 await waitFor(() => {
  85                     expect(mockedApi).toHaveBeenCalledTimes(2);
  86                 });
  87                 expect(mockedApi).toHaveBeenLastCalledWith({
  88                     data: { AlmostAllMail: ALMOST_ALL_MAIL.DISABLED },
  89                     method: 'put',
  90                     url: 'mail/v4/settings/almost-all-mail',
  91                 });
  92             });
  93         });
  94     });
  95
  96     describe('PageSize', () => {
  97         beforeEach(() => {
  98             mockUseFeature({ feature: { Value: true } });
  99             mockUseMailSettings([{ ViewMode: VIEW_MODE.SINGLE }]);
 100         });
 101
 102         describe('when PageSize selection is disabled', () => {
 103             beforeEach(() => {
 104                 mockUseFlag().mockImplementation((code) => {
 105                     return code !== 'WebMailPageSizeSetting';
 106                 });
 107             });
 108
 109             it('should not display selector', () => {
 110                 render(<MessagesSection />);
 111                 expect(screen.queryByText(/Messages per page/)).not.toBeInTheDocument();
 112                 expect(screen.queryByText(/Conversations per page/)).not.toBeInTheDocument();
 113             });
 114         });
 115
 116         describe('when PageSize selection is enabled', () => {
 117             it('should display correct label', () => {
 118                 render(<MessagesSection />);
 119                 expect(screen.getByText(/Messages per page/));
 120             });
 121
 122             describe('when user is in grouped messages mode', () => {
 123                 beforeEach(() => {
 124                     mockUseMailSettings([{ ViewMode: VIEW_MODE.GROUP }]);
 125                 });
 126
 127                 it('should display correct label', () => {
 128                     render(<MessagesSection />);
 129
 130                     expect(screen.getByText(/Conversations per page/));
 131                 });
 132             });
 133
 134             describe('when user clicks on an option', () => {
 135                 const mockedApi = jest.fn();
 136                 const mockedCall = jest.fn();
 137                 const mockedCreateNotification = jest.fn();
 138
 139                 beforeEach(() => {
 140                     mockUseApi(mockedApi);
 141                     mockUseEventManager({ call: mockedCall });
 142                     mockUseNotifications({ createNotification: mockedCreateNotification });
 143                 });
 144
 145                 it('should display correct label', async () => {
 146                     render(<MessagesSection />);
 147
 148                     const select = screen.getByTestId('page-size-selector');
 149                     await userEvent.click(select);
 150
 151                     const option2 = screen.getByRole('button', { name: /100/ });
 152                     await userEvent.click(option2);
 153
 154                     await waitFor(() => {
 155                         expect(mockedApi).toHaveBeenCalledTimes(1);
 156                     });
 157
 158                     expect(mockedApi).toHaveBeenCalledWith({
 159                         data: { PageSize: 100 },
 160                         method: 'put',
 161                         url: 'mail/v4/settings/pagesize',
 162                     });
 163
 164                     expect(mockedCall).toHaveBeenCalledTimes(1);
 165
 166                     expect(mockedCreateNotification).toHaveBeenCalledTimes(1);
 167                     expect(mockedCreateNotification).toHaveBeenCalledWith({ text: 'Preference saved' });
 168                 });
 169             });
 170         });
 171     });
 172 });