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 });