@astryxdesign/core 0.4.4 → 0.4.5-canary.0472ec1

package/src/BottomSheet/BottomSheetPanel.test.tsx

@@ -237,4 +237,95 @@ describe('BottomSheetPanel', () => {
     expect(panelRef).toHaveBeenLastCalledWith(null);
     expect(panelRef).toHaveBeenCalledTimes(2);
   });
+
+  it('floats the handle bar over content that starts at the sheet top edge', () => {
+    renderPanel({kind: 'open', entering: false});
+
+    const bar = getPanel().querySelector<HTMLElement>(
+      'div[aria-hidden="true"]',
+    );
+    if (bar == null) {
+      throw new Error('handle bar not found');
+    }
+    const body = bar.nextElementSibling as HTMLElement;
+
+    // Out of flow: the bar costs the content no layout space. That is the
+    // point of it -- the content sits closer to the sheet's top edge, and
+    // scrolled content passes beneath the pill rather than stopping at a
+    // hard edge.
+    expect(getComputedStyle(bar).position).toBe('absolute');
+
+    // So the body must not reserve room for it. A top padding here would
+    // push the content back down and undo the change.
+    expect(getComputedStyle(body).paddingTop).toBe('');
+  });
+
+  // The pill is only legible over the content riding up beneath it because
+  // the bar carries a backdrop; without it, text runs straight through the
+  // pill. jsdom's StyleX runtime does not inject the rule, so assert on the
+  // style definition itself (same approach as AspectRatio's reset.css tests).
+  it('backs the floating handle bar with a surface gradient', async () => {
+    const fs = await import('fs');
+    const path = await import('path');
+    const source = fs.readFileSync(
+      path.resolve(__dirname, './BottomSheetPanel.tsx'),
+      'utf-8',
+    );
+
+    const handleBar = source.match(/handleBar: \{([\s\S]*?)\n {2}\},/);
+    expect(handleBar).not.toBeNull();
+    expect(handleBar![1]).toContain("position: 'absolute'");
+    expect(handleBar![1]).toContain('linear-gradient(to bottom');
+    expect(handleBar![1]).toContain("colorVars['--color-background-surface']");
+  });
+
+  // In dark mode the surface fill and the scrim sit a few RGB steps apart and
+  // the drop shadow is black on near-black, so the fill alone leaves the
+  // sheet's left and right edges invisible against the scrim. A hairline on
+  // the scrim-facing edges is what draws them. Asserted on the style
+  // definition for the same reason as the test above.
+  it('draws a hairline on the three edges that face the scrim', async () => {
+    const fs = await import('fs');
+    const path = await import('path');
+    const source = fs.readFileSync(
+      path.resolve(__dirname, './BottomSheetPanel.tsx'),
+      'utf-8',
+    );
+
+    const sheet = source.match(/\n {2}sheet: \{([\s\S]*?)\n {2}\},/);
+    expect(sheet).not.toBeNull();
+    for (const edge of [
+      'borderBlockStart',
+      'borderInlineStart',
+      'borderInlineEnd',
+    ]) {
+      expect(sheet![1]).toContain(`${edge}Width: borderVars['--border-width']`);
+      expect(sheet![1]).toContain(`${edge}Style: 'solid'`);
+      expect(sheet![1]).toContain(`${edge}Color: colorVars['--color-border']`);
+    }
+    // The block-end edge sits below the viewport, under the overscroll
+    // padding, so it carries no hairline to draw.
+    expect(sheet![1]).not.toContain('borderBlockEndWidth');
+  });
+
+  // A theme that packs an inset ring into --shadow-high (the bundled themes all
+  // add one in dark mode) draws it just inside the sheet, where an opaque
+  // content wrapper such as Section paints over it -- so it showed only in the
+  // gap below the content and the side edges appeared to change width partway
+  // down. The scrolling body paints the surface across the whole inner box to
+  // hide the ring evenly.
+  it('paints the surface across the scrolling body so the edge stays uniform', async () => {
+    const fs = await import('fs');
+    const path = await import('path');
+    const source = fs.readFileSync(
+      path.resolve(__dirname, './BottomSheetPanel.tsx'),
+      'utf-8',
+    );
+
+    const body = source.match(/\n {2}body: \{([\s\S]*?)\n {2}\},/);
+    expect(body).not.toBeNull();
+    expect(body![1]).toContain(
+      "backgroundColor: colorVars['--color-background-surface']",
+    );
+  });
 });

package/src/BottomSheet/BottomSheetPanel.tsx

@@ -16,6 +16,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/BottomSheet/BottomSheet.tsx
  * - /packages/core/src/BottomSheet/BottomSheetPanel.test.tsx
+ * - /packages/core/src/BottomSheet/snapOffsets.ts
  * - /packages/core/src/BottomSheet/useMobileKeyboard.ts
  * - /packages/core/src/BottomSheet/useSheetGestures.ts
  */
@@ -25,12 +26,15 @@ import {
   useEffect,
   useImperativeHandle,
   useLayoutEffect,
+  useMemo,
   useRef,
   type ReactNode,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
+import {useDevWarning} from '../hooks';
 import {
+  borderVars,
   colorVars,
   durationVars,
   easeVars,
@@ -40,11 +44,15 @@ import {
   spacingVars,
 } from '../theme/tokens.stylex';
 import {mergeProps, themeProps} from '../utils';
+import {overlayPaddingReset} from '../Layout/padding.stylex';
+import {
+  isValidSnapPoint,
+  resolveSnapPoints,
+  type BottomSheetSnapPoint,
+} from './snapOffsets';
 import {useMobileKeyboard} from './useMobileKeyboard';
 import {useSheetGestures} from './useSheetGestures';
 
-const SNAP_FRACTIONS = [0.14, 0.5, 0.92];
-
 const HEIGHT_BUDGETS = {
   hug: '92dvh',
   capped: '62dvh',
@@ -52,35 +60,75 @@ const HEIGHT_BUDGETS = {
 } as const;
 
 export type BottomSheetHeight = keyof typeof HEIGHT_BUDGETS;
+export type {BottomSheetSnapPoint};
 
 // SYNC: must match OVERSCROLL_MAX in useSheetGestures.ts.
 const OVERSCROLL_PADDING = 48;
 const MOBILE_KEYBOARD_BOTTOM_CLEARANCE = 48;
 const TRANSITION_BACKSTOP_BUFFER_MS = 50;
+// The floating handle bar's height. The bar is out of flow, so this is not
+// layout space the content pays for -- the pill (4px, centered) lands 10-14px
+// from the sheet's top edge, inside the space a content wrapper's own top
+// padding already provides.
+const HANDLE_BAR_HEIGHT = spacingVars['--spacing-6'];
+
+// Measure the same viewport the height budgets are written against. Those are
+// `dvh`, which the virtual keyboard does not shrink, so reading
+// `visualViewport` here would make the two disagree by exactly the keyboard's
+// height: every detent would move while the sheet it measures did not. A
+// keyboard is `useMobileKeyboard`'s business — it holds the sheet still and
+// scrolls the body — and it does not redefine the sheet's detents.
+function layoutViewportHeight(): number {
+  return typeof window === 'undefined' ? 0 : window.innerHeight;
+}
 
-function defaultSnapHeights(): number[] {
-  if (typeof window === 'undefined') {
-    return [];
+/**
+ * A stable identity for a set of snap points. Type-tagged, so the fraction
+ * `0.5` and the (invalid) string `'0.5'` cannot collide on one key.
+ *
+ * Recomputed every render — the panel re-renders on every frame of a drag — so
+ * it stays a single pass over a handful of values, and everything derived from
+ * the points hangs off it instead of being rebuilt per frame.
+ */
+function snapPointsKeyFor(
+  points: ReadonlyArray<BottomSheetSnapPoint> | undefined,
+): string {
+  let key = '';
+  for (const point of points ?? []) {
+    key += `${typeof point}:${point}|`;
   }
-  // Measure the same viewport the height budgets are written against. Those
-  // are `dvh`, which the virtual keyboard does not shrink, so reading
-  // `visualViewport` here made the two disagree by exactly the keyboard's
-  // height: every detent moved while the sheet it was measuring did not. A
-  // keyboard is `useMobileKeyboard`'s business — it holds the sheet still and
-  // scrolls the body — and it does not redefine the sheet's detents.
-  return SNAP_FRACTIONS.map(fraction => fraction * window.innerHeight);
+  return key;
 }
 
 const styles = stylex.create({
   sheet: {
     pointerEvents: 'auto',
     boxSizing: 'border-box',
+    // Containing block for the floating handle bar, which is lifted out of
+    // flow so the scrolling body reaches the sheet's top edge.
+    position: 'relative',
     display: 'flex',
     flexDirection: 'column',
     minHeight: 0,
     width: '100%',
     maxWidth: 640,
     backgroundColor: colorVars['--color-background-surface'],
+    // Hairline on the three edges that face the scrim. The surface fill alone
+    // separates sheet from scrim in light mode, but not in dark: there the two
+    // sit within a few RGB steps of each other and the drop shadow is black on
+    // near-black, so the sheet's left and right edges disappear. Same
+    // treatment MobileNav gives its scrim-facing edge. The block-end edge is
+    // deliberately left bare; it sits below the viewport, under the overscroll
+    // padding.
+    borderBlockStartWidth: borderVars['--border-width'],
+    borderBlockStartStyle: 'solid',
+    borderBlockStartColor: colorVars['--color-border'],
+    borderInlineStartWidth: borderVars['--border-width'],
+    borderInlineStartStyle: 'solid',
+    borderInlineStartColor: colorVars['--color-border'],
+    borderInlineEndWidth: borderVars['--border-width'],
+    borderInlineEndStyle: 'solid',
+    borderInlineEndColor: colorVars['--color-border'],
     borderStartStartRadius: radiusVars['--radius-container'],
     borderStartEndRadius: radiusVars['--radius-container'],
     boxShadow: shadowVars['--shadow-high'],
@@ -111,11 +159,23 @@ const styles = stylex.create({
     pointerEvents: 'none',
   },
   handleBar: {
-    flexShrink: 0,
+    // Floats over the body rather than taking a row in the flex column. The
+    // content starts at the sheet's top edge and rides up under the pill --
+    // both moving it closer to the top and letting scrolled content pass
+    // beneath instead of stopping at a hard edge.
+    position: 'absolute',
+    insetBlockStart: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
+    zIndex: 1,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    height: spacingVars['--spacing-12'],
+    height: HANDLE_BAR_HEIGHT,
+    // Keeps the pill legible over whatever sits or scrolls under it: opaque
+    // surface behind the pill itself, fading out across the lower half so the
+    // content emerging below has no visible cut line.
+    backgroundImage: `linear-gradient(to bottom, ${colorVars['--color-background-surface']} 60%, transparent)`,
     touchAction: 'none',
     cursor: 'grab',
   },
@@ -132,6 +192,19 @@ const styles = stylex.create({
     overflowY: 'auto',
     overscrollBehavior: 'none',
     touchAction: 'pan-y',
+    // The scrolling area paints the surface itself, covering the sheet's whole
+    // inner box. Without it the sheet's edge is not uniform: a theme that packs
+    // an inset ring into --shadow-high (the bundled themes all add one in dark
+    // mode) draws that ring just inside the sheet, where an opaque content
+    // wrapper such as Section paints over it -- so the ring shows only in the
+    // gap below where the content ends, and the sheet's side edges appear to
+    // change width partway down. Painting the surface here hides the ring
+    // evenly, leaving the border below as the sheet's one edge.
+    backgroundColor: colorVars['--color-background-surface'],
+    // No reserve for the handle bar: it floats, so the content starts at the
+    // sheet's top edge and rides up under the pill. The pill is 4px centered
+    // in a 24px band, so it occupies only 10-14px from the edge -- inside the
+    // space a content wrapper's own top padding already provides.
     paddingBlockEnd: 0,
   },
   tallKeyboardBody: {
@@ -171,6 +244,7 @@ interface BottomSheetPanelProps extends BaseProps<HTMLDivElement> {
   state: BottomSheetPanelState;
   height: BottomSheetHeight | number | string;
   children: ReactNode;
+  snapPoints?: ReadonlyArray<BottomSheetSnapPoint>;
   isSwipeDismissAllowed?: boolean;
   /** Whether the host has locked page scrolling (a modal, scrim-backed sheet). */
   isPageScrollLocked?: boolean;
@@ -296,6 +370,7 @@ export function BottomSheetPanel({
   state,
   height,
   children,
+  snapPoints,
   className,
   style,
   tabIndex,
@@ -340,6 +415,36 @@ export function BottomSheetPanel({
   const isFading = isRetained && state.motion === 'fading';
   const alignmentOffset = isRetained ? state.alignmentOffset : 0;
 
+  // Everything derived from the snap points keys off their identity, not the
+  // array's: the resolver's identity is the hook's signal that the stops
+  // changed, so it must not churn on a re-render the drag caused. The memo
+  // reads the points through a ref, so the resolver resolves them at call time
+  // — against whatever the viewport is then, not what it was at memo time.
+  const snapPointsKey = snapPointsKeyFor(snapPoints);
+  const snapPointsRef = useRef(snapPoints);
+  snapPointsRef.current = snapPoints;
+  const {snapHeights, ignoredSnapPointsMessage} = useMemo(() => {
+    if (snapPointsKey === '') {
+      return {snapHeights: undefined, ignoredSnapPointsMessage: ''};
+    }
+    const ignored = (snapPointsRef.current ?? []).filter(
+      point => !isValidSnapPoint(point),
+    );
+    return {
+      snapHeights: () =>
+        resolveSnapPoints(snapPointsRef.current ?? [], layoutViewportHeight()),
+      ignoredSnapPointsMessage:
+        ignored.length === 0
+          ? ''
+          : `snapPoints ignored ${JSON.stringify(ignored)}. A snap point is a viewport fraction above 0 and up to 1 (0.5 is half the screen), a px length ('320px'), or a percentage ('50%').`,
+    };
+  }, [snapPointsKey]);
+  useDevWarning(
+    'BottomSheet',
+    ignoredSnapPointsMessage,
+    ignoredSnapPointsMessage !== '',
+  );
+
   const {
     contentProps,
     handleProps,
@@ -359,7 +464,7 @@ export function BottomSheetPanel({
     canDismiss: isSwipeDismissAllowed,
     offscreenBlockEndInset: OVERSCROLL_PADDING,
     onDismiss,
-    snapHeights: defaultSnapHeights,
+    snapHeights,
     onScrimOpacity,
   });
 
@@ -502,6 +607,7 @@ export function BottomSheetPanel({
         themeProps('bottom-sheet'),
         stylex.props(
           styles.sheet,
+          overlayPaddingReset.reset,
           height === 'hug' ? styles.hugHeight : styles.budget,
           isClosing && styles.sheetClosing,
           isFading && styles.sheetFading,

package/src/BottomSheet/index.ts

@@ -10,6 +10,10 @@
  */
 
 export {BottomSheet} from './BottomSheet';
-export type {BottomSheetHeight, BottomSheetProps} from './BottomSheet';
+export type {
+  BottomSheetHeight,
+  BottomSheetProps,
+  BottomSheetSnapPoint,
+} from './BottomSheet';
 export {BottomSheetSwitcher} from './BottomSheetSwitcher';
 export type {BottomSheetSwitcherProps} from './BottomSheetSwitcher';

package/src/BottomSheet/snapOffsets.test.ts

@@ -11,24 +11,73 @@
 
 import {describe, it, expect} from 'vitest';
 import {
-  snapFractionsToHeights,
   computeDetentOffsets,
+  isValidSnapPoint,
   nearestOffset,
+  peekOffsetFor,
   resolveSettleOffset,
+  resolveSnapPoints,
   scrimOpacityForOffset,
-  isPeekOffset,
   DETENT_DEDUP_PX,
 } from './snapOffsets';
 
-describe('snapFractionsToHeights', () => {
-  it('scales in-range fractions to px', () => {
-    expect(snapFractionsToHeights([0.5, 0.92], 800)).toEqual([400, 736]);
+describe('resolveSnapPoints', () => {
+  it('reads a bare number as a fraction of the viewport', () => {
+    expect(resolveSnapPoints([0.5, 0.92], 800)).toEqual([400, 736]);
   });
-  it('drops out-of-range fractions', () => {
-    expect(snapFractionsToHeights([0, 0.5, 1, 1.2, -0.3], 1000)).toEqual([
+
+  it('reads a percentage as the same fraction', () => {
+    expect(resolveSnapPoints(['50%', '92%'], 800)).toEqual([400, 736]);
+  });
+
+  it('reads a px length as an absolute height', () => {
+    expect(resolveSnapPoints(['320px'], 800)).toEqual([320]);
+  });
+
+  it('keeps the caller order, mixing forms', () => {
+    expect(resolveSnapPoints(['120px', 0.5, '90%'], 800)).toEqual([
+      120, 400, 720,
+    ]);
+  });
+
+  it('accepts fractional and unit-cased lengths, and surrounding space', () => {
+    expect(resolveSnapPoints(['12.5%', '0.5PX', ' 80px '], 800)).toEqual([
+      100, 0.5, 80,
+    ]);
+  });
+
+  it('drops numbers outside the (0, 1] fraction range', () => {
+    // 200 is the px mistake — a bare number is never a length.
+    expect(resolveSnapPoints([0, 0.5, 1, 1.2, -0.3, 200], 1000)).toEqual([
       500, 1000,
     ]);
   });
+
+  it('drops lengths it cannot resolve by arithmetic on the viewport', () => {
+    expect(
+      resolveSnapPoints(
+        ['50', '30rem', '50vh', 'calc(50% - 20px)', '-10px', '', '0px'],
+        800,
+      ),
+    ).toEqual([]);
+  });
+});
+
+describe('isValidSnapPoint', () => {
+  it('accepts the three supported forms', () => {
+    expect(isValidSnapPoint(0.5)).toBe(true);
+    expect(isValidSnapPoint(1)).toBe(true);
+    expect(isValidSnapPoint('50%')).toBe(true);
+    expect(isValidSnapPoint('320px')).toBe(true);
+  });
+
+  it('rejects what resolveSnapPoints would silently drop', () => {
+    expect(isValidSnapPoint(200)).toBe(false);
+    expect(isValidSnapPoint(0)).toBe(false);
+    expect(isValidSnapPoint('50')).toBe(false);
+    expect(isValidSnapPoint('50vh')).toBe(false);
+    expect(isValidSnapPoint('calc(50% - 20px)')).toBe(false);
+  });
 });
 
 describe('computeDetentOffsets', () => {
@@ -100,66 +149,84 @@ describe('resolveSettleOffset', () => {
   });
 });
 
-describe('isPeekOffset', () => {
-  const offsets = [0, 100, 200]; // full, mid, peek
-
-  it('is true only for the shortest detent', () => {
-    expect(isPeekOffset(200, offsets)).toBe(true);
-    expect(isPeekOffset(100, offsets)).toBe(false);
-    expect(isPeekOffset(0, offsets)).toBe(false);
+describe('peekOffsetFor', () => {
+  it('is the shortest stop when that stop is a sliver', () => {
+    // sheet 800; stops at 800, 400 and 100 visible px. The 100px stop is an
+    // eighth of the sheet, well inside the quarter that makes a peek.
+    expect(peekOffsetFor([0, 400, 700], 800)).toBe(700);
   });
 
-  it('tolerates sub-pixel rounding around the peek', () => {
-    expect(isPeekOffset(200.4, offsets)).toBe(true);
-    expect(isPeekOffset(199.6, offsets)).toBe(true);
-    expect(isPeekOffset(196, offsets)).toBe(false);
+  it('has no peek when the shortest stop is a working height', () => {
+    // A half-height stop lays its content out and keeps a full scrim; it is
+    // the sheet the caller asked for, not a glance at one.
+    expect(peekOffsetFor([0, 400], 800)).toBeNull();
   });
 
   it('has no peek when the sheet has no collapsed stop', () => {
-    expect(isPeekOffset(200, [0])).toBe(false);
-    expect(isPeekOffset(0, [0])).toBe(false);
+    expect(peekOffsetFor([0], 800)).toBeNull();
   });
 
-  it('treats the only collapsed stop as the peek', () => {
-    expect(isPeekOffset(200, [0, 200])).toBe(true);
+  it('takes the quarter mark itself as a peek', () => {
+    expect(peekOffsetFor([0, 600], 800)).toBe(600);
   });
 
-  it('agrees with the detent scrimOpacityForOffset treats as the peek', () => {
-    const dismissOffset = 280;
-    const peek = offsets[offsets.length - 1];
-    expect(isPeekOffset(peek, offsets)).toBe(true);
-    expect(scrimOpacityForOffset(peek, offsets, dismissOffset)).toBeCloseTo(
-      0.3,
-    );
+  it('has no peek without a measured sheet', () => {
+    expect(peekOffsetFor([0, 600], 0)).toBeNull();
   });
 });
 
 describe('scrimOpacityForOffset', () => {
-  describe('with a peek detent (>= 2 detents)', () => {
+  describe('with a peek detent', () => {
     const offsets = [0, 100, 200]; // full, mid, peek
+    const peekOffset = 200;
     const dismissOffset = 280;
 
     it('is full at or above the mid detent', () => {
-      expect(scrimOpacityForOffset(0, offsets, dismissOffset)).toBe(1);
-      expect(scrimOpacityForOffset(100, offsets, dismissOffset)).toBe(1);
-      expect(scrimOpacityForOffset(60, offsets, dismissOffset)).toBe(1);
+      expect(scrimOpacityForOffset(0, offsets, dismissOffset, peekOffset)).toBe(
+        1,
+      );
+      expect(
+        scrimOpacityForOffset(100, offsets, dismissOffset, peekOffset),
+      ).toBe(1);
+      expect(
+        scrimOpacityForOffset(60, offsets, dismissOffset, peekOffset),
+      ).toBe(1);
     });
 
     it('fades linearly from the mid detent toward the peek floor', () => {
       // Halfway from mid (100) to peek (200), opacity is halfway from 1 to the
       // 0.3 floor => 0.65.
-      expect(scrimOpacityForOffset(150, offsets, dismissOffset)).toBeCloseTo(
-        0.65,
-      );
+      expect(
+        scrimOpacityForOffset(150, offsets, dismissOffset, peekOffset),
+      ).toBeCloseTo(0.65);
     });
 
     it('thins to the peek floor at or below the peek detent (still modal)', () => {
-      expect(scrimOpacityForOffset(200, offsets, dismissOffset)).toBeCloseTo(
-        0.3,
-      );
-      expect(scrimOpacityForOffset(240, offsets, dismissOffset)).toBeCloseTo(
-        0.3,
-      );
+      expect(
+        scrimOpacityForOffset(200, offsets, dismissOffset, peekOffset),
+      ).toBeCloseTo(0.3);
+      expect(
+        scrimOpacityForOffset(240, offsets, dismissOffset, peekOffset),
+      ).toBeCloseTo(0.3);
+    });
+  });
+
+  describe('with collapsed stops but no peek among them', () => {
+    // The shortest stop is a working height, so the scrim is full there and
+    // only fades once the sheet is being dragged out below it.
+    const offsets = [0, 100];
+    const dismissOffset = 160;
+
+    it('stays full at every stop, including the shortest', () => {
+      expect(scrimOpacityForOffset(0, offsets, dismissOffset, null)).toBe(1);
+      expect(scrimOpacityForOffset(100, offsets, dismissOffset, null)).toBe(1);
+    });
+
+    it('fades only across the dismiss overshoot below the shortest stop', () => {
+      expect(
+        scrimOpacityForOffset(130, offsets, dismissOffset, null),
+      ).toBeCloseTo(0.5);
+      expect(scrimOpacityForOffset(160, offsets, dismissOffset, null)).toBe(0);
     });
   });
 
@@ -168,14 +235,14 @@ describe('scrimOpacityForOffset', () => {
     const dismissOffset = 160;
 
     it('stays full until the drag begins collapsing', () => {
-      expect(scrimOpacityForOffset(0, offsets, dismissOffset)).toBe(1);
+      expect(scrimOpacityForOffset(0, offsets, dismissOffset, null)).toBe(1);
     });
 
     it('fades across the dismiss overshoot toward the threshold', () => {
-      expect(scrimOpacityForOffset(80, offsets, dismissOffset)).toBeCloseTo(
-        0.5,
-      );
-      expect(scrimOpacityForOffset(160, offsets, dismissOffset)).toBe(0);
+      expect(
+        scrimOpacityForOffset(80, offsets, dismissOffset, null),
+      ).toBeCloseTo(0.5);
+      expect(scrimOpacityForOffset(160, offsets, dismissOffset, null)).toBe(0);
     });
   });
 });