Sort uptime monitors by alphabetical order (#58)

Display uptime monitors in alphabetical order

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

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"

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 (

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");
+  });
 });

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

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"
+    }
+  ]
+}