Merge pull request #32430 from code-dot-org/standards-csf-only

Standards toggle only shows for CSF courses
code-dot-org · Dec 19, 2019 · 2fc95f3 · 2fc95f3
2 parents 09166dd + 1967ba5
commit 2fc95f3
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 22 deletions.
diff --git a/apps/src/templates/sectionProgress/SectionProgress.jsx b/apps/src/templates/sectionProgress/SectionProgress.jsx
@@ -150,13 +150,14 @@ class SectionProgress extends Component {
 
     const levelDataInitialized = scriptData && !isLoadingProgress;
     const lessons = scriptData ? scriptData.stages : [];
+    const csfCourseSelected =
+      levelDataInitialized && !scriptData.excludeCsfColumnInLegend;
     const summaryStyle =
       currentView === ViewType.SUMMARY ? styles.show : styles.hide;
     const detailStyle =
       currentView === ViewType.DETAIL ? styles.show : styles.hide;
     const standardsStyle =
       currentView === ViewType.STANDARDS ? styles.show : styles.hide;
-
     return (
       <div>
         <div style={styles.topRowContainer}>
@@ -170,11 +171,12 @@ class SectionProgress extends Component {
               onChange={this.onChangeScript}
             />
           </div>
-          <div style={styles.toggle}>
-            <div style={{...h3Style, ...styles.heading}}>{i18n.viewBy()}</div>
-            <SectionProgressToggle />
-          </div>
-
+          {levelDataInitialized && (
+            <div style={styles.toggle}>
+              <div style={{...h3Style, ...styles.heading}}>{i18n.viewBy()}</div>
+              <SectionProgressToggle showStandardsToggle={csfCourseSelected} />
+            </div>
+          )}
           {currentView === ViewType.DETAIL && lessons.length !== 0 && (
             <LessonSelector lessons={lessons} onChange={this.onChangeLevel} />
           )}
@@ -201,7 +203,7 @@ class SectionProgress extends Component {
           )}
           {levelDataInitialized && this.renderTooltips()}
           {experiments.isEnabled(experiments.STANDARDS_REPORT) && (
-            <div style={standardsStyle}>
+            <div id="uitest-standards-view" style={standardsStyle}>
               <StandardsView
                 showStandardsIntroDialog={
                   currentView === ViewType.STANDARDS && showStandardsIntroDialog

diff --git a/apps/src/templates/sectionProgress/SectionProgressToggle.jsx b/apps/src/templates/sectionProgress/SectionProgressToggle.jsx
@@ -22,6 +22,8 @@ const styles = {
  */
 class SectionProgressToggle extends React.Component {
   static propTypes = {
+    showStandardsToggle: PropTypes.bool,
+    // Redux provided
     currentView: PropTypes.string.isRequired,
     setCurrentView: PropTypes.func.isRequired,
     sectionId: PropTypes.number
@@ -45,8 +47,7 @@ class SectionProgressToggle extends React.Component {
   };
 
   render() {
-    const {currentView} = this.props;
-
+    const {currentView, showStandardsToggle} = this.props;
     return (
       <ToggleGroup
         selected={currentView}
@@ -68,15 +69,17 @@ class SectionProgressToggle extends React.Component {
         >
           <div>{i18n.levels()}</div>
         </button>
-        {experiments.isEnabled(experiments.STANDARDS_REPORT) && (
-          <button
-            type="button"
-            value={ViewType.STANDARDS}
-            style={styles.toggleButton}
-          >
-            <div>{i18n.standards()}</div>
-          </button>
-        )}
+        {experiments.isEnabled(experiments.STANDARDS_REPORT) &&
+          showStandardsToggle && (
+            <button
+              type="button"
+              value={ViewType.STANDARDS}
+              style={styles.toggleButton}
+              id="uitest-standards-toggle"
+            >
+              <div>{i18n.standards()}</div>
+            </button>
+          )}
       </ToggleGroup>
     );
   }

diff --git a/apps/src/templates/sectionProgress/SectionProgressToggle.story.jsx b/apps/src/templates/sectionProgress/SectionProgressToggle.story.jsx
@@ -31,7 +31,22 @@ export default storybook => {
     };
   }
 
+  function isStandardsTrue() {
+    return {
+      name: 'Standards view toggle on',
+      story: () => (
+        <SectionProgressToggle
+          currentView={ViewType.STANDARDS}
+          showStandardsToggle={true}
+          setCurrentView={() => {
+            console.log('Toggle view.');
+          }}
+        />
+      )
+    };
+  }
+
   storybook
     .storiesOf('Progress/SectionProgressToggle', module)
-    .addStoryTable([isSummaryTrue(), isSummaryFalse()]);
+    .addStoryTable([isSummaryTrue(), isSummaryFalse(), isStandardsTrue()]);
 };
diff --git a/apps/test/unit/templates/sectionProgress/SectionProgressTest.js b/apps/test/unit/templates/sectionProgress/SectionProgressTest.js
@@ -3,6 +3,8 @@ import {shallow} from 'enzyme';
 import {expect} from '../../../util/reconfiguredChai';
 import {UnconnectedSectionProgress} from '@cdo/apps/templates/sectionProgress/SectionProgress';
 import {ViewType} from '@cdo/apps/templates/sectionProgress/sectionProgressRedux';
+import sinon from 'sinon';
+import experiments from '@cdo/apps/util/experiments';
 
 const studentData = [
   {id: 1, name: 'studentb'},
@@ -35,7 +37,7 @@ describe('SectionProgress', () => {
             levels: [{id: 789}]
           }
         ],
-        excludeCsfColumnInLegend: true
+        excludeCsfColumnInLegend: false
       },
       isLoadingProgress: false,
       scriptFriendlyName: 'My Script',
@@ -55,12 +57,12 @@ describe('SectionProgress', () => {
     expect(wrapper.find('#uitest-spinner').exists()).to.be.false;
   });
 
-  it('summary view shows summary view and legend', () => {
+  it('shows summary view', () => {
     const wrapper = shallow(<UnconnectedSectionProgress {...DEFAULT_PROPS} />);
     expect(wrapper.find('#uitest-summary-view').exists()).to.be.true;
   });
 
-  it('detail view shows detail view and legend', () => {
+  it('shows detail view', () => {
     const wrapper = shallow(
       <UnconnectedSectionProgress
         {...DEFAULT_PROPS}
@@ -69,4 +71,16 @@ describe('SectionProgress', () => {
     );
     expect(wrapper.find('#uitest-detail-view').exists()).to.be.true;
   });
+
+  it('shows standards view', () => {
+    sinon.stub(experiments, 'isEnabled').returns(true);
+    const wrapper = shallow(
+      <UnconnectedSectionProgress
+        {...DEFAULT_PROPS}
+        currentView={ViewType.STANDARDS}
+      />
+    );
+    expect(wrapper.find('#uitest-standards-view').exists()).to.be.true;
+    experiments.isEnabled.restore();
+  });
 });
diff --git a/apps/test/unit/templates/sectionProgress/SectionProgressToggleTest.js b/apps/test/unit/templates/sectionProgress/SectionProgressToggleTest.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+import {expect} from '../../../util/reconfiguredChai';
+import {UnconnectedSectionProgressToggle} from '@cdo/apps/templates/sectionProgress/SectionProgressToggle';
+import {ViewType} from '@cdo/apps/templates/sectionProgress/sectionProgressRedux';
+import sinon from 'sinon';
+import experiments from '@cdo/apps/util/experiments';
+
+describe('SectionProgressToggle', () => {
+  let DEFAULT_PROPS;
+
+  beforeEach(() => {
+    DEFAULT_PROPS = {
+      showStandardsToggle: true,
+      setCurrentView: () => {},
+      sectionId: 1,
+      currentView: ViewType.STANDARDS
+    };
+  });
+
+  it('standards toggle shows for CSF', () => {
+    sinon.stub(experiments, 'isEnabled').returns(true);
+    const wrapper = mount(
+      <UnconnectedSectionProgressToggle {...DEFAULT_PROPS} />
+    );
+    expect(wrapper.find('#uitest-standards-toggle').exists()).to.be.true;
+    experiments.isEnabled.restore();
+  });
+
+  it('standards toggle does not shows for non-CSF', () => {
+    sinon.stub(experiments, 'isEnabled').returns(true);
+    const wrapper = shallow(
+      <UnconnectedSectionProgressToggle
+        {...DEFAULT_PROPS}
+        showStandardsToggle={false}
+      />
+    );
+    expect(wrapper.find('#uitest-standards-toggle').exists()).to.be.false;
+    experiments.isEnabled.restore();
+  });
+});