chore: Updated the tests and added more devices to test on.

Author: ZeeCoder

.github/workflows/testing.yml

@@ -28,5 +28,5 @@ jobs:
         run: yarn test:create:ssr
       - name: Testing in Modern Browsers (BrowserStack)
         run: yarn test:bs:modern
-      - name: Testing in IE11 (BrowserStack)
-        run: yarn test:bs:ie
+      - name: Testing in Legacy Browsers (BrowserStack)
+        run: yarn test:bs:legacy

karma.conf.js

@@ -1,15 +1,101 @@
+// @see https://www.browserstack.com/automate/capabilities
+const customLaunchers = {
+  modern: {
+    bs_chrome_latest: {
+      base: "BrowserStack",
+      os: "Windows",
+      os_version: "10",
+      browser: "Chrome",
+      browser_version: "latest",
+    },
+    bs_firefox_latest: {
+      base: "BrowserStack",
+      os: "Windows",
+      os_version: "10",
+      browser: "Firefox",
+      browser_version: "latest",
+    },
+    bs_edge_latest: {
+      base: "BrowserStack",
+      os: "Windows",
+      os_version: "10",
+      browser: "Edge",
+      browser_version: "latest",
+    },
+    bs_opera_latest: {
+      base: "BrowserStack",
+      os: "Windows",
+      os_version: "10",
+      browser: "Opera",
+      browser_version: "latest",
+    },
+    // Safari 13 is very important to be listed here, as while it does have an RO implementation,
+    // it does not support different box sizes, only content-box.
+    bs_safari_13: {
+      base: "BrowserStack",
+      os: "OS X",
+      os_version: "Catalina",
+      browser: "Safari",
+      browser_version: "13.0",
+    },
+    bs_ios_14: {
+      base: "BrowserStack",
+      device: "iPhone 11",
+      os: "ios",
+      os_version: "14",
+    },
+    bs_samsung: {
+      base: "BrowserStack",
+      device: "Samsung Galaxy Note 10",
+      os: "Android",
+      os_version: "9.0",
+    },
+  },
+  legacy: {
+    bs_ios_11: {
+      base: "BrowserStack",
+      device: "iPhone X",
+      os: "ios",
+      os_version: "11",
+    },
+    bs_ie_11: {
+      base: "BrowserStack",
+      os: "Windows",
+      os_version: "10",
+      browser: "IE",
+      browser_version: "11.0",
+    },
+  },
+};
+
 module.exports = function (karmaConfig) {
-  const { useBrowserStack, runIeTests } = karmaConfig;
-  const { BS_USERNAME, BS_ACCESS_KEY } = process.env;
+  const { BS_USERNAME, BS_ACCESS_KEY, KARMA_BROWSERS } = process.env;
+
+  const browsers =
+    KARMA_BROWSERS === "modern"
+      ? Object.keys(customLaunchers.modern)
+      : KARMA_BROWSERS === "legacy"
+      ? Object.keys(customLaunchers.legacy)
+      : KARMA_BROWSERS
+      ? KARMA_BROWSERS.split(",").map((val) => val.trim())
+      : ["ChromeHeadless"];
+
+  const useBrowserStack = browsers[0].startsWith("bs_");
+
+  const polyfilledRun = browsers.reduce(
+    (carry, browser) =>
+      carry || Object.keys(customLaunchers.legacy).includes(browser),
+    false
+  );
 
   let testFilePattern = "tests/*.tsx";
-  // const testFilePattern = "tests/basic.tsx";
-  // const testFilePattern = "tests/testing-lib.tsx";
+  // let testFilePattern = "tests/basic.tsx";
+  // let testFilePattern = "tests/testing-lib.tsx";
 
   let transpileExcludePattern = /node_modules/;
   let presetEndModules = false;
   let transformRuntimeUseESModules = true;
-  if (useBrowserStack && runIeTests) {
+  if (polyfilledRun) {
     // IE runs a special set of (polyfilled) tests
     testFilePattern = "tests/ie/*.tsx";
     // Processing everything (including node_modules) for IE11 to make sure 3rd
@@ -32,7 +118,20 @@ module.exports = function (karmaConfig) {
     preprocessors: {
       [testFilePattern]: ["webpack", "sourcemap"],
     },
-
+    ...(useBrowserStack && {
+      browserStack: {
+        username: BS_USERNAME,
+        accessKey: BS_ACCESS_KEY,
+        project: "use-resize-observer",
+      },
+    }),
+    // @see https://karma-runner.github.io/5.2/config/files.html
+    autoWatch: !useBrowserStack,
+    browsers,
+    customLaunchers: {
+      ...customLaunchers.modern,
+      ...customLaunchers.legacy,
+    },
     webpack: {
       mode: "development",
       devtool: "inline-source-map",
@@ -69,61 +168,5 @@ module.exports = function (karmaConfig) {
     },
   };
 
-  if (useBrowserStack) {
-    Object.assign(config, {
-      browserStack: {
-        username: BS_USERNAME,
-        accessKey: BS_ACCESS_KEY,
-        project: "use-resize-observer",
-      },
-      browsers: ["bs_chrome", "bs_firefox", "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_firefox: {
-          base: "BrowserStack",
-          os: "Windows",
-          os_version: "10",
-          browser: "Firefox",
-          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);
 };

tests/basic.tsx

@@ -18,7 +18,6 @@ import {
   HandlerResolverComponentProps,
 } from "./utils";
 import awaitNextFrame from "./utils/awaitNextFrame";
-import delay from "./utils/delay";
 
 describe("Vanilla tests", () => {
   it("should render with undefined sizes at first", async () => {
@@ -42,12 +41,8 @@ describe("Vanilla tests", () => {
   });
 
   it("should follow size changes correctly with appropriate render count and without sub-pixels as they're used in CSS", async () => {
-    const {
-      setAndAssertSize,
-      setSize,
-      assertSize,
-      assertRenderCount,
-    } = await render(Observed, { waitForFirstMeasurement: true });
+    const { setAndAssertSize, setSize, assertSize, assertRenderCount } =
+      await render(Observed, { waitForFirstMeasurement: true });
 
     // Default render + first measurement
     assertRenderCount(2);