diff --git a/package.json b/package.json
index bc74da0f..d31ca8f9 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
"devDependencies": {
"@babel/cli": "7.11.6",
"@babel/core": "7.11.6",
+ "@babel/eslint-parser": "7.11.0",
"@babel/plugin-proposal-class-properties": "7.10.4",
"@babel/plugin-transform-modules-commonjs": "7.10.4",
"@babel/preset-react": "7.10.4",
@@ -58,7 +59,6 @@
"@types/react-dom": "17.0.9",
"@types/sinon": "9.0.10",
"babel-core": "7.0.0-bridge.0",
- "@babel/eslint-parser": "7.11.0",
"babel-loader": "8.1.0",
"babel-plugin-external-helpers": "6.22.0",
"babel-plugin-transform-class-properties": "6.24.1",
@@ -73,6 +73,7 @@
"cross-env": "7.0.3",
"gh-pages": "5.0.0",
"npm-run-all2": "5.0.0",
+ "playwright-core": "^1.43.1",
"prettier": "1.19.1",
"react": "^18.3.0",
"react-dom": "^18.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 14676d87..9601a682 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -104,6 +104,9 @@ devDependencies:
npm-run-all2:
specifier: 5.0.0
version: 5.0.0
+ playwright-core:
+ specifier: ^1.43.1
+ version: 1.43.1
prettier:
specifier: 1.19.1
version: 1.19.1
diff --git a/src/index.spec.tsx b/src/index.spec.tsx
index e063d37c..2c7423ad 100644
--- a/src/index.spec.tsx
+++ b/src/index.spec.tsx
@@ -1,14 +1,8 @@
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
+import { spy } from 'sinon';
import { Resizable } from '.';
-const mouseMove = (x: number, y: number) => {
- const event = document.createEvent('MouseEvents');
- event.initMouseEvent('mousemove', true, true, window, 0, 0, 0, x, y, false, false, false, false, 0, null);
- document.dispatchEvent(event);
- return event;
-};
-
const mouseUp = (x: number, y: number) => {
const event = document.createEvent('MouseEvents');
event.initMouseEvent('mouseup', true, true, window, 0, 0, 0, x, y, false, false, false, false, 0, null);
@@ -31,7 +25,7 @@ test.use({ viewport: { width: 500, height: 500 } });
test('should box width and height equal 100px', async ({ mount }) => {
const resizable = await mount();
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const width = await resizable.evaluate(node => node.style.width);
const height = await resizable.evaluate(node => node.style.height);
const position = await resizable.evaluate(node => node.style.position);
@@ -45,7 +39,7 @@ test('should box width and height equal 100px', async ({ mount }) => {
test('should allow vh, vw relative units', async ({ mount }) => {
const resizable = await mount();
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const width = await resizable.evaluate(node => node.style.width);
const height = await resizable.evaluate(node => node.style.height);
const position = await resizable.evaluate(node => node.style.position);
@@ -59,7 +53,7 @@ test('should allow vh, vw relative units', async ({ mount }) => {
test('should allow vmax, vmin relative units', async ({ mount }) => {
const resizable = await mount();
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const width = await resizable.evaluate(node => node.style.width);
const height = await resizable.evaluate(node => node.style.height);
const position = await resizable.evaluate(node => node.style.position);
@@ -72,7 +66,7 @@ test('should allow vmax, vmin relative units', async ({ mount }) => {
test('should box width and height equal auto when size omitted', async ({ mount }) => {
const resizable = await mount();
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
expect(await divs.count()).toBe(9);
expect(await resizable.evaluate(node => node.style.width)).toBe('auto');
expect(await resizable.evaluate(node => node.style.height)).toBe('auto');
@@ -81,7 +75,7 @@ test('should box width and height equal auto when size omitted', async ({ mount
test('should box width and height equal auto when set auto', async ({ mount }) => {
const resizable = await mount();
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
expect(await divs.count()).toBe(9);
expect(await resizable.evaluate(node => node.style.width)).toBe('auto');
expect(await resizable.evaluate(node => node.style.height)).toBe('auto');
@@ -90,7 +84,7 @@ test('should box width and height equal auto when set auto', async ({ mount }) =
test('Should style is applied to box', async ({ mount }) => {
const resizable = await mount();
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
expect(await divs.count()).toBe(9);
expect(await resizable.evaluate(node => node.style.position)).toBe('absolute');
});
@@ -98,7 +92,7 @@ test('Should style is applied to box', async ({ mount }) => {
test('Should custom class name be applied to box', async ({ mount }) => {
const resizable = await mount();
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
expect(await divs.count()).toBe(9);
expect(await resizable.evaluate(node => node.className)).toBe('custom-class-name');
});
@@ -111,20 +105,18 @@ test('Should use a custom wrapper element', async ({ mount }) => {
test('Should custom class name be applied to resizer', async ({ mount }) => {
const resizable = await mount();
-
expect(await resizable.evaluate(node => node.querySelector('.right-handle-class'))).toBeTruthy();
});
-/*
-test('Should create custom span that wraps resizable divs ', async ({ mount })=> {
+test('Should create custom span that wraps resizable divs ', async ({ mount }) => {
const resizable = await mount();
-
- c const divs = await resizable.locator('div');
- const node = ReactDOM.findDOMNode(divs[1]) as Element;
- t.is(node.getAttribute('class'), 'wrapper-class');
+
+ const divs = resizable.locator('div');
+
+ expect(await (await divs.all())[0].evaluate(node => node.className)).toBe('wrapper-class');
});
-test('Should not render resizer when enable props all false', async ({ mount })=> {
+test('Should not render resizer when enable props all false', async ({ mount }) => {
const resizable = await mount(
,
);
-
- c const divs = await resizable.locator('div');
- t.is(divs.length, 2);
+
+ const divs = resizable.locator('div');
+ expect(await divs.count()).toBe(1);
});
-test('Should render one resizer when one enable props set true', async ({ mount })=> {
+test('Should disable all resizer', async ({ mount }) => {
+ const resizable = await mount();
+
+ const divs = resizable.locator('div');
+ expect(await divs.count()).toBe(0);
+});
+
+test('Should render one resizer when one enable props set true', async ({ mount }) => {
const resizable = await mount(
,
);
- if (!resizable || resizable instanceof Element) return fail();
- c const divs = await resizable.locator('div');
- t.is(divs.length, 3);
+ const divs = resizable.locator('div');
+ expect(await divs.count()).toBe(2);
});
-test('Should render two resizer when two enable props set true', async ({ mount })=> {
+test('Should render two resizer when two enable props set true', async ({ mount }) => {
const resizable = await mount(
,
);
- if (!resizable || resizable instanceof Element) return fail();
- c const divs = await resizable.locator('div');
- t.is(divs.length, 4);
+ const divs = resizable.locator('div');
+ expect(await divs.count()).toBe(3);
});
-test('Should render three resizer when three enable props set true', async ({ mount })=> {
+test('Should render three resizer when three enable props set true', async ({ mount }) => {
const resizable = await mount(
,
);
- if (!resizable || resizable instanceof Element) return fail();
- c const divs = await resizable.locator('div');
- t.is(divs.length, 5);
+ const divs = resizable.locator('div');
+ expect(await divs.count()).toBe(4);
});
-test('Should only right is resizable and call onResizeStart when mousedown', async ({ mount })=> {
- const onResizeStart = sinon.spy();
+test('Should only right is resizable and call onResizeStart when mousedown', async ({ mount }) => {
+ const onResizeStart = spy();
const resizable = await mount(
,
);
- const divs = await resizable.locator('div');
- t.is(divs.length, 3);
- TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(divs[2]) as Element);
- t.is(onResizeStart.callCount, 1);
- t.is(onResizeStart.getCall(0).args[1], 'right');
+ const divs = resizable.locator('div');
+ expect(await divs.count()).toBe(2);
+ await (await divs.all())[1].dispatchEvent('mousedown');
+ expect(onResizeStart.callCount).toBe(1);
+ expect(onResizeStart.getCall(0).args[1]).toBe('right');
});
-test('Should only bottom is resizable and call onResizeStart when mousedown', async ({ mount })=> {
- const onResizeStart = sinon.spy();
+test('Should only bottom is resizable and call onResizeStart when mousedown', async ({ mount }) => {
+ const onResizeStart = spy();
const resizable = await mount(
,
);
- const divs = await resizable.locator('div');
- t.is(divs.length, 3);
- TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(divs[2]) as Element);
- t.is(onResizeStart.callCount, 1);
- t.is(onResizeStart.getCall(0).args[1], 'bottom');
+ const divs = resizable.locator('div');
+ expect(await divs.count()).toBe(2);
+ await (await divs.all())[1].dispatchEvent('mousedown');
+ expect(onResizeStart.callCount).toBe(1);
+ expect(onResizeStart.getCall(0).args[1]).toBe('bottom');
});
-test('Should only bottomRight is resizable and call onResizeStart when mousedown', async ({ mount })=> {
- const onResizeStart = sinon.spy();
+test('Should only bottomRight is resizable and call onResizeStart when mousedown', async ({ mount }) => {
+ const onResizeStart = spy();
const resizable = await mount(
,
);
- const divs = await resizable.locator('div');
- t.is(divs.length, 3);
- TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(divs[2]) as Element);
- t.is(onResizeStart.callCount, 1);
- t.is(onResizeStart.getCall(0).args[1], 'bottomRight');
+ const divs = resizable.locator('div');
+ expect(await divs.count()).toBe(2);
+ await (await divs.all())[1].dispatchEvent('mousedown');
+ expect(onResizeStart.callCount).toBe(1);
+ expect(onResizeStart.getCall(0).args[1]).toBe('bottomRight');
});
-test('Should not begin resize when onResizeStart returns false', async ({ mount })=> {
+test('Should not begin resize when onResizeStart returns false', async ({ mount, page }) => {
const onResizeStart = () => {
return false;
};
- const onResize = sinon.spy();
- const resizable = TestUtils.renderIntoDocument(
- ,
- );
- const divs = await resizable.locator('div');
- const previousState = resizable.state.isResizing;
- TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(divs[2]) as Element);
- mouseMove(200, 220);
- t.is(onResize.callCount, 0);
- t.is(resizable.state.isResizing, previousState);
-});
-
-test('should call onResize with expected args when resize direction right', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const resizable = ReactDOM.render(
- ,
- document.getElementById('content'),
- );
- const divs = await resizable.locator('div');
- const node = ReactDOM.findDOMNode(divs[3]);
- if (!node || !(node instanceof HTMLDivElement)) return fail();
- TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
- mouseMove(200, 220);
- TestUtils.Simulate.mouseUp(node);
- t.is(onResize.callCount, 1);
- t.true(onResize.getCall(0).args[0] instanceof Event);
- t.is(onResize.getCall(0).args[1], 'right');
- t.deepEqual(onResize.getCall(0).args[2].clientWidth, 300);
- t.deepEqual(onResize.getCall(0).args[2].clientHeight, 100);
- t.deepEqual(onResize.getCall(0).args[3], { width: 200, height: 0 });
-});
+ const onResize = spy();
+ const resizable = await mount();
+ const divs = resizable.locator('div');
+ await (await divs.all())[1].dispatchEvent('mousedown');
+ await page.mouse.move(100, 200);
+ expect(onResize.callCount).toBe(0);
+});
+
+// test('should call onResize with expected args when resize direction right', async ({ mount, page }) => {
+// const onResize = spy();
+// const resizable = await mount(
+// ,
+// );
+// const divs = resizable.locator('div');
+// const node = (await divs.all())[2];
+// node.dispatchEvent('mousedown');
+// await page.mouse.move(200, 220);
+// await page.mouse.up();
+// expect(onResize.callCount).toBe(1);
+// expect(onResize.getCall(0).args[1]).toBe('right');
+// expect(onResize.getCall(0).args[2].clientWidth).toBe(300);
+// console.log(onResize.getCall(0).args[2])
+// // t.deepEqual(onResize.getCall(0).args[2].clientHeight, 100);
+// // t.deepEqual(onResize.getCall(0).args[3], { width: 200, height: 0 });
+// });
+/*
test('should call onResize with expected args when resize direction bottom', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
const resizable = ReactDOM.render(
,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[4]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -345,8 +330,8 @@ test('should call onResize with expected args when resize direction bottom', asy
});
test('should call onResize with expected args when resize direction bottomRight', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
const resizable = ReactDOM.render(
,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[7]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -371,9 +356,9 @@ test('should call onResize with expected args when resize direction bottomRight'
});
test('should call onResizeStop when resize stop direction right', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[3]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -399,9 +384,9 @@ test('should call onResizeStop when resize stop direction right', async ({ mount
});
test('should call onResizeStop when resize stop direction bottom', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[4]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -427,9 +412,9 @@ test('should call onResizeStop when resize stop direction bottom', async ({ moun
});
test('should call onResizeStop when resize stop direction bottomRight', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[7]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -464,9 +449,9 @@ test('should component size updated when updateSize method called', async ({ mou
});
test('should snapped by grid value', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
{
/>,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[7]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -489,9 +474,9 @@ test('should snapped by grid value', async ({ mount })=> {
});
test('should snapped by absolute snap value', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
{
/>,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[7]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -514,9 +499,9 @@ test('should snapped by absolute snap value', async ({ mount })=> {
});
test('should only snap if the gap is small enough', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
{
/>,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[7]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 40, clientY: 40 });
@@ -545,9 +530,9 @@ test('should only snap if the gap is small enough', async ({ mount })=> {
});
test('should clamped by max width', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
{
/>,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[7]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -569,9 +554,9 @@ test('should clamped by max width', async ({ mount })=> {
});
test('should clamped by min width', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
{
/>,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[7]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -593,9 +578,9 @@ test('should clamped by min width', async ({ mount })=> {
});
test('should allow 0 as minWidth', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
{
/>,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[7]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -617,9 +602,9 @@ test('should allow 0 as minWidth', async ({ mount })=> {
});
test('should clamped by max height', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
{
/>,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[7]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -641,9 +626,9 @@ test('should clamped by max height', async ({ mount })=> {
});
test('should clamped by min height', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
{
/>,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[7]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -665,9 +650,9 @@ test('should clamped by min height', async ({ mount })=> {
});
test('should allow 0 as minHeight', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
{
/>,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[7]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -689,9 +674,9 @@ test('should allow 0 as minHeight', async ({ mount })=> {
});
test('should aspect ratio locked when resize to right', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
{
/>,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[3]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -716,9 +701,9 @@ test('should aspect ratio locked when resize to right', async ({ mount })=> {
});
test('should aspect ratio locked with 1:1 ratio when resize to right', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[3]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -743,9 +728,9 @@ test('should aspect ratio locked with 1:1 ratio when resize to right', async ({
});
test('should aspect ratio locked with 2:1 ratio when resize to right', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[3]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -770,9 +755,9 @@ test('should aspect ratio locked with 2:1 ratio when resize to right', async ({
});
test('should aspect ratio locked with 2:1 ratio with extra width/height when resize to right', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[3]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -799,9 +784,9 @@ test('should aspect ratio locked with 2:1 ratio with extra width/height when res
});
test('should aspect ratio locked when resize to bottom', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
{
/>,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[4]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -826,9 +811,9 @@ test('should aspect ratio locked when resize to bottom', async ({ mount })=> {
});
test('should aspect ratio locked with 1:1 ratio when resize to bottom', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[4]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -853,9 +838,9 @@ test('should aspect ratio locked with 1:1 ratio when resize to bottom', async ({
});
test('should aspect ratio locked with 2:1 ratio when resize to bottom', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[4]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -880,9 +865,9 @@ test('should aspect ratio locked with 2:1 ratio when resize to bottom', async ({
});
test('should aspect ratio locked with 2:1 ratio with extra width/height when resize to bottom', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[4]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -909,9 +894,9 @@ test('should aspect ratio locked with 2:1 ratio with extra width/height when res
});
test('should clamped by parent width', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
{
/>,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[7]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -933,9 +918,9 @@ test('should clamped by parent width', async ({ mount })=> {
});
test('should clamped by parent height', async ({ mount })=> {
- const onResize = sinon.spy();
- const onResizeStart = sinon.spy();
- const onResizeStop = sinon.spy();
+ const onResize = spy();
+ const onResizeStart = spy();
+ const onResizeStop = spy();
const resizable = ReactDOM.render(
{
/>,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[7]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
@@ -960,7 +945,7 @@ test('should defaultSize ignored when size set', async ({ mount })=> {
const resizable = await mount(
,
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
expect(await divs.count()).toBe(9);
expect(await resizable.evaluate(node => node.style.width)).toBe('200px');
expect(await resizable.evaluate(node => node.style.height)).toBe('300px');
@@ -970,7 +955,7 @@ test('should defaultSize ignored when size set', async ({ mount })=> {
test('should render a handleComponent for right', async ({ mount })=> {
const CustomComponent = ;
const resizable = await mount();
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[3]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
const handleNode = node.children[0];
@@ -979,12 +964,12 @@ test('should render a handleComponent for right', async ({ mount })=> {
});
test('should adjust resizing for specified scale', async ({ mount })=> {
- const onResize = sinon.spy();
+ const onResize = spy();
const resizable = ReactDOM.render(
,
document.getElementById('content'),
);
- const divs = await resizable.locator('div');
+ const divs = resizable.locator('div');
const node = ReactDOM.findDOMNode(divs[7]);
if (!node || !(node instanceof HTMLDivElement)) return fail();
TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });