Show "Start Anytime" based on resource "availability" property (#1336)

* fix storybook embedly, add card root classes * add anytime to LR cards * add docstrings to formatDate * add anytime to LR expanded display * add two card tests * capitalize semester * fix info height
mitodl · Jul 31, 2024 · f71c91a · f71c91a
1 parent f7c8e69
commit f71c91a
Show file tree

Hide file tree

Showing 18 changed files with 464 additions and 190 deletions.
diff --git a/frontends/mit-open/.storybook/main.ts b/frontends/mit-open/.storybook/main.ts
@@ -1,5 +1,6 @@
 import { resolve, join, dirname } from "path"
 import * as dotenv from "dotenv"
+import * as webpack from "webpack"
 
 dotenv.config({ path: resolve(__dirname, "../../../.env") })
 
@@ -32,13 +33,17 @@ const config = {
   docs: {
     autodocs: "tag",
   },
-  env: (config: any) => ({
-    ...config,
-    APP_SETTINGS: {
-      PUBLIC_URL: process.env.PUBLIC_URL || "",
-      EMBEDLY_KEY: process.env.EMBEDLY_KEY || "",
-    },
-  }),
+  webpackFinal: async (config: any) => {
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        APP_SETTINGS: {
+          EMBEDLY_KEY: JSON.stringify(process.env.EMBEDLY_KEY),
+          PUBLIC_URL: JSON.stringify(process.env.PUBLIC_URL),
+        },
+      }),
+    )
+    return config
+  },
 }
 
 export default config
diff --git a/frontends/mit-open/.storybook/preview-head.html b/frontends/mit-open/.storybook/preview-head.html
@@ -3,8 +3,3 @@
       WARNING: This is linked to [email protected]'s Adobe account.
   -->
 <link rel="stylesheet" href="https://use.typekit.net/lbk1xay.css" />
-<script>
-  window.APP_SETTINGS = {
-    embedlyKey: null,
-  }
-</script>
diff --git a/frontends/ol-components/src/components/Card/Card.test.tsx b/frontends/ol-components/src/components/Card/Card.test.tsx
@@ -0,0 +1,32 @@
+import { render } from "@testing-library/react"
+import { Card } from "./Card"
+import React from "react"
+
+describe("Card", () => {
+  test("has class MitCard-root on root element", () => {
+    const { container } = render(
+      <Card className="Foo">
+        <Card.Title>Title</Card.Title>
+        <Card.Image src="https://via.placeholder.com/150" alt="placeholder" />
+        <Card.Info>Info</Card.Info>
+        <Card.Footer>Footer</Card.Footer>
+        <Card.Actions>Actions</Card.Actions>
+      </Card>,
+    )
+    const card = container.firstChild as HTMLElement
+    const title = card.querySelector(".MitCard-title")
+    const image = card.querySelector(".MitCard-image")
+    const info = card.querySelector(".MitCard-info")
+    const footer = card.querySelector(".MitCard-footer")
+    const actions = card.querySelector(".MitCard-actions")
+
+    expect(card).toHaveClass("MitCard-root")
+    expect(card).toHaveClass("Foo")
+    expect(title).toHaveTextContent("Title")
+    expect(image).toHaveAttribute("src", "https://via.placeholder.com/150")
+    expect(image).toHaveAttribute("alt", "placeholder")
+    expect(info).toHaveTextContent("Info")
+    expect(footer).toHaveTextContent("Footer")
+    expect(actions).toHaveTextContent("Actions")
+  })
+})
diff --git a/frontends/ol-components/src/components/Card/Card.tsx b/frontends/ol-components/src/components/Card/Card.tsx
@@ -117,10 +117,6 @@ const Footer = styled.span`
     ...theme.typography.body3,
     color: theme.custom.colors.silverGrayDark,
   }}
-
-  span {
-    color: ${theme.custom.colors.black};
-  }
 `
 
 const Bottom = styled.div`
@@ -200,9 +196,11 @@ const Card: Card = ({ children, className, size, href }) => {
     else if (child.type === Actions) actions = child.props
   })
 
+  const allClassNames = ["MitCard-root", className ?? ""].join(" ")
+
   if (content) {
     return (
-      <Wrapper className={className} size={size}>
+      <Wrapper className={allClassNames} size={size}>
         <_Container className={className} to={href!}>
           {content}
         </_Container>
@@ -211,30 +209,37 @@ const Card: Card = ({ children, className, size, href }) => {
   }
 
   return (
-    <Wrapper className={className} size={size}>
+    <Wrapper className={allClassNames} size={size}>
       <_Container to={href!}>
         {image && (
           <Image
+            className="MitCard-image"
             size={size}
             height={image.height}
             {...(image as ImgHTMLAttributes<HTMLImageElement>)}
           />
         )}
         <Body>
           {info.children && (
-            <Info size={size} {...info}>
+            <Info className="MitCard-info" size={size} {...info}>
               {info.children}
             </Info>
           )}
-          <Title size={size} {...title}>
+          <Title className="MitCard-title" size={size} {...title}>
             {title.children}
           </Title>
         </Body>
         <Bottom>
-          <Footer {...footer}>{footer.children}</Footer>
+          <Footer className="MitCard-footer" {...footer}>
+            {footer.children}
+          </Footer>
         </Bottom>
       </_Container>
-      {actions.children && <Actions {...actions}>{actions.children}</Actions>}
+      {actions.children && (
+        <Actions className="MitCard-actions" {...actions}>
+          {actions.children}
+        </Actions>
+      )}
     </Wrapper>
   )
 }

diff --git a/frontends/ol-components/src/components/Card/ListCard.test.tsx b/frontends/ol-components/src/components/Card/ListCard.test.tsx
@@ -0,0 +1,17 @@
+import { render } from "@testing-library/react"
+import { ListCard } from "./ListCard"
+import React from "react"
+
+describe("ListCard", () => {
+  test("has class MitCard-root on root element", () => {
+    const { container } = render(
+      <ListCard className="Foo">
+        <ListCard.Content>Hello world</ListCard.Content>
+      </ListCard>,
+    )
+    const card = container.firstChild
+
+    expect(card).toHaveClass("MitListCard-root")
+    expect(card).toHaveClass("Foo")
+  })
+})
diff --git a/frontends/ol-components/src/components/Card/ListCard.tsx b/frontends/ol-components/src/components/Card/ListCard.tsx
@@ -205,16 +205,17 @@ const ListCard: Card = ({ children, className, href, draggable }) => {
     else if (child.type === Actions) actions = child.props.children
   })
 
+  const classNames = ["MitListCard-root", className ?? ""].join(" ")
   if (content) {
     return (
-      <_Container className={className} to={href!}>
+      <_Container className={classNames} to={href!}>
         {content}
       </_Container>
     )
   }
 
   return (
-    <Wrapper className={className}>
+    <Wrapper className={classNames}>
       <_Container to={href!}>
         {draggable && (
           <DragArea>

diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.stories.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.stories.tsx
@@ -154,3 +154,15 @@ export const Loading: Story = {
     isLoading: true,
   },
 }
+
+export const StartAnytime: Story = {
+  args: {
+    resource: courses.start.anytime,
+  },
+}
+
+export const StartDated: Story = {
+  args: {
+    resource: courses.start.dated,
+  },
+}
diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.test.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.test.tsx
@@ -2,17 +2,18 @@ import React from "react"
 import { BrowserRouter } from "react-router-dom"
 import { screen, render, act } from "@testing-library/react"
 import { LearningResourceCard } from "./LearningResourceCard"
+import type { LearningResourceCardProps } from "./LearningResourceCard"
 import { DEFAULT_RESOURCE_IMG, embedlyCroppedImage } from "ol-utilities"
-import { LearningResource, ResourceTypeEnum, PlatformEnum } from "api"
+import { ResourceTypeEnum, PlatformEnum, AvailabilityEnum } from "api"
 import { factories } from "api/test-utils"
 import { ThemeProvider } from "../ThemeProvider/ThemeProvider"
 
-const setup = (resource: LearningResource) => {
+const setup = (props: LearningResourceCardProps) => {
   return render(
     <BrowserRouter>
       <LearningResourceCard
-        resource={resource}
-        href={`?resource=${resource.id}`}
+        resource={props.resource}
+        href={`?resource=${props.resource?.id}`}
       />
     </BrowserRouter>,
     { wrapper: ThemeProvider },
@@ -26,7 +27,7 @@ describe("Learning Resource Card", () => {
       next_start_date: "2026-01-01",
     })
 
-    setup(resource)
+    setup({ resource })
 
     screen.getByText("Course")
     screen.getByRole("heading", { name: resource.title })
@@ -45,37 +46,61 @@ describe("Learning Resource Card", () => {
       ],
     })
 
-    setup(resource)
+    setup({ resource })
 
     screen.getByText("Starts:")
     screen.getByText("January 01, 2026")
   })
 
-  test("Displays taught in date for OCW", () => {
-    const resource = factories.learningResources.resource({
-      resource_type: ResourceTypeEnum.Course,
-      platform: { code: PlatformEnum.Ocw },
-      runs: [
-        factories.learningResources.run({
-          semester: "Fall",
-          year: 2002,
-        }),
-      ],
-    })
-
-    setup(resource)
-
-    expect(screen.getByRole("link")).toHaveTextContent("As taught in:")
-    expect(screen.getByRole("link")).toHaveTextContent("Fall 2002")
-  })
+  test.each([
+    {
+      resource: factories.learningResources.resource({
+        resource_type: ResourceTypeEnum.Course,
+        availability: AvailabilityEnum.Anytime,
+      }),
+      showsAnytime: true,
+    },
+    {
+      resource: factories.learningResources.resource({
+        resource_type: ResourceTypeEnum.Course,
+        availability: AvailabilityEnum.Anytime,
+      }),
+      size: "small",
+      showsAnytime: true,
+    },
+    {
+      resource: factories.learningResources.resource({
+        resource_type: ResourceTypeEnum.Program,
+        availability: AvailabilityEnum.Anytime,
+      }),
+      showsAnytime: true,
+    },
+    {
+      resource: factories.learningResources.resource({
+        resource_type: ResourceTypeEnum.Video,
+        availability: AvailabilityEnum.Anytime,
+      }),
+      showsAnytime: false,
+    },
+  ] as const)(
+    "Displays 'Anytime' for availability 'Anytime' courses and programs",
+    ({ resource, size, showsAnytime }) => {
+      setup({ resource, size })
+
+      const anytime = screen.queryByText("Anytime")
+      const starts = screen.queryByText("Starts:")
+      expect(!!anytime).toEqual(showsAnytime)
+      expect(!!starts).toBe(showsAnytime)
+    },
+  )
 
   test("Click to navigate", async () => {
     const resource = factories.learningResources.resource({
       resource_type: ResourceTypeEnum.Course,
       platform: { code: PlatformEnum.Ocw },
     })
 
-    setup(resource)
+    setup({ resource })
 
     const heading = screen.getByRole("heading", { name: resource.title })
     await act(async () => {
@@ -134,7 +159,7 @@ describe("Learning Resource Card", () => {
       certification: true,
     })
 
-    setup(resource)
+    setup({ resource })
 
     screen.getByText("Certificate")
   })
@@ -144,7 +169,7 @@ describe("Learning Resource Card", () => {
       certification: false,
     })
 
-    setup(resource)
+    setup({ resource })
 
     const badge = screen.queryByText("Certificate")
 
@@ -175,7 +200,7 @@ describe("Learning Resource Card", () => {
   ])("Image is displayed if present", ({ expected, image }) => {
     const resource = factories.learningResources.resource({ image })
 
-    setup(resource)
+    setup({ resource })
 
     const imageEls = screen.getAllByRole<HTMLImageElement>(expected.role)