From d42d0cdc596cca4e3d5c0658dc3b9d3b819e1578 Mon Sep 17 00:00:00 2001 From: Syed Sajjad Hussain Shah Date: Thu, 24 Aug 2023 12:40:12 +0500 Subject: [PATCH] feat: add painted door button for no recommendations VAN-1618 --- .../__snapshots__/index.test.jsx.snap | 2 +- .../WidgetContainers/LoadedSidebar/index.jsx | 2 +- src/widgets/RecommendationsPanel/index.jsx | 30 +++- .../RecommendationsPanel/index.test.jsx | 131 ++++++++++++++---- 4 files changed, 133 insertions(+), 32 deletions(-) diff --git a/src/containers/WidgetContainers/LoadedSidebar/__snapshots__/index.test.jsx.snap b/src/containers/WidgetContainers/LoadedSidebar/__snapshots__/index.test.jsx.snap index e93114ea..38a19bb7 100644 --- a/src/containers/WidgetContainers/LoadedSidebar/__snapshots__/index.test.jsx.snap +++ b/src/containers/WidgetContainers/LoadedSidebar/__snapshots__/index.test.jsx.snap @@ -5,7 +5,7 @@ exports[`WidgetSidebar snapshots default 1`] = ` className="widget-sidebar" >
diff --git a/src/containers/WidgetContainers/LoadedSidebar/index.jsx b/src/containers/WidgetContainers/LoadedSidebar/index.jsx index 34d36f15..8f5f2224 100644 --- a/src/containers/WidgetContainers/LoadedSidebar/index.jsx +++ b/src/containers/WidgetContainers/LoadedSidebar/index.jsx @@ -12,7 +12,7 @@ export const WidgetSidebar = ({ setSidebarShowing }) => { return (
-
+
diff --git a/src/widgets/RecommendationsPanel/index.jsx b/src/widgets/RecommendationsPanel/index.jsx index c091a8d7..1328e74a 100644 --- a/src/widgets/RecommendationsPanel/index.jsx +++ b/src/widgets/RecommendationsPanel/index.jsx @@ -4,6 +4,9 @@ import LookingForChallengeWidget from 'widgets/LookingForChallengeWidget'; import LoadingView from './LoadingView'; import LoadedView from './LoadedView'; import hooks from './hooks'; +import RecommendationsPaintedDoorBtn from '../RecommendationsPaintedDoorBtn'; +import { RECOMMENDATIONS_PANEL } from '../RecommendationsPaintedDoorBtn/constants'; +import { usePaintedDoorExperimentContext } from '../RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext'; export const RecommendationsPanel = () => { const { @@ -13,6 +16,29 @@ export const RecommendationsPanel = () => { isLoaded, isLoading, } = hooks.useRecommendationPanelData(); + const { + experimentVariation, + isPaintedDoorWidgetBtnVariation, + experimentLoading, + } = usePaintedDoorExperimentContext(); + + const getDefaultOrFailedStateWidget = () => { + if (!experimentLoading && isPaintedDoorWidgetBtnVariation) { + return ( + <> + +
+ + + ); + } + return ( + + ); + }; if (isLoading) { return (); @@ -23,10 +49,10 @@ export const RecommendationsPanel = () => { ); } if (isFailed) { - return (); + return getDefaultOrFailedStateWidget(); } // default fallback - return (); + return getDefaultOrFailedStateWidget(); }; export default RecommendationsPanel; diff --git a/src/widgets/RecommendationsPanel/index.test.jsx b/src/widgets/RecommendationsPanel/index.test.jsx index f87cd5c1..39d9c4ee 100644 --- a/src/widgets/RecommendationsPanel/index.test.jsx +++ b/src/widgets/RecommendationsPanel/index.test.jsx @@ -7,6 +7,8 @@ import mockData from './mockData'; import LoadedView from './LoadedView'; import LoadingView from './LoadingView'; import RecommendationsPanel from '.'; +import { usePaintedDoorExperimentContext } from '../RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext'; +import RecommendationsPaintedDoorBtn from '../RecommendationsPaintedDoorBtn'; jest.mock('./hooks', () => ({ useRecommendationPanelData: jest.fn(), @@ -14,6 +16,9 @@ jest.mock('./hooks', () => ({ jest.mock('widgets/LookingForChallengeWidget', () => 'LookingForChallengeWidget'); jest.mock('./LoadingView', () => 'LoadingView'); jest.mock('./LoadedView', () => 'LoadedView'); +jest.mock('widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext', () => ({ + usePaintedDoorExperimentContext: jest.fn(), +})); const { courses } = mockData; @@ -28,38 +33,108 @@ describe('RecommendationsPanel snapshot', () => { isLoading: false, ...defaultLoadedViewProps, }; - it('displays LoadingView if request is loading', () => { - hooks.useRecommendationPanelData.mockReturnValueOnce({ - ...defaultValues, - isLoading: true, + describe('RecommendationsPanel recommendations tests', () => { + beforeEach(() => { + usePaintedDoorExperimentContext.mockReturnValueOnce({ + experimentVariation: '', + isPaintedDoorWidgetBtnVariation: false, + experimentLoading: false, + }); }); - expect(shallow()).toMatchObject(shallow()); - }); - it('displays LoadedView with courses if request is loaded', () => { - hooks.useRecommendationPanelData.mockReturnValueOnce({ - ...defaultValues, - courses, - isLoaded: true, + it('displays LoadingView if request is loading', () => { + hooks.useRecommendationPanelData.mockReturnValueOnce({ + ...defaultValues, + isLoading: true, + }); + expect(shallow()).toMatchObject(shallow()); }); - expect(shallow()).toMatchObject( - shallow(), - ); - }); - it('displays LookingForChallengeWidget if request is failed', () => { - hooks.useRecommendationPanelData.mockReturnValueOnce({ - ...defaultValues, - isFailed: true, + it('displays LoadedView with courses if request is loaded', () => { + hooks.useRecommendationPanelData.mockReturnValueOnce({ + ...defaultValues, + courses, + isLoaded: true, + }); + expect(shallow()).toMatchObject( + shallow(), + ); + }); + it('displays LookingForChallengeWidget if request is failed', () => { + hooks.useRecommendationPanelData.mockReturnValueOnce({ + ...defaultValues, + isFailed: true, + }); + expect(shallow()).toMatchObject( + shallow(), + ); + }); + it('defaults to LookingForChallengeWidget if no flags are true', () => { + hooks.useRecommendationPanelData.mockReturnValueOnce({ + ...defaultValues, + }); + expect(shallow()).toMatchObject( + shallow(), + ); }); - expect(shallow()).toMatchObject( - shallow(), - ); }); - it('defaults to LookingForChallengeWidget if no flags are true', () => { - hooks.useRecommendationPanelData.mockReturnValueOnce({ - ...defaultValues, + + describe('RecommendationsPanel painted door exp tests', () => { + it('displays painted door btn if user is in variation and request is failed', () => { + hooks.useRecommendationPanelData.mockReturnValueOnce({ + ...defaultValues, + isFailed: true, + }); + usePaintedDoorExperimentContext.mockReturnValueOnce({ + experimentVariation: '', + isPaintedDoorWidgetBtnVariation: true, + experimentLoading: false, + }); + + const wrapper = shallow(); + expect(wrapper.find(RecommendationsPaintedDoorBtn).exists()).toBe(true); + }); + it('displays painted door btn if user is in variation and no flags are set (defaults)', () => { + hooks.useRecommendationPanelData.mockReturnValueOnce({ + ...defaultValues, + isFailed: true, + }); + usePaintedDoorExperimentContext.mockReturnValueOnce({ + experimentVariation: '', + isPaintedDoorWidgetBtnVariation: true, + experimentLoading: false, + }); + + const wrapper = shallow(); + expect(wrapper.find(RecommendationsPaintedDoorBtn).exists()).toBe(true); + }); + it('renders only LookingForChallengeWidget if user is not in variation', () => { + hooks.useRecommendationPanelData.mockReturnValueOnce({ + ...defaultValues, + isFailed: true, + }); + usePaintedDoorExperimentContext.mockReturnValueOnce({ + experimentVariation: '', + isPaintedDoorWidgetBtnVariation: false, + experimentLoading: false, + }); + + expect(shallow()).toMatchObject( + shallow(), + ); + }); + it('renders only LookingForChallengeWidget if experiment is loading', () => { + hooks.useRecommendationPanelData.mockReturnValueOnce({ + ...defaultValues, + isFailed: true, + }); + usePaintedDoorExperimentContext.mockReturnValueOnce({ + experimentVariation: '', + isPaintedDoorWidgetBtnVariation: false, + experimentLoading: true, + }); + + expect(shallow()).toMatchObject( + shallow(), + ); }); - expect(shallow()).toMatchObject( - shallow(), - ); }); });