Fix precipitation styles (#3041)

They weren't applied to wrong classnames, this PR fixes that and also
expands the weather util tests

---------

Co-authored-by: veeck <michael@veeck.de>

CHANGELOG.md

@@ -39,13 +39,14 @@ _This release is scheduled to be released on 2023-04-01._
 
 - Fix wrong day labels in envcanada forecast (#2987)
 - Fix for missing default class name prefix for customEvents in calendar
-- Fixed electron flashing white screen on startup (#1919)
+- Fix electron flashing white screen on startup (#1919)
 - Fix weathergov provider hourly forecast (#3008)
 - Fix message display with HTML code into alert module (#2828)
-- Fix typo into french translation
+- Fix typo in french translation
 - Yr wind direction is no longer inverted
 - Fix async node_helper stopping electron start (#2487)
 - The wind direction arrow now points in the direction the wind is flowing, not into the wind (#3019)
+- Fix precipitation css styles
 
 ## [2.22.0] - 2023-01-01
 
@@ -58,7 +59,6 @@ Special thanks to @khassel, @rejas and @sdetweil for taking over most (if not al
 - Added new calendar options for colored entries and improved styling (#3033)
 - Added test for remoteFile option in compliments module
 - Added hourlyWeather functionality to Weather.gov weather provider
-- Removed weatherEndpoint definition from weathergov.js (not used)
 - Added css class names "today" and "tomorrow" for default calendar
 - Added Collaboration.md
 - Added new github action for dependency review (#2862)
@@ -71,6 +71,7 @@ Special thanks to @khassel, @rejas and @sdetweil for taking over most (if not al
 ### Removed
 
 - Removed usage of internal fetch function of node until it is more stable
+- Removed weatherEndpoint definition from weathergov.js (not used)
 
 ### Updated
 
@@ -84,7 +85,7 @@ Special thanks to @khassel, @rejas and @sdetweil for taking over most (if not al
   - Reworked how weatherproviders handle units (#2849)
   - Use unix() method for parsing times, fix suntimes on the way (#2950)
   - Refactor conversion functions into utils class (#2958)
-- The `cors`-method in `server.js` now supports sending and recieving HTTP headers
+- The `cors`-method in `server.js` now supports sending and receiving HTTP headers
 - Replace `…` by `…`
 - Cleanup compliments module
 - Updated dependencies including electron to v22 (#2903)

modules/default/weather/forecast.njk

@@ -23,13 +23,13 @@
                     {{ f.minTemperature | roundValue | unit("temperature") | decimalSymbol }}
                 </td>
                 {% if config.showPrecipitationAmount %}
-                    <td class="align-right bright precipitationAmount">
+                    <td class="align-right bright precipitation-amount">
                         {{ f.precipitationAmount | unit("precip", f.precipitationUnits) }}
                     </td>
                 {% endif %}
                 {% if config.showPrecipitationProbability %}
-                    <td class="align-right bright precipitationProbability">
+                    <td class="align-right bright precipitation-prob">
-                        {{ f.precipitationProbability }}%
+                        {{ f.precipitationProbability | unit("precip", "%") }}
                     </td>
                 {% endif %}
             </tr>

modules/default/weather/hourly.njk

@@ -11,13 +11,13 @@
                     {{ hour.temperature | roundValue | unit("temperature") }}
                 </td>
                 {% if config.showPrecipitationAmount %}
-                    <td class="align-right bright precipitationAmount">
+                    <td class="align-right bright precipitation-amount">
                         {{ hour.precipitationAmount | unit("precip", hour.precipitationUnits) }}
                     </td>
                 {% endif %}
                 {% if config.showPrecipitationProbability %}
-                    <td class="align-right bright precipitationProbability">
+                    <td class="align-right bright precipitation-prob">
-                        {{ hour.precipitationProbability }}%
+                        {{ hour.precipitationProbability | unit("precip", "%") }}
                     </td>
                 {% endif %}
             </tr>

modules/default/weather/weather.css

@@ -29,7 +29,8 @@
   padding-right: 0;
 }
 
-.weather .precipitation {
+.weather .precipitation-amount,
+.weather .precipitation-prob {
   padding-left: 20px;
   padding-right: 0;
 }

modules/default/weather/weatherutils.js

@@ -12,7 +12,7 @@ const WeatherUtils = {
 	 * @returns {number} the speed in beaufort
 	 */
 	beaufortWindSpeed(speedInMS) {
-		const windInKmh = (speedInMS * 3600) / 1000;
+		const windInKmh = this.convertWind(speedInMS, "kmh");
 		const speeds = [1, 5, 11, 19, 28, 38, 49, 61, 74, 88, 102, 117, 1000];
 		for (const [index, speed] of speeds.entries()) {
 			if (speed > windInKmh) {
@@ -40,6 +40,8 @@ const WeatherUtils = {
 			valueUnit = valueUnit ? valueUnit : "mm";
 		}
 
+		if (valueUnit === "%") return `${value}${valueUnit}`;
+
 		return `${value.toFixed(2)} ${valueUnit}`;
 	},
 

tests/e2e/modules/weather_forecast_spec.js

@@ -79,6 +79,15 @@ describe("Weather module: Weather Forecast", () => {
 			expect(table.rows).not.toBe(null);
 			expect(table.rows.length).toBe(5);
 		});
+
+		const precipitations = [undefined, "2.51 mm"];
+		for (const [index, precipitation] of precipitations.entries()) {
+			if (precipitation) {
+				it("should render precipitation amount " + precipitation, async () => {
+					await weatherFunc.getText(`.weather table tr:nth-child(${index + 1}) td.precipitation-amount`, precipitation);
+				});
+			}
+		}
 	});
 
 	describe("Forecast weather with imperial units", () => {
@@ -99,8 +108,8 @@ describe("Weather module: Weather Forecast", () => {
 			const precipitations = [undefined, "0.10 in"];
 			for (const [index, precipitation] of precipitations.entries()) {
 				if (precipitation) {
-					it("should render precipitation value " + precipitation, async () => {
+					it("should render precipitation amount " + precipitation, async () => {
-						await weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.precipitationAmount`, precipitation);
+						await weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.precipitation-amount`, precipitation);
 					});
 				}
 			}

tests/e2e/modules/weather_hourly_spec.js

@@ -44,18 +44,18 @@ describe("Weather module: Weather Hourly Forecast", () => {
 			for (const [index, amount] of amounts.entries()) {
 				if (amount) {
 					it(`should render precipitation amount ${amount}`, async () => {
-						await weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.precipitationAmount`, amount);
+						await weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.precipitation-amount`, amount);
 					});
 				}
 			}
 		});
 
-		describe("Shows precipitation propability", () => {
+		describe("Shows precipitation probability", () => {
 			const propabilities = [undefined, undefined, "12%", "36%", "44%"];
 			for (const [index, pop] of propabilities.entries()) {
 				if (pop) {
-					it(`should render propability ${pop}`, async () => {
+					it(`should render probability ${pop}`, async () => {
-						await weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.precipitationProbability`, pop);
+						await weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.precipitation-prob`, pop);
 					});
 				}
 			}

tests/unit/functions/weather_object_spec.js

@@ -51,7 +51,15 @@ describe("WeatherObject", () => {
 describe("WeatherUtils", () => {
 	it("should convert windspeed correctly from mps to beaufort", () => {
 		expect(Math.round(WeatherUtils.convertWind(5, "beaufort"))).toBe(3);
-		expect(Math.round(WeatherUtils.convertWind(42, "beaufort"))).toBe(12);
+		expect(Math.round(WeatherUtils.convertWind(300, "beaufort"))).toBe(12);
+	});
+
+	it("should convert windspeed correctly from mps to kmh", () => {
+		expect(Math.round(WeatherUtils.convertWind(11.75, "kmh"))).toBe(42);
+	});
+
+	it("should convert windspeed correctly from mps to knots", () => {
+		expect(Math.round(WeatherUtils.convertWind(10, "knots"))).toBe(19);
 	});
 
 	it("should convert windspeed correctly from mph to mps", () => {