Added real browser tests, including ie11

.gitignore

@@ -7,3 +7,4 @@ yarn-error.log*
 dist
 /polyfilled.js
 /polyfilled.d.ts
+local.log

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## NEXT
+
+- Added tests in real browsers with Browserstack, so that we ensure the lib
+  works all the way back to IE11.
+
 ## 7.0.0-alpha.1
 
 - **[BREAKING]** The returned ref is now a RefCallback, not a ref object

README.md

@@ -11,6 +11,7 @@ A React hook that allows you to use a ResizeObserver to measure an element's siz
 
 [![npm version](https://badge.fury.io/js/use-resize-observer.svg)](https://npmjs.com/package/use-resize-observer)
 [![build](https://travis-ci.org/ZeeCoder/use-resize-observer.svg?branch=master)](https://travis-ci.org/ZeeCoder/use-resize-observer)
+[![BrowserStack Status](https://automate.browserstack.com/badge.svg?badge_key=bTAyOUVpa3hENUgwMkJBTVhXcytCQjREangwcTJqT0czUGhRSEZta3ZwYz0tLVRSZ1NhVkdPZ01FMithOEh5ZGxoWHc9PQ==--49d9d8ad43d557894fb270c80fd1c24107a82f51)](https://automate.browserstack.com/public-build/bTAyOUVpa3hENUgwMkJBTVhXcytCQjREangwcTJqT0czUGhRSEZta3ZwYz0tLVRSZ1NhVkdPZ01FMithOEh5ZGxoWHc9PQ==--49d9d8ad43d557894fb270c80fd1c24107a82f51)
 
 ## Highlights
 
@@ -25,7 +26,7 @@ A React hook that allows you to use a ResizeObserver to measure an element's siz
 - Handles many edge cases you might not even think of.
   (See this documentation and the test cases.)
 - [Throttle / Debounce](#throttle--debounce)
-- **Tested** in real browsers. (Headless Chrome and Firefox).
+- **Tested in real browsers** (Currently latest Chrome, Safari, Firefox and IE 11, sponsored by BrowserStack)
 
 ## In Action
 

karma.conf.js

@@ -1,54 +1,63 @@
-module.exports = function (config) {
-  const browsers = (process.env.KARMA_BROWSERS || "ChromeHeadless").split(",");
+module.exports = function (karmaConfig) {
+  const { useBrowserStack, runIeTests } = karmaConfig;
+  const { BS_USERNAME, BS_ACCESS_KEY } = process.env;
 
-  const testFilePattern = "tests/*.tsx";
+  let testFilePattern = "tests/*.tsx";
   // const testFilePattern = "tests/basic.tsx";
   // const testFilePattern = "tests/testing-lib.tsx";
 
-  config.set({
+  let transpileExcludePattern = /node_modules/;
+  let presetEndModules = false;
+  let transformRuntimeUseESModules = true;
+  if (useBrowserStack && runIeTests) {
+    // IE runs a special set of (polyfilled) tests
+    testFilePattern = "tests/ie/*.tsx";
+    // Processing everything (including node_modules) for IE11 to make sure 3rd
+    // party deps can run during the tests.
+    transpileExcludePattern = /^$/;
+    presetEndModules = "commonjs";
+    transformRuntimeUseESModules = false;
+  }
+
+  const config = {
     basePath: ".",
     frameworks: ["jasmine"],
     files: [
       {
         pattern: testFilePattern,
-        watched: true,
+        watched: !useBrowserStack,
       },
     ],
-    autoWatch: true,
-
-    browsers,
     reporters: ["spec"],
     preprocessors: {
       [testFilePattern]: ["webpack", "sourcemap"],
     },
 
-    // Max concurrency for SauceLabs OS plan
-    concurrency: 5,
-
-    client: {
-      jasmine: {
-        // Order of the tests matter, so don't randomise it
-        random: false,
-      },
-    },
-
     webpack: {
       mode: "development",
       devtool: "inline-source-map",
       module: {
         rules: [
           {
             test: /\.(ts|tsx|js|jsx)$/,
-            exclude: /node_modules/,
+            exclude: transpileExcludePattern,
             use: {
               loader: "babel-loader",
               options: {
                 presets: [
-                  ["@babel/preset-env", { loose: true, modules: false }],
+                  [
+                    "@babel/preset-env",
+                    { loose: true, modules: presetEndModules },
+                  ],
                   "@babel/preset-react",
                   "@babel/preset-typescript",
                 ],
-                plugins: [["@babel/transform-runtime", { useESModules: true }]],
+                plugins: [
+                  [
+                    "@babel/transform-runtime",
+                    { useESModules: transformRuntimeUseESModules },
+                  ],
+                ],
               },
             },
           },
@@ -58,5 +67,56 @@ module.exports = function (config) {
         extensions: [".ts", ".tsx", ".js", ".jsx"],
       },
     },
-  });
+  };
+
+  if (useBrowserStack) {
+    Object.assign(config, {
+      browserStack: {
+        username: BS_USERNAME,
+        accessKey: BS_ACCESS_KEY,
+        project: "use-resize-observer",
+      },
+      browsers: ["bs_chrome", "bs_safari"],
+      // @see https://www.browserstack.com/automate/capabilities
+      customLaunchers: {
+        bs_chrome: {
+          base: "BrowserStack",
+          os: "Windows",
+          os_version: "10",
+          browser: "Chrome",
+          browser_version: "latest",
+        },
+        bs_safari: {
+          base: "BrowserStack",
+          os: "OS X",
+          os_version: "Catalina",
+          browser: "Safari",
+          browser_version: "13.0",
+        },
+      },
+    });
+
+    if (runIeTests) {
+      Object.assign(config, {
+        browsers: ["bs_ie"],
+        customLaunchers: {
+          bs_ie: {
+            base: "BrowserStack",
+            os: "Windows",
+            os_version: "10",
+            browser: "IE",
+            browser_version: "11.0",
+          },
+        },
+      });
+    }
+  } else {
+    Object.assign(config, {
+      browsers: (process.env.KARMA_BROWSERS || "ChromeHeadless").split(","),
+      // @see https://karma-runner.github.io/5.2/config/files.html
+      autoWatch: true,
+    });
+  }
+
+  karmaConfig.set(config);
 };

package.json

@@ -15,15 +15,17 @@
     "src:watch": "rollup -c -w",
     "check:size": "size-limit",
     "check:types": "tsc -p tests",
-    "test": "run-s 'build' 'check:size' 'check:types' 'test:create:ssr' 'test:headless:*'",
+    "test": "run-s 'build' 'check:size' 'check:types' 'test:create:ssr' 'test:headless:*' 'test:bs:*'",
     "test:create:ssr": "node ./tests/ssr/create-ssr-test.js",
     "test:chrome": "KARMA_BROWSERS=Chrome yarn karma:run",
     "test:headless:chrome": "KARMA_BROWSERS=ChromeHeadless yarn karma:run",
     "test:firefox": "KARMA_BROWSERS=Firefox yarn karma:run",
     "test:headless:firefox": "KARMA_BROWSERS=FirefoxHeadless yarn karma:run",
     "karma:run": "karma start --singleRun",
     "karma:watch": "karma start",
-    "prepublish": "yarn build"
+    "prepublish": "yarn build",
+    "test:bs": "yarn karma:run --useBrowserStack",
+    "test:bs:ie": "yarn karma:run --useBrowserStack --runIeTests"
   },
   "husky": {
     "hooks": {
@@ -57,6 +59,7 @@
     "delay": "^4.1.0",
     "husky": "^4.2.5",
     "karma": "^5.0.1",
+    "karma-browserstack-launcher": "^1.6.0",
     "karma-chrome-launcher": "^3.0.0",
     "karma-firefox-launcher": "^1.3.0",
     "karma-jasmine": "^4.0.1",
@@ -67,6 +70,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
     "react": "^16.9.0",
+    "react-app-polyfill": "^2.0.0",
     "react-dom": "^16.9.0",
     "rollup": "^2.6.1",
     "size-limit": "^4.4.5",

tests/basic.tsx

@@ -7,8 +7,6 @@ import React, {
   RefCallback,
 } from "react";
 import useResizeObserver from "../";
-import useResizeObserverPolyfilled from "../polyfilled";
-import delay from "delay";
 import {
   createComponentHandler,
   Observed,
@@ -19,6 +17,7 @@ import {
   ComponentHandler,
   HandlerResolverComponentProps,
 } from "./utils";
+import delay from "./utils/delay";
 
 describe("Vanilla tests", () => {
   it("should render with undefined sizes at first", async () => {
@@ -314,34 +313,6 @@ describe("Vanilla tests", () => {
     handler.assertDefaultSize();
   });
 
-  it("should work with the polyfilled version", async () => {
-    const Test: FunctionComponent<HandlerResolverComponentProps> = ({
-      resolveHandler,
-    }) => {
-      const { ref, width, height } = useResizeObserverPolyfilled<
-        HTMLDivElement
-      >();
-      const currentSizeRef = useRef<ObservedSize>({} as ObservedSize);
-      currentSizeRef.current.width = width;
-      currentSizeRef.current.height = height;
-
-      useEffect(() => {
-        resolveHandler(createComponentHandler({ currentSizeRef }));
-      }, []);
-
-      return (
-        <div style={{ width: 50, height: 40 }} ref={ref}>
-          {width}x{height}
-        </div>
-      );
-    };
-
-    const { assertSize } = await render(Test);
-
-    await delay(50);
-    assertSize({ width: 50, height: 40 });
-  });
-
   it("should be able to work with onResize instead of rendering the values", async () => {
     const observations: ObservedSize[] = [];
     const handler = await render(

tests/ie/basic.tsx

@@ -0,0 +1,2 @@
+import "../utils/ie-polyfills";
+import "../basic";

tests/ie/polyfilled.tsx

@@ -0,0 +1,56 @@
+import "react-app-polyfill/ie11";
+import React, { FunctionComponent, useEffect, useRef } from "react";
+import {
+  createComponentHandler,
+  HandlerResolverComponentProps,
+  ObservedSize,
+  render,
+} from "../utils";
+import useResizeObserver from "../../polyfilled";
+import delay from "../utils/delay";
+import ROP from "resize-observer-polyfill";
+
+/**
+ * This test ensures that the shipped polyfilled version actually works.
+ * This has to run alone independent from other tests, otherwise the environment
+ * may have been polyfilled already.
+ */
+describe("Polyfilled lib testing", () => {
+  beforeAll(() => {
+    // @ts-ignore
+    delete window.ResizeObserver;
+  });
+
+  afterAll(() => {
+    if (!window.ResizeObserver) {
+      // @ts-ignore
+      window.ResizeObserver = ROP;
+    }
+  });
+
+  it("should work with the polyfilled version", async () => {
+    const Test: FunctionComponent<HandlerResolverComponentProps> = ({
+      resolveHandler,
+    }) => {
+      const { ref, width, height } = useResizeObserver<HTMLDivElement>();
+      const currentSizeRef = useRef<ObservedSize>({} as ObservedSize);
+      currentSizeRef.current.width = width;
+      currentSizeRef.current.height = height;
+
+      useEffect(() => {
+        resolveHandler(createComponentHandler({ currentSizeRef }));
+      }, []);
+
+      return (
+        <div style={{ width: 50, height: 40 }} ref={ref}>
+          {width}x{height}
+        </div>
+      );
+    };
+
+    const { assertSize } = await render(Test);
+
+    await delay(50);
+    assertSize({ width: 50, height: 40 });
+  });
+});

tests/ie/testing-lib.tsx

@@ -0,0 +1,2 @@
+import "../utils/ie-polyfills";
+import "../testing-lib";

tests/ssr.test.tsx

@@ -1,8 +1,8 @@
 import ReactDOM from "react-dom";
 import React from "react";
+import delay from "./utils/delay";
 // opting out from ts checks
 const Test = require("./ssr/Test");
-import delay from "delay";
 
 // This is replaced with the "server-generated" string before the tests are run.
 const html = `<div style="width:100px;height:200px" data-reactroot="">1x2</div>`;

tests/ssr/ssr.template.tsx

@@ -1,8 +1,8 @@
 import ReactDOM from "react-dom";
 import React from "react";
+import delay from "../utils/delay";
 // opting out from ts checks
 const Test = require("./ssr/Test");
-import delay from "delay";
 
 // This is replaced with the "server-generated" string before the tests are run.
 const html = `<% GENERATED-HTML %>`;

tests/testing-lib.tsx

@@ -42,6 +42,7 @@ describe("Testing Lib: Basics", () => {
 
     // Should react to component size changes.
     await controller.setSize({ width: 100, height: 200 });
+
     controller.assertMeasuredSize({ width: 100, height: 200 });
     controller.assertRenderCount(2);
   });

tests/utils/awaitNextFrame.ts

@@ -1,3 +1,9 @@
+// @see https://stackoverflow.com/a/21825207/982092
+// @ts-ignore
+const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
 export default function awaitNextFrame() {
-  return new Promise((resolve) => setTimeout(resolve, 1000 / 60));
+  return new Promise((resolve) =>
+    // Seems like that on IE with the RO polyfill we need to slow things down a bit
+    setTimeout(resolve, 1000 / (isIE11 ? 10 : 60))
+  );
 }

tests/utils/delay.ts

@@ -0,0 +1,2 @@
+export default (time: number) =>
+  new Promise((resolve) => setTimeout(resolve, time));

tests/utils/ie-polyfills.ts

@@ -0,0 +1,18 @@
+import "react-app-polyfill/ie11";
+import "react-app-polyfill/stable";
+import ROP from "resize-observer-polyfill";
+if (!window.ResizeObserver) {
+  // @ts-ignore
+  window.ResizeObserver = ROP;
+}
+if (!Object.entries) {
+  // @ts-ignore
+  Object.entries = function (obj) {
+    var ownProps = Object.keys(obj),
+      i = ownProps.length,
+      resArray = new Array(i); // preallocate the Array
+    while (i--) resArray[i] = [ownProps[i], obj[ownProps[i]]];
+
+    return resArray;
+  };
+}

tests/utils/index.tsx

@@ -1,8 +1,8 @@
 import React, { useRef, RefObject, FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 import useResizeObserver from "../..";
-import delay from "delay";
 import useMergedCallbackRef from "./useMergedCallbackRef";
+import delay from "./delay";
 
 export type Size = {
   width: number;