tests

frontend/public/src/components/Header.js

@@ -31,7 +31,11 @@ const Header = ({ currentUser, cartItemsCount, location }: Props) => {
   }
   return (
     <React.Fragment>
-      <TopBar currentUser={currentUser} cartItemsCount={cartItemsCount} location={location} />
+      <TopBar
+        currentUser={currentUser}
+        cartItemsCount={cartItemsCount}
+        location={location}
+      />
     </React.Fragment>
   )
 }

frontend/public/src/components/TopBar.js

@@ -18,7 +18,7 @@ type Props = {
   location: ?Location
 }
 
-const TopBar = ({ currentUser, cartItemsCount  }: Props) => {
+const TopBar = ({ currentUser, cartItemsCount }: Props) => {
   // Delay any alert displayed on page-load by 500ms in order to
   // ensure the alert is read by screen readers.
   const [showComponent, setShowComponent] = useState(false)
@@ -36,7 +36,6 @@ const TopBar = ({ currentUser, cartItemsCount  }: Props) => {
       currentUser.id :
       "anonymousUser"
   )
-  console.log(cartItemsCount)
   return (
     <header className="site-header d-flex d-flex flex-column">
       {showComponent ? (

frontend/public/src/components/TopBar_test.js

@@ -9,10 +9,11 @@ import { makeUser, makeAnonymousUser } from "../factories/user"
 describe("TopBar component", () => {
   describe("for anonymous users", () => {
     const user = makeAnonymousUser()
+    const cartItemsCount = 0
 
     it("has an AnonymousMenu component", () => {
       assert.isOk(
-        shallow(<TopBar currentUser={user} location={null} />)
+        shallow(<TopBar currentUser={user} cartItemsCount={cartItemsCount} location={null} />)
           .find("AnonymousMenu")
           .exists()
       )
@@ -21,9 +22,10 @@ describe("TopBar component", () => {
 
   describe("for logged in users", () => {
     const user = makeUser()
+    const cartItemsCount = 3
     it("has a UserMenu component", () => {
       assert.isOk(
-        shallow(<TopBar currentUser={user} location={null} />)
+        shallow(<TopBar currentUser={user} cartItemsCount={cartItemsCount} location={null} />)
           .find("UserMenu")
           .exists()
       )

frontend/public/src/containers/App.js

@@ -34,7 +34,7 @@ import type { Match, Location } from "react-router"
 import type { CurrentUser } from "../flow/authTypes"
 import {
   cartItemsCountQuery,
-  cartItemsCountSelector,
+  cartItemsCountSelector
 } from "../lib/queries/cart"
 
 type Props = {
@@ -72,7 +72,11 @@ export class App extends React.Component<Props, void> {
 
     return (
       <div className="app" aria-flowto="notifications-container">
-        <Header currentUser={currentUser} cartItemsCount={cartItemsCount} location={location} />
+        <Header
+          currentUser={currentUser}
+          cartItemsCount={cartItemsCount}
+          location={location}
+        />
         <div id="main" className="main-page-content">
           <Switch>
             <Route
@@ -141,17 +145,14 @@ export class App extends React.Component<Props, void> {
 
 const mapStateToProps = createStructuredSelector({
   currentUser:    currentUserSelector,
-  cartItemsCount: cartItemsCountSelector,
+  cartItemsCount: cartItemsCountSelector
 })
 
 const mapDispatchToProps = {
   addUserNotification
 }
 
-const mapPropsToConfig = () => [
-  cartItemsCountQuery(),
-  users.currentUserQuery()
-]
+const mapPropsToConfig = () => [cartItemsCountQuery(), users.currentUserQuery()]
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   connectRequest(mapPropsToConfig)

frontend/public/src/containers/HeaderApp.js

@@ -15,9 +15,11 @@ import {
 
 import type { Store } from "redux"
 import type { CurrentUser } from "../flow/authTypes"
+import {cartItemsCountQuery, cartItemsCountSelector} from "../lib/queries/cart";
 
 type Props = {
   currentUser: ?CurrentUser,
+  cartItemsCount: number,
   store: Store<*, *>,
   addUserNotification: Function
 }
@@ -41,22 +43,23 @@ export class HeaderApp extends React.Component<Props, void> {
   }
 
   render() {
-    const { currentUser } = this.props
+    const { currentUser, cartItemsCount } = this.props
 
     if (!currentUser) {
       // application is still loading
       return <div />
     }
 
-    return <Header currentUser={currentUser} location={null} />
+    return <Header currentUser={currentUser} cartItemsCount={cartItemsCount} location={null} />
   }
 }
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: currentUserSelector
+  currentUser:    currentUserSelector,
+  cartItemsCount: cartItemsCountSelector
 })
 
-const mapPropsToConfig = () => [users.currentUserQuery()]
+const mapPropsToConfig = () => [cartItemsCountQuery(), users.currentUserQuery()]
 
 const mapDispatchToProps = {
   addUserNotification

frontend/public/src/lib/queries/cart.js

@@ -5,8 +5,10 @@ import { getCsrfOptions, nextState } from "./util"
 export const cartSelector = pathOr(null, ["entities", "cartItems"])
 export const totalPriceSelector = pathOr(null, ["entities", "totalPrice"])
 export const orderHistorySelector = pathOr(null, ["entities", "orderHistory"])
-export const cartItemsCountSelector = pathOr(null, ["entities", "cartItemsCount"])
-
+export const cartItemsCountSelector = pathOr(null, [
+  "entities",
+  "cartItemsCount"
+])
 
 export const discountedPriceSelector = pathOr(null, [
   "entities",

frontend/public/src/lib/queries/courseRuns.js

@@ -32,7 +32,6 @@ export const coursesQuery = (courseKey: string = "") => ({
   }
 })
 
-
 // This will need to be updated to v2 once we get the courses endpoint to allow for multiple ID query
 export const programsQuery = (programKey: string = "") => ({
   queryKey:  programsQueryKey,