packages/components/containers/offers/Offers.test.tsx

   1 import { fireEvent, screen } from '@testing-library/react';
   2
   3 import { getModelState } from '@proton/account/test';
   4 import { TopNavbarUpsell } from '@proton/components';
   5 import type { FeatureCode } from '@proton/features';
   6 import { APPS } from '@proton/shared/lib/constants';
   7 import { setBit } from '@proton/shared/lib/helpers/bitset';
   8 import { NEWSLETTER_SUBSCRIPTIONS_BITS } from '@proton/shared/lib/helpers/newsletter';
   9 import type { UserModel, UserSettings } from '@proton/shared/lib/interfaces';
  10
  11 import { renderWithProviders } from '../contacts/tests/render';
  12 import { OffersTestProvider } from './Offers.test.helpers';
  13 import type { OfferConfig } from './interface';
  14
  15 const OFFER_CONTENT = 'deal deal deal deal deal';
  16
  17 const offerConfig: OfferConfig = {
  18     deals: [],
  19     featureCode: 'testOffer2022' as FeatureCode,
  20     layout: () => <div>{OFFER_CONTENT}</div>,
  21     ID: 'test-offer-2022' as OfferConfig['ID'],
  22     canBeDisabled: true,
  23 };
  24
  25 const offerConfigAutopopup: OfferConfig = {
  26     deals: [],
  27     featureCode: 'testOffer2022' as FeatureCode,
  28     layout: () => <div>{OFFER_CONTENT}</div>,
  29     ID: 'test-offer-2022' as OfferConfig['ID'],
  30     canBeDisabled: true,
  31     autoPopUp: 'one-time',
  32 };
  33
  34 jest.mock('./hooks/useOfferConfig', function () {
  35     return {
  36         __esModule: true,
  37         default: jest
  38             .fn()
  39             .mockReturnValueOnce([undefined, false])
  40             .mockReturnValueOnce([undefined, false])
  41             .mockReturnValueOnce([offerConfig, false])
  42             .mockReturnValueOnce([offerConfig, false])
  43             .mockReturnValue([offerConfigAutopopup, false]),
  44     };
  45 });
  46
  47 jest.mock('./hooks/useFetchOffer', function () {
  48     return {
  49         __esModule: true,
  50         default: jest.fn(({ offerConfig }) => [offerConfig, false]),
  51     };
  52 });
  53
  54 jest.mock('./hooks/useOfferFlags', function () {
  55     return {
  56         __esModule: true,
  57         default: jest.fn(() => ({
  58             isVisited: false,
  59             loading: false,
  60             isActive: true,
  61             handleVisit: () => {},
  62             handleHide: () => {},
  63         })),
  64     };
  65 });
  66
  67 const TopNavbarComponent = () => (
  68     <OffersTestProvider>
  69         <TopNavbarUpsell app={APPS.PROTONMAIL} />
  70     </OffersTestProvider>
  71 );
  72
  73 const getUserSettings = ({ offersEnabled }: { offersEnabled: boolean }): UserSettings => {
  74     return {
  75         News: offersEnabled ? setBit(0, NEWSLETTER_SUBSCRIPTIONS_BITS.IN_APP_NOTIFICATIONS) : 0,
  76     } as UserSettings;
  77 };
  78
  79 const getUser = ({ isFree }: { isFree: boolean }) => {
  80     return {
  81         isFree,
  82     } as UserModel;
  83 };
  84
  85 describe('Offers', () => {
  86     describe('Offers display', () => {
  87         it('Should display upgrade button for free users', () => {
  88             renderWithProviders(<TopNavbarComponent />, {
  89                 preloadedState: {
  90                     user: getModelState(getUser({ isFree: true })),
  91                     userSettings: getModelState(getUserSettings({ offersEnabled: true })),
  92                 },
  93             });
  94
  95             const link = screen.getByTestId('cta:upgrade-plan');
  96
  97             expect(link.textContent).toContain('Upgrade');
  98         });
  99
 100         it('Should display nothing for paid users with offers', () => {
 101             renderWithProviders(<TopNavbarComponent />, {
 102                 preloadedState: {
 103                     user: getModelState(getUser({ isFree: false })),
 104                     userSettings: getModelState(getUserSettings({ offersEnabled: true })),
 105                 },
 106             });
 107
 108             expect(screen.queryByTestId('cta:upgrade-plan')).toBeNull();
 109         });
 110
 111         describe('Non free user with valid offer', () => {
 112             it('Should not display an offer button with setting turned off', () => {
 113                 renderWithProviders(<TopNavbarComponent />, {
 114                     preloadedState: {
 115                         user: getModelState(getUser({ isFree: false })),
 116                         userSettings: getModelState(getUserSettings({ offersEnabled: false })),
 117                     },
 118                 });
 119
 120                 expect(screen.queryByTestId('cta:special-offer')).toBeNull();
 121             });
 122
 123             it('Should display an offer button', () => {
 124                 renderWithProviders(<TopNavbarComponent />, {
 125                     preloadedState: {
 126                         user: getModelState(getUser({ isFree: false })),
 127                         userSettings: getModelState(getUserSettings({ offersEnabled: true })),
 128                     },
 129                 });
 130
 131                 expect(screen.getByTestId('cta:special-offer')?.textContent).toBe('Special offer');
 132             });
 133
 134             it('Should open a modal with offer content', () => {
 135                 renderWithProviders(<TopNavbarComponent />, {
 136                     preloadedState: {
 137                         user: getModelState(getUser({ isFree: false })),
 138                         userSettings: getModelState(getUserSettings({ offersEnabled: true })),
 139                     },
 140                 });
 141
 142                 const specialOfferCta = screen.getByTestId('cta:special-offer');
 143
 144                 fireEvent.click(specialOfferCta);
 145
 146                 screen.getByText(OFFER_CONTENT);
 147             });
 148
 149             it.skip('Should open a modal when autopopup', () => {
 150                 renderWithProviders(<TopNavbarComponent />, {
 151                     preloadedState: {
 152                         user: getModelState(getUser({ isFree: false })),
 153                         userSettings: getModelState(getUserSettings({ offersEnabled: true })),
 154                     },
 155                 });
 156
 157                 screen.getByText(OFFER_CONTENT);
 158             });
 159         });
 160     });
 161 });