Merge pull request #604 from antoooks/feature/remove-last-updated

feat: remove last updated alert from homepage

__tests__/pages/index.test.tsx

@@ -1,24 +1,8 @@
-import React from "react";
-
-import { render, screen } from "@testing-library/react";
-import { latestNewsItemBuilder } from "~/lib/content/__mocks__/builders/informasi-terbaru";
-import HomePage, { getStaticProps } from "~/pages";
+import { getStaticProps } from "~/pages";
 
 jest.mock("~/lib/content/home-page");
 jest.mock("~/lib/content/welcome-message");
 
-describe("HomePage", () => {
-  it("renders the last updated time correctly", () => {
-    render(<HomePage latestNews={[latestNewsItemBuilder()]} />);
-
-    expect(
-      screen.getByText(
-        /Pembaruan terakhir pada Selasa, 27 Juli 2021 17.43 WIB/i,
-      ),
-    ).toBeVisible();
-  });
-});
-
 describe("getStaticProps", () => {
   // TODO: (ZF) Find a way to load the markdown files in Jest so that we can test the successful case.
   it("returns an empty array when failing to load the markdown files", async () => {

components/home/__tests__/homepage-content.test.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+import { render } from "@testing-library/react";
+import { HomePageContent } from "../homepage-content";
+
+describe("homepage content render correctly", () => {
+  const { container } = render(<HomePageContent />);
+
+  it("renders correctly", () => {
+    expect(container.firstChild).toHaveClass("flex-1");
+  });
+});

components/ui/__tests__/alert.test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
-import { render } from "@testing-library/react";
+import { screen, fireEvent, render } from "@testing-library/react";
+import { BellIcon } from "@heroicons/react/outline";
 import { Alert } from "../alert";
 
 describe("Alert", () => {
@@ -31,11 +32,17 @@ describe("Alert", () => {
 
   it("renders with correct customization", () => {
     const { container } = render(
-      <Alert accentBorder className="babayaga" color="red" visible={true}>
+      <Alert
+        accentBorder
+        className="babayaga"
+        color="red"
+        dismissible={true}
+        icon={BellIcon}
+        visible={true}
+      >
         Test Customize Alert
       </Alert>,
     );
-
     expect(container.firstChild?.firstChild).toHaveClass(
       "bg-red-50",
       "text-red-700",
@@ -45,5 +52,12 @@ describe("Alert", () => {
       "border-red-400",
     );
     expect(container.firstChild?.firstChild).toHaveClass("p-4", "babayaga");
+    expect(
+      container.firstChild?.firstChild?.firstChild?.firstChild?.firstChild,
+    ).toHaveClass("flex-shrink-0 mr-3");
+    expect(
+      container.firstChild?.firstChild?.firstChild?.childNodes[1],
+    ).toHaveClass(`close-button text-red-400 hover:text-red-500`);
+    fireEvent.click(screen.getByRole("button"));
   });
 });

components/ui/alert/utils/__tests__/helpers.test.ts

@@ -1,4 +1,4 @@
-import { accentBorderColors, alertColors } from "../helpers";
+import { accentBorderColors, alertColors, renderAlertIcon } from "../helpers";
 import { BaseColors } from "~/components/ui/types";
 
 describe("accentBorderColors", () => {
@@ -46,3 +46,9 @@ describe("alertColors", () => {
     expect(alertColors()).toEqual("bg-yellow-50 text-yellow-700");
   });
 });
+
+describe("renderAlertIcon", () => {
+  it("return null if icon undefined", () => {
+    expect(renderAlertIcon()).toEqual(null);
+  });
+});

pages/index.tsx

@@ -1,6 +1,5 @@
 import fs from "fs";
 import path from "path";
-import { ClockIcon } from "@heroicons/react/outline";
 import htmr from "htmr";
 import { GetStaticProps } from "next";
 import { NextSeo } from "next-seo";
@@ -13,7 +12,6 @@ import { HomePageStart } from "~/components/home/homepage-start";
 import { HomePageWelcome } from "~/components/home/homepage-welcome";
 import { HomePageWhatsAppCTA } from "~/components/home/homepage-whatsapp-cta";
 import { Page } from "~/components/layout/page";
-import { Alert } from "~/components/ui/alert";
 import { Container } from "~/components/ui/container";
 import { attributes, html } from "~/lib/content/home-page";
 import { LatestNewsItem } from "~/lib/content/informasi-terbaru";
@@ -24,28 +22,6 @@ const meta = {
   title: `${siteConfig.site_tagline} | ${siteConfig.site_name}`,
 };
 
-interface LastUpdatedAlertProps {
-  className?: string;
-}
-
-const LastUpdatedAlert = ({ className }: LastUpdatedAlertProps) => (
-  <Alert accentBorder className={className} icon={ClockIcon}>
-    <p className="text-sm">
-      Pembaruan terakhir pada{" "}
-      {new Date(attributes.last_updated_time).toLocaleString("id", {
-        weekday: "long",
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-        hour: "2-digit",
-        minute: "2-digit",
-        timeZone: "Asia/Jakarta",
-        timeZoneName: "short",
-      })}
-    </p>
-  </Alert>
-);
-
 interface HomePageProps {
   latestNews: LatestNewsItem[];
 }
@@ -60,7 +36,6 @@ const HomePage = (props: HomePageProps) => (
         <HomePageLatestNews latestNews={props.latestNews} />
         <HomePageContributing />
         <HomePageWhatsAppCTA />
-        <LastUpdatedAlert />
         <HomePageWelcome />
         <HomePageSection className="px-4 py-6">
           <article className="prose prose-indigo">

public/admin/config.yml

@@ -93,12 +93,6 @@ collections:
         label: "Home Page"
         file: "_content/home-page.md"
         fields:
-          - {
-              label: "Last updated time",
-              name: "last_updated_time",
-              widget: "datetime",
-              hint: "Last updated time",
-            }
           - {
               label: "Body",
               name: "body",