Make only one size property required

Author: trurl-master

README.md

@@ -161,7 +161,7 @@ Triggers all IntersectionObservers for each of the observed nodes
 
 ## Mock ResizeObserver
 
-Mocks `ResizeObserver` class. Resize callbacks are triggered manually using `resize` method returned by the mock. Elements' size must be not 0 for the element to appear in the list of callback entries (you can mock the size using [`mockElementSize`](#mockelementsizeelement-htmlelement-size-size) or `mockElementBoundingClientRect`)
+Mocks `ResizeObserver` class. Resize callbacks are triggered manually using `resize` method returned by the mock. Elements' size must not be 0 (at least on one axis) for the element to appear in the list of callback entries (you can mock the size using [`mockElementSize`](#mockelementsizeelement-htmlelement-size-size) or `mockElementBoundingClientRect`)
 
 Example, using `React Testing Library`:
 
@@ -277,6 +277,11 @@ mockElementSize(myDiv, {
   // both contentBoxSize and borderBoxSize accept plain objects instead of arrays
   contentBoxSize: { inlineSize: 400, blockSize: 200 },
 });
+
+mockElementSize(myOtherDiv, {
+  // only one dimension is required, the other one will be assumed to be 0
+  borderBoxSize: { inlineSize: 200 },
+});
 ```
 
 #### .getObservers(element?: HTMLElement)

examples/src/tests/resize-observer.test.tsx

@@ -271,7 +271,74 @@ describe('mockResizeObserver', () => {
       ]);
     });
 
-    test('I can remock the size', () => {
+    it('should be possible to omit either inlineSize or blockSize', async () => {
+      const callback = jest.fn();
+      const { result } = renderHook(() =>
+        useResizeObserver(useMemo(() => ({ callback }), []))
+      );
+
+      if (!result.current) {
+        return;
+      }
+
+      const element = document.createElement('div');
+
+      result.current.observe(element);
+
+      mockElementSize(element, { contentBoxSize: { inlineSize: 400 } });
+
+      act(() => {
+        resize();
+      });
+
+      expect(callback).toHaveBeenCalledTimes(1);
+      expect(callback).toHaveBeenCalledWith([
+        {
+          target: element,
+          borderBoxSize: [{ inlineSize: 400, blockSize: 0 }],
+          contentBoxSize: [{ inlineSize: 400, blockSize: 0 }],
+          contentRect: expect.objectContaining({
+            x: 0,
+            y: 0,
+            width: 400,
+            height: 0,
+            top: 0,
+            right: 400,
+            bottom: 0,
+            left: 0,
+          }),
+          devicePixelContentBoxSize: [{ inlineSize: 400, blockSize: 0 }],
+        },
+      ]);
+
+      mockElementSize(element, { contentBoxSize: { blockSize: 200 } });
+
+      act(() => {
+        resize(element);
+      });
+
+      expect(callback).toHaveBeenCalledTimes(2);
+      expect(callback).toHaveBeenCalledWith([
+        {
+          target: element,
+          borderBoxSize: [{ inlineSize: 0, blockSize: 200 }],
+          contentBoxSize: [{ inlineSize: 0, blockSize: 200 }],
+          contentRect: expect.objectContaining({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 200,
+            top: 0,
+            right: 0,
+            bottom: 200,
+            left: 0,
+          }),
+          devicePixelContentBoxSize: [{ inlineSize: 0, blockSize: 200 }],
+        },
+      ]);
+    });
+
+    test('Remocking the size', () => {
       const callback = jest.fn();
       const { result } = renderHook(() =>
         useResizeObserver(useMemo(() => ({ callback }), []))

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "jsdom-testing-mocks",
-  "version": "1.6.0-beta.0",
+  "version": "1.6.0-beta.1",
   "author": "Ivan Galiatin",
   "license": "MIT",
   "description": "A set of tools for emulating browser behavior in jsdom environment",

package.json

@@ -1,28 +1,18 @@
+import { RequireAtLeastOne } from 'type-fest';
+
 type Sizes = {
   borderBoxSize: ResizeObserverSize[];
   contentBoxSize: ResizeObserverSize[];
   contentRect: DOMRectReadOnly;
 };
 
-type BothSizesDefined = {
-  borderBoxSize: ResizeObserverSize[] | ResizeObserverSize;
-  contentBoxSize: ResizeObserverSize[] | ResizeObserverSize;
-};
-type ContentBoxSizeDefined = {
-  borderBoxSize?: ResizeObserverSize[] | ResizeObserverSize;
-  contentBoxSize: ResizeObserverSize[] | ResizeObserverSize;
+type ResizeObserverSizeInput = RequireAtLeastOne<ResizeObserverSize>;
+type SizeInput = {
+  borderBoxSize: ResizeObserverSizeInput[] | ResizeObserverSizeInput;
+  contentBoxSize: ResizeObserverSizeInput[] | ResizeObserverSizeInput;
 };
-type BorderBoxSizeDefined = {
-  borderBoxSize: ResizeObserverSize[] | ResizeObserverSize;
-  contentBoxSize?: ResizeObserverSize[] | ResizeObserverSize;
-};
-// type BothSizesDefined = Pick<Sizes, 'contentBoxSize' | 'borderBoxSize'>;
-// type ContentBoxSizeDefined = Pick<Sizes, 'contentBoxSize'> &
-//   Partial<Pick<Sizes, 'borderBoxSize'>>;
-// type BorderBoxSizeDefined = Pick<Sizes, 'borderBoxSize'> &
-//   Partial<Pick<Sizes, 'contentBoxSize'>>;
 
-type Size = BothSizesDefined | ContentBoxSizeDefined | BorderBoxSizeDefined;
+type Size = RequireAtLeastOne<SizeInput>;
 
 type State = {
   observers: MockedResizeObserver[];
@@ -42,6 +32,15 @@ function resetState() {
   state.elementSizes = new Map();
 }
 
+function defineResizeObserverSize(
+  input: ResizeObserverSizeInput
+): ResizeObserverSize {
+  return {
+    blockSize: input.blockSize ?? 0,
+    inlineSize: input.inlineSize ?? 0,
+  };
+}
+
 class MockedResizeObserver implements ResizeObserver {
   callback: ResizeObserverCallback;
   observationTargets = new Set<HTMLElement>();
@@ -180,15 +179,15 @@ function mockResizeObserver() {
           size.contentBoxSize = [size.contentBoxSize];
         }
 
-        contentBoxSize = size.contentBoxSize;
-        borderBoxSize = size.contentBoxSize;
+        contentBoxSize = size.contentBoxSize.map(defineResizeObserverSize);
+        borderBoxSize = contentBoxSize;
       } else if (size.borderBoxSize && !size.contentBoxSize) {
         if (!Array.isArray(size.borderBoxSize)) {
           size.borderBoxSize = [size.borderBoxSize];
         }
 
-        contentBoxSize = size.borderBoxSize;
-        borderBoxSize = size.borderBoxSize;
+        contentBoxSize = size.borderBoxSize.map(defineResizeObserverSize);
+        borderBoxSize = contentBoxSize;
       } else if (size.borderBoxSize && size.contentBoxSize) {
         if (!Array.isArray(size.borderBoxSize)) {
           size.borderBoxSize = [size.borderBoxSize];
@@ -198,8 +197,8 @@ function mockResizeObserver() {
           size.contentBoxSize = [size.contentBoxSize];
         }
 
-        contentBoxSize = size.contentBoxSize as ResizeObserverSize[];
-        borderBoxSize = size.borderBoxSize as ResizeObserverSize[];
+        contentBoxSize = size.contentBoxSize.map(defineResizeObserverSize);
+        borderBoxSize = size.borderBoxSize.map(defineResizeObserverSize);
 
         if (borderBoxSize.length !== contentBoxSize.length) {
           throw new Error(