chore: 🤖 Update to the workflows

.github/workflows/docs.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "20"
           cache: "yarn"
 
       - name: Install packages

.github/workflows/workflow.yml

@@ -0,0 +1,105 @@
+name: Tests
+
+on: push
+
+jobs:
+  prepare-environment:
+    runs-on: ubuntu-latest
+    name: Prepare environment
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+          cache: "yarn"
+          cache-dependency-path: yarn.lock
+        env:
+          FORCE_COLOR: 0
+      - name: Install node_modules on cache miss
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
+      - name: Cache node_modules
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        uses: actions/cache/save@v3
+        with:
+          path: node_modules
+          key: yarn-${{ hashFiles('yarn.lock') }}
+
+  tests:
+    name: Run tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+          cache: "yarn"
+
+      - name: Restore node_modules
+        uses: actions/cache/restore@v3
+        id: cache-node-modules
+        with:
+          path: node_modules
+          key: yarn-${{ hashFiles('yarn.lock') }}
+          fail-on-cache-miss: false
+      - name: Install node_modules on cache miss
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn build
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Typecheck
+        run: yarn typecheck
+
+      - name: Clear Jest
+        run: yarn jest --clearCache
+
+      - name: Test
+        run: yarn test --coverage
+
+      # - name: Send Report
+      #   uses: paambaati/[email protected]
+      #   env:
+      #     CC_TEST_REPORTER_ID: 7d1e3713df373ab2c9efce24b85c16efa2bd953aae32bd9d278004784d71291e
+      #   with:
+      #     coverageLocations: ${{github.workspace}}/coverage/lcov.info:lcov
+
+  release:
+    name: Release
+    if: ${{ github.ref == 'refs/heads/master' }}
+    runs-on: ubuntu-latest
+    needs: tests
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+          cache: "yarn"
+          cache-dependency-path: yarn.lock
+      - name: Restore node_modules
+        uses: actions/cache/restore@v3
+        id: cache-node-modules
+        with:
+          path: node_modules
+          key: yarn-${{ hashFiles('yarn.lock') }}
+          fail-on-cache-miss: false
+      - name: Install node_modules on cache miss
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
+      - name: Build
+        run: yarn build
+      - name: Publish
+        run: yarn release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

__tests__/features/base/rendering.spec.tsx

@@ -8,9 +8,9 @@ describe("Example view", () => {
       expect(wrapper).toBeDefined();
     });
     test("it renders center in button without errors", () => {
-      const { center } = renderApp();
+      const { centerBtn } = renderApp();
 
-      expect(center).toBeDefined();
+      expect(centerBtn).toBeDefined();
     });
     test("it renders zoom in button without errors", () => {
       const { zoomInBtn } = renderApp();

__tests__/features/controls/controls.center.spec.tsx

@@ -0,0 +1,20 @@
+import { fireEvent, waitFor } from "@testing-library/react";
+
+import { renderApp } from "../../utils/render-app";
+import { sleep } from "../../utils";
+
+describe("Controls [Center]", () => {
+  describe("When centering with controls button", () => {
+    it("should change css transform", async () => {
+      const { content, wrapper, centerBtn, zoom } = renderApp();
+      zoom({ value: 1.65 });
+      expect(content.style.transform).toBe("translate(0px, 0px) scale(1.65)");
+      fireEvent(centerBtn, new MouseEvent("click", { bubbles: true }));
+      await waitFor(() => {
+        expect(content.style.transform).toBe(
+          "translate(-162.5px, -162.5px) scale(1.65)",
+        );
+      });
+    });
+  });
+});

__tests__/features/controls/controls.reset.spec.tsx

@@ -0,0 +1,18 @@
+import { fireEvent, waitFor } from "@testing-library/react";
+
+import { renderApp } from "../../utils/render-app";
+import { sleep } from "../../utils";
+
+describe("Controls [Reset]", () => {
+  describe("When resetting state with controls button", () => {
+    it("should change css scale", async () => {
+      const { content, resetBtn, zoom } = renderApp();
+      zoom({ value: 1.65 });
+      expect(content.style.transform).toBe("translate(0px, 0px) scale(1.65)");
+      fireEvent(resetBtn, new MouseEvent("click", { bubbles: true }));
+      await waitFor(() => {
+        expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
+      });
+    });
+  });
+});

__tests__/features/controls/controls.zoom.spec.tsx

@@ -1,19 +1,39 @@
 import { fireEvent, waitFor } from "@testing-library/react";
 
 import { renderApp } from "../../utils/render-app";
+import { sleep } from "../../utils";
 
-describe("Controls [Base]", () => {
+describe("Controls [Zoom]", () => {
   describe("When zooming in with controls button", () => {
-    // it("should increase css scale with animated zoom", async () => {
-    //   const { content, zoomInBtn } = renderApp();
-    //   expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
-    //   fireEvent(zoomInBtn, new MouseEvent("click", { bubbles: true }));
-    //   // Animation starts
-    //   expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
-    //   await waitFor(() => {
-    //     // Animation ends
-    //     expect(content.style.transform).toBe("translate(0px, 0px) scale(1.65)");
-    //   });
-    // });
+    it("should change css scale", async () => {
+      const { content, zoomInBtn, centerBtn } = renderApp();
+      expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
+      fireEvent(zoomInBtn, new MouseEvent("click", { bubbles: true }));
+      expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
+      await waitFor(() => {
+        expect(content.style.transform).toBe(
+          "translate(-162.5px, -162.5px) scale(1.65)",
+        );
+      });
+      fireEvent(centerBtn, new MouseEvent("click", { bubbles: true }));
+      await sleep(40);
+      await waitFor(() => {
+        expect(content.style.transform).toBe(
+          "translate(-162.5px, -162.5px) scale(1.65)",
+        );
+      });
+    });
+  });
+  describe("When zooming out with controls button", () => {
+    it("should change css scale", async () => {
+      const { content, zoomOutBtn, zoom } = renderApp();
+
+      zoom({ value: 1.65 });
+      expect(content.style.transform).toBe("translate(0px, 0px) scale(1.65)");
+      fireEvent(zoomOutBtn, new MouseEvent("click", { bubbles: true }));
+      await waitFor(() => {
+        expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
+      });
+    });
   });
 });

__tests__/features/pan/pan.base.spec.tsx

@@ -84,29 +84,4 @@ describe("Pan [Base]", () => {
       expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
     });
   });
-
-  // describe("When max position is set", () => {
-  //   it("should not exceed max position", async () => {
-  //     const { content, pan } = renderApp({
-  //       maxPositionX: 20,
-  //       maxPositionY: 20,
-  //     });
-  //     expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
-  //     pan({ x: 200, y: 200 });
-  //     expect(content.style.transform).toBe("translate(20px, 20px) scale(1)");
-  //     pan({ x: -20, y: -20 });
-  //     expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
-  //   });
-  //   it("should not exceed min position", async () => {
-  //     const { content, pan } = renderApp({
-  //       minPositionX: 30,
-  //       minPositionY: 30,
-  //     });
-  //     expect(content.style.transform).toBe("translate(30px, 30px) scale(1)");
-  //     pan({ x: -20, y: -20 });
-  //     expect(content.style.transform).toBe("translate(30px, 30px) scale(1)");
-  //     pan({ x: 50, y: 50 });
-  //     expect(content.style.transform).toBe("translate(80px, 80px) scale(1)");
-  //   });
-  // });
 });

__tests__/features/pan/pan.bounds.spec.tsx

@@ -0,0 +1,33 @@
+import { waitFor } from "@testing-library/react";
+
+import { renderApp } from "../../utils";
+
+describe("Pan [Bounds]", () => {
+  it("TODO", () => {
+    expect(true).toBe(true);
+  });
+  // describe("When max position is set", () => {
+  //   it("should not exceed max position", async () => {
+  //     const { content, pan } = renderApp({
+  //       maxPositionX: 20,
+  //       maxPositionY: 20,
+  //     });
+  //     expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
+  //     pan({ x: -200, y: -200 });
+  //     expect(content.style.transform).toBe("translate(20px, 20px) scale(1)");
+  //     pan({ x: -20, y: -20 });
+  //     expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
+  //   });
+  //   it("should not exceed min position", async () => {
+  //     const { content, pan } = renderApp({
+  //       minPositionX: 30,
+  //       minPositionY: 30,
+  //     });
+  //     expect(content.style.transform).toBe("translate(30px, 30px) scale(1)");
+  //     pan({ x: -20, y: -20 });
+  //     expect(content.style.transform).toBe("translate(30px, 30px) scale(1)");
+  //     pan({ x: 50, y: 50 });
+  //     expect(content.style.transform).toBe("translate(80px, 80px) scale(1)");
+  //   });
+  // });
+});