First integration tests

Author: ZeeCoder

CHANGELOG.md

@@ -7,13 +7,21 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Integration tests, supported by SauceLabs
+
 ### Changed
 
 - Removed unnecessary files from the packages
+- `react-container-query`
+  - **[BREAKING]**ContainerQuery no longer returns an object for size, but width and height as
+    the first parameter of the child function
+  - **[BREAKING]** ContainerQuery now returns 1x1 dimensions before the ResizeObserver kicks in
 
 ### Removed
 
-- Removed test running from Node 6
+- **[BREAKING]** Removed test running from Node 6
 
 ## [3.0.0-alpha.2]
 

package.json

@@ -12,10 +12,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.2.0",
+    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-react": "^7.0.0",
+    "autoprefixer": "^9.4.3",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-regenerator-runtime": "^6.5.0",
     "coveralls": "^3.0.2",
+    "css-loader": "^2.0.2",
     "husky": "^1.1.4",
     "jasmine-core": "^3.3.0",
     "jest": "^23.6.0",
@@ -27,17 +33,23 @@
     "karma-spec-reporter": "^0.0.32",
     "lerna": "^3.4.3",
     "lint-staged": "^8.0.5",
-    "parcel-bundler": "^1.10.3",
+    "postcss-loader": "^3.0.0",
+    "postcss-media-minmax": "^4.0.0",
+    "postcss-nested": "^4.1.1",
     "prettier": "^1.15.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
-    "regenerator-runtime": "^0.13.1"
+    "regenerator-runtime": "^0.13.1",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.28.2",
+    "webpack-cli": "^3.1.2"
   },
   "scripts": {
     "test:unit": "jest --coverage",
     "test:unit:watch": "jest --watch",
     "test:integration": "karma start",
-    "test:integration:build": "parcel build tests/index.js --out-dir tests/dist",
+    "test:integration:watch": "yarn test:integration:build --watch",
+    "test:integration:build": "webpack --config tests/webpack.config.js",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "prettify": "prettier --write 'packages/**/*.js'",
     "bootstrap": "lerna bootstrap",

packages/react-container-query/src/ContainerQuery.js

@@ -14,7 +14,7 @@ class ContainerQuery extends Component {
     }
   }
 
-  state = { width: 0, height: 0 };
+  state = { width: 1, height: 1 };
 
   ref = React.createRef();
 
@@ -52,7 +52,7 @@ class ContainerQuery extends Component {
 
   doRender() {
     if (typeof this.props.children === "function") {
-      return this.props.children(this.state);
+      return this.props.children(this.state.width, this.state.height);
     } else if (this.props.children) {
       return this.props.children;
     }

tests/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": [">1%"]
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ]
+}

tests/index.js

@@ -1,20 +1,6 @@
-import React from "react";
-import ReactDOM from "react-dom";
 // 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 Test = () => <div id="asd" style={{ background: "grey" }} />;
-
-it("should render", async () => {
-  const div = document.createElement("div");
-  document.body.appendChild(div);
-
-  ReactDOM.render(<Test />, div);
-
-  const rendered = document.querySelector("#asd");
-
-  expect(rendered.style.backgroundColor).toBe("grey");
-});
+import "./react";

tests/react/Basic/Basic.js

@@ -0,0 +1,20 @@
+import React, { Component } from "react";
+import { ContainerQuery } from "../../../packages/react-container-query/dist/bundle.esm";
+import { meta as rawMeta } from "./Basic.pcss";
+
+// todo this shouldn't be needed
+const meta = JSON.parse(rawMeta.slice(1, -1));
+
+const Basic = () => (
+  <ContainerQuery meta={meta} className="Basic" id="rendered-component">
+    {(width, height) => {
+      return (
+        <div>
+          {width}x{height}
+        </div>
+      );
+    }}
+  </ContainerQuery>
+);
+
+export default Basic;

tests/react/Basic/Basic.pcss

@@ -0,0 +1,10 @@
+.Basic {
+    color: white;
+    width: 101px;
+    height: 100px;
+    background-color: red;
+
+    @container (width > 100px) {
+        background-color: green;
+    }
+}

tests/react/index.js

@@ -0,0 +1,23 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import Basic from "./Basic/Basic";
+
+const delay = time => new Promise(resolve => setTimeout(resolve, time));
+
+it("should render Basic", async () => {
+  const div = document.createElement("div");
+  document.body.appendChild(div);
+
+  ReactDOM.render(<Basic />, div);
+
+  const rendered = document.getElementById("rendered-component");
+
+  // Assertions before the ResizeObserver kicks in
+  expect(rendered.textContent).toBe("1x1");
+
+  // wait a little before asserting
+  await delay(50);
+
+  expect(rendered.textContent).toBe("101x100");
+  expect(rendered.style.backgroundColor).toBe("green");
+});

tests/webpack.config.js

@@ -0,0 +1,53 @@
+module.exports = {
+  entry: __dirname + "/index.js",
+  output: {
+    path: __dirname + "/dist",
+    filename: "index.js"
+  },
+  mode: "development",
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: [
+          {
+            loader: "babel-loader",
+            options: {
+              presets: [
+                "@babel/preset-react",
+                [
+                  "@babel/preset-env",
+                  {
+                    targets: {
+                      browsers: [">1%"]
+                    }
+                  }
+                ]
+              ],
+              plugins: ["transform-class-properties"]
+            }
+          }
+        ]
+      },
+      {
+        test: /\.pcss$/,
+        use: [
+          "style-loader",
+          "css-loader",
+          {
+            loader: "postcss-loader",
+            options: {
+              plugins: [
+                require("postcss-nested")({ bubble: ["container"] }),
+                require("postcss-media-minmax")(),
+                require("autoprefixer")(),
+                require("../packages/postcss-container-query/dist")()
+              ]
+            }
+          }
+        ]
+      }
+    ]
+  },
+  devtool: "source-map"
+};