From b41eee47c9b94fa2f5f26f639ddba2cabe49b812 Mon Sep 17 00:00:00 2001 From: Ben Warzeski Date: Wed, 23 Aug 2023 11:53:19 -0400 Subject: [PATCH] Bw/recommendations painted door exp (#197) Co-authored-by: Syed Sajjad Hussain Shah --- .env | 1 + .env.test | 1 + public/index.html | 9 ++ src/App.jsx | 33 ++-- src/App.test.jsx | 67 ++++---- src/__snapshots__/App.test.jsx.snap | 58 ++++--- .../CollapsedHeader/CollapseMenuBody.jsx | 5 +- .../CollapseMenuBody.test.jsx.snap | 6 + .../__snapshots__/index.test.jsx.snap | 3 + .../ExpandedHeader/index.jsx | 4 +- .../__snapshots__/index.test.jsx.snap | 29 ++++ .../WidgetContainers/AppWrapper/index.jsx | 25 +++ .../AppWrapper/index.test.jsx | 56 +++++++ .../__snapshots__/index.test.jsx.snap | 8 + .../WidgetContainers/WidgetNavbar/index.jsx | 29 ++++ .../WidgetNavbar/index.test.jsx | 65 ++++++++ .../PaintedDoorExperimentContext.jsx | 123 ++++++++++++++ .../PaintedDoorExperimentContext.test.jsx | 151 ++++++++++++++++++ .../__snapshots__/index.test.jsx.snap | 14 ++ .../components/NavbarButton.jsx | 31 ++++ .../__snapshots__/index.test.jsx.snap | 52 ++++++ .../components/PaintedDoorModal/hooks.js | 18 +++ .../components/PaintedDoorModal/hooks.test.js | 30 ++++ .../components/PaintedDoorModal/index.jsx | 70 ++++++++ .../components/PaintedDoorModal/index.scss | 15 ++ .../PaintedDoorModal/index.test.jsx | 22 +++ .../components/RecommendationsPanelButton.jsx | 25 +++ .../constants.js | 3 + .../RecommendationsPaintedDoorBtn/index.jsx | 44 +++++ .../index.test.jsx | 95 +++++++++++ .../RecommendationsPaintedDoorBtn/messages.js | 41 +++++ .../RecommendationsPaintedDoorBtn/track.js | 35 ++++ .../track.test.js | 58 +++++++ .../RecommendationsPanel/LoadedView.jsx | 30 ++-- .../RecommendationsPanel/LoadedView.test.jsx | 45 +++++- .../__snapshots__/LoadedView.test.jsx.snap | 30 ++-- 36 files changed, 1230 insertions(+), 101 deletions(-) create mode 100644 src/containers/WidgetContainers/AppWrapper/__snapshots__/index.test.jsx.snap create mode 100644 src/containers/WidgetContainers/AppWrapper/index.jsx create mode 100644 src/containers/WidgetContainers/AppWrapper/index.test.jsx create mode 100644 src/containers/WidgetContainers/WidgetNavbar/__snapshots__/index.test.jsx.snap create mode 100644 src/containers/WidgetContainers/WidgetNavbar/index.jsx create mode 100644 src/containers/WidgetContainers/WidgetNavbar/index.test.jsx create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext.jsx create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext.test.jsx create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/__snapshots__/index.test.jsx.snap create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/components/NavbarButton.jsx create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/__snapshots__/index.test.jsx.snap create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/hooks.js create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/hooks.test.js create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/index.jsx create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/index.scss create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/index.test.jsx create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/components/RecommendationsPanelButton.jsx create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/constants.js create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/index.jsx create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/index.test.jsx create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/messages.js create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/track.js create mode 100644 src/widgets/RecommendationsPaintedDoorBtn/track.test.js diff --git a/.env b/.env index cefce3e..2291ec6 100644 --- a/.env +++ b/.env @@ -41,3 +41,4 @@ ACCOUNT_PROFILE_URL='' ENABLE_NOTICES='' CAREER_LINK_URL='' OPTIMIZELY_FULL_STACK_SDK_KEY='' +EXPERIMENT_08_23_VAN_PAINTED_DOOR=true diff --git a/.env.test b/.env.test index c88e5fc..09cf4b3 100644 --- a/.env.test +++ b/.env.test @@ -47,3 +47,4 @@ ACCOUNT_PROFILE_URL='http://account-profile-url.test' ENABLE_NOTICES='' CAREER_LINK_URL='' OPTIMIZELY_FULL_STACK_SDK_KEY='SDK Key' +EXPERIMENT_08_23_VAN_PAINTED_DOOR=true diff --git a/public/index.html b/public/index.html index ba091dc..cfe5611 100755 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,15 @@ + <% if (process.env.OPTIMIZELY_URL) { %> + + <% } else if (process.env.OPTIMIZELY_PROJECT_ID) { %> + + <% } %>
diff --git a/src/App.jsx b/src/App.jsx index 353340c..6e0b6de 100755 --- a/src/App.jsx +++ b/src/App.jsx @@ -24,10 +24,11 @@ import { ExperimentProvider } from 'ExperimentContext'; import track from 'tracking'; import fakeData from 'data/services/lms/fakeData/courses'; -import LearnerDashboardHeader from './containers/LearnerDashboardHeader'; + +import AppWrapper from 'containers/WidgetContainers/AppWrapper'; +import LearnerDashboardHeader from 'containers/LearnerDashboardHeader'; import messages from './messages'; - import './App.scss'; export const App = () => { @@ -78,19 +79,21 @@ export const App = () => { {formatMessage(messages.pageTitle)}
- -
- {hasNetworkFailure - ? ( - - - - ) : ( - - - - )} -
+ + +
+ {hasNetworkFailure + ? ( + + + + ) : ( + + + + )} +
+
diff --git a/src/App.test.jsx b/src/App.test.jsx index a5eb23f..a452afb 100644 --- a/src/App.test.jsx +++ b/src/App.test.jsx @@ -1,18 +1,15 @@ import React from 'react'; -import { shallow } from 'enzyme'; import { Helmet } from 'react-helmet'; -import { ErrorPage } from '@edx/frontend-platform/react'; - -import { BrowserRouter as Router } from 'react-router-dom'; +import { shallow } from '@edx/react-unit-test-utils'; import Footer from '@edx/frontend-component-footer'; import { useIntl } from '@edx/frontend-platform/i18n'; -import { Alert } from '@edx/paragon'; import { RequestKeys } from 'data/constants/requests'; import { reduxHooks } from 'hooks'; import Dashboard from 'containers/Dashboard'; import LearnerDashboardHeader from 'containers/LearnerDashboardHeader'; +import AppWrapper from 'containers/WidgetContainers/AppWrapper'; import { ExperimentProvider } from 'ExperimentContext'; import { App } from './App'; import messages from './messages'; @@ -25,6 +22,7 @@ jest.mock('components/ZendeskFab', () => 'ZendeskFab'); jest.mock('ExperimentContext', () => ({ ExperimentProvider: 'ExperimentProvider', })); +jest.mock('containers/WidgetContainers/AppWrapper', () => 'AppWrapper'); jest.mock('data/redux', () => ({ selectors: 'redux.selectors', actions: 'redux.actions', @@ -53,18 +51,26 @@ describe('App router component', () => { const { formatMessage } = useIntl(); describe('component', () => { const runBasicTests = () => { - test('snapshot', () => { expect(el).toMatchSnapshot(); }); + test('snapshot', () => { expect(el.snapshot).toMatchSnapshot(); }); it('displays title in helmet component', () => { - expect(el.find(Helmet).find('title').text()).toEqual(useIntl().formatMessage(messages.pageTitle)); + const control = el.instance + .findByType(Helmet)[0] + .findByType('title')[0]; + expect(control.children[0].el).toEqual(formatMessage(messages.pageTitle)); }); it('displays learner dashboard header', () => { - expect(el.find(LearnerDashboardHeader).length).toEqual(1); + expect(el.instance.findByType(LearnerDashboardHeader).length).toEqual(1); }); it('wraps the page in a browser router', () => { - expect(el.find(Router)).toMatchObject(el); + expect(el.instance.el.type).toEqual('BrowserRouter'); }); test('Footer logo drawn from env variable', () => { - expect(el.find(Footer).props().logo).toEqual(logo); + expect(el.instance.findByType(Footer)[0].props.logo).toEqual(logo); + }); + it('wraps the header and main components in an AppWrapper widget container', () => { + const container = el.instance.findByType(AppWrapper)[0]; + expect(container.children[0].type).toEqual('LearnerDashboardHeader'); + expect(container.children[1].type).toEqual('main'); }); }; describe('no network failure', () => { @@ -74,9 +80,14 @@ describe('App router component', () => { }); runBasicTests(); it('loads dashboard', () => { - expect(el.find('main')).toMatchObject(shallow( -
, - )); + const main = el.instance.findByType('main')[0]; + expect(main.children.length).toEqual(1); + const expProvider = main.children[0]; + expect(expProvider.type).toEqual('ExperimentProvider'); + expect(expProvider.children.length).toEqual(1); + expect( + expProvider.matches(shallow()), + ).toEqual(true); }); }); describe('initialize failure', () => { @@ -86,13 +97,14 @@ describe('App router component', () => { }); runBasicTests(); it('loads error page', () => { - expect(el.find('main')).toEqual(shallow( -
- - - -
, - )); + const main = el.instance.findByType('main')[0]; + expect(main.children.length).toEqual(1); + const alert = main.children[0]; + expect(alert.type).toEqual('Alert'); + expect(alert.children.length).toEqual(1); + const errorPage = alert.children[0]; + expect(errorPage.type).toEqual('ErrorPage'); + expect(errorPage.props.message).toEqual(formatMessage(messages.errorMessage, { supportEmail })); }); }); describe('refresh failure', () => { @@ -102,13 +114,14 @@ describe('App router component', () => { }); runBasicTests(); it('loads error page', () => { - expect(el.find('main')).toEqual(shallow( -
- - - -
, - )); + const main = el.instance.findByType('main')[0]; + expect(main.children.length).toEqual(1); + const alert = main.children[0]; + expect(alert.type).toEqual('Alert'); + expect(alert.children.length).toEqual(1); + const errorPage = alert.children[0]; + expect(errorPage.type).toEqual('ErrorPage'); + expect(errorPage.props.message).toEqual(formatMessage(messages.errorMessage, { supportEmail })); }); }); }); diff --git a/src/__snapshots__/App.test.jsx.snap b/src/__snapshots__/App.test.jsx.snap index cec5dc8..8d4d2dd 100644 --- a/src/__snapshots__/App.test.jsx.snap +++ b/src/__snapshots__/App.test.jsx.snap @@ -11,16 +11,18 @@ exports[`App router component component initialize failure snapshot 1`] = `
- -
- - - -
+ + +
+ + + +
+