Tolerate case when no extensions have been added in a month.

src/templates/extensions-added-list.js

@@ -98,9 +98,10 @@ const ExtensionsAddedListTemplate = (
     data: {
       allExtension, downloadDataDate,
     },
-    pageContext: { nextMonthTimestamp, previousMonthTimestamp },
+    pageContext: { nextMonthTimestamp, previousMonthTimestamp, sinceMonth },
     location,
   }) => {
+  const monthTimestamp = sinceMonth
   const downloadData = downloadDataDate
 
   // Convert the data to the same format as what the other list page uses
@@ -138,10 +139,10 @@ const ExtensionsAddedListTemplate = (
     </ul>
   </nav>)
 
-  const monthTimestamp = extensions[0].metadata.maven.sinceMonth
   const now = new Date()
   const date = new Date(+monthTimestamp)
   const verb = now.getUTCMonth() === date.getUTCMonth() && now.getUTCFullYear() === date.getUTCFullYear() ? "have been" : "were"
+  const formattedMonth = prettyDate(monthTimestamp)
 
   if (extensions && extensions.length > 0) {
 
@@ -154,9 +155,6 @@ const ExtensionsAddedListTemplate = (
       extensions.sort(extensionComparator)
     }
 
-    const formattedMonth = prettyDate(monthTimestamp)
-
-
     const countMessage = `${extensionCount} new extensions ${verb} added this month.`
 
 
@@ -191,7 +189,7 @@ const ExtensionsAddedListTemplate = (
   } else {
     return (
       <div className="extensions-list" style={{ display: "flex" }}>
-        No new extensions {verb} added this month.
+        No new extensions {verb} added in {formattedMonth}.
         {nav}
       </div>
     )

src/templates/extensions-added-list.test.js

@@ -13,102 +13,134 @@ jest.mock("react-use-query-param-string", () => {
 })
 
 describe("extensions added page", () => {
-  const category = "jewellery"
-  const otherCategory = "snails"
-
-  const ruby = {
-    name: "JRuby",
-    id: "jruby",
-    sortableName: "ruby",
-    slug: "jruby-slug",
-    metadata: { categories: [category], },
-    platforms: ["bottom of the garden"],
-  }
-  const diamond = {
-    name: "JDiamond",
-    id: "jdiamond",
-    sortableName: "diamond",
-    slug: "jdiamond-slug",
-    metadata: { categories: [category] },
-    platforms: ["a mine"],
-  }
 
-  const molluscs = {
-    name: "Molluscs",
-    id: "molluscs",
-    sortableName: "mollusc",
-    slug: "molluscs-slug",
-    metadata: { categories: [otherCategory] },
-    platforms: ["bottom of the garden"],
-  }
+  describe("when there are are extensions in that time period", () => {
 
-  const obsolete = {
-    name: "Obsolete",
-    id: "really-old",
-    sortableName: "old",
-    slug: "old-slug",
-    metadata: { categories: [otherCategory] },
-    platforms: ["bottom of the garden"],
-    duplicates: [{ relationship: "newer", groupId: "whatever" }],
-    isSuperseded: true,
-  }
+    const category = "jewellery"
+    const otherCategory = "snails"
 
-  const maybeObsolete = {
-    name: "Maybebsolete",
-    id: "maybe-old",
-    artifact: "maybe-old-or-not",
-    sortableName: "maybe-old",
-    slug: "ambiguous-slug",
-    metadata: { categories: [otherCategory] },
-    platforms: ["bottom of the garden"],
-    duplicates: [{ relationship: "different", groupId: "whatever" }],
-  }
+    const ruby = {
+      name: "JRuby",
+      id: "jruby",
+      sortableName: "ruby",
+      slug: "jruby-slug",
+      metadata: { categories: [category], },
+      platforms: ["bottom of the garden"],
+    }
+    const diamond = {
+      name: "JDiamond",
+      id: "jdiamond",
+      sortableName: "diamond",
+      slug: "jdiamond-slug",
+      metadata: { categories: [category] },
+      platforms: ["a mine"],
+    }
 
-  const extensions = [ruby, diamond, molluscs, obsolete, maybeObsolete]
-  const graphQledExtensions = extensions.map(e => {
-    e.metadata = { maven: { sinceMonth: "1585720800000" } }
-    return {
-      node: e
+    const molluscs = {
+      name: "Molluscs",
+      id: "molluscs",
+      sortableName: "mollusc",
+      slug: "molluscs-slug",
+      metadata: { categories: [otherCategory] },
+      platforms: ["bottom of the garden"],
+    }
+
+    const obsolete = {
+      name: "Obsolete",
+      id: "really-old",
+      sortableName: "old",
+      slug: "old-slug",
+      metadata: { categories: [otherCategory] },
+      platforms: ["bottom of the garden"],
+      duplicates: [{ relationship: "newer", groupId: "whatever" }],
+      isSuperseded: true,
     }
-  })
 
-  beforeEach(async () => {
+    const maybeObsolete = {
+      name: "Maybebsolete",
+      id: "maybe-old",
+      artifact: "maybe-old-or-not",
+      sortableName: "maybe-old",
+      slug: "ambiguous-slug",
+      metadata: { categories: [otherCategory] },
+      platforms: ["bottom of the garden"],
+      duplicates: [{ relationship: "different", groupId: "whatever" }],
+    }
 
-    render(<ExtensionsAddedListTemplate data={{
-      allExtension: { edges: graphQledExtensions }
-    }}
-                                        pageContext={{
-                                          nextMonthTimestamp: "12",
-                                          previousMonthTimestamp: "487592268000"
-                                        }}
-                                        location={"extensions-added-some-date"} />)
+    const extensions = [ruby, diamond, molluscs, obsolete, maybeObsolete]
+    const graphQledExtensions = extensions.map(e => {
+      e.metadata = { maven: { sinceMonth: "1585720800000" } }
+      return {
+        node: e
+      }
+    })
+
+    beforeEach(async () => {
+      render(<ExtensionsAddedListTemplate data={{
+        allExtension: { edges: graphQledExtensions }
+      }}
+                                          pageContext={{
+                                            nextMonthTimestamp: "12",
+                                            previousMonthTimestamp: "487592268000",
+                                            sinceMonth: "1585720800000"
+                                          }}
+                                          location={"extensions-added-some-date"} />)
+    })
+
+    it("renders the extension name", () => {
+      expect(screen.getByText(extensions[0].name)).toBeTruthy()
+    })
+
+    it("renders the correct link", () => {
+      const links = screen.getAllByRole("link")
+      const link = links[links.length - 6]// Look at the last one that's not in the footer, because the top of the page will have a menu and the bottom will have footers - this is also testing the sorting
+      expect(link).toBeTruthy()
+      // Hardcoding the host is a bit risky but this should always be true in  test environment
+      expect(link.href).toBe("http://localhost/ambiguous-slug")
+    })
+
+    it("displays a brief message about how many extensions there are", async () => {
+      const num = extensions.length
+      expect(screen.getByText(new RegExp(`${num -1} new extensions were added`))).toBeTruthy()
+    })
+
+    it("displays some text about when the extensions were released", async () => {
+      expect(screen.getAllByText(/April 2020/)).toBeTruthy()
+    })
+
+    it("displays a next and previous links", async () => {
+      expect(screen.getAllByText(/January 1970/)).toBeTruthy()
+      expect(screen.getAllByText(/June 1985/)).toBeTruthy()
+
+    })
   })
 
-  it("renders the extension name", () => {
-    expect(screen.getByText(extensions[0].name)).toBeTruthy()
-  })
+  describe("when there are no extensions in the time period", () => {
 
-  it("renders the correct link", () => {
-    const links = screen.getAllByRole("link")
-    const link = links[links.length - 6]// Look at the last one that's not in the footer, because the top of the page will have a menu and the bottom will have footers - this is also testing the sorting
-    expect(link).toBeTruthy()
-    // Hardcoding the host is a bit risky but this should always be true in  test environment
-    expect(link.href).toBe("http://localhost/ambiguous-slug")
-  })
+    beforeEach(async () => {
 
-  it("displays a brief message about how many extensions there are", async () => {
-    const num = extensions.length
-    expect(screen.getByText(new RegExp(`${num -1} new extensions were added`))).toBeTruthy()
-  })
+      render(<ExtensionsAddedListTemplate data={{ allExtension: { edges: [] } }}
+                                          pageContext={{
+                                            nextMonthTimestamp: "12",
+                                            sinceMonth: "1705250589000",
+                                            previousMonthTimestamp: "487592268000"
+                                          }}
+                                          location={"extensions-added-some-date"} />)
+    })
 
-  it("displays some text about when the extensions were released", async () => {
-    expect(screen.getAllByText(/April 2020/)).toBeTruthy()
-  })
+    it("displays a brief message explaining there are no extensions", async () => {
+      expect(screen.getByText(/No new extensions.*/)).toBeTruthy()
+    })
 
-  it("displays a next and previous links", async () => {
-    expect(screen.getAllByText(/January 1970/)).toBeTruthy()
-    expect(screen.getAllByText(/June 1985/)).toBeTruthy()
+    it("displays some text about when the extensions were released", async () => {
+      expect(screen.getAllByText(/January 2024/)).toBeTruthy()
+    })
 
-  })
+    it("displays a next and previous links", async () => {
+      expect(screen.getAllByText(/January 1970/)).toBeTruthy()
+      expect(screen.getAllByText(/June 1985/)).toBeTruthy()
 
+    })
+
+  })
 })