From 09de3f6e3c97f19574f2ab64318f3177f38c8077 Mon Sep 17 00:00:00 2001
From: shairyar <shairyarbaig@gmail.com>
Date: Thu, 16 Mar 2023 18:42:37 +0500
Subject: [PATCH] Sort uptime monitors by alphabetical order (#58)

Display uptime monitors in alphabetical order
---
 components/UptimeMonitor/UptimeMonitor.js     |  2 +-
 .../__snapshots__/UptimeMonitor.test.js.snap  |  1 +
 components/UptimeMonitors/UptimeMonitors.js   |  3 ++
 .../UptimeMonitors/UptimeMonitors.test.js     | 16 +++++++++++
 .../__snapshots__/UptimeMonitors.test.js.snap |  7 +++--
 mocks/monitors/multiple.json                  | 28 +++++++++++++++++++
 6 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 mocks/monitors/multiple.json

diff --git a/components/UptimeMonitor/UptimeMonitor.js b/components/UptimeMonitor/UptimeMonitor.js
index c477ef9..b4efad5 100644
--- a/components/UptimeMonitor/UptimeMonitor.js
+++ b/components/UptimeMonitor/UptimeMonitor.js
@@ -47,7 +47,7 @@ const UptimeMonitor = ({ uptimeMonitor, threshold }) => {
 
   return (
     <>
-      <div className="px-6 py-5 space-y-3">
+      <div className="px-6 py-5 space-y-3" data-testid="UptimeMonitor">
         <div className="sm:flex justify-between">
           <h2>
             <button
diff --git a/components/UptimeMonitor/__snapshots__/UptimeMonitor.test.js.snap b/components/UptimeMonitor/__snapshots__/UptimeMonitor.test.js.snap
index d2efd80..1c2221a 100644
--- a/components/UptimeMonitor/__snapshots__/UptimeMonitor.test.js.snap
+++ b/components/UptimeMonitor/__snapshots__/UptimeMonitor.test.js.snap
@@ -4,6 +4,7 @@ exports[`UptimeMonitor renders without errors 1`] = `
 <div>
   <div
     class="px-6 py-5 space-y-3"
+    data-testid="UptimeMonitor"
   >
     <div
       class="sm:flex justify-between"
diff --git a/components/UptimeMonitors/UptimeMonitors.js b/components/UptimeMonitors/UptimeMonitors.js
index 00fbf5f..732bb48 100644
--- a/components/UptimeMonitors/UptimeMonitors.js
+++ b/components/UptimeMonitors/UptimeMonitors.js
@@ -2,6 +2,9 @@ import PropTypes from "prop-types";
 import UptimeMonitor from "../UptimeMonitor";
 
 const UptimeMonitors = ({ statusPage }) => {
+  // Display uptime monitors in alphabetical order
+  statusPage.uptime_monitors.sort((a, b) => a.title.localeCompare(b.title));
+
   const renderUptimeMonitors = () => {
     if (statusPage.uptime_monitors.length === 0) {
       return (
diff --git a/components/UptimeMonitors/UptimeMonitors.test.js b/components/UptimeMonitors/UptimeMonitors.test.js
index b627867..aeaae1b 100644
--- a/components/UptimeMonitors/UptimeMonitors.test.js
+++ b/components/UptimeMonitors/UptimeMonitors.test.js
@@ -4,6 +4,8 @@ import UptimeMonitors from "./UptimeMonitors";
 
 import statusPageMock from "../../mocks/status_pages/appsignal.json";
 
+import multipleMonitorsMock from "../../mocks/monitors/multiple.json";
+
 const build = (props = {}) => {
   return render(<UptimeMonitors statusPage={statusPageMock} {...props} />);
 };
@@ -40,4 +42,18 @@ describe("UptimeMonitors", () => {
       expect(screen.getByText("Always Down")).toBeInTheDocument();
     });
   });
+
+  test("should render uptime monitors sorted by title", () => {
+    const statusPage = { ...statusPageMock };
+
+    statusPage.uptime_monitors = multipleMonitorsMock.uptime_monitors;
+
+    build({ statusPage });
+
+    const updates = screen.getAllByTestId("UptimeMonitor");
+
+    expect(updates[0].querySelector("h2").innerHTML).toContain("Always Down");
+    expect(updates[1].querySelector("h2").innerHTML).toContain("blog");
+    expect(updates[2].querySelector("h2").innerHTML).toContain("homepage");
+  });
 });
diff --git a/components/UptimeMonitors/__snapshots__/UptimeMonitors.test.js.snap b/components/UptimeMonitors/__snapshots__/UptimeMonitors.test.js.snap
index bb03c00..3ebd6d1 100644
--- a/components/UptimeMonitors/__snapshots__/UptimeMonitors.test.js.snap
+++ b/components/UptimeMonitors/__snapshots__/UptimeMonitors.test.js.snap
@@ -13,6 +13,7 @@ exports[`UptimeMonitors renders without problems 1`] = `
       >
         <div
           class="px-6 py-5 space-y-3"
+          data-testid="UptimeMonitor"
         >
           <div
             class="sm:flex justify-between"
@@ -21,7 +22,7 @@ exports[`UptimeMonitors renders without problems 1`] = `
               <button
                 class="c_h-heading focus:outline-none"
               >
-                homepage
+                Always Down
               </button>
             </h2>
             <p
@@ -160,6 +161,7 @@ exports[`UptimeMonitors renders without problems 1`] = `
         </div>
         <div
           class="px-6 py-5 space-y-3"
+          data-testid="UptimeMonitor"
         >
           <div
             class="sm:flex justify-between"
@@ -307,6 +309,7 @@ exports[`UptimeMonitors renders without problems 1`] = `
         </div>
         <div
           class="px-6 py-5 space-y-3"
+          data-testid="UptimeMonitor"
         >
           <div
             class="sm:flex justify-between"
@@ -315,7 +318,7 @@ exports[`UptimeMonitors renders without problems 1`] = `
               <button
                 class="c_h-heading focus:outline-none"
               >
-                Always Down
+                homepage
               </button>
             </h2>
             <p
diff --git a/mocks/monitors/multiple.json b/mocks/monitors/multiple.json
new file mode 100644
index 0000000..52488c4
--- /dev/null
+++ b/mocks/monitors/multiple.json
@@ -0,0 +1,28 @@
+{
+  "uptime_monitors": [
+    {
+      "id": "blog",
+      "title": "blog",
+      "url": "https://blog.appsignal.com",
+      "description": "",
+      "regions": ["europe", "south-america", "north-america", "asia-pacific"],
+      "endpoint": "https://api.appsignal-status.online/status_pages/1/monitors/blog.json"
+    },
+    {
+      "id": "homepage",
+      "title": "homepage",
+      "url": "https://www.appsignal.com",
+      "description": "The AppSignal homepage. Notify #operations when this alert is triggered. ",
+      "regions": ["europe", "south-america", "north-america", "asia-pacific"],
+      "endpoint": "https://api.appsignal-status.online/status_pages/1/monitors/homepage.json"
+    },
+    {
+      "id": "always-down",
+      "title": "Always Down",
+      "url": "https://banana.appsignal.com",
+      "description": "This endpoint will always be down!",
+      "regions": ["europe", "south-america", "north-america", "asia-pacific"],
+      "endpoint": "https://api.appsignal-status.online/status_pages/1/monitors/always-down.json"
+    }
+  ]
+}