Showing Course rather than Courses (or program/s) when there is only …

…1 to display (#2139)

* test update

* add comment description

frontend/public/src/containers/pages/CatalogPage.js

@@ -561,6 +561,25 @@ export class CatalogPage extends React.Component<Props> {
     } else return 0
   }
 
+  /**
+   * Returns the html for the catalog count based on the selected tab, either Courses or Programs.
+   * This return is singular or plural based on the count.
+   * @returns {Element}
+   */
+  renderCatalogCount() {
+    const count =
+      this.state.tabSelected === PROGRAMS_TAB
+        ? this.renderNumberOfCatalogPrograms()
+        : this.renderNumberOfCatalogCourses()
+    const tab = this.state.tabSelected
+    return (
+      <h2 className="catalog-count">
+        {/* Hidden on small screens. */}
+        {count} {count > 1 ? tab : tab.slice(0, -1)}
+      </h2>
+    )
+  }
+
   /**
    * Renders a single course catalog card.
    * @param {CourseDetailWithRuns} course The course instance used to populate the card.
@@ -793,14 +812,7 @@ export class CatalogPage extends React.Component<Props> {
                           timeout={300}
                           classNames="count"
                         >
-                          <h2>
-                            {/* Hidden on small screens. */}
-                            {/* Could add logic to display only "course" if only 1 course is showing. */}
-                            {this.state.tabSelected === PROGRAMS_TAB
-                              ? this.renderNumberOfCatalogPrograms()
-                              : this.renderNumberOfCatalogCourses()}{" "}
-                            {this.state.tabSelected}
-                          </h2>
+                          {this.renderCatalogCount()}
                         </CSSTransition>
                       </TransitionGroup>
                     </div>

frontend/public/src/containers/pages/CatalogPage_test.js

@@ -882,4 +882,36 @@ describe("CatalogPage", function() {
       JSON.stringify([displayedProgram, newProgram])
     )
   })
+
+  it("renderCatalogCount is plural for more than one course", async () => {
+    const { inner } = await renderPage()
+    inner.setState({ tabSelected: "courses" })
+    inner.setState({ selectedDepartment: "All Departments" })
+    inner.setState({ allCoursesCount: 2 })
+    expect(inner.find("h2.catalog-count").text()).equals("2 courses")
+  })
+
+  it("renderCatalogCount is plural for more than one program", async () => {
+    const { inner } = await renderPage()
+    inner.setState({ tabSelected: "programs" })
+    inner.setState({ selectedDepartment: "All Departments" })
+    inner.setState({ allProgramsCount: 2 })
+    expect(inner.find("h2.catalog-count").text()).equals("2 programs")
+  })
+
+  it("renderCatalogCount is singular for one course", async () => {
+    const { inner } = await renderPage()
+    inner.setState({ tabSelected: "courses" })
+    inner.setState({ selectedDepartment: "All Departments" })
+    inner.setState({ allCoursesCount: 1 })
+    expect(inner.find("h2.catalog-count").text()).equals("1 course")
+  })
+
+  it("renderCatalogCount is singular for one program", async () => {
+    const { inner } = await renderPage()
+    inner.setState({ tabSelected: "programs" })
+    inner.setState({ selectedDepartment: "All Departments" })
+    inner.setState({ allProgramsCount: 1 })
+    expect(inner.find("h2.catalog-count").text()).equals("1 program")
+  })
 })