spec: update default value for lastReportedSize (#135)

* chore: update dependencies

* chore: remove doc build

* spec: update to use -1 for lastReportedSize

* tests: align with spec update for lastReportedSize

* chore: update ci docker image

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
   test:
     docker: # use the docker executor type; machine and macos executors are also supported
-      - image: circleci/node:10
+      - image: cimg/node:16.14
     steps:
       - checkout
       - run:

package.json

@@ -12,7 +12,7 @@
     "build": "rm -rf lib && npm run build:esm && npm run build:umd",
     "build:esm": "tsc",
     "build:umd": "rollup -c",
-    "build:docs": "rm -f docs/*.* && parcel build docs/src/index.html --out-dir docs --public-url ./",
+    "build:docs": "echo 'no longer building docs for this version'",
     "ci-tests": "npm test -- --ci --runInBand && cat coverage/lcov.info | coveralls",
     "test": "npm run lint && jest --coverage",
     "lint": "eslint '{src,test}/**/*.ts'",
@@ -50,20 +50,20 @@
   },
   "homepage": "https://juggle.studio/resize-observer/",
   "devDependencies": {
-    "@types/jest": "^26.0.20",
-    "@typescript-eslint/eslint-plugin": "^4.15.2",
-    "@typescript-eslint/parser": "^4.15.2",
-    "core-js": "^3.9.0",
-    "coveralls": "^3.1.0",
-    "cssnano": "^4.1.10",
-    "eslint": "^7.20.0",
-    "jest": "^26.6.3",
-    "jest-cli": "^26.6.3",
-    "jest-junit": "^12.0.0",
-    "jsdom": "^16.4.0",
-    "parcel-bundler": "^1.12.4",
-    "rollup": "^2.39.1",
-    "ts-jest": "^26.5.2",
-    "typescript": "^3.9.9"
+    "@types/jest": "^28.1.7",
+    "@typescript-eslint/eslint-plugin": "^5.33.1",
+    "@typescript-eslint/parser": "^5.33.1",
+    "core-js": "^3.24.1",
+    "coveralls": "^3.1.1",
+    "cssnano": "^5.1.13",
+    "eslint": "^8.22.0",
+    "jest": "^28.1.3",
+    "jest-cli": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "jest-junit": "^14.0.0",
+    "jsdom": "^20.0.0",
+    "rollup": "^2.78.0",
+    "ts-jest": "^28.0.8",
+    "typescript": "^4.7.4"
   }
 }

src/ResizeObservation.ts

@@ -22,8 +22,8 @@ class ResizeObservation {
     this.target = target;
     this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX;
     this.lastReportedSize = {
-      inlineSize: 0,
-      blockSize: 0
+      inlineSize: -1,
+      blockSize: -1
     }
   }
 

test/inline-elements.test.ts

@@ -1,4 +1,3 @@
-import './helpers/mutation-observer';
 import { ResizeObserver } from '../src/ResizeObserver';
 import { delay } from './helpers/delay';
 import './helpers/offset';

test/queue-micro-task.test.ts

@@ -1,4 +1,3 @@
-import './helpers/mutation-observer';
 import { queueMicroTask } from '../src/utils/queueMicroTask';
 
 describe('queueMicroTask', (): void => {

test/resize-observer-basic-svg.test.ts

@@ -1,7 +1,5 @@
-import './helpers/mutation-observer';
 import { ResizeObserver } from '../src/ResizeObserver';
 import { DOMRectReadOnly } from '../src/DOMRectReadOnly';
-import { delay } from './helpers/delay';
 import './helpers/offset';
 
 describe('SVGGraphicsElement', (): void => {
@@ -29,15 +27,22 @@ describe('SVGGraphicsElement', (): void => {
     }
   })
 
-  test('Observer should not fire initially when size is 0,0', (done): void => {
-    ro = new ResizeObserver((): void => {
-      expect(false).toBe(true); // Should not fire
+  test('Observer should fire initially when size is 0,0', (done): void => {
+    ro = new ResizeObserver((entries): void => {
+      expect(entries).toHaveLength(1);
+      expect(entries[0].target).toBe(el);
+      expect(entries[0].contentRect).toMatchObject({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      });
+      done();
     })
     el.getBBox = function (): DOMRect {
       return new DOMRectReadOnly(0, 0, 0, 0) as DOMRect;
     }
     ro.observe(el);
-    delay(done);
   })
 
   test('Should fire observer when element is observed for the first time.', (done): void => {

test/resize-observer-basic.test.ts

@@ -1,4 +1,3 @@
-import './helpers/mutation-observer';
 import { ResizeObserver } from '../src/ResizeObserver';
 import { scheduler } from '../src/utils/scheduler';
 import { delay } from './helpers/delay';
@@ -99,28 +98,50 @@ describe('Basics', (): void => {
     expect(fn).toThrowError(`Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element`);
   })
 
-  test('Observer should not fire initially when size is 0,0', (done): void => {
-    ro = new ResizeObserver((): void => {
-      expect(false).toBe(true); // Should not fire
+  test('Observer should fire initially when size is 0,0', (done): void => {
+    ro = new ResizeObserver((entries): void => {
+      expect(entries).toHaveLength(1);
+      expect(entries[0].target).toBe(el);
+      expect(entries[0].contentRect).toMatchObject({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      });
+      done();
     })
     el.style.width = '0';
     el.style.height = '0';
     ro.observe(el);
-    delay(done);
   })
 
-  test('Observer should not fire initially when display:none', (done): void => {
-    ro = new ResizeObserver((): void => {
-      expect(false).toBe(true); // Should not fire
+  test('Observer should fire initially when display:none', (done): void => {
+    ro = new ResizeObserver((entries): void => {
+      expect(entries).toHaveLength(1);
+      expect(entries[0].target).toBe(el);
+      expect(entries[0].contentRect).toMatchObject({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      });
+      done();
     })
     el.style.display = 'none';
     ro.observe(el);
-    delay(done);
   })
 
-  test('Observer should not fire initially when parent element is display:none', (done): void => {
-    ro = new ResizeObserver((): void => {
-      expect(false).toBe(true); // Should not fire
+  test('Observer should fire initially when parent element is display:none', (done): void => {
+    ro = new ResizeObserver((entries): void => {
+      expect(entries).toHaveLength(1);
+      expect(entries[0].target).toBe(child);
+      expect(entries[0].contentRect).toMatchObject({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      });
+      done();
     })
     const child = document.createElement('div');
     el.style.display = 'none';
@@ -129,18 +150,24 @@ describe('Basics', (): void => {
     expect(el.style.display).toBe('none');
     expect(child.style.display).toBe('block');
     ro.observe(child);
-    delay(done);
   })
 
-  test('Observer should not fire when an element has no document', (done): void => {
+  test('Observer should still fire when an element has no document', (done): void => {
     el = el.cloneNode() as HTMLElement;
-    ro = new ResizeObserver((): void => {
-      expect(false).toBe(true); // Should not fire
+    ro = new ResizeObserver((entries): void => {
+      expect(entries).toHaveLength(1);
+      expect(entries[0].target).toBe(el);
+      expect(entries[0].contentRect).toMatchObject({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      });
+      done();
     })
     el.style.width = '0';
     el.style.height = '0';
     ro.observe(el);
-    delay(done);
   })
 
   test('Observer callback.this should be observer', (done): void => {
@@ -183,7 +210,11 @@ describe('Basics', (): void => {
   })
 
   test('Observer should fire when element size changes', (done): void => {
+    let count = 0;
     ro = new ResizeObserver((entries): void => {
+      if (!count++) {
+        return; // skip first callback
+      }
       expect(entries).toHaveLength(1);
       expect(entries[0].target).toBe(el);
       expect(entries[0].contentRect).toMatchObject({
@@ -229,7 +260,11 @@ describe('Basics', (): void => {
   })
 
   test('Observer should fire when only the width changes', (done): void => {
+    let count = 0;
     ro = new ResizeObserver((entries): void => {
+      if (!count++) {
+        return; // skip first callback
+      }
       expect(entries).toHaveLength(1);
       expect(entries[0].target).toBe(el);
       expect(entries[0].contentRect).toMatchObject({
@@ -249,7 +284,11 @@ describe('Basics', (): void => {
   })
 
   test('Observer should fire when only the height changes', (done): void => {
+    let count = 0;
     ro = new ResizeObserver((entries): void => {
+      if (!count++) {
+        return; // skip first callback
+      }
       expect(entries).toHaveLength(1);
       expect(entries[0].target).toBe(el);
       expect(entries[0].contentRect).toMatchObject({
@@ -415,7 +454,7 @@ describe('Basics', (): void => {
   })
 
   test.skip('Observer should fire when text content changes', (): void => {
-    // Get MutationObserver to notify correctly in tests
+    // Text doesn't seem so change element dimension
   })
 
   test('Observer should unobserve elements correctly.', (done): void => {

test/resize-observer-box-sizes.test.ts

@@ -1,4 +1,3 @@
-import './helpers/mutation-observer';
 import { ResizeObserver } from '../src/ResizeObserver';
 import './helpers/offset';
 import { delay } from './helpers/delay';

test/resize-observer-multiple.test.ts

@@ -1,4 +1,3 @@
-import './helpers/mutation-observer';
 import { ResizeObserver } from '../src/ResizeObserver';
 import { delay } from './helpers/delay';
 import './helpers/offset';