ProgressTableLessonNumber

apps/src/templates/sectionProgress/SectionProgressLessonNumberCell.jsx

@@ -5,6 +5,11 @@ import Radium from 'radium';
 import {progressStyles} from './multiGridConstants';
 import FontAwesome from '../FontAwesome';
 
+/**
+ * Note: this component is being deprecated in favor of
+ * ProgressTableLessonNumber and will be removed soon.
+ */
+
 class SectionProgressLessonNumberCell extends Component {
   static propTypes = {
     // Sequence number counting all stage types in order

apps/src/templates/sectionProgress/progressTables/ProgressTableLessonNumber.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
+import Radium from 'radium';
+import FontAwesome from '@cdo/apps/templates/FontAwesome';
+import color from '@cdo/apps/util/color';
+import * as progressStyles from '@cdo/apps/templates/progress/progressStyles';
+
+const styles = {
+  container: {
+    ...progressStyles.flex,
+    ...progressStyles.font,
+    color: color.charcoal,
+    ':hover': {
+      cursor: 'pointer'
+    },
+    textAlign: 'center',
+    height: '100%',
+    padding: '0px 10px'
+  },
+  highlight: {
+    backgroundColor: color.teal,
+    color: color.white,
+    fontSize: 18
+  },
+  arrowContainer: {
+    width: '100%',
+    ...progressStyles.flex
+  },
+  line: {
+    ...progressStyles.inlineBlock,
+    width: '100%',
+    height: 0,
+    border: '1px solid ',
+    margin: '0px -7px 0px 4px'
+  },
+  arrow: {
+    ...progressStyles.inlineBlock,
+    borderStyle: 'solid',
+    borderWidth: '0px 2px 2px 0px',
+    width: 6,
+    height: 6,
+    transform: 'rotate(-45deg)',
+    WebkitTransform: 'rotate(-45deg)'
+  },
+  icon: {
+    paddingRight: 5
+  }
+};
+
+const LessonArrow = () => {
+  return (
+    <span style={styles.arrowContainer}>
+      <span style={styles.line} />
+      <span style={styles.arrow} />
+    </span>
+  );
+};
+
+class ProgressTableLessonNumber extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    number: PropTypes.number.isRequired,
+    lockable: PropTypes.bool.isRequired,
+    highlighted: PropTypes.bool.isRequired,
+    onClick: PropTypes.func.isRequired,
+    includeArrow: PropTypes.bool,
+    isAssessment: PropTypes.bool
+  };
+
+  tooltipId() {
+    return `tooltipForLesson${this.props.number}`;
+  }
+
+  renderTooltip() {
+    const id = this.tooltipId();
+    return (
+      <ReactTooltip
+        id={id}
+        key={id}
+        role="tooltip"
+        wrapper="span"
+        effect="solid"
+      >
+        {this.props.isAssessment && (
+          <FontAwesome icon="check-circle" style={styles.icon} />
+        )}
+        {this.props.name}
+      </ReactTooltip>
+    );
+  }
+
+  render() {
+    const {number, lockable, highlighted, includeArrow, onClick} = this.props;
+
+    const highlightStyle = highlighted ? styles.highlight : {};
+    return (
+      <div
+        style={{...styles.container, ...highlightStyle}}
+        onClick={onClick}
+        data-tip
+        data-for={this.tooltipId()}
+      >
+        {this.renderTooltip()}
+        {lockable ? <FontAwesome icon="lock" /> : number}
+        {includeArrow && <LessonArrow />}
+      </div>
+    );
+  }
+}
+
+export const unitTestExports = {
+  LessonArrow
+};
+
+export default Radium(ProgressTableLessonNumber);

apps/test/unit/templates/sectionProgress/progressTables/ProgressTableLessonNumberTest.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {expect} from '../../../../util/reconfiguredChai';
+import {shallow} from 'enzyme';
+import ProgressTableLessonNumber, {
+  unitTestExports
+} from '@cdo/apps/templates/sectionProgress/progressTables/ProgressTableLessonNumber';
+import FontAwesome from '@cdo/apps/templates/FontAwesome';
+import ReactTooltip from 'react-tooltip';
+import sinon from 'sinon';
+import color from '@cdo/apps/util/color';
+
+const DEFAULT_PROPS = {
+  name: 'Intro to Problem Solving',
+  number: 1,
+  lockable: false,
+  highlighted: false,
+  onClick: () => {},
+  includeArrow: false,
+  isAssessment: false
+};
+
+const setUp = (overrideProps = {}) => {
+  const props = {...DEFAULT_PROPS, ...overrideProps};
+  return shallow(<ProgressTableLessonNumber {...props} />);
+};
+
+describe('ProgressTableLessonNumber', () => {
+  it('renders tooltip with an icon if isAssessment is true', () => {
+    const wrapper = setUp({isAssessment: true});
+    const tooltipIcon = wrapper.find({icon: 'check-circle'});
+    expect(tooltipIcon).to.have.length(1);
+  });
+
+  it('renders tooltip without an icon if isAssessment is false', () => {
+    const wrapper = setUp({isAssessment: false});
+    const tooltipIcon = wrapper.find({icon: 'check-circle'});
+    expect(tooltipIcon).to.have.length(0);
+  });
+
+  it('renders the name in the tooltip', () => {
+    const wrapper = setUp();
+    const tooltipComponent = wrapper.find(ReactTooltip);
+    expect(tooltipComponent.contains(DEFAULT_PROPS.name)).to.be.true;
+  });
+
+  it('calls onClick when clicked', () => {
+    const onClickSpy = sinon.spy();
+    const wrapper = setUp({onClick: onClickSpy});
+    wrapper.simulate('click');
+    expect(onClickSpy).to.have.been.called;
+  });
+
+  it('displays highlighed styles when highlighted is true', () => {
+    const wrapper = setUp({highlighted: true});
+    expect(wrapper.props().style.backgroundColor).to.equal(color.teal);
+  });
+
+  it('displays line and arrow when includeArrow is true', () => {
+    const wrapper = setUp({includeArrow: true});
+    expect(wrapper.find(unitTestExports.LessonArrow)).to.have.length(1);
+  });
+
+  it('displays the lock icon if lockable is true', () => {
+    const wrapper = setUp({lockable: true});
+    const lockIcon = wrapper.find(FontAwesome).find({icon: 'lock'});
+    expect(lockIcon).to.have.length(1);
+  });
+
+  it('displays number if lockable is false', () => {
+    const wrapper = setUp({lockable: false});
+    const lockIcon = wrapper.find(FontAwesome).find({icon: 'lock'});
+    expect(lockIcon).to.have.length(0);
+    expect(wrapper.contains(DEFAULT_PROPS.number)).to.be.true;
+  });
+});

apps/test/unit/templates/sectionProgress/progressTables/ProgressTableStudentNameTest.jsx

@@ -18,16 +18,16 @@ describe('ProgressTableStudentName', () => {
     const props = {...DEFAULT_PROPS, lastTimestamp: null};
     const wrapper = shallow(<ProgressTableStudentName {...props} />);
     const tooltip = wrapper.find('#tooltipIdForStudent1');
-    expect(tooltip.contains('Last Progress:')).to.equal(true);
-    expect(tooltip.contains('None')).to.equal(true);
+    expect(tooltip.contains('Last Progress:')).to.be.true;
+    expect(tooltip.contains('None')).to.be.true;
   });
 
   it('renders tooltip with timestamp when lastTimeStamp is present', () => {
     const props = {...DEFAULT_PROPS, lastTimestamp: 1578646800000};
     const wrapper = shallow(<ProgressTableStudentName {...props} />);
     const tooltip = wrapper.find('#tooltipIdForStudent1');
-    expect(tooltip.contains('Last Progress:')).to.equal(true);
-    expect(tooltip.contains('01/10/2020')).to.equal(true);
+    expect(tooltip.contains('Last Progress:')).to.be.true;
+    expect(tooltip.contains('01/10/2020')).to.be.true;
   });
 
   it('renders tooltip with timestamp in correct locale when lastTimeStamp and localeCode are present', () => {
@@ -38,14 +38,14 @@ describe('ProgressTableStudentName', () => {
     };
     const wrapper = shallow(<ProgressTableStudentName {...props} />);
     const tooltip = wrapper.find('#tooltipIdForStudent1');
-    expect(tooltip.contains('Last Progress:')).to.equal(true);
-    expect(tooltip.contains('10/01/2020')).to.equal(true);
+    expect(tooltip.contains('Last Progress:')).to.be.true;
+    expect(tooltip.contains('10/01/2020')).to.be.true;
   });
 
   it('renders name as a link to studentUrl', () => {
     const wrapper = shallow(<ProgressTableStudentName {...DEFAULT_PROPS} />);
     const link = wrapper.find('a[href="/student-link"]');
     expect(link).to.have.lengthOf(1);
-    expect(link.contains(DEFAULT_PROPS.name)).to.equal(true);
+    expect(link.contains(DEFAULT_PROPS.name)).to.be.true;
   });
 });