|
1 | 1 | import React from 'react'; |
2 | 2 | import { createStore } from 'redux'; |
3 | | -import { render } from '@testing-library/react'; |
| 3 | +import { render, screen } from '@testing-library/react'; |
| 4 | +import userEvent from '@testing-library/user-event'; |
| 5 | +import '@testing-library/jest-dom/extend-expect'; |
| 6 | + |
4 | 7 | import AppProvider from './AppProvider'; |
5 | 8 | import { initialize } from '../initialize'; |
| 9 | +import { useAppEvent, useTrackColorSchemeChoice, useParagonTheme } from './hooks'; |
| 10 | +import { AUTHENTICATED_USER_CHANGED, getAuthenticatedUser } from '../auth'; |
| 11 | +import { CONFIG_CHANGED } from '../constants'; |
| 12 | +import { getConfig } from '../config'; |
| 13 | +import { getLocale, LOCALE_CHANGED } from '../i18n'; |
| 14 | +import AppContext from './AppContext'; |
| 15 | +import { SELECTED_THEME_VARIANT_KEY, SET_THEME_VARIANT } from './constants'; |
6 | 16 |
|
7 | 17 | jest.mock('../auth', () => ({ |
8 | | - configure: () => {}, |
9 | | - getAuthenticatedUser: () => null, |
10 | | - fetchAuthenticatedUser: () => null, |
11 | | - getAuthenticatedHttpClient: () => ({}), |
| 18 | + ...jest.requireActual('../auth'), |
| 19 | + getAuthenticatedUser: jest.fn(), |
| 20 | + fetchAuthenticatedUser: jest.fn(), |
| 21 | + getAuthenticatedHttpClient: jest.fn().mockReturnValue({}), |
12 | 22 | AUTHENTICATED_USER_CHANGED: 'user_changed', |
13 | 23 | })); |
14 | 24 |
|
| 25 | +jest.mock('../config', () => ({ |
| 26 | + ...jest.requireActual('../config'), |
| 27 | + getConfig: jest.fn().mockReturnValue({ |
| 28 | + BASE_URL: 'localhost:8080', |
| 29 | + LMS_BASE_URL: 'localhost:18000', |
| 30 | + LOGIN_URL: 'localhost:18000/login', |
| 31 | + LOGOUT_URL: 'localhost:18000/logout', |
| 32 | + REFRESH_ACCESS_TOKEN_ENDPOINT: 'localhost:18000/oauth2/access_token', |
| 33 | + ACCESS_TOKEN_COOKIE_NAME: 'access_token', |
| 34 | + CSRF_TOKEN_API_PATH: 'localhost:18000/csrf', |
| 35 | + }), |
| 36 | +})); |
| 37 | + |
| 38 | +jest.mock('../i18n', () => ({ |
| 39 | + ...jest.requireActual('../i18n'), |
| 40 | + getLocale: jest.fn().mockReturnValue('en'), |
| 41 | +})); |
| 42 | + |
15 | 43 | jest.mock('../analytics', () => ({ |
16 | | - configure: () => {}, |
| 44 | + configure: () => { }, |
17 | 45 | identifyAnonymousUser: jest.fn(), |
18 | 46 | identifyAuthenticatedUser: jest.fn(), |
19 | 47 | })); |
20 | 48 |
|
21 | 49 | jest.mock('./hooks', () => ({ |
22 | 50 | ...jest.requireActual('./hooks'), |
| 51 | + useAppEvent: jest.fn(), |
23 | 52 | useTrackColorSchemeChoice: jest.fn(), |
| 53 | + useParagonTheme: jest.fn().mockImplementation(() => [ |
| 54 | + { isThemeLoaded: true, themeVariant: 'light' }, |
| 55 | + jest.fn(), |
| 56 | + ]), |
24 | 57 | })); |
25 | 58 |
|
26 | 59 | describe('AppProvider', () => { |
27 | 60 | beforeEach(async () => { |
| 61 | + jest.clearAllMocks(); |
| 62 | + |
28 | 63 | await initialize({ |
29 | 64 | loggingService: jest.fn(() => ({ |
30 | 65 | logError: jest.fn(), |
@@ -104,4 +139,147 @@ describe('AppProvider', () => { |
104 | 139 | const reduxProvider = wrapper.queryByTestId('redux-provider'); |
105 | 140 | expect(reduxProvider).not.toBeInTheDocument(); |
106 | 141 | }); |
| 142 | + |
| 143 | + describe('paragon theme and brand', () => { |
| 144 | + it('calls trackColorSchemeChoice', () => { |
| 145 | + const Component = ( |
| 146 | + <AppProvider> |
| 147 | + <div>Child One</div> |
| 148 | + <div>Child Two</div> |
| 149 | + </AppProvider> |
| 150 | + ); |
| 151 | + render(Component); |
| 152 | + expect(useTrackColorSchemeChoice).toHaveBeenCalled(); |
| 153 | + }); |
| 154 | + |
| 155 | + it('calls useParagonTheme', () => { |
| 156 | + const Component = ( |
| 157 | + <AppProvider> |
| 158 | + <div>Child One</div> |
| 159 | + <div>Child Two</div> |
| 160 | + </AppProvider> |
| 161 | + ); |
| 162 | + render(Component); |
| 163 | + expect(useParagonTheme).toHaveBeenCalled(); |
| 164 | + expect(useParagonTheme).toHaveBeenCalledWith( |
| 165 | + expect.objectContaining({ |
| 166 | + BASE_URL: 'localhost:8080', |
| 167 | + LMS_BASE_URL: 'localhost:18000', |
| 168 | + LOGIN_URL: 'localhost:18000/login', |
| 169 | + LOGOUT_URL: 'localhost:18000/logout', |
| 170 | + REFRESH_ACCESS_TOKEN_ENDPOINT: 'localhost:18000/oauth2/access_token', |
| 171 | + ACCESS_TOKEN_COOKIE_NAME: 'access_token', |
| 172 | + CSRF_TOKEN_API_PATH: 'localhost:18000/csrf', |
| 173 | + }), |
| 174 | + ); |
| 175 | + }); |
| 176 | + |
| 177 | + it('blocks rendering until paragon theme is loaded', () => { |
| 178 | + useParagonTheme.mockImplementationOnce(() => [ |
| 179 | + { isThemeLoaded: false }, |
| 180 | + jest.fn(), |
| 181 | + ]); |
| 182 | + const Component = ( |
| 183 | + <AppProvider> |
| 184 | + <div>Child One</div> |
| 185 | + <div>Child Two</div> |
| 186 | + </AppProvider> |
| 187 | + ); |
| 188 | + const { container } = render(Component); |
| 189 | + expect(container).toBeEmptyDOMElement(); |
| 190 | + }); |
| 191 | + |
| 192 | + it('returns correct `paragonTheme` in context value', async () => { |
| 193 | + const mockUseParagonThemeDispatch = jest.fn(); |
| 194 | + useParagonTheme.mockImplementationOnce(() => [ |
| 195 | + { isThemeLoaded: true, themeVariant: 'light' }, |
| 196 | + mockUseParagonThemeDispatch, |
| 197 | + ]); |
| 198 | + const Component = ( |
| 199 | + <AppProvider> |
| 200 | + <AppContext.Consumer> |
| 201 | + {({ paragonTheme }) => ( |
| 202 | + <div> |
| 203 | + <p>Is theme loaded: {paragonTheme.state.isThemeLoaded ? 'yes' : 'no'}</p> |
| 204 | + <p>Current theme variant: {paragonTheme.state.themeVariant}</p> |
| 205 | + <button |
| 206 | + type="button" |
| 207 | + onClick={() => { |
| 208 | + const nextThemeVariant = paragonTheme.state.themeVariant === 'light' ? 'dark' : 'light'; |
| 209 | + paragonTheme.setThemeVariant(nextThemeVariant); |
| 210 | + }} |
| 211 | + > |
| 212 | + Set theme variant |
| 213 | + </button> |
| 214 | + </div> |
| 215 | + )} |
| 216 | + </AppContext.Consumer> |
| 217 | + </AppProvider> |
| 218 | + ); |
| 219 | + render(Component); |
| 220 | + expect(screen.getByText('Is theme loaded: yes')).toBeInTheDocument(); |
| 221 | + expect(screen.getByText('Current theme variant: light')).toBeInTheDocument(); |
| 222 | + |
| 223 | + const setThemeVariantBtn = screen.getByRole('button', { name: 'Set theme variant' }); |
| 224 | + expect(setThemeVariantBtn).toBeInTheDocument(); |
| 225 | + await userEvent.click(setThemeVariantBtn); |
| 226 | + |
| 227 | + expect(mockUseParagonThemeDispatch).toHaveBeenCalledTimes(1); |
| 228 | + expect(mockUseParagonThemeDispatch).toHaveBeenCalledWith({ |
| 229 | + payload: 'dark', |
| 230 | + type: SET_THEME_VARIANT, |
| 231 | + }); |
| 232 | + expect(localStorage.setItem).toHaveBeenLastCalledWith(SELECTED_THEME_VARIANT_KEY, 'dark'); |
| 233 | + }); |
| 234 | + }); |
| 235 | + |
| 236 | + describe('useAppEvent', () => { |
| 237 | + it('subscribes to `AUTHENTICATED_USER_CHANGED`', async () => { |
| 238 | + const Component = ( |
| 239 | + <AppProvider> |
| 240 | + <div>Child</div> |
| 241 | + </AppProvider> |
| 242 | + ); |
| 243 | + render(Component); |
| 244 | + expect(useAppEvent).toHaveBeenCalledWith(AUTHENTICATED_USER_CHANGED, expect.any(Function)); |
| 245 | + const useAppEventMockCalls = useAppEvent.mock.calls; |
| 246 | + const authUserChangedFn = useAppEventMockCalls.find(([event]) => event === AUTHENTICATED_USER_CHANGED)[1]; |
| 247 | + expect(authUserChangedFn).toBeDefined(); |
| 248 | + const getAuthUserCallCount = getAuthenticatedUser.mock.calls.length; |
| 249 | + authUserChangedFn(); |
| 250 | + expect(getAuthUserCallCount + 1).toEqual(getAuthenticatedUser.mock.calls.length); |
| 251 | + }); |
| 252 | + |
| 253 | + it('subscribes to `CONFIG_CHANGED`', async () => { |
| 254 | + const Component = ( |
| 255 | + <AppProvider> |
| 256 | + <div>Child</div> |
| 257 | + </AppProvider> |
| 258 | + ); |
| 259 | + render(Component); |
| 260 | + expect(useAppEvent).toHaveBeenCalledWith(CONFIG_CHANGED, expect.any(Function)); |
| 261 | + const useAppEventMockCalls = useAppEvent.mock.calls; |
| 262 | + const configChangedFn = useAppEventMockCalls.find(([event]) => event === CONFIG_CHANGED)[1]; |
| 263 | + expect(configChangedFn).toBeDefined(); |
| 264 | + const getConfigCallCount = getConfig.mock.calls.length; |
| 265 | + configChangedFn(); |
| 266 | + expect(getConfig.mock.calls.length).toEqual(getConfigCallCount + 1); |
| 267 | + }); |
| 268 | + |
| 269 | + it('subscribes to `LOCALE_CHANGED`', async () => { |
| 270 | + const Component = ( |
| 271 | + <AppProvider> |
| 272 | + <div>Child</div> |
| 273 | + </AppProvider> |
| 274 | + ); |
| 275 | + render(Component); |
| 276 | + expect(useAppEvent).toHaveBeenCalledWith(LOCALE_CHANGED, expect.any(Function)); |
| 277 | + const useAppEventMockCalls = useAppEvent.mock.calls; |
| 278 | + const localeChangedFn = useAppEventMockCalls.find(([event]) => event === LOCALE_CHANGED)[1]; |
| 279 | + expect(localeChangedFn).toBeDefined(); |
| 280 | + const getLocaleCallCount = getLocale.mock.calls.length; |
| 281 | + localeChangedFn(); |
| 282 | + expect(getLocale.mock.calls.length).toEqual(getLocaleCallCount + 1); |
| 283 | + }); |
| 284 | + }); |
107 | 285 | }); |
0 commit comments