From e049ff6648733d5b3c0af21854bf0ed42d682e50 Mon Sep 17 00:00:00 2001
From: chenshenhai <cshenhai@gmail.com>
Date: Wed, 29 Dec 2021 23:11:35 +0800
Subject: [PATCH] test: update testing of board

---
 packages/board/__tests__/event._test.ts       | 48 -----------
 .../lib/__snapshots__/style.test.ts.snap      | 22 +++++
 packages/board/__tests__/lib/style.test.ts    | 81 +++++++++++++++++++
 packages/board/src/lib/style.ts               |  2 +-
 4 files changed, 104 insertions(+), 49 deletions(-)
 delete mode 100644 packages/board/__tests__/event._test.ts
 create mode 100644 packages/board/__tests__/lib/__snapshots__/style.test.ts.snap
 create mode 100644 packages/board/__tests__/lib/style.test.ts

diff --git a/packages/board/__tests__/event._test.ts b/packages/board/__tests__/event._test.ts
deleted file mode 100644
index 51a1899..0000000
--- a/packages/board/__tests__/event._test.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// // TODO
-
-// import Board from '../src';
-// import { getData } from './data';
-
-// const opts = {
-//   width: 600,
-//   height: 400,
-//   contextWidth: 600,
-//   contextHeight: 400,
-//   devicePixelRatio: 4
-// }
-
-// test('@idraw/board: event.on("scale")', async () => {  
-//   document.body.innerHTML = `
-//     <div id="mount"></div>
-//   `;
-//   const mount = document.querySelector('#mount') as HTMLDivElement;
-//   const board = new Board(mount, opts);
-  
-//   const data = await execBoard(board, opts);
-//   const salceNum = 2
-//   expect(data).toBe(salceNum);
-// });
-
-
-// function execBoard(board: Board, opts: any): Promise<any> {
-//   return new Promise((resolve) => {
-//     const data = getData();
-//     const ctx = board.getContext();
-//     board.clear();
-//     ctx.clearRect(0, 0, opts.width, opts.height);
-//     ctx.setFillStyle('#ffffff');
-//     ctx.fillRect(0, 0, opts.width, opts.height);
-//     data.elements.forEach(ele => {
-//       ctx.setFillStyle(ele.desc.color);
-//       ctx.fillRect(ele.x, ele.y, ele.w, ele.h);
-//     });
-
-//     // board.on('scale', (scaleNum) => {
-//     //   resolve(scaleNum);
-//     // })
-//     board.scale(2);
-//     board.scrollX(-600);
-//     board.scrollY(-400);
-//     board.draw();
-//   })
-// }
\ No newline at end of file
diff --git a/packages/board/__tests__/lib/__snapshots__/style.test.ts.snap b/packages/board/__tests__/lib/__snapshots__/style.test.ts.snap
new file mode 100644
index 0000000..0853e48
--- /dev/null
+++ b/packages/board/__tests__/lib/__snapshots__/style.test.ts.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@idraw/board: src/lib/style getStyle 1`] = `
+Object {
+  "height": "20px",
+  "margin-top": "123px",
+  "overflow": "auto",
+  "width": "12px",
+}
+`;
+
+exports[`@idraw/board: src/lib/style setDomTransform 1`] = `
+<div
+  style="transform: matrix(1, 2, -1, 1, 80, 90);"
+/>
+`;
+
+exports[`@idraw/board: src/lib/style setStyle 1`] = `
+<div
+  style="width:12px;height:20px;overflow:auto;margin-top:123px;"
+/>
+`;
diff --git a/packages/board/__tests__/lib/style.test.ts b/packages/board/__tests__/lib/style.test.ts
new file mode 100644
index 0000000..61a446d
--- /dev/null
+++ b/packages/board/__tests__/lib/style.test.ts
@@ -0,0 +1,81 @@
+import {
+  mergeCSS2StyleAttr, setStyle, getStyle, getDomTransform,
+  setDomTransform,
+} from './../../src/lib/style';
+
+
+describe('@idraw/board: src/lib/style', () => {
+  test('mergeCSS2StyleAttr', () => {
+    const str = mergeCSS2StyleAttr({
+      'width': '12px',
+      'height': '20px',
+      'overflow': 'auto',
+      'margin-top': '123px',
+    });
+    expect(str).toStrictEqual('width:12px; height:20px; overflow:auto; margin-top:123px;');
+  });
+
+  test('setStyle', () => {
+    const div = document.createElement('div');
+    setStyle(div, {
+      'width': '12px',
+      'height': '20px',
+      'overflow': 'auto',
+      'margin-top': '123px',
+    });
+    expect(div).toMatchSnapshot();
+  });
+
+  test('getStyle', () => {
+    const div = document.createElement('div');
+    setStyle(div, {
+      'width': '12px',
+      'height': '20px',
+      'overflow': 'auto',
+      'margin-top': '123px',
+    });
+    expect(getStyle(div)).toMatchSnapshot({
+      'width': '12px',
+      'height': '20px',
+      'overflow': 'auto',
+      'margin-top': '123px',
+    });
+  });
+
+  test('setDomTransform', () => {
+    // transform: matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )
+    // matrix(1, 2, -1, 1, 80, 80)
+    const div = document.createElement('div');
+    setDomTransform(div, {
+      scaleX: 1,
+      skewY: 2,
+      skewX: -1,
+      scaleY: 1,
+      translateX: 80,
+      translateY: 90,
+    });
+    expect(div).toMatchSnapshot();
+  })
+
+  test('getDomTransform', () => {
+    // transform: matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )
+    // matrix(1, 2, -1, 1, 80, 80)
+    const div = document.createElement('div');
+    setDomTransform(div, {
+      scaleX: 1,
+      skewY: 2,
+      skewX: -1,
+      scaleY: 1,
+      translateX: 80,
+      translateY: 90,
+    });
+    expect(getDomTransform(div)).toStrictEqual({
+      scaleX: 1,
+      skewY: 2,
+      skewX: -1,
+      scaleY: 1,
+      translateX: 80,
+      translateY: 90,
+    });
+  })
+})
\ No newline at end of file
diff --git a/packages/board/src/lib/style.ts b/packages/board/src/lib/style.ts
index ed6a900..e232250 100644
--- a/packages/board/src/lib/style.ts
+++ b/packages/board/src/lib/style.ts
@@ -13,7 +13,7 @@ export const mergeCSS2StyleAttr = function(
       cssList.push(`${cssKey}:${cssVal}`);
     }
   }
-  const styleAttr = cssList.join('; ');
+  const styleAttr = cssList.join('; ') + ';';
   return styleAttr;
 };