meno-core 1.0.53 → 1.1.0

package/lib/client/responsiveStyleResolver.test.ts

@@ -1,496 +1,498 @@
-import { test, expect, describe, beforeEach, afterEach, afterAll } from "bun:test";
+import { test, expect, describe, afterEach } from 'bun:test';
 
 // Save original fetch before any test can modify it
 const _originalFetch = globalThis.fetch;
-import { 
-  resolveResponsiveStyleSync,
-  resolveResponsiveStyle,
-  initializeBreakpoints
-} from "./responsiveStyleResolver";
-import { getBreakpointName, DEFAULT_BREAKPOINTS } from "../shared/breakpoints";
-import type { ResponsiveStyleObject, StyleObject } from "../shared/types";
-
-describe("Responsive Style Resolver - getBreakpointName", () => {
-  describe("Breakpoint detection", () => {
+import { resolveResponsiveStyleSync, resolveResponsiveStyle, initializeBreakpoints } from './responsiveStyleResolver';
+import { getBreakpointName, DEFAULT_BREAKPOINTS } from '../shared/breakpoints';
+import type { ResponsiveStyleObject, StyleObject } from '../shared/types';
+
+describe('Responsive Style Resolver - getBreakpointName', () => {
+  describe('Breakpoint detection', () => {
     test("should return 'base' for large viewport", () => {
       const viewportWidth = 1920;
       const result = getBreakpointName(viewportWidth);
-      expect(result).toBe("base");
+      expect(result).toBe('base');
     });
 
     test("should return 'base' for viewport wider than tablet", () => {
       const viewportWidth = 1025;
       const result = getBreakpointName(viewportWidth);
-      expect(result).toBe("base");
+      expect(result).toBe('base');
     });
 
     test("should return 'tablet' for viewport at tablet breakpoint", () => {
       const viewportWidth = 1024;
       const result = getBreakpointName(viewportWidth);
-      expect(result).toBe("tablet");
+      expect(result).toBe('tablet');
     });
 
     test("should return 'tablet' for viewport between mobile and tablet", () => {
       const viewportWidth = 768;
       const result = getBreakpointName(viewportWidth);
-      expect(result).toBe("tablet");
+      expect(result).toBe('tablet');
     });
 
     test("should return 'tablet' for viewport just above mobile breakpoint", () => {
       const viewportWidth = 541;
       const result = getBreakpointName(viewportWidth);
-      expect(result).toBe("tablet");
+      expect(result).toBe('tablet');
     });
 
     test("should return 'mobile' for viewport at mobile breakpoint", () => {
       const viewportWidth = 540;
       const result = getBreakpointName(viewportWidth);
-      expect(result).toBe("mobile");
+      expect(result).toBe('mobile');
     });
 
     test("should return 'mobile' for viewport smaller than mobile breakpoint", () => {
       const viewportWidth = 320;
       const result = getBreakpointName(viewportWidth);
-      expect(result).toBe("mobile");
+      expect(result).toBe('mobile');
     });
 
-    test("should use custom breakpoints when provided", () => {
+    test('should use custom breakpoints when provided', () => {
       const viewportWidth = 800;
       const customBreakpoints = {
         tablet: { breakpoint: 900, previewPoint: 768 },
-        mobile: { breakpoint: 400, previewPoint: 375 }
+        mobile: { breakpoint: 400, previewPoint: 375 },
       };
       const result = getBreakpointName(viewportWidth, customBreakpoints);
-      expect(result).toBe("tablet");
+      expect(result).toBe('tablet');
     });
   });
 
-  describe("Edge cases", () => {
-    test("should handle exact breakpoint boundaries", () => {
-      const tabletWidth = DEFAULT_BREAKPOINTS.tablet.breakpoint;
-      const mobileWidth = DEFAULT_BREAKPOINTS.mobile.breakpoint;
+  describe('Edge cases', () => {
+    test('should handle exact breakpoint boundaries', () => {
+      const tabletWidth = DEFAULT_BREAKPOINTS.tablet!.breakpoint;
+      const mobileWidth = DEFAULT_BREAKPOINTS.mobile!.breakpoint;
 
-      expect(getBreakpointName(tabletWidth)).toBe("tablet");
-      expect(getBreakpointName(tabletWidth - 1)).toBe("tablet");
-      expect(getBreakpointName(tabletWidth + 1)).toBe("base");
+      expect(getBreakpointName(tabletWidth)).toBe('tablet');
+      expect(getBreakpointName(tabletWidth - 1)).toBe('tablet');
+      expect(getBreakpointName(tabletWidth + 1)).toBe('base');
 
-      expect(getBreakpointName(mobileWidth)).toBe("mobile");
-      expect(getBreakpointName(mobileWidth - 1)).toBe("mobile");
-      expect(getBreakpointName(mobileWidth + 1)).toBe("tablet");
+      expect(getBreakpointName(mobileWidth)).toBe('mobile');
+      expect(getBreakpointName(mobileWidth - 1)).toBe('mobile');
+      expect(getBreakpointName(mobileWidth + 1)).toBe('tablet');
     });
 
-    test("should handle zero viewport width", () => {
+    test('should handle zero viewport width', () => {
       const result = getBreakpointName(0);
-      expect(result).toBe("mobile");
+      expect(result).toBe('mobile');
     });
 
-    test("should handle very large viewport width", () => {
+    test('should handle very large viewport width', () => {
       const result = getBreakpointName(10000);
-      expect(result).toBe("base");
+      expect(result).toBe('base');
     });
   });
 });
 
-describe("Responsive Style Resolver - resolveResponsiveStyleSync", () => {
-  describe("Non-responsive styles", () => {
-    test("should pass through flat style objects", () => {
+describe('Responsive Style Resolver - resolveResponsiveStyleSync', () => {
+  describe('Non-responsive styles', () => {
+    test('should pass through flat style objects', () => {
       const style: StyleObject = {
-        color: "red",
-        fontSize: "16px"
+        color: 'red',
+        fontSize: '16px',
       };
-      
+
       const result = resolveResponsiveStyleSync(style);
       expect(result).toEqual(style);
-      expect(result.color).toBe("red");
-      expect(result.fontSize).toBe("16px");
+      expect(result.color).toBe('red');
+      expect(result.fontSize).toBe('16px');
     });
 
-    test("should return same object for non-responsive styles", () => {
+    test('should return same object for non-responsive styles', () => {
       const style: StyleObject = {
-        padding: "10px",
-        margin: "20px"
+        padding: '10px',
+        margin: '20px',
       };
-      
+
       const result = resolveResponsiveStyleSync(style);
       expect(result).toBe(style); // Should return same reference for flat styles
     });
   });
 
-  describe("Responsive styles - viewport strategy", () => {
-    test("should merge base only styles at base breakpoint", () => {
+  describe('Responsive styles - viewport strategy', () => {
+    test('should merge base only styles at base breakpoint', () => {
       const style: ResponsiveStyleObject = {
         base: {
-          color: "red",
-          fontSize: "16px"
-        }
+          color: 'red',
+          fontSize: '16px',
+        },
       };
       const viewportWidth = 1920;
-      
+
       const result = resolveResponsiveStyleSync(style, viewportWidth);
-      
-      expect(result.color).toBe("red");
-      expect(result.fontSize).toBe("16px");
+
+      expect(result.color).toBe('red');
+      expect(result.fontSize).toBe('16px');
     });
 
-    test("should merge base and tablet styles at tablet breakpoint", () => {
+    test('should merge base and tablet styles at tablet breakpoint', () => {
       const style: ResponsiveStyleObject = {
         base: {
-          color: "red",
-          fontSize: "16px"
+          color: 'red',
+          fontSize: '16px',
         },
         tablet: {
-          fontSize: "14px",
-          padding: "10px"
-        }
+          fontSize: '14px',
+          padding: '10px',
+        },
       };
       const viewportWidth = 768;
-      
+
       const result = resolveResponsiveStyleSync(style, viewportWidth);
-      
-      expect(result.color).toBe("red"); // From base
-      expect(result.fontSize).toBe("14px"); // Overridden by tablet
-      expect(result.padding).toBe("10px"); // From tablet
+
+      expect(result.color).toBe('red'); // From base
+      expect(result.fontSize).toBe('14px'); // Overridden by tablet
+      expect(result.padding).toBe('10px'); // From tablet
     });
 
-    test("should merge all breakpoints at mobile breakpoint", () => {
+    test('should merge all breakpoints at mobile breakpoint', () => {
       const style: ResponsiveStyleObject = {
         base: {
-          color: "red",
-          fontSize: "16px"
+          color: 'red',
+          fontSize: '16px',
         },
         tablet: {
-          fontSize: "14px"
+          fontSize: '14px',
         },
         mobile: {
-          fontSize: "12px",
-          color: "blue"
-        }
+          fontSize: '12px',
+          color: 'blue',
+        },
       };
       const viewportWidth = 320;
-      
+
       const result = resolveResponsiveStyleSync(style, viewportWidth);
-      
-      expect(result.color).toBe("blue"); // Overridden by mobile
-      expect(result.fontSize).toBe("12px"); // Overridden by mobile
+
+      expect(result.color).toBe('blue'); // Overridden by mobile
+      expect(result.fontSize).toBe('12px'); // Overridden by mobile
     });
 
-    test("should apply tablet styles at tablet viewport", () => {
+    test('should apply tablet styles at tablet viewport', () => {
       const style: ResponsiveStyleObject = {
         base: {
-          padding: "20px"
+          padding: '20px',
         },
         tablet: {
-          padding: "15px"
-        }
+          padding: '15px',
+        },
       };
       const viewportWidth = 1024;
-      
+
       const result = resolveResponsiveStyleSync(style, viewportWidth);
-      
-      expect(result.padding).toBe("15px");
+
+      expect(result.padding).toBe('15px');
     });
 
-    test("should apply mobile styles at mobile viewport", () => {
+    test('should apply mobile styles at mobile viewport', () => {
       const style: ResponsiveStyleObject = {
         base: {
-          padding: "20px"
+          padding: '20px',
         },
         tablet: {
-          padding: "15px"
+          padding: '15px',
         },
         mobile: {
-          padding: "10px"
-        }
+          padding: '10px',
+        },
       };
       const viewportWidth = 540;
-      
+
       const result = resolveResponsiveStyleSync(style, viewportWidth);
-      
-      expect(result.padding).toBe("10px");
+
+      expect(result.padding).toBe('10px');
     });
   });
 
-  describe("Responsive styles - style object variations", () => {
-    test("should handle styles with base only", () => {
+  describe('Responsive styles - style object variations', () => {
+    test('should handle styles with base only', () => {
       const style: ResponsiveStyleObject = {
         base: {
-          color: "black",
-          backgroundColor: "white"
-        }
+          color: 'black',
+          backgroundColor: 'white',
+        },
       };
-      
+
       const result = resolveResponsiveStyleSync(style, 1920);
-      
-      expect(result.color).toBe("black");
-      expect(result.backgroundColor).toBe("white");
+
+      expect(result.color).toBe('black');
+      expect(result.backgroundColor).toBe('white');
     });
 
-    test("should handle styles with base and tablet", () => {
+    test('should handle styles with base and tablet', () => {
       const style: ResponsiveStyleObject = {
         base: {
-          fontSize: "16px"
+          fontSize: '16px',
         },
         tablet: {
-          fontSize: "14px"
-        }
+          fontSize: '14px',
+        },
       };
-      
+
       const result = resolveResponsiveStyleSync(style, 768);
-      
-      expect(result.fontSize).toBe("14px");
+
+      expect(result.fontSize).toBe('14px');
     });
 
-    test("should handle styles with all breakpoints", () => {
+    test('should handle styles with all breakpoints', () => {
       const style: ResponsiveStyleObject = {
         base: {
-          fontSize: "18px",
-          color: "black"
+          fontSize: '18px',
+          color: 'black',
         },
         tablet: {
-          fontSize: "16px"
+          fontSize: '16px',
         },
         mobile: {
-          fontSize: "14px",
-          color: "gray"
-        }
+          fontSize: '14px',
+          color: 'gray',
+        },
       };
-      
+
       const result = resolveResponsiveStyleSync(style, 320);
-      
-      expect(result.fontSize).toBe("14px");
-      expect(result.color).toBe("gray");
+
+      expect(result.fontSize).toBe('14px');
+      expect(result.color).toBe('gray');
     });
 
-    test("should handle missing breakpoint styles", () => {
+    test('should handle missing breakpoint styles', () => {
       const style: ResponsiveStyleObject = {
         base: {
-          color: "red"
-        }
+          color: 'red',
+        },
         // No tablet or mobile
       };
-      
+
       const result = resolveResponsiveStyleSync(style, 320);
-      
-      expect(result.color).toBe("red"); // Should still have base styles
+
+      expect(result.color).toBe('red'); // Should still have base styles
     });
 
-    test("should handle empty base styles", () => {
+    test('should handle empty base styles', () => {
       const style: ResponsiveStyleObject = {
         base: {},
         tablet: {
-          fontSize: "14px"
-        }
+          fontSize: '14px',
+        },
       };
-      
+
       const result = resolveResponsiveStyleSync(style, 768);
-      
-      expect(result.fontSize).toBe("14px");
+
+      expect(result.fontSize).toBe('14px');
     });
   });
 
-  describe("Edge cases", () => {
-    test("should handle empty responsive style object", () => {
+  describe('Edge cases', () => {
+    test('should handle empty responsive style object', () => {
       const style: ResponsiveStyleObject = {
-        base: {}
+        base: {},
       };
-      
+
       const result = resolveResponsiveStyleSync(style, 1920);
-      
+
       expect(Object.keys(result).length).toBe(0);
     });
 
-    test("should handle viewport width at exact tablet boundary", () => {
+    test('should handle viewport width at exact tablet boundary', () => {
       const style: ResponsiveStyleObject = {
-        base: { fontSize: "16px" },
-        tablet: { fontSize: "14px" }
+        base: { fontSize: '16px' },
+        tablet: { fontSize: '14px' },
       };
 
-      const result = resolveResponsiveStyleSync(style, DEFAULT_BREAKPOINTS.tablet.breakpoint);
+      const result = resolveResponsiveStyleSync(style, DEFAULT_BREAKPOINTS.tablet!.breakpoint);
 
-      expect(result.fontSize).toBe("14px");
+      expect(result.fontSize).toBe('14px');
     });
 
-    test("should handle viewport width at exact mobile boundary", () => {
+    test('should handle viewport width at exact mobile boundary', () => {
       const style: ResponsiveStyleObject = {
-        base: { fontSize: "16px" },
-        tablet: { fontSize: "14px" },
-        mobile: { fontSize: "12px" }
+        base: { fontSize: '16px' },
+        tablet: { fontSize: '14px' },
+        mobile: { fontSize: '12px' },
       };
 
-      const result = resolveResponsiveStyleSync(style, DEFAULT_BREAKPOINTS.mobile.breakpoint);
+      const result = resolveResponsiveStyleSync(style, DEFAULT_BREAKPOINTS.mobile!.breakpoint);
 
-      expect(result.fontSize).toBe("12px");
+      expect(result.fontSize).toBe('12px');
     });
 
-    test("should use default viewport width when not provided", () => {
+    test('should use default viewport width when not provided', () => {
       const style: ResponsiveStyleObject = {
-        base: { fontSize: "16px" }
+        base: { fontSize: '16px' },
       };
-      
+
       // Should use window.innerWidth or 1920 as default
       const result = resolveResponsiveStyleSync(style);
-      
-      expect(result.fontSize).toBe("16px");
+
+      expect(result.fontSize).toBe('16px');
       // Note: Can't reliably test the exact default without window object in test env
     });
   });
 });
 
-describe("Responsive Style Resolver - resolveResponsiveStyle (async)", () => {
+describe('Responsive Style Resolver - resolveResponsiveStyle (async)', () => {
   afterEach(() => {
     globalThis.fetch = _originalFetch;
   });
 
-  test("should resolve non-responsive styles asynchronously", async () => {
+  test('should resolve non-responsive styles asynchronously', async () => {
     const style: StyleObject = {
-      color: "red"
+      color: 'red',
     };
-    
+
     const result = await resolveResponsiveStyle(style);
-    
+
     expect(result).toEqual(style);
   });
 
-  test("should resolve responsive styles with default breakpoints on fetch error", async () => {
+  test('should resolve responsive styles with default breakpoints on fetch error', async () => {
     // Mock fetch to fail
     globalThis.fetch = (() => Promise.reject(new Error('Network error'))) as unknown as typeof fetch;
-    
+
     const style: ResponsiveStyleObject = {
       base: {
-        fontSize: "16px"
+        fontSize: '16px',
       },
       tablet: {
-        fontSize: "14px"
-      }
+        fontSize: '14px',
+      },
     };
-    
+
     const result = await resolveResponsiveStyle(style);
-    
+
     // Should use default breakpoints and resolve based on window.innerWidth or 1920
     expect(result.fontSize).toBeDefined();
   });
 
-  test("should handle async breakpoint config loading", async () => {
+  test('should handle async breakpoint config loading', async () => {
     // Mock successful fetch
-    globalThis.fetch = (() => Promise.resolve({
-      json: () => Promise.resolve({
-        breakpoints: {
-          tablet: 900,
-          mobile: 400
-        }
-      })
-    })) as unknown as typeof fetch;
-    
+    globalThis.fetch = (() =>
+      Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            breakpoints: {
+              tablet: 900,
+              mobile: 400,
+            },
+          }),
+      })) as unknown as typeof fetch;
+
     const style: ResponsiveStyleObject = {
-      base: { fontSize: "16px" },
-      tablet: { fontSize: "14px" }
+      base: { fontSize: '16px' },
+      tablet: { fontSize: '14px' },
     };
-    
+
     // First call should trigger config load
     await resolveResponsiveStyle(style);
-    
+
     // Second call should use cached config
     const result = await resolveResponsiveStyle(style);
-    
+
     expect(result.fontSize).toBeDefined();
   });
 });
 
-describe("Responsive Style Resolver - initializeBreakpoints", () => {
+describe('Responsive Style Resolver - initializeBreakpoints', () => {
   afterEach(() => {
     globalThis.fetch = _originalFetch;
   });
 
-  test("should initialize breakpoint config", async () => {
+  test('should initialize breakpoint config', async () => {
     // Mock successful fetch
-    globalThis.fetch = (() => Promise.resolve({
-      json: () => Promise.resolve({
-        breakpoints: {
-          tablet: 900,
-          mobile: 400
-        }
-      })
-    })) as unknown as typeof fetch;
-    
+    globalThis.fetch = (() =>
+      Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            breakpoints: {
+              tablet: 900,
+              mobile: 400,
+            },
+          }),
+      })) as unknown as typeof fetch;
+
     await initializeBreakpoints();
-    
+
     // If initialization succeeds, subsequent resolveResponsiveStyleSync should use cached config
     const style: ResponsiveStyleObject = {
-      base: { fontSize: "16px" }
+      base: { fontSize: '16px' },
     };
-    
+
     const result = resolveResponsiveStyleSync(style);
-    expect(result.fontSize).toBe("16px");
+    expect(result.fontSize).toBe('16px');
   });
 
-  test("should handle initialization error gracefully", async () => {
+  test('should handle initialization error gracefully', async () => {
     // Mock fetch to fail
     globalThis.fetch = (() => Promise.reject(new Error('Network error'))) as unknown as typeof fetch;
-    
+
     // Should not throw
     await expect(initializeBreakpoints()).resolves.toBeUndefined();
   });
 });
 
-describe("Responsive Style Resolver - Real-world examples", () => {
-  test("should handle complex responsive style from index.json example", () => {
+describe('Responsive Style Resolver - Real-world examples', () => {
+  test('should handle complex responsive style from index.json example', () => {
     // Based on pages/index.json - h1 with responsive fontSize
     const style: ResponsiveStyleObject = {
       base: {
-        fontSize: "89px",
-        fontWeight: "600",
-        marginBottom: "16px",
-        color: "#1f2937",
-        letterSpacing: "-0.02em"
+        fontSize: '89px',
+        fontWeight: '600',
+        marginBottom: '16px',
+        color: '#1f2937',
+        letterSpacing: '-0.02em',
       },
       tablet: {
-        fontSize: "32px"
+        fontSize: '32px',
       },
-      mobile: {}
+      mobile: {},
     };
-    
+
     // Test at base viewport
     const resultBase = resolveResponsiveStyleSync(style, 1920);
-    expect(resultBase.fontSize).toBe("89px");
-    expect(resultBase.fontWeight).toBe("600");
-    
+    expect(resultBase.fontSize).toBe('89px');
+    expect(resultBase.fontWeight).toBe('600');
+
     // Test at tablet viewport
     const resultTablet = resolveResponsiveStyleSync(style, 768);
-    expect(resultTablet.fontSize).toBe("32px");
-    expect(resultTablet.fontWeight).toBe("600"); // From base
-    
+    expect(resultTablet.fontSize).toBe('32px');
+    expect(resultTablet.fontWeight).toBe('600'); // From base
+
     // Test at mobile viewport
-    // Implementation note: viewport strategy applies base + active breakpoint only
-    // Tablet styles don't cascade to mobile - each breakpoint is independent
+    // Implementation note: viewport strategy mirrors the CSS max-width cascade —
+    // every breakpoint whose range includes the viewport applies, larger first.
+    // At 320px both tablet and mobile ranges include the viewport, so tablet's
+    // fontSize applies (mobile is empty and overrides nothing).
     const resultMobile = resolveResponsiveStyleSync(style, 320);
-    expect(resultMobile.fontSize).toBe("89px"); // Base only (mobile is empty, tablet doesn't cascade)
-    expect(resultMobile.fontWeight).toBe("600"); // From base
+    expect(resultMobile.fontSize).toBe('32px'); // Tablet cascades to mobile (CSS max-width semantics)
+    expect(resultMobile.fontWeight).toBe('600'); // From base
   });
 
-  test("should apply base + active breakpoint styles", () => {
-    // Implementation note: viewport strategy applies base + active breakpoint only
-    // Tablet styles don't cascade to mobile - each breakpoint is independent
+  test('should apply base + cascading breakpoint styles', () => {
+    // Implementation note: viewport strategy mirrors the CSS max-width cascade —
+    // at a mobile viewport, tablet styles apply first, then mobile overrides.
     const style: ResponsiveStyleObject = {
       base: {
-        padding: "20px",
-        margin: "10px",
-        color: "black"
+        padding: '20px',
+        margin: '10px',
+        color: 'black',
       },
       tablet: {
-        padding: "15px",
-        fontSize: "14px"
+        padding: '15px',
+        fontSize: '14px',
       },
       mobile: {
-        padding: "10px",
-        color: "gray"
-      }
+        padding: '10px',
+        color: 'gray',
+      },
     };
 
     const result = resolveResponsiveStyleSync(style, 320);
 
-    expect(result.padding).toBe("10px"); // Mobile overrides
-    expect(result.margin).toBe("10px"); // From base
-    expect(result.color).toBe("gray"); // Mobile overrides
-    expect(result.fontSize).toBeUndefined(); // Tablet doesn't cascade to mobile
+    expect(result.padding).toBe('10px'); // Mobile overrides tablet's 15px
+    expect(result.margin).toBe('10px'); // From base
+    expect(result.color).toBe('gray'); // Mobile overrides
+    expect(result.fontSize).toBe('14px'); // Tablet cascades to mobile (CSS max-width semantics)
   });
 });