test: add test case.

package.json

@@ -37,7 +37,7 @@
   "license": "MIT",
   "jest": {
     "testMatch": [
-      "<rootDir>/packages/**/tests/*.{js,jsx,ts,tsx}"
+      "<rootDir>/test/*.{ts,tsx}"
     ],
     "collectCoverageFrom": [
       "**/*.{tsx,ts}",
@@ -49,6 +49,7 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "5.14.1",
     "lint-staged": "11.0.0",
     "lerna": "4.0.0",
     "husky": "7.0.0",

test/alpha.test.tsx

@@ -0,0 +1,43 @@
+/**
+ * @jest-environment jsdom
+ */
+import React, { useState } from 'react';
+import TestRenderer from 'react-test-renderer';
+import '@testing-library/jest-dom';
+import Alpha, { BACKGROUND_IMG } from '../packages/color-alpha/src';
+
+it('Alpha', async () => {
+  const MyComponent = () => {
+    const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
+    return (
+      <Alpha
+        hsva={hsva}
+        onChange={(newAlpha) => {
+          setHsva({ ...hsva, ...newAlpha });
+        }}
+      />
+    );
+  };
+  const component = TestRenderer.create(<MyComponent />);
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.className).toEqual('w-color-alpha ');
+    expect(tree.props.style).toMatchObject({
+      width: 320,
+      height: 16,
+      borderRadius: 0,
+      position: 'relative',
+      backgroundColor: '#fff',
+    });
+    expect(tree.props.style.background).toEqual(`url(${BACKGROUND_IMG}) left center`);
+    if (tree.children) {
+      expect(tree.children.length).toEqual(2);
+      tree.children.forEach((child) => {
+        if (typeof child === 'object') {
+          expect(child.type).toEqual('div');
+        }
+      });
+    }
+  }
+});

packages/color-convert/tests/index.test.ts → test/convert.test.tsx

@@ -1,30 +1,30 @@
-import { color } from '../src';
+import { color } from '../packages/color-convert/src';
 // HEX
-import { hexToHsva, hexToRgba, hsvaToHex } from '../src';
-import { equalHex } from '../src/utils';
+import { hexToHsva, hexToRgba, hsvaToHex } from '../packages/color-convert/src';
+import { equalHex } from '../packages/color-convert/src/utils';
 // HSLA
-import { hsvaToHsla, hslaToHsva, HsvaColor, HslaColor } from '../src';
+import { hsvaToHsla, hslaToHsva, HsvaColor, HslaColor } from '../packages/color-convert/src';
 // HSL
-import { hslaToHsl } from '../src';
+import { hslaToHsl } from '../packages/color-convert/src';
 // HSL string
-import { hsvaToHslString, hslStringToHsva } from '../src';
+import { hsvaToHslString, hslStringToHsva } from '../packages/color-convert/src';
 // HSLA string
-import { hslaStringToHsva } from '../src';
+import { hslaStringToHsva } from '../packages/color-convert/src';
 // RGBA
-import { hsvaToRgba, rgbaToHsva, RgbaColor } from '../src';
+import { hsvaToRgba, rgbaToHsva, RgbaColor } from '../packages/color-convert/src';
 // RGBA string
-import { hsvaToRgbaString, rgbaStringToHsva } from '../src';
+import { hsvaToRgbaString, rgbaStringToHsva } from '../packages/color-convert/src';
 // RGB
-import { rgbaToRgb, rgbaToHex, rgbaToHexa } from '../src';
+import { rgbaToRgb, rgbaToHex, rgbaToHexa } from '../packages/color-convert/src';
 // RGB string
-import { hsvaToRgbString, rgbStringToHsva } from '../src';
+import { hsvaToRgbString, rgbStringToHsva } from '../packages/color-convert/src';
 // HSVA String
-import { hsvaToHsvaString, hsvaToHslaString, hsvaStringToHsva } from '../src';
+import { hsvaToHsvaString, hsvaToHslaString, hsvaStringToHsva } from '../packages/color-convert/src';
 // HSV
-import { hsvaToHsv } from '../src';
+import { hsvaToHsv } from '../packages/color-convert/src';
 // HSV string
-import { hsvaToHsvString, hsvStringToHsva } from '../src';
-import { equalColorString, equalColorObjects, validHex } from '../src/utils';
+import { hsvaToHsvString, hsvStringToHsva } from '../packages/color-convert/src';
+import { equalColorString, equalColorObjects, validHex } from '../packages/color-convert/src/utils';
 
 it('Converts color => HEX to ColorResult', () => {
   const { rgb, rgba, hsl, hsv, hsla, hsva } = color('#d1021a');

test/drag-event-interactive.test.tsx

@@ -0,0 +1,20 @@
+/**
+ * @jest-environment jsdom
+ */
+import React, { useState } from 'react';
+import TestRenderer from 'react-test-renderer';
+import '@testing-library/jest-dom';
+import Interactive from '../packages/drag-event-interactive/src';
+
+it('Interactive', async () => {
+  const MyComponent = () => {
+    return <Interactive />;
+  };
+  const component = TestRenderer.create(<MyComponent />);
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props).toHaveProperty('onMouseDown');
+    expect(tree.props).toHaveProperty('onTouchStart');
+  }
+});

test/hue.test.tsx

@@ -0,0 +1,75 @@
+/**
+ * @jest-environment jsdom
+ */
+import React, { useState } from 'react';
+import TestRenderer from 'react-test-renderer';
+import { screen, render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Hue from '../packages/color-hue/src';
+import { BACKGROUND_IMG } from '../packages/color-alpha/src';
+
+it('Hue', async () => {
+  const MyComponent = () => {
+    const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
+    return (
+      <Hue
+        hue={hsva.h}
+        onChange={(newHue) => {
+          setHsva({ ...hsva, ...newHue });
+        }}
+      />
+    );
+  };
+  const component = TestRenderer.create(<MyComponent />);
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.className).toEqual('w-color-alpha w-color-hue ');
+    expect(tree.props.style).toMatchObject({
+      width: 320,
+      height: 16,
+      borderRadius: 0,
+      position: 'relative',
+      backgroundColor: '#fff',
+    });
+    expect(tree.props.style.background).toEqual(`url(${BACKGROUND_IMG}) left center`);
+    if (tree.children) {
+      expect(tree.children.length).toEqual(2);
+      tree.children.forEach((child, idx) => {
+        if (typeof child === 'object') {
+          expect(child.type).toEqual('div');
+          if (idx === 0) {
+            expect(child.props.style).toMatchObject({
+              inset: 0,
+              position: 'absolute',
+            });
+          }
+        }
+      });
+    }
+  }
+});
+
+// it('Hue onChange', async () => {
+//   const MyComponent = () => {
+//     const [hsva, setHsva] = useState({ h: 209, s: 36, v: 90, a: 1 });
+//     return (
+//       <div>
+//         <Hue
+//           hue={hsva.h}
+//           data-testid="custom-element"
+//           innerProps={{
+//             // ['data-testid']: 'custom-element',
+//           }}
+//           onChange={(newHue) => {
+//             console.log('newHue')
+//             // setHsva({ ...hsva, ...newHue });
+//           }}
+//         />
+//         <div>Load Greeting</div>
+//       </div>
+//     );
+//   };
+//   render(<MyComponent />);
+//   fireEvent.click(screen.getByTestId('custom-element'));
+// });

test/saturation.test.tsx

@@ -0,0 +1,33 @@
+/**
+ * @jest-environment jsdom
+ */
+import React, { useState } from 'react';
+import TestRenderer from 'react-test-renderer';
+import '@testing-library/jest-dom';
+import Saturation from '../packages/color-saturation/src';
+
+it('Saturation', async () => {
+  const MyComponent = () => {
+    const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
+    return (
+      <Saturation
+        hsva={hsva}
+        onChange={(newColor) => {
+          setHsva({ ...hsva, ...newColor, a: hsva.a });
+        }}
+      />
+    );
+  };
+  const component = TestRenderer.create(<MyComponent />);
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.className).toEqual('w-color-saturation ');
+    expect(tree.props.style).toMatchObject({
+      width: 200,
+      height: 200,
+      position: 'relative',
+      backgroundColor: 'hsl(0,100%, 50%)',
+    });
+  }
+});

test/shade-slider.test.tsx

@@ -0,0 +1,52 @@
+/**
+ * @jest-environment jsdom
+ */
+import React, { useState } from 'react';
+import TestRenderer from 'react-test-renderer';
+import '@testing-library/jest-dom';
+import ShadeSlider from '../packages/color-shade-slider/src';
+import { BACKGROUND_IMG } from '../packages/color-alpha/src';
+
+it('ShadeSlider', async () => {
+  const MyComponent = () => {
+    const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
+    return (
+      <ShadeSlider
+        hsva={hsva}
+        onChange={(newShade) => {
+          setHsva({ ...hsva, ...newShade });
+        }}
+      />
+    );
+  };
+  const component = TestRenderer.create(<MyComponent />);
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.className).toEqual('w-color-alpha w-color-saturation ');
+    expect(tree.props.style).toMatchObject({
+      width: 320,
+      height: 16,
+      borderRadius: 0,
+      position: 'relative',
+      backgroundColor: '#fff',
+    });
+    expect(tree.props.style.background).toEqual(`url(${BACKGROUND_IMG}) left center`);
+    if (tree.children) {
+      expect(tree.children.length).toEqual(2);
+      tree.children.forEach((child, idx) => {
+        if (typeof child === 'object') {
+          expect(child.type).toEqual('div');
+        }
+        if (idx === 0 && typeof child === 'object') {
+          expect(child.props.style).toMatchObject({
+            inset: 0,
+            position: 'absolute',
+            background: 'linear-gradient(to right, hsla(0, 100%, 50%, 1), rgb(0, 0, 0))',
+            borderRadius: 0,
+          });
+        }
+      });
+    }
+  }
+});

test/sketch.test.tsx

@@ -0,0 +1,43 @@
+/**
+ * @jest-environment jsdom
+ */
+import React, { useState } from 'react';
+import TestRenderer from 'react-test-renderer';
+import '@testing-library/jest-dom';
+import Sketch from '../packages/color-sketch/src';
+
+it('Sketch', async () => {
+  const MyComponent = () => {
+    const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
+    return (
+      <Sketch
+        style={{ marginLeft: 20 }}
+        color={hsva}
+        onChange={(color) => {
+          setHsva({ ...hsva, ...color.hsv });
+        }}
+      />
+    );
+  };
+  const component = TestRenderer.create(<MyComponent />);
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.className).toEqual('w-color-sketch ');
+    expect(tree.props.style).toMatchObject({
+      background: 'rgb(255, 255, 255)',
+      borderRadius: 4,
+      boxShadow: 'rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px',
+      width: 218,
+      marginLeft: 20,
+    });
+    if (tree.children) {
+      expect(tree.children.length).toEqual(2);
+      tree.children.forEach((child) => {
+        if (typeof child === 'object') {
+          expect(child.type).toEqual('div');
+        }
+      });
+    }
+  }
+});

test/slider.test.tsx

@@ -0,0 +1,36 @@
+/**
+ * @jest-environment jsdom
+ */
+import React, { useState } from 'react';
+import TestRenderer from 'react-test-renderer';
+import '@testing-library/jest-dom';
+import Slider from '../packages/color-slider/src';
+
+it('Slider', async () => {
+  const MyComponent = () => {
+    const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
+    return (
+      <Slider
+        color={hsva}
+        onChange={(newShade) => {
+          setHsva({ ...hsva, ...newShade });
+        }}
+      />
+    );
+  };
+  const component = TestRenderer.create(<MyComponent />);
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.className).toEqual('w-color-slider');
+    expect(tree.props.style).toMatchObject({ display: 'flex' });
+    if (tree.children) {
+      expect(tree.children.length).toEqual(5);
+      tree.children.forEach((child) => {
+        if (typeof child === 'object') {
+          expect(child.type).toEqual('div');
+        }
+      });
+    }
+  }
+});