Test that a 7-column grid's pinned cells fill their columns

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01F3B1XCZZ7QGvZLUGgSG5H4

Author: claude

test/fixtures/day_strip_grid.json

@@ -0,0 +1 @@
+{"0SfOJNhvYxUvAF6ovb6w": {"variables": {"data": "${= map(range(0, 6), i => formatDate(addDays(formatDate(now(sunDays[0].offset), 'yyyy-MM-dd'), i), 'yyyy-MM-dd'))}"}, "id": "0SfOJNhvYxUvAF6ovb6w", "name": "Day strip", "horizontalFit": "expanded", "verticalFit": "shrinkWrap", "basicBoxLocal": [40, 138, 1104, 87], "margin": [0, 20, 0, 0], "children": ["0SfOJNhv3Sjvz06eUrBb"], "allowedTypes": [], "deniedTypes": ["gridView"], "isScrollable": false, "useFlutterListView": false, "type": "gridView", "properties": {"gridDelegate": {"crossAxisSpacing": 7, "mainAxisExtent": 87, "crossAxisCount": 7, "type": "fixedCrossAxisCount"}}}, "0SfOJNhv3Sjvz06eUrBb": {"id": "0SfOJNhv3Sjvz06eUrBb", "name": "Day cell holder", "horizontalFit": "expanded", "verticalFit": "expanded", "reactions": [{"name": "Tap", "action": {"type": "setVariable", "variable": {"id": "0SfNPIrIeU9ATTBR1dsp", "name": "selectedDay"}, "newValue": "${item}"}, "trigger": {"type": "click"}, "id": "0SfOJNiHYwCnjABRyvma"}], "basicBoxLocal": [0, 0, 151.714, 87], "children": ["0SfOJNhuBhTxoaJNoRE9", "0SfOJNhvCIoovS8unN6r"], "type": "frame"}, "0SfOJNhuBhTxoaJNoRE9": {"variables": {"visible": "${= selectedDay == item}"}, "id": "0SfOJNhuBhTxoaJNoRE9", "name": "Rectangle", "edgePins": {"left": 3, "top": 3, "right": 0, "bottom": 0}, "positioningMode": "pin", "basicBoxLocal": [3, 3, 148.714, 84], "fills": [{"id": "p288", "type": "solid", "color": "#D9573B"}], "cornerRadius": [4, true, "circular"], "type": "rectangle"}, "0SfOJNhvCIoovS8unN6r": {"variables": {"fill-p286": "${= selectedDay == item ? '#1F2B2E' : '#FBF7EE'}"}, "id": "0SfOJNhvCIoovS8unN6r", "name": "Day cell", "edgePins": {"left": 0, "top": 0, "right": 3, "bottom": 3}, "positioningMode": "pin", "basicBoxLocal": [0, 0, 148.714, 84], "padding": [0, 10], "children": ["0SfOJNhulkVxCHU9Y2eE", "0SfOJNhuD2OGWfkLrY_o", "0SfOJNhv6HHFBqroJZz3", "0SfOJNhvYnpLzJFoVBdp"], "fills": [{"id": "p286", "type": "solid", "color": "#FBF7EE"}], "strokes": [{"id": "p287", "type": "solid", "color": "#1F2B2E"}], "strokeWeight": 1.5, "cornerRadius": [4, true, "circular"], "rowColumnType": "column", "mainAxisAlignment": "start", "type": "rowColumn"}, "0SfOJNhulkVxCHU9Y2eE": {"variables": {"textColor": "${= selectedDay == item ? '#9CC5B5' : '#4A5558'}"}, "id": "0SfOJNhulkVxCHU9Y2eE", "name": "${= item == formatDate(now(sunDays[0].of\u2026", "horizontalFit": "shrinkWrap", "verticalFit": "shrinkWrap", "characters": "${= item == formatDate(now(sunDays[0].offset), 'yyyy-MM-dd') ? 'TODAY' : upper(formatDate(item, 'EEE'))}", "textMixedProps": [{"fills": [{"id": "p281", "type": "solid", "color": "#1F2B2E"}], "fontSize": 10, "letterSpacing": {"value": 1.2}, "fontName": {"family": "IBM Plex Mono", "style": "Medium", "weight": "w500"}, "lineHeight": {"value": 14}, "start": 0, "end": 104}], "basicBoxLocal": [56.357, 10, 36, 14], "type": "text"}, "0SfOJNhuD2OGWfkLrY_o": {"variables": {"textColor": "${= selectedDay == item ? '#F3ECDD' : '#1F2B2E'}"}, "id": "0SfOJNhuD2OGWfkLrY_o", "name": "${= day(item)}", "horizontalFit": "shrinkWrap", "verticalFit": "shrinkWrap", "characters": "${= day(item)}", "textMixedProps": [{"fills": [{"id": "p282", "type": "solid", "color": "#1F2B2E"}], "fontSize": 22, "letterSpacing": {"value": -0.2}, "fontName": {"family": "Fraunces", "style": "SemiBold", "weight": "w600"}, "lineHeight": {"value": 28}, "start": 0, "end": 14}], "basicBoxLocal": [61.544, 26, 25.626, 28], "margin": [0, 2, 0, 0], "type": "text"}, "0SfOJNhv6HHFBqroJZz3": {"variables": {"visible": "${= find(days, d => d.date == item).lowest != null}"}, "id": "0SfOJNhv6HHFBqroJZz3", "name": "Row Column", "horizontalFit": "shrinkWrap", "basicBoxLocal": [64.457, 56, 19.8, 16], "margin": [0, 2, 0, 0], "children": ["0SfOJNhviuRCJI6AxerP", "0SfOJNhvse2Ai7eqH4Q0"], "rowColumnType": "row", "type": "rowColumn"}, "0SfOJNhviuRCJI6AxerP": {"variables": {"visible": "${= length(find(days, d => d.date == item).windows) > 0}"}, "id": "0SfOJNhviuRCJI6AxerP", "name": "Row Column", "basicBoxLocal": [-5.5, 4.5, 7, 7], "margin": [0, 0, 4, 0], "fills": [{"id": "p283", "type": "solid", "color": "#D9573B"}], "cornerRadius": [4, true, "circular"], "rowColumnType": "column", "mainAxisAlignment": "start", "crossAxisAlignment": "start", "type": "rowColumn"}, "0SfOJNhvse2Ai7eqH4Q0": {"variables": {"textColor": "${= selectedDay == item ? '#F3ECDD' : '#4A5558'}"}, "id": "0SfOJNhvse2Ai7eqH4Q0", "name": "${= (storage.units == 'm' ? replace(fixe\u2026", "horizontalFit": "shrinkWrap", "verticalFit": "shrinkWrap", "characters": "${= (storage.units == 'm' ? replace(fixed((find(days, d => d.date == item).lowest.v) * 0.3048, 2), '-0.00', '0.00') : replace(fixed(find(days, d => d.date == item).lowest.v, 1), '-0.0', '0.0'))}", "textMixedProps": [{"fills": [{"id": "p284", "type": "solid", "color": "#1F2B2E"}], "fontSize": 11, "fontName": {"family": "IBM Plex Mono", "style": "Medium", "weight": "w500"}, "lineHeight": {"value": 18}, "start": 0, "end": 194}], "basicBoxLocal": [0, -1, 19.8, 18], "type": "text"}, "0SfOJNhvYnpLzJFoVBdp": {"variables": {"visible": "${= find(days, d => d.date == item).lowest == null}"}, "id": "0SfOJNhvYnpLzJFoVBdp", "name": "Rectangle", "basicBoxLocal": [59.357, 60, 30, 8], "margin": [0, 6, 0, 2], "fills": [{"id": "p285", "type": "solid", "color": "#E9DFCB"}], "cornerRadius": [2, true, "circular"], "type": "rectangle"}}

test/grid_cell_stretch_test.dart

@@ -0,0 +1,60 @@
+import 'dart:convert';
+import 'dart:io';
+
+import 'package:codelessly_api/codelessly_api.dart';
+import 'package:codelessly_sdk/codelessly_sdk.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+import 'responsive_variance_test.dart' show pumpPage;
+
+void main() {
+  testWidgets('day strip grid cells fill their columns', (tester) async {
+    final Map raw = jsonDecode(
+      File('test/fixtures/day_strip_grid.json').readAsStringSync(),
+    );
+    final nodes = <String, BaseNode>{
+      for (final e in raw.entries)
+        e.key as String: NodeJsonConverter().fromJson(e.value as Map)!,
+    };
+    for (final node in nodes.values) {
+      for (final child in node.childrenOrEmpty) {
+        nodes[child]!.parentID = node.id;
+      }
+    }
+    const gridId = '0SfOJNhvYxUvAF6ovb6w';
+    nodes['canvas'] = CanvasNode(
+      id: 'canvas',
+      name: 'canvas',
+      basicBoxLocal: NodeBox(0, 0, 1104, 400),
+      children: ['body'],
+      properties: CanvasProperties(
+        bodyId: 'body',
+        safeArea: const SafeAreaModel.all(false),
+      ),
+    )..parentID = kRootNode;
+    nodes['body'] = AutoPlaceholderNode(
+      id: 'body',
+      name: 'body',
+      basicBoxLocal: NodeBox(0, 0, 1104, 400),
+      children: [gridId],
+    )..parentID = 'canvas';
+    nodes[gridId]!
+      ..parentID = 'body'
+      ..variables.clear();
+    // Seven items without a data source.
+    final grid = nodes[gridId]! as GridViewNode;
+    grid.properties.itemCount = 7;
+    nodes['0SfOJNhuBhTxoaJNoRE9']!.variables.clear();
+    await pumpPage(tester, nodes, screen: const Size(1104, 400));
+    expect(tester.takeException(), isNull);
+    // The coral block behind each cell is pinned 3 px in on the top left.
+    final block = nodes['0SfOJNhuBhTxoaJNoRE9']!;
+    final blocks = find.byKey(
+      ValueKey('Rectangle Transformer of ${block.debugLabel}'),
+    );
+    expect(blocks, findsWidgets);
+    // (1104 - 6 * 7) / 7 = 151.7 per column, less the 3 px offset.
+    expect(tester.getSize(blocks.first).width, closeTo(148.7, 1));
+  });
+}