feat: Implemented product recommendations experiment (#174)

src/containers/WidgetContainers/LoadedSidebar/index.jsx

@@ -5,9 +5,9 @@ import RecommendationsPanel from 'widgets/RecommendationsPanel';
 import hooks from 'widgets/ProductRecommendations/hooks';
 
 export const WidgetSidebar = ({ setSidebarShowing }) => {
-  const { shouldShowFooter } = hooks.useShowRecommendationsFooter();
+  const { inRecommendationsVariant, isExperimentActive } = hooks.useShowRecommendationsFooter();
 
-  if (!shouldShowFooter) {
+  if (!inRecommendationsVariant && isExperimentActive) {
     setSidebarShowing(true);
 
     return (

src/containers/WidgetContainers/LoadedSidebar/index.test.jsx

@@ -18,19 +18,31 @@ describe('WidgetSidebar', () => {
   describe('snapshots', () => {
     test('default', () => {
       hooks.useShowRecommendationsFooter.mockReturnValueOnce(
-        mockFooterRecommendationsHook.dontShowOrLoad,
+        mockFooterRecommendationsHook.activeControl,
       );
       const wrapper = shallow(<WidgetSidebar {...props} />);
+
       expect(props.setSidebarShowing).toHaveBeenCalledWith(true);
       expect(wrapper).toMatchSnapshot();
     });
   });
 
-  test('is hidden if footer is shown', () => {
+  test('is hidden when the has the default values', () => {
     hooks.useShowRecommendationsFooter.mockReturnValueOnce(
-      mockFooterRecommendationsHook.showDontLoad,
+      mockFooterRecommendationsHook.default,
     );
     const wrapper = shallow(<WidgetSidebar {...props} />);
+
+    expect(props.setSidebarShowing).not.toHaveBeenCalled();
+    expect(wrapper.type()).toBeNull();
+  });
+
+  test('is hidden when the has the treatment values', () => {
+    hooks.useShowRecommendationsFooter.mockReturnValueOnce(
+      mockFooterRecommendationsHook.activeTreatment,
+    );
+    const wrapper = shallow(<WidgetSidebar {...props} />);
+
     expect(props.setSidebarShowing).not.toHaveBeenCalled();
     expect(wrapper.type()).toBeNull();
   });

src/containers/WidgetContainers/NoCoursesSidebar/index.jsx

@@ -5,9 +5,9 @@ import RecommendationsPanel from 'widgets/RecommendationsPanel';
 import hooks from 'widgets/ProductRecommendations/hooks';
 
 export const WidgetSidebar = ({ setSidebarShowing }) => {
-  const { shouldShowFooter } = hooks.useShowRecommendationsFooter();
+  const { inRecommendationsVariant, isExperimentActive } = hooks.useShowRecommendationsFooter();
 
-  if (!shouldShowFooter) {
+  if (!inRecommendationsVariant && isExperimentActive) {
     setSidebarShowing(true);
 
     return (

src/containers/WidgetContainers/NoCoursesSidebar/index.test.jsx

@@ -18,19 +18,31 @@ describe('WidgetSidebar', () => {
   describe('snapshots', () => {
     test('default', () => {
       hooks.useShowRecommendationsFooter.mockReturnValueOnce(
-        mockFooterRecommendationsHook.dontShowOrLoad,
+        mockFooterRecommendationsHook.activeControl,
       );
       const wrapper = shallow(<WidgetSidebar {...props} />);
+
       expect(props.setSidebarShowing).toHaveBeenCalledWith(true);
       expect(wrapper).toMatchSnapshot();
     });
   });
 
-  test('is hidden if footer is shown', () => {
+  test('is hidden when the has the default values', () => {
     hooks.useShowRecommendationsFooter.mockReturnValueOnce(
-      mockFooterRecommendationsHook.showDontLoad,
+      mockFooterRecommendationsHook.default,
     );
     const wrapper = shallow(<WidgetSidebar {...props} />);
+
+    expect(props.setSidebarShowing).not.toHaveBeenCalled();
+    expect(wrapper.type()).toBeNull();
+  });
+
+  test('is hidden when the has the treatment values', () => {
+    hooks.useShowRecommendationsFooter.mockReturnValueOnce(
+      mockFooterRecommendationsHook.activeTreatment,
+    );
+    const wrapper = shallow(<WidgetSidebar {...props} />);
+
     expect(props.setSidebarShowing).not.toHaveBeenCalled();
     expect(wrapper.type()).toBeNull();
   });

src/containers/WidgetContainers/WidgetFooter/index.jsx

@@ -4,9 +4,10 @@ import ProductRecommendations from 'widgets/ProductRecommendations';
 import hooks from 'widgets/ProductRecommendations/hooks';
 
 export const WidgetFooter = () => {
-  const { shouldShowFooter, shouldLoadFooter } = hooks.useShowRecommendationsFooter();
+  hooks.useActivateRecommendationsExperiment();
+  const { inRecommendationsVariant, isExperimentActive } = hooks.useShowRecommendationsFooter();
 
-  if (shouldShowFooter && shouldLoadFooter) {
+  if (inRecommendationsVariant && isExperimentActive) {
     return (
       <div className="widget-footer">
         <ProductRecommendations />

src/containers/WidgetContainers/WidgetFooter/index.test.jsx

@@ -6,6 +6,7 @@ import WidgetFooter from '.';
 
 jest.mock('widgets/LookingForChallengeWidget', () => 'LookingForChallengeWidget');
 jest.mock('widgets/ProductRecommendations/hooks', () => ({
+  useActivateRecommendationsExperiment: jest.fn(),
   useShowRecommendationsFooter: jest.fn(),
 }));
 
@@ -13,26 +14,32 @@ describe('WidgetFooter', () => {
   describe('snapshots', () => {
     test('default', () => {
       hooks.useShowRecommendationsFooter.mockReturnValueOnce(
-        mockFooterRecommendationsHook.showAndLoad,
+        mockFooterRecommendationsHook.activeTreatment,
       );
       const wrapper = shallow(<WidgetFooter />);
+
+      expect(hooks.useActivateRecommendationsExperiment).toHaveBeenCalled();
       expect(wrapper).toMatchSnapshot();
     });
   });
 
-  test('is hidden when shouldShowFooter is false but shouldLoadFooter is true', () => {
+  test('is hidden when the experiment has the default values', () => {
     hooks.useShowRecommendationsFooter.mockReturnValueOnce(
-      mockFooterRecommendationsHook.loadDontShow,
+      mockFooterRecommendationsHook.default,
     );
     const wrapper = shallow(<WidgetFooter />);
+
+    expect(hooks.useActivateRecommendationsExperiment).toHaveBeenCalled();
     expect(wrapper.type()).toBeNull();
   });
 
-  test('is hidden when shouldLoadFooter is false but shouldShowFooter is true', () => {
+  test('is hidden when the experiment has the control values', () => {
     hooks.useShowRecommendationsFooter.mockReturnValueOnce(
-      mockFooterRecommendationsHook.showDontLoad,
+      mockFooterRecommendationsHook.activeControl,
     );
     const wrapper = shallow(<WidgetFooter />);
+
+    expect(hooks.useActivateRecommendationsExperiment).toHaveBeenCalled();
     expect(wrapper.type()).toBeNull();
   });
 });