Add tests for dashboard map (#1471)

* Add some test cases for dashboard map

* Make sure invalid locations doesn't render marker.

lib/nerves_hub_web/live/dashboard/index.ex

@@ -76,25 +76,27 @@ defmodule NervesHubWeb.Live.Dashboard.Index do
 
     socket
     |> assign(:devices, devices)
-    |> assign(:map_markers, Jason.encode!(map_markers))
+    |> assign(:map_markers, map_markers)
   end
 
   defp generate_map_marker(
          %Device{
            id: id,
            identifier: identifier,
            connection_status: connection_status,
-           connection_metadata: %{"location" => location}
+           connection_metadata: %{
+             "location" => %{"longitude" => longitude, "latitude" => latitude}
+           }
          },
          markers
        )
-       when map_size(location) > 0 do
+       when is_number(longitude) and is_number(latitude) do
     new_marker =
       %{
         id: id,
         identifier: identifier,
         status: get_connection_status(connection_status),
-        location: location
+        location: %{"longitude" => longitude, "latitude" => latitude}
       }
 
     [new_marker | markers]

lib/nerves_hub_web/live/dashboard/index.html.heex

@@ -32,7 +32,8 @@
       </div>
       <div id="map" class="opacity-50" phx-hook="WorldMap" phx-update="ignore" data-markers={[]} style="height: 720px; background: #2A2D30; margin-top: 48px;"></div>
     <% else %>
-      <div id="map" phx-hook="WorldMap" phx-update="ignore" data-markers={@map_markers} style="height: 720px; background: #2A2D30; margin-top: 48px;"></div>
+      <p class="p-small text-right">Showing <%= length(@map_markers) %> devices with location data.</p>
+      <div id="map" phx-hook="WorldMap" phx-update="ignore" data-markers={Jason.encode!(@map_markers)} style="height: 720px; background: #2A2D30; margin-top: 48px;"></div>
       <div id="map-markers" class="flex-row justify-content-center">
         <div class="flex-auto">
           <p class="p-small flex-row align-items-center map-marker-gap">

test/nerves_hub_web/live/product/dashboard_test.exs

@@ -0,0 +1,106 @@
+defmodule NervesHubWeb.Live.Product.DashboardTest do
+  use NervesHubWeb.ConnCase.Browser, async: true
+
+  alias NervesHub.Devices
+  alias NervesHub.Devices.Device
+  alias NervesHubWeb.Endpoint
+
+  alias Phoenix.Socket.Broadcast
+
+  @valid_location %{
+    "latitude" => 60.6204,
+    "longitude" => 16.7697,
+    "source" => "geoip"
+  }
+
+  @invalid_location %{
+    "latitude" => 60.6204,
+    "source" => "geoip"
+  }
+
+  setup %{fixture: %{device: device}} do
+    Endpoint.subscribe("device:#{device.id}")
+  end
+
+  describe "dashboard map" do
+    test "assert devices with location data renders map and marker info", %{
+      conn: conn,
+      org: org,
+      product: product,
+      device: device
+    } do
+      assert {:ok, %Device{}} =
+               Devices.update_device(device, %{
+                 connection_metadata: %{"location" => @valid_location}
+               })
+
+      conn
+      |> visit("/org/#{org.name}/#{product.name}/dashboard")
+      |> assert_has("#map")
+      |> assert_has("#map-markers")
+    end
+
+    test "assert page render without locations ", %{
+      conn: conn,
+      org: org,
+      product: product,
+      device: device
+    } do
+      assert device.connection_metadata["location"] == nil
+
+      conn
+      |> visit("/org/#{org.name}/#{product.name}/dashboard")
+      |> assert_has("h3", text: "#{product.name} doesn’t have any devices with location data.")
+    end
+
+    test "assert page render without devices", %{
+      conn: conn,
+      org: org,
+      product: product,
+      device: device
+    } do
+      assert {:ok, _} = Devices.delete_device(device)
+
+      conn
+      |> visit("/org/#{org.name}/#{product.name}/dashboard")
+      |> assert_has("h3", text: "#{product.name} doesn’t have any devices yet.")
+    end
+
+    test "assert page still render with invalid location data", %{
+      conn: conn,
+      org: org,
+      product: product,
+      device: device
+    } do
+      assert {:ok, %Device{}} =
+               Devices.update_device(device, %{
+                 connection_metadata: %{"location" => @invalid_location}
+               })
+
+      conn
+      |> visit("/org/#{org.name}/#{product.name}/dashboard")
+      |> assert_has("h3", text: "#{product.name} doesn’t have any devices with location data.")
+    end
+
+    test "handle_info - location:update", %{
+      conn: conn,
+      org: org,
+      product: product,
+      device: device
+    } do
+      conn
+      |> visit("/org/#{org.name}/#{product.name}/dashboard")
+      |> assert_has("#map")
+      |> assert_has("h3", text: "#{product.name} doesn’t have any devices with location data.")
+      |> unwrap(fn view ->
+        {:ok, _} =
+          Devices.update_device(device, %{connection_metadata: %{"location" => @valid_location}})
+
+        send(view.pid, %Broadcast{event: "location:updated", payload: @valid_location})
+        render(view)
+      end)
+      |> refute_has("h3", text: "#{product.name} doesn’t have any devices with location data.")
+      |> assert_has("#map-markers")
+    end
+  end
+end