Fix: QPF table should say "rain" if there is no ice or snow, instead …

…of "water" (#1866)

* if there is only rain, say rain instead of water + tests

* bump library

tests/api/data/testing/gridpoints/LZK/83,73.json

@@ -5245,7 +5245,7 @@
         },
         {
           "validTime": "date:now +85 hours / PT6H",
-          "value": 0
+          "value": 30
         },
         {
           "validTime": "date:now +91 hours / PT6H",

tests/api/data/testing/points/34.749,-92.275.json

@@ -1,6 +1,13 @@
 {
   "@bundle": {
-    "name": "Many alerts"
+    "name": "Little Rock, AR",
+    "attributes": [
+      "Many alerts",
+      "Day 1 has ice, snow, and water",
+      "Day 2 has snow and water",
+      "Day 3 has ice and water",
+      "Day 4 has rain"
+    ]
   },
   "@context": [
     "https://geojson.org/geojson-ld/geojson-context.jsonld",

tests/playwright/e2e/qpf-table.spec.js

@@ -0,0 +1,63 @@
+/* eslint-disable no-await-in-loop, no-plusplus */
+const { test, expect } = require("@playwright/test");
+
+const { describe, beforeEach } = test;
+
+describe("quantitative precipitation forecast table", () => {
+  beforeEach(async ({ page }) => {
+    await page.goto("http://localhost:8081/play/testing");
+    await page.goto("http://localhost:8080/point/34.749/-92.275#daily");
+  });
+
+  test("shows snow, ice, and water when all are present", async ({ page }) => {
+    const day = await page.locator(".wx-daily-forecast-block li").first();
+    await day.locator("span.toggle-text").click();
+
+    const headings = await day.locator(".wx-precip-table thead th");
+
+    // period, snow, ice, [separator], water
+    await expect(headings).toHaveCount(5);
+    await expect(headings.nth(0)).toHaveText("Time Period");
+    await expect(headings.nth(1)).toHaveText("Snow");
+    await expect(headings.nth(2)).toHaveText("Ice");
+    await expect(headings.nth(4)).toHaveText("Water");
+  });
+
+  test("shows snow and water when there is no ice", async ({ page }) => {
+    const day = await page.locator(".wx-daily-forecast-block li").nth(1);
+    await day.locator("span.toggle-text").click();
+
+    const headings = await day.locator(".wx-precip-table thead th");
+
+    // period, snow, [separator], water
+    await expect(headings).toHaveCount(4);
+    await expect(headings.nth(0)).toHaveText("Time Period");
+    await expect(headings.nth(1)).toHaveText("Snow");
+    await expect(headings.nth(3)).toHaveText("Water");
+  });
+
+  test("shows ice and water when there is no snow", async ({ page }) => {
+    const day = await page.locator(".wx-daily-forecast-block li").nth(2);
+    await day.locator("span.toggle-text").click();
+
+    const headings = await day.locator(".wx-precip-table thead th");
+
+    // period, ice, [separator], water
+    await expect(headings).toHaveCount(4);
+    await expect(headings.nth(0)).toHaveText("Time Period");
+    await expect(headings.nth(1)).toHaveText("Ice");
+    await expect(headings.nth(3)).toHaveText("Water");
+  });
+
+  test("shows rain when there is no snow or ice", async ({ page }) => {
+    const day = await page.locator(".wx-daily-forecast-block li").nth(3);
+    await day.locator("span.toggle-text").click();
+
+    const headings = await day.locator(".wx-precip-table thead th");
+
+    // period, rain
+    await expect(headings).toHaveCount(2);
+    await expect(headings.nth(0)).toHaveText("Time Period");
+    await expect(headings.nth(1)).toHaveText("Rain");
+  });
+});

web/themes/new_weather_theme/assets/js/charts/qpf.js

@@ -52,6 +52,8 @@ const createCharts = async () => {
 
     const datasets = [];
 
+    const liquidTitle = ice.length > 0 || snow.length > 0 ? "Water" : "Rain";
+
     if (snow.length > 0) {
       datasets.push({
         label: "Snow",
@@ -82,7 +84,7 @@ const createCharts = async () => {
     }
     if (liquid.length > 0) {
       datasets.push({
-        label: "Water",
+        label: liquidTitle,
         data: liquid,
         datalabels: {
           align: "end",

web/themes/new_weather_theme/templates/partials/precip-table.html.twig

@@ -9,12 +9,15 @@
   {% set liquid = precipHours.periods | map(p => p.liquid) | json_encode %}
   {% set snow = '[]' %}
   {% set ice = '[]' %}
+  {% set liquidTitle = 'Rain' | t %}
 
   {% if precipHours.hasSnow %}
     {% set snow = precipHours.periods | map(p => p.snow) | json_encode %}
+    {% set liquidTitle = 'Water' | t %}
   {% endif %}
   {% if precipHours.hasIce %}
     {% set ice = precipHours.periods | map(p => p.ice) | json_encode %}
+    {% set liquidTitle = 'Water' | t %}
   {% endif %}
 
   <div class="margin-bottom-205">
@@ -42,7 +45,7 @@
       {% endif %}
 
       <div class="margin-x-1 margin-right-1 bg-accent-cool margin-left-1 width-2 height-2 border border-accent-cool-dark" style="margin-top: -3px;"></div>
-      {{ "Water" | t }}
+      {{ liquidTitle }}
     </div>
   </div>
 
@@ -63,7 +66,7 @@
             {% if precipHours.hasSnow or precipHours.hasIce %}
             <th aria-hidden="true"></th>
             {% endif %}
-            <th scope="col">{{ "Water" | t }}</th>
+            <th scope="col">{{ liquidTitle }}</th>
           </tr>
         </thead>
 
@@ -87,14 +90,16 @@
       </table>
     </div>
 
-    <div class="grid-col-12 tablet:grid-col-6 tablet:padding-left-1">
-      <p class="bg-base-lightest padding-105">
-        {{
-          "\"Water\" refers to the amount of water that is present in the precipitation.
-          The precipitation may actually fall in solid form such as ice or snow, in
-          liquid form as rain, or a mix of both." | t
-        }}
-      </p>
-    </div>
+    {% if precipHours.hasIce or precipHours.hasSnow %}
+      <div class="grid-col-12 tablet:grid-col-6 tablet:padding-left-1">
+        <p class="bg-base-lightest padding-105">
+          {{
+            "\"Water\" refers to the amount of water that is present in the precipitation.
+            The precipitation may actually fall in solid form such as ice or snow, in
+            liquid form as rain, or a mix of both." | t
+          }}
+        </p>
+      </div>
+    {% endif %}
   </div>
 {% endif %}