Added tests before the v2 refactors

Author: ZeeCoder

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": [["@babel/env"]]
+  "presets": [["@babel/preset-env"]]
 }

.gitignore

@@ -3,3 +3,4 @@ node_modules
 yarn.lock
 yarn-error.log
 dist
+.cache

.npmignore

@@ -6,3 +6,7 @@ rollup.config.js
 yarn.lock
 yarn-error.log
 browserslist
+karma.conf.js
+.cache
+.travis.yml
+tests

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - 10
+addons:
+  chrome: stable
+script:
+  - yarn build
+  - yarn test:build
+  - yarn test

CHANGELOG.md

@@ -1,5 +1,20 @@
 # CHANGELOG
 
+## 2.0.0
+
+- [BREAKING] ResizeObserver now always expects a function as a child, to which
+  it passes in a reference as an argument that can be added to the element to be
+  observed.
+- [BREAKING] Returning width and height as the second and third parameters
+  instead of as part of an object
+- [BREAKING] Now reports 1x1 size on before the observer is triggered instead of
+  0x0
+- Added tests using Karma
+
+## 1.0.1
+
+- Relaxed the prop-types dep
+
 ## 1.0.0
 
 - Initial release

README.md

@@ -1,6 +1,9 @@
 # @zeecoder/react-resize-observer
 
-A React component to use ResizeObserver instances.
+A React component that allows you to use a ResizeObserver to measure an element's size.
+
+[![npm version](https://badge.fury.io/js/%40zeecoder%2Freact-resize-observer.svg)](https://npmjs.com/package/@zeecoder/react-resize-observer)
+[![build](https://travis-ci.org/ZeeCoder/react-resize-observer.svg?branch=master)](https://travis-ci.org/ZeeCoder/react-resize-observer)
 
 ## Install
 
@@ -15,9 +18,9 @@ npm install --save @zeecoder/react-resize-observer
 ```js
 const App = () => (
   <ResizeObserver>
-    {size => (
-      <div>
-        My size is {size.width}x{size.height}
+    {(ref, width, height) => (
+      <div ref={ref}>
+        My size is {width}x{height}
       </div>
     )}
   </ResizeObserver>
@@ -26,17 +29,13 @@ const App = () => (
 
 ## Notes
 
-- The children prop must be a function, through which the size changes are
-  communicated
-- If the optional `element` prop is given, the the component will observe the
-  size changes of that given element, instead of looking for the root DOM node
-  inside the component. (This avoids calling `ReactDOM.findDOMNode(this)`.)
 - Uses [resize-observer-polyfill](https://github.com/que-etc/resize-observer-polyfill)
-  internally, which falls back to the native ResizeObserver, if available
+  internally, which falls back to the native ResizeObserver, if available.
 
 ## Related
 
 - [use-resize-observer](https://github.com/ZeeCoder/use-resize-observer)
+- [@zeecoder/container-query](https://github.com/ZeeCoder/container-query)
 
 ## License
 

karma.conf.js

@@ -0,0 +1,26 @@
+module.exports = function(config) {
+  const singleRun = process.env.KARMA_SINGLE_RUN !== "false";
+  const browsers = (process.env.KARMA_BROWSERS || "Chrome").split(",");
+
+  config.set({
+    basePath: ".",
+    frameworks: ["jasmine"],
+    files: ["tests/dist/index.js"],
+    autoWatch: true,
+
+    browsers,
+    reporters: ["spec"],
+
+    singleRun,
+
+    // Max concurrency for SauceLabs OS plan
+    concurrency: 5,
+
+    client: {
+      jasmine: {
+        // Order of the tests matter, so don't randomise it
+        random: false
+      }
+    }
+  });
+};

package.json

@@ -1,14 +1,16 @@
 {
   "name": "@zeecoder/react-resize-observer",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",
   "repository": "[email protected]:ZeeCoder/react-resize-observer.git",
-  "description": "A React component to use ResizeObserver.",
+  "description": "A React component that allows you to use a ResizeObserver to measure an element's size.",
   "author": "Viktor Hubert <[email protected]>",
   "license": "MIT",
   "scripts": {
     "build": "rollup -c",
+    "test": "karma start",
+    "test:build": "parcel build tests/index.js --out-dir tests/dist",
     "prepublish": "yarn build"
   },
   "husky": {
@@ -33,10 +35,22 @@
   "devDependencies": {
     "@babel/core": "^7.1.2",
     "@babel/preset-env": "^7.1.0",
+    "babel-regenerator-runtime": "^6.5.0",
+    "delay": "^4.1.0",
     "husky": "^1.1.2",
+    "karma": "^3.1.4",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-jasmine": "^2.0.1",
+    "karma-spec-reporter": "^0.0.32",
     "lint-staged": "^7.3.0",
+    "parcel-bundler": "^1.11.0",
     "prettier": "^1.14.3",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
     "rollup": "^0.66.6",
     "rollup-plugin-babel": "^4.0.3"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

src/index.js

@@ -8,8 +8,8 @@ class ResizeObserverComponent extends Component {
     super(props);
 
     this.state = {
-      width: 0,
-      height: 0
+      width: 1,
+      height: 1
     };
   }
 

tests/index.js

@@ -0,0 +1,87 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import ResizeObserver from "../dist/bundle.esm";
+import delay from "delay";
+// Using the following to support async/await in tests.
+// I'm intentionally not using babel/polyfill, as that would introduce polyfills
+// the actual lib might not have, giving the false impression that something
+// works while it might actually not, if you use the lib without babel-polyfill.
+import "babel-regenerator-runtime";
+
+// const Observed = () => (
+//   <ResizeObserver>
+//     {(ref, width, height) => (
+//       <div
+//         ref={ref}
+//         id="observed"
+//         style={{
+//           position: "absolute",
+//           left: 0,
+//           top: 0,
+//           width: "100%",
+//           height: "100%",
+//           background: "grey",
+//           color: "white",
+//           fontWeight: "bold"
+//         }}
+//       >
+//         {width}x{height}
+//       </div>
+//     )}
+//   </ResizeObserver>
+// );
+
+const Observed = () => (
+  <ResizeObserver>
+    {({ width, height }) => (
+      <div
+        id="observed"
+        style={{
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: "100%",
+          height: "100%",
+          background: "grey",
+          color: "white",
+          fontWeight: "bold"
+        }}
+      >
+        {width}x{height}
+      </div>
+    )}
+  </ResizeObserver>
+);
+
+beforeAll(() => {
+  const app = document.createElement("div");
+  app.style.position = "relative";
+  app.style.width = "200px";
+  app.style.height = "300px";
+  document.body.appendChild(app);
+
+  ReactDOM.render(<Observed />, app);
+
+  global.app = app;
+  global.observed = document.querySelector("#observed");
+});
+
+// todo make sure parcel transpiles down to IE10 (example: async and "Set" doesn't work properly)
+// todo run in sauce labs with multiple browsers
+it("should render with 1x1 initially, before the ResizeObserver is triggered", async () => {
+  expect(observed.textContent).toBe("1x1");
+});
+
+it("should report the correct size after the size is reported by the ResizeObserver", async () => {
+  await delay(100);
+
+  expect(observed.textContent).toBe("200x300");
+});
+
+it("should report following size changes", async () => {
+  app.style.width = "100px";
+  app.style.height = "100px";
+
+  await delay(100);
+  expect(observed.textContent).toBe("100x100");
+});