Bw/recommendations painted door exp (#197)

Co-authored-by: Syed Sajjad  Hussain Shah <ssajjad@2u.com>

src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx

@@ -4,14 +4,14 @@ import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
-
 import { Button, Badge } from '@edx/paragon';
 
+import WidgetNavbar from 'containers/WidgetContainers/WidgetNavbar';
 import urls from 'data/services/lms/urls';
 import { reduxHooks } from 'hooks';
+import { COLLAPSED_NAVBAR } from 'widgets/RecommendationsPaintedDoorBtn/constants';
 
 import { findCoursesNavDropdownClicked } from '../hooks';
-
 import messages from '../messages';
 
 export const CollapseMenuBody = ({ isOpen }) => {
@@ -40,6 +40,7 @@ export const CollapseMenuBody = ({ isOpen }) => {
         >
           {formatMessage(messages.discoverNew)}
         </Button>
+        <WidgetNavbar placement={COLLAPSED_NAVBAR} />
         <Button as="a" href={getConfig().SUPPORT_URL} variant="inverse-primary">
           {formatMessage(messages.help)}
         </Button>

src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/CollapseMenuBody.test.jsx.snap

@@ -26,6 +26,9 @@ exports[`CollapseMenuBody render 1`] = `
   >
     Discover New
   </Button>
+  <WidgetNavbar
+    placement="collapsedNavbar"
+  />
   <Button
     as="a"
     href="http://localhost:18000/support"
@@ -92,6 +95,9 @@ exports[`CollapseMenuBody render unauthenticated 1`] = `
   >
     Discover New
   </Button>
+  <WidgetNavbar
+    placement="collapsedNavbar"
+  />
   <Button
     as="a"
     href="http://localhost:18000/support"

src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/index.test.jsx.snap

@@ -33,6 +33,9 @@ exports[`ExpandedHeader render 1`] = `
     >
       Discover New
     </Button>
+    <WidgetNavbar
+      placement="expendedNavbar"
+    />
     <span
       className="flex-grow-1"
     />

src/containers/LearnerDashboardHeader/ExpandedHeader/index.jsx

@@ -4,11 +4,12 @@ import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';
 
+import WidgetNavbar from 'containers/WidgetContainers/WidgetNavbar';
 import urls from 'data/services/lms/urls';
 import { reduxHooks } from 'hooks';
+import { EXPANDED_NAVBAR } from 'widgets/RecommendationsPaintedDoorBtn/constants';
 
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
-
 import { useIsCollapsed, findCoursesNavClicked } from '../hooks';
 import messages from '../messages';
 import BrandLogo from '../BrandLogo';
@@ -51,6 +52,7 @@ export const ExpandedHeader = () => {
         >
           {formatMessage(messages.discoverNew)}
         </Button>
+        <WidgetNavbar placement={EXPANDED_NAVBAR} />
         <span className="flex-grow-1" />
         <Button
           as="a"

src/containers/WidgetContainers/AppWrapper/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppWrapper WidgetContainer component output no experiments are active snapshot 1`] = `
+<div>
+  This is some 
+  <b>
+    test
+  </b>
+   
+  <i>
+    content
+  </i>
+</div>
+`;
+
+exports[`AppWrapper WidgetContainer component output painted door experiment is active (08/23) snapshot 1`] = `
+<PaintedDoorExperimentProvider>
+  <div>
+    This is some 
+    <b>
+      test
+    </b>
+     
+    <i>
+      content
+    </i>
+  </div>
+</PaintedDoorExperimentProvider>
+`;

src/containers/WidgetContainers/AppWrapper/index.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import PaintedDoorExperimentProvider from 'widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
+
+export const AppWrapper = ({
+  children,
+}) => {
+  if (process.env.EXPERIMENT_08_23_VAN_PAINTED_DOOR) {
+    return (
+      <PaintedDoorExperimentProvider>
+        {children}
+      </PaintedDoorExperimentProvider>
+    );
+  }
+  return children;
+};
+AppWrapper.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node),
+  ]).isRequired,
+};
+
+export default AppWrapper;

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

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { shallow } from '@edx/react-unit-test-utils';
+
+import PaintedDoorExperimentProvider from 'widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
+
+import AppWrapper from '.';
+
+jest.mock(
+  'widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext',
+  () => 'PaintedDoorExperimentProvider',
+);
+
+let el;
+
+const children = (<div>This is some <b>test</b> <i>content</i></div>);
+
+const render = () => {
+  el = shallow(<AppWrapper>{children}</AppWrapper>);
+};
+
+const mockAndRenderForBlock = (newVal) => {
+  const oldVal = process.env;
+  beforeEach(() => {
+    process.env = { ...oldVal, ...newVal };
+    render();
+  });
+  afterEach(() => {
+    process.env = oldVal;
+    render();
+  });
+};
+
+describe('AppWrapper WidgetContainer component', () => {
+  describe('output', () => {
+    describe('painted door experiment is active (08/23)', () => {
+      mockAndRenderForBlock({ EXPERIMENT_08_23_VAN_PAINTED_DOOR: true });
+      test('snapshot', () => {
+        expect(el.snapshot).toMatchSnapshot();
+      });
+      it('renders children wrapped in PaintedDoorExperimentProvider', () => {
+        const control = el.instance.findByType(PaintedDoorExperimentProvider)[0];
+        expect(el.instance).toEqual(control);
+      });
+    });
+    describe('no experiments are active', () => {
+      mockAndRenderForBlock({ EXPERIMENT_08_23_VAN_PAINTED_DOOR: false });
+      test('snapshot', () => {
+        expect(el.snapshot).toMatchSnapshot();
+      });
+      it('renders children wrapped in PaintedDoorExperimentProvider', () => {
+        expect(el.instance.matches(shallow(children))).toEqual(true);
+      });
+    });
+  });
+});

src/containers/WidgetContainers/WidgetNavbar/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WidgetNavbar snapshots default 1`] = `
+<RecommendationsPaintedDoorBtn
+  experimentVariation=""
+  placement="expendedNavbar"
+/>
+`;

src/containers/WidgetContainers/WidgetNavbar/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import RecommendationsPaintedDoorBtn from 'widgets/RecommendationsPaintedDoorBtn';
+import { COLLAPSED_NAVBAR, EXPANDED_NAVBAR } from 'widgets/RecommendationsPaintedDoorBtn/constants';
+import {
+  usePaintedDoorExperimentContext,
+} from 'widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
+
+export const WidgetNavbar = ({ placement }) => {
+  const {
+    experimentVariation,
+    isPaintedDoorNavbarBtnVariation,
+    experimentLoading,
+  } = usePaintedDoorExperimentContext();
+
+  if (!experimentLoading && isPaintedDoorNavbarBtnVariation) {
+    return (
+      <RecommendationsPaintedDoorBtn placement={placement} experimentVariation={experimentVariation} />
+    );
+  }
+
+  return null;
+};
+
+WidgetNavbar.propTypes = {
+  placement: PropTypes.oneOf([COLLAPSED_NAVBAR, EXPANDED_NAVBAR]).isRequired,
+};
+
+export default WidgetNavbar;

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

@@ -0,0 +1,65 @@
+import { shallow } from 'enzyme';
+import {
+  usePaintedDoorExperimentContext,
+} from '../../../widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
+import WidgetNavbar from './index';
+import { EXPANDED_NAVBAR } from '../../../widgets/RecommendationsPaintedDoorBtn/constants';
+import RecommendationsPaintedDoorBtn from '../../../widgets/RecommendationsPaintedDoorBtn';
+
+jest.mock('widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext', () => ({
+  usePaintedDoorExperimentContext: jest.fn(),
+}));
+
+describe('WidgetNavbar', () => {
+  let mockExperimentContext = {
+    experimentVariation: '',
+    isPaintedDoorNavbarBtnVariation: true,
+    experimentLoading: false,
+  };
+  const props = {
+    placement: EXPANDED_NAVBAR,
+  };
+
+  describe('snapshots', () => {
+    test('default', () => {
+      usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
+      const wrapper = shallow(<WidgetNavbar {...props} />);
+
+      expect(usePaintedDoorExperimentContext).toHaveBeenCalled();
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  test('renders button if user in navbar variation', () => {
+    usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
+    const wrapper = shallow(<WidgetNavbar {...props} />);
+
+    expect(usePaintedDoorExperimentContext).toHaveBeenCalled();
+    expect(wrapper.type()).toBe(RecommendationsPaintedDoorBtn);
+  });
+
+  test('renders nothing if user in not in navbar variation', () => {
+    mockExperimentContext = {
+      ...mockExperimentContext,
+      isPaintedDoorNavbarBtnVariation: false,
+    };
+    usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
+    const wrapper = shallow(<WidgetNavbar {...props} />);
+
+    expect(usePaintedDoorExperimentContext).toHaveBeenCalled();
+    expect(wrapper.type()).toBeNull();
+  });
+
+  test('renders nothing if experiment is loading', () => {
+    mockExperimentContext = {
+      ...mockExperimentContext,
+      isPaintedDoorNavbarBtnVariation: false,
+      experimentLoading: true,
+    };
+    usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
+    const wrapper = shallow(<WidgetNavbar {...props} />);
+
+    expect(usePaintedDoorExperimentContext).toHaveBeenCalled();
+    expect(wrapper.type()).toBeNull();
+  });
+});