From 820dd2a1f728ea926e4198238ce5e0908dd5b143 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Mon, 5 Jul 2021 01:37:47 +0800 Subject: [PATCH] test: add test case. --- package.json | 3 +- test/alpha.test.tsx | 43 +++++++++++ .../index.test.ts => test/convert.test.tsx | 30 ++++---- test/drag-event-interactive.test.tsx | 20 +++++ test/hue.test.tsx | 75 +++++++++++++++++++ test/saturation.test.tsx | 33 ++++++++ test/shade-slider.test.tsx | 52 +++++++++++++ test/sketch.test.tsx | 43 +++++++++++ test/slider.test.tsx | 36 +++++++++ 9 files changed, 319 insertions(+), 16 deletions(-) create mode 100644 test/alpha.test.tsx rename packages/color-convert/tests/index.test.ts => test/convert.test.tsx (91%) create mode 100644 test/drag-event-interactive.test.tsx create mode 100644 test/hue.test.tsx create mode 100644 test/saturation.test.tsx create mode 100644 test/shade-slider.test.tsx create mode 100644 test/sketch.test.tsx create mode 100644 test/slider.test.tsx diff --git a/package.json b/package.json index bead2e936..3d47e368c 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "license": "MIT", "jest": { "testMatch": [ - "/packages/**/tests/*.{js,jsx,ts,tsx}" + "/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", diff --git a/test/alpha.test.tsx b/test/alpha.test.tsx new file mode 100644 index 000000000..c862a4f14 --- /dev/null +++ b/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 ( + { + setHsva({ ...hsva, ...newAlpha }); + }} + /> + ); + }; + const component = TestRenderer.create(); + 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'); + } + }); + } + } +}); diff --git a/packages/color-convert/tests/index.test.ts b/test/convert.test.tsx similarity index 91% rename from packages/color-convert/tests/index.test.ts rename to test/convert.test.tsx index 50e06a012..d753cda5a 100644 --- a/packages/color-convert/tests/index.test.ts +++ b/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'); diff --git a/test/drag-event-interactive.test.tsx b/test/drag-event-interactive.test.tsx new file mode 100644 index 000000000..865fe0f4f --- /dev/null +++ b/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 ; + }; + const component = TestRenderer.create(); + let tree = component.toJSON(); + if (tree && !Array.isArray(tree)) { + expect(tree.type).toEqual('div'); + expect(tree.props).toHaveProperty('onMouseDown'); + expect(tree.props).toHaveProperty('onTouchStart'); + } +}); diff --git a/test/hue.test.tsx b/test/hue.test.tsx new file mode 100644 index 000000000..57466b3dd --- /dev/null +++ b/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 ( + { + setHsva({ ...hsva, ...newHue }); + }} + /> + ); + }; + const component = TestRenderer.create(); + 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 ( +//
+// { +// console.log('newHue') +// // setHsva({ ...hsva, ...newHue }); +// }} +// /> +//
Load Greeting
+//
+// ); +// }; +// render(); +// fireEvent.click(screen.getByTestId('custom-element')); +// }); diff --git a/test/saturation.test.tsx b/test/saturation.test.tsx new file mode 100644 index 000000000..963ae7d77 --- /dev/null +++ b/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 ( + { + setHsva({ ...hsva, ...newColor, a: hsva.a }); + }} + /> + ); + }; + const component = TestRenderer.create(); + 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%)', + }); + } +}); diff --git a/test/shade-slider.test.tsx b/test/shade-slider.test.tsx new file mode 100644 index 000000000..530b0c17c --- /dev/null +++ b/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 ( + { + setHsva({ ...hsva, ...newShade }); + }} + /> + ); + }; + const component = TestRenderer.create(); + 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, + }); + } + }); + } + } +}); diff --git a/test/sketch.test.tsx b/test/sketch.test.tsx new file mode 100644 index 000000000..b4bf7190b --- /dev/null +++ b/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 ( + { + setHsva({ ...hsva, ...color.hsv }); + }} + /> + ); + }; + const component = TestRenderer.create(); + 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'); + } + }); + } + } +}); diff --git a/test/slider.test.tsx b/test/slider.test.tsx new file mode 100644 index 000000000..3c76151c3 --- /dev/null +++ b/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 ( + { + setHsva({ ...hsva, ...newShade }); + }} + /> + ); + }; + const component = TestRenderer.create(); + 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'); + } + }); + } + } +});