reorganising / refactoring

Author: ZeeCoder

tests/index.js

@@ -3,4 +3,5 @@
 // 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";
-import "./react";
+import "./react/basic/index";
+import "./react/asd/index";

tests/react/Basic/Basic.js renamed to tests/react/basic/Basic/Basic.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { ContainerQuery } from "../../../packages/react-container-query/dist/bundle.esm";
+import { ContainerQuery } from "../../../../packages/react-container-query/dist/bundle.esm";
 import { meta as rawMeta } from "./Basic.pcss";
 
 // todo this shouldn't be needed

tests/react/Basic/Basic.pcss renamed to tests/react/basic/Basic/Basic.pcss

@@ -7,8 +7,10 @@ import {
   changeRootSize,
   expectTestComponentToHaveStyle,
   expectTestComponentToHaveCustomProperties,
-  expectElementToHaveStyle
-} from "../utils";
+  expectElementToHaveStyle,
+  clearDOM,
+  expectTextContent
+} from "../../utils";
 
 // Features covered:
 // - Style applying and restoring on width, height and orientation change
@@ -18,6 +20,7 @@ import {
 describe("Basic", () => {
   const refs = {};
   beforeAll(() => {
+    clearDOM();
     renderTestComponent(<Basic />, {
       width: 100,
       height: 50
@@ -31,7 +34,7 @@ describe("Basic", () => {
     expect(getNodeText(refs.content)).toBe("1x1");
 
     // Wait for resize observer to kick in
-    await wait(() => expect(getNodeText(refs.content)).toBe("100x50"));
+    await expectTextContent(refs.content, "100x50");
 
     expectTestComponentToHaveCustomProperties({
       "--w": "100px",
@@ -107,6 +110,8 @@ describe("Basic", () => {
     // changing to portrait, as well as being bigger than 100x50
     await changeRootSize({ width: 200, height: 300 });
 
+    await expectTextContent(refs.content, "200x300");
+
     expectTestComponentToHaveStyle({
       backgroundColor: "rgb(0, 128, 0)",
       color: "rgb(255, 255, 255)",

tests/react/index.js renamed to tests/react/basic/index.js

@@ -1,5 +1,9 @@
 import ReactDOM from "react-dom";
-import { getByTestId as rawGetByTestId } from "dom-testing-library";
+import {
+  getByTestId as rawGetByTestId,
+  getNodeText,
+  wait
+} from "dom-testing-library";
 
 let root = null;
 let componentElement = null;
@@ -34,6 +38,8 @@ export const renderTestComponent = (
   return componentElement;
 };
 
+export const clearDOM = () => (document.body.innerHTML = "");
+
 /**
  * Changing the root size, which results in changing the size of the component
  * rendered inside.
@@ -96,3 +102,26 @@ export const expectElementToHaveCustomProperties = (element, props) => {
  */
 export const expectTestComponentToHaveCustomProperties = props =>
   expectElementToHaveCustomProperties(componentElement, props);
+
+/**
+ * The reason we need this solution instead of just using wait() is because
+ * jasmine's expect doesn't throw an exception on failure, but somehow communicates
+ * that event back to the it() and describe() blocks, so that the test immediately
+ * fails.
+ *
+ * @param {HTMLElement} element
+ * @param {string} text
+ * @return {Promise}
+ */
+export const expectTextContent = async (element, text) => {
+  await wait(() => {
+    const textContent = getNodeText(element);
+    if (textContent !== text) {
+      throw new Error(
+        `Text content not yet what is expected. Got: ${textContent}. Expecting: ${text}.`
+      );
+    } else {
+      expect(textContent).toBe(text);
+    }
+  });
+};