feat(add): testing-library

testing/testing-library/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 60
+}

testing/testing-library/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: ["@babel/plugin-transform-runtime"],
+  presets: [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+};

testing/testing-library/package.json

@@ -0,0 +1,29 @@
+{
+  "scripts": {
+    "start": "parcel src/index.html",
+    "test": "jest"
+  },
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@testing-library/dom": "^6.11.0",
+    "@testing-library/jest-dom": "^5.0.2",
+    "@testing-library/react": "^9.4.0",
+    "@testing-library/user-event": "^8.0.4",
+    "@types/jest": "^24.9.0",
+    "@types/node": "^13.1.8",
+    "@types/react": "^16.9.17",
+    "@types/react-dom": "^16.9.5",
+    "@types/react-test-renderer": "^16.9.1",
+    "jest": "^25.1.0",
+    "parcel": "^1.12.4",
+    "react-test-renderer": "^16.12.0",
+    "typescript": "^3.7.5"
+  }
+}

testing/testing-library/readme.md

@@ -0,0 +1,15 @@
+# Learn testing-library
+
+```bash
+git clone # or download
+
+# cd _here_
+
+npm install
+
+npm run test --watch
+```
+
+Check [Testing- Library Doc](https://testing-library.com/docs/dom-testing-library/api-queries)
+
+Try to modify test files in `test` folder

testing/testing-library/test/testing-library-basic.test.tsx

@@ -0,0 +1,147 @@
+import {
+  getByText,
+  prettyDOM,
+  findByText,
+  queryByText,
+  getByLabelText,
+  within,
+  getByDisplayValue,
+  getByTestId,
+  wait,
+  waitForElement,
+  waitForDomChange,
+  fireEvent
+} from "@testing-library/dom";
+
+const createHTML = (
+  context = `<span> Hello World! </span>`
+) => {
+  const div = document.createElement("div");
+  div.innerHTML = context;
+  return div.firstElementChild as HTMLElement;
+};
+
+// https://testing-library.com/docs/dom-testing-library/cheatsheet
+
+// * ------------------------------------------------ Query Basic
+
+test("Query Basic", () => {
+  const container = createHTML(
+    `<span> Hello World! </span>`
+  );
+
+  // * ---------------- getBy
+
+  // getByText(dom, 'Hello'); // ❌ => Error, unable to find
+  getByText(container, "Hello World!"); // ✅ => HTMLSpanElement {}
+  getByText(container, /hello/i); // ✅
+  getByText(container, "Hello", { exact: false }); // ✅
+
+  // * MatcherFunction
+  getByText(container, (content, element) => {
+    return (
+      content.startsWith("Hello") &&
+      element.tagName.toLowerCase() === "span"
+    );
+  }); // ✅
+
+  // * ---------------- queryBy
+
+  queryByText(container, "Hello"); // ⭕ => null
+  queryByText(container, "Hello World!"); // ✅
+
+  // * ---------------- findBy (Promise)
+
+  findByText(container, /hello/i).then(e => {
+    // console.log(prettyDOM(e));
+  }); // ✅ =>
+  // `<span>
+  //   Hello World!
+  // </span>`
+});
+
+// * ------------------------------------------------ Query API
+
+test("By***", () => {
+  const container = createHTML(`
+    <form>
+      <label for="username-input">Username</label>
+      <input id="username-input" />
+    </form>
+    `);
+  getByText(container, "Username"); // ✅ => HTMLLabelElement
+  getByLabelText(container, "Username"); // ✅ => HTMLInputElement
+
+  container.querySelector("input").value = "Learn Test";
+  getByDisplayValue(container, "Learn Test"); // ✅
+});
+
+test("ByTestId", () => {
+  const container = createHTML(`
+    <div>
+      <span data-testid='notThis'> Hello World! </span>
+      <span data-testid='target'> Hello World! </span>
+    </div>
+  `);
+
+  getByTestId(container, "target"); // ✅
+});
+
+test("within", () => {
+  const container = createHTML(
+    `<span> Hello World! </span>`
+  );
+  const { getByText } = within(container);
+  getByText(/Hello/); // ✅
+});
+
+// * ------------------------------------------------ event
+
+test("fireEvent", () => {
+  const container = createHTML(
+    `<button onClick="console.log('fire')"></button>`
+  );
+
+  fireEvent(container, new MouseEvent("click"));
+  fireEvent.click(container);
+});
+
+// * ------------------------------------------------ wait
+
+test("wait", async () => {
+  const container = createHTML(
+    `<span> Hello World! </span>`
+  );
+
+  const asyncRender = fn => setTimeout(fn, 0);
+  asyncRender(() => (container.textContent = "Learn Test"));
+
+  await wait(() => getByText(container, "Learn Test"));
+  getByText(container, "Learn Test"); // ✅ => HTMLSpanElement
+});
+
+test("waitForElement", async () => {
+  const container = createHTML(`<div></div>`);
+
+  const asyncRender = fn => setTimeout(fn, 0);
+  asyncRender(() =>
+    container.appendChild(createHTML(`<span>Hello</span>`))
+  );
+
+  const dom = await waitForElement(
+    () => getByText(container, "Hello"),
+    { container }
+  ); // ✅ => HTMLSpanElement
+});
+
+test("waitForDomChange", async () => {
+  const container = createHTML(`<div></div>`);
+
+  const asyncRender = fn => setTimeout(fn, 0);
+  asyncRender(() =>
+    container.appendChild(createHTML(`<span>Hello</span>`))
+  );
+
+  await waitForDomChange({ container });
+  getByText(container, "Hello"); // ✅ => HTMLSpanElement
+});

testing/testing-library/tsconfig.json

@@ -0,0 +1 @@
+{}