test: add release v2 browser QA campaign

packages/widgets/src/weather/compact.tsx

@@ -15,6 +15,7 @@ import { formatWeatherDate, WeatherDescription } from "./icon";
 import { getCompactWeatherLayout } from "./layout";
 
 interface CompactWeatherProps {
+  displayScale: number;
   height: number;
   isEditMode: boolean;
   options: WidgetProps<"weather">["options"];
@@ -22,13 +23,13 @@ interface CompactWeatherProps {
   width: number;
 }
 
-export const CompactWeather = ({ height, isEditMode, options, weather, width }: CompactWeatherProps) => {
+export const CompactWeather = ({ displayScale, height, isEditMode, options, weather, width }: CompactWeatherProps) => {
   const locale = useCurrentIntlLocale();
   const t = useI18n("widget.weather");
   const tCommon = useI18n("common");
   const layout = useMemo(
-    () => getCompactWeatherLayout(width, height, options.hasForecast, options.forecastDayCount),
-    [height, options.forecastDayCount, options.hasForecast, width],
+    () => getCompactWeatherLayout(width, height, options.hasForecast, options.forecastDayCount, displayScale),
+    [displayScale, height, options.forecastDayCount, options.hasForecast, width],
   );
   const today = weather.daily[0];
   const speedUnit = options.useImperialSpeed

packages/widgets/src/weather/component.spec.ts

@@ -53,6 +53,18 @@ describe("weather layout", () => {
     expect(getCompactWeatherLayout(640, 360, false, 7).forecastDays).toBe(0);
   });
 
+  it("uses the rendered dimensions when a responsive board scales the widget", () => {
+    expect(getCompactWeatherLayout(320, 180, true, 7).tier).toBe("standard");
+    expect(getCompactWeatherLayout(320, 180, true, 7, 0.5)).toEqual({
+      tier: "micro",
+      forecastDays: 0,
+      showCity: false,
+      showCondition: false,
+      showHighLow: false,
+      showSecondary: false,
+    });
+  });
+
   it("adapts the advanced view to mobile and desktop surfaces", () => {
     expect(getAdvancedWeatherLayout(374, 624)).toMatchObject({
       dailyColumns: 2,

packages/widgets/src/weather/component.tsx

@@ -18,6 +18,7 @@ export default function WeatherWidget({
   width,
   height,
   displayMode,
+  displayScale = 1,
 }: WidgetComponentProps<"weather">) {
   const input = {
     latitude: options.location.latitude,
@@ -35,7 +36,14 @@ export default function WeatherWidget({
         {displayMode === "advanced" ? (
           <AdvancedWeather height={height} options={options} weather={weather} width={width} />
         ) : (
-          <CompactWeather height={height} isEditMode={isEditMode} options={options} weather={weather} width={width} />
+          <CompactWeather
+            displayScale={displayScale}
+            height={height}
+            isEditMode={isEditMode}
+            options={options}
+            weather={weather}
+            width={width}
+          />
         )}
       </Box>
     </Box>

packages/widgets/src/weather/layout.ts

@@ -21,9 +21,17 @@ export const getCompactWeatherLayout = (
   height: number,
   hasForecast: boolean,
   configuredDays: number,
+  displayScale = 1,
 ): CompactWeatherLayout => {
+  let responsiveWidth = width;
+  let responsiveHeight = height;
+  if (Number.isFinite(displayScale) && displayScale > 0) {
+    responsiveWidth *= displayScale;
+    responsiveHeight *= displayScale;
+  }
+
   const breakpoint = compactWeatherBreakpoints.find(
-    ({ minHeight, minWidth }) => width >= minWidth && height >= minHeight,
+    ({ minHeight, minWidth }) => responsiveWidth >= minWidth && responsiveHeight >= minHeight,
   );
   const tier = breakpoint?.tier ?? "micro";
 
@@ -41,15 +49,15 @@ export const getCompactWeatherLayout = (
   if (tier === "compact") {
     return {
       tier: "compact",
-      forecastDays: hasForecast ? Math.min(configuredDays, Math.max(1, Math.floor(width / 92))) : 0,
-      showCity: width >= 220,
+      forecastDays: hasForecast ? Math.min(configuredDays, Math.max(1, Math.floor(responsiveWidth / 92))) : 0,
+      showCity: responsiveWidth >= 220,
       showCondition: true,
       showHighLow: true,
       showSecondary: false,
     };
   }
 
-  const availableForecastWidth = Math.max(0, width - 24);
+  const availableForecastWidth = Math.max(0, responsiveWidth - 24);
   return {
     tier,
     forecastDays: hasForecast ? Math.min(configuredDays, Math.max(1, Math.floor(availableForecastWidth / 64))) : 0,