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/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(
),
- );
});
});