-
Notifications
You must be signed in to change notification settings - Fork 86
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into mashal-m/react-upgrade-to-v17
- Loading branch information
Showing
41 changed files
with
1,154 additions
and
292 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { useWindowSize, breakpoints } from '@edx/paragon'; | ||
| import { StrictDict } from 'utils'; | ||
| import api from 'widgets/ProductRecommendations/api'; | ||
| import * as module from './ExperimentContext'; | ||
|
|
||
| export const state = StrictDict({ | ||
| experiment: (val) => React.useState(val), // eslint-disable-line | ||
| countryCode: (val) => React.useState(val), // eslint-disable-line | ||
| }); | ||
|
|
||
| export const useCountryCode = (setCountryCode) => { | ||
| React.useEffect(() => { | ||
| api | ||
| .fetchRecommendationsContext() | ||
| .then((response) => { | ||
| setCountryCode(response.data.countryCode); | ||
| }) | ||
| .catch(() => { | ||
| setCountryCode(''); | ||
| }); | ||
| /* eslint-disable */ | ||
| }, []); | ||
| }; | ||
|
|
||
| export const ExperimentContext = React.createContext(); | ||
|
|
||
| export const ExperimentProvider = ({ children }) => { | ||
| const [countryCode, setCountryCode] = module.state.countryCode(null); | ||
| const [experiment, setExperiment] = module.state.experiment({ | ||
| isExperimentActive: false, | ||
| inRecommendationsVariant: true, | ||
| }); | ||
|
|
||
| module.useCountryCode(setCountryCode); | ||
| const { width } = useWindowSize(); | ||
| const isMobile = width < breakpoints.small.minWidth; | ||
|
|
||
| const contextValue = React.useMemo( | ||
| () => ({ | ||
| experiment, | ||
| countryCode, | ||
| setExperiment, | ||
| setCountryCode, | ||
| isMobile, | ||
| }), | ||
| [experiment, countryCode, setExperiment, setCountryCode, isMobile] | ||
| ); | ||
|
|
||
| return ( | ||
| <ExperimentContext.Provider value={contextValue}> | ||
| {children} | ||
| </ExperimentContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| export const useExperimentContext = () => React.useContext(ExperimentContext); | ||
|
|
||
| ExperimentProvider.propTypes = { | ||
| children: PropTypes.node.isRequired, | ||
| }; | ||
|
|
||
| export default { useCountryCode, useExperimentContext }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| import React from 'react'; | ||
| import { mount } from 'enzyme'; | ||
| import { waitFor } from '@testing-library/react'; | ||
| import { useWindowSize } from '@edx/paragon'; | ||
|
|
||
| import api from 'widgets/ProductRecommendations/api'; | ||
| import { MockUseState } from 'testUtils'; | ||
|
|
||
| import * as experiment from 'ExperimentContext'; | ||
|
|
||
| const state = new MockUseState(experiment); | ||
|
|
||
| jest.unmock('react'); | ||
| jest.spyOn(React, 'useEffect').mockImplementation((cb, prereqs) => ({ useEffect: { cb, prereqs } })); | ||
|
|
||
| jest.mock('widgets/ProductRecommendations/api', () => ({ | ||
| fetchRecommendationsContext: jest.fn(), | ||
| })); | ||
|
|
||
| describe('experiments context', () => { | ||
| beforeEach(() => { | ||
| jest.resetAllMocks(); | ||
| }); | ||
|
|
||
| describe('useCountryCode', () => { | ||
| describe('behaviour', () => { | ||
| describe('useEffect call', () => { | ||
| let calls; | ||
| let cb; | ||
| const setCountryCode = jest.fn(); | ||
| const successfulFetch = { data: { countryCode: 'ZA' } }; | ||
|
|
||
| beforeEach(() => { | ||
| experiment.useCountryCode(setCountryCode); | ||
|
|
||
| ({ calls } = React.useEffect.mock); | ||
| [[cb]] = calls; | ||
| }); | ||
|
|
||
| it('calls useEffect once', () => { | ||
| expect(calls.length).toEqual(1); | ||
| }); | ||
| describe('successfull fetch', () => { | ||
| it('sets the country code', async () => { | ||
| let resolveFn; | ||
| api.fetchRecommendationsContext.mockReturnValueOnce( | ||
| new Promise((resolve) => { | ||
| resolveFn = resolve; | ||
| }), | ||
| ); | ||
|
|
||
| cb(); | ||
| expect(api.fetchRecommendationsContext).toHaveBeenCalled(); | ||
| expect(setCountryCode).not.toHaveBeenCalled(); | ||
| resolveFn(successfulFetch); | ||
| await waitFor(() => { | ||
| expect(setCountryCode).toHaveBeenCalledWith(successfulFetch.data.countryCode); | ||
| }); | ||
| }); | ||
| }); | ||
| describe('unsuccessfull fetch', () => { | ||
| it('sets the country code to an empty string', async () => { | ||
| let rejectFn; | ||
| api.fetchRecommendationsContext.mockReturnValueOnce( | ||
| new Promise((resolve, reject) => { | ||
| rejectFn = reject; | ||
| }), | ||
| ); | ||
| cb(); | ||
| expect(api.fetchRecommendationsContext).toHaveBeenCalled(); | ||
| expect(setCountryCode).not.toHaveBeenCalled(); | ||
| rejectFn(); | ||
| await waitFor(() => { | ||
| expect(setCountryCode).toHaveBeenCalledWith(''); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('ExperimentProvider', () => { | ||
| const { ExperimentProvider } = experiment; | ||
|
|
||
| const TestComponent = () => { | ||
| const { | ||
| experiment: exp, | ||
| setExperiment, | ||
| countryCode, | ||
| setCountryCode, | ||
| isMobile, | ||
| } = experiment.useExperimentContext(); | ||
|
|
||
| expect(exp.isExperimentActive).toBeFalsy(); | ||
| expect(exp.inRecommendationsVariant).toBeTruthy(); | ||
| expect(countryCode).toBeNull(); | ||
| expect(isMobile).toBe(false); | ||
| expect(setExperiment).toBeDefined(); | ||
| expect(setCountryCode).toBeDefined(); | ||
|
|
||
| return ( | ||
| <div /> | ||
| ); | ||
| }; | ||
|
|
||
| it('allows access to child components with the context stateful values', () => { | ||
| const countryCodeSpy = jest.spyOn(experiment, 'useCountryCode').mockImplementationOnce(() => {}); | ||
| useWindowSize.mockImplementationOnce(() => ({ width: 577, height: 943 })); | ||
|
|
||
| state.mock(); | ||
|
|
||
| mount( | ||
| <ExperimentProvider> | ||
| <TestComponent /> | ||
| </ExperimentProvider>, | ||
| ); | ||
|
|
||
| expect(countryCodeSpy).toHaveBeenCalledWith(state.setState.countryCode); | ||
| state.expectInitializedWith(state.keys.countryCode, null); | ||
| state.expectInitializedWith(state.keys.experiment, { isExperimentActive: false, inRecommendationsVariant: true }); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.