Skip to content

Commit 8290dcd

Browse files
43081j43081j
committed
test: migrate more browser tests to use vitest spies
Migrates a few easy ones.
1 parent 021d60d commit 8290dcd

File tree

7 files changed

+52
-44
lines changed

7 files changed

+52
-44
lines changed

‎test/browser/customBuiltInElements.test.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { createElement, render, Component } from 'preact';
22
import { setupScratch, teardown } from '../_util/helpers';
3+
import { vi } from 'vitest';
34

45
/** @jsx createElement */
56

@@ -23,7 +24,7 @@ runSuite('customised built-in elements', () => {
2324
}
2425
}
2526

26-
const spy = sinon.spy();
27+
const spy = vi.fn();
2728

2829
class BuiltIn extends HTMLDivElement {
2930
connectedCallback() {
@@ -35,6 +36,6 @@ runSuite('customised built-in elements', () => {
3536

3637
render(<Foo />, scratch);
3738

38-
expect(spy).to.have.been.calledOnce;
39+
expect(spy).toHaveBeenCalledTimes(1);
3940
});
4041
});

‎test/browser/keys.test.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { setupRerender } from 'preact/test-utils';
33
import { setupScratch, teardown } from '../_util/helpers';
44
import { logCall, clearLog, getLog } from '../_util/logCall';
55
import { div } from '../_util/dom';
6+
import { vi } from 'vitest';
67

78
/** @jsx createElement */
89

@@ -101,11 +102,11 @@ describe('keys', () => {
101102

102103
// https://fb.me/react-special-props
103104
it('should not pass key in props', () => {
104-
const Foo = sinon.spy(function Foo() {
105+
const Foo = vi.fn(function Foo() {
105106
return null;
106107
});
107108
render(<Foo key="foo" />, scratch);
108-
expect(Foo.args[0][0]).to.deep.equal({});
109+
expect(Foo.mock.calls[0][0]).to.deep.equal({});
109110
});
110111

111112
it('should update in-place keyed DOM nodes', () => {

‎test/browser/placeholders.test.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { setupRerender } from 'preact/test-utils';
33
import { setupScratch, teardown } from '../_util/helpers';
44
import { logCall, clearLog, getLog } from '../_util/logCall';
55
import { div } from '../_util/dom';
6+
import { vi } from 'vitest';
67

78
/** @jsx createElement */
89

@@ -436,7 +437,7 @@ describe('null placeholders', () => {
436437

437438
const Test2 = () => <div>Test2</div>;
438439

439-
const ref = sinon.spy();
440+
const ref = vi.fn();
440441

441442
class App extends Component {
442443
constructor(props) {
@@ -466,9 +467,9 @@ describe('null placeholders', () => {
466467
expect(scratch.innerHTML).to.equal(
467468
'<div><div>Test2</div><div>Test3</div><div>Iframe</div></div>'
468469
);
469-
expect(ref).to.have.been.calledOnce;
470+
expect(ref).toHaveBeenCalledTimes(1);
470471

471-
ref.resetHistory();
472+
ref.mockClear();
472473
clearLog();
473474
setState({ value: false });
474475
rerender();
@@ -477,6 +478,6 @@ describe('null placeholders', () => {
477478
'<div><div>Test2</div><div>Iframe</div></div>'
478479
);
479480
expect(getLog()).to.deep.equal(['<div>Test3.remove()']);
480-
expect(ref).to.have.been.calledOnce;
481+
expect(ref).toHaveBeenCalledTimes(1);
481482
});
482483
});

‎test/browser/render.test.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
} from '../_util/helpers';
1414
import { clearLog, getLog, logCall } from '../_util/logCall';
1515
import { useState } from 'preact/hooks';
16+
import { vi } from 'vitest';
1617

1718
/** @jsx createElement */
1819

@@ -1236,19 +1237,17 @@ describe('render()', () => {
12361237
render(<A />, scratch);
12371238
expect(scratch.innerHTML).to.equal('<div>0</div>');
12381239

1239-
const sandbox = sinon.createSandbox();
1240+
const debounceSpy = vi.spyOn(options, 'debounceRendering');
12401241
try {
1241-
sandbox.spy(options, 'debounceRendering');
1242-
12431242
comp.setState({ updates: 1 }, () => {
12441243
comp.setState({ updates: 2 });
12451244
});
12461245
rerender();
12471246
expect(scratch.innerHTML).to.equal('<div>2</div>');
12481247

1249-
expect(options.debounceRendering).to.have.been.calledOnce;
1248+
expect(debounceSpy).toHaveBeenCalledTimes(1);
12501249
} finally {
1251-
sandbox.restore();
1250+
debounceSpy.mockRestore();
12521251
}
12531252
});
12541253

@@ -1300,7 +1299,7 @@ describe('render()', () => {
13001299
'<div id="wrapper"><div id="page1">Page 1</div></div>'
13011300
);
13021301

1303-
expect(attributesSpy.get).to.not.have.been.called;
1302+
expect(attributesSpy).not.toHaveBeenCalled();
13041303

13051304
render(
13061305
<div id="wrapper">
@@ -1312,7 +1311,7 @@ describe('render()', () => {
13121311
'<div id="wrapper"><div id="page2">Page 2</div></div>'
13131312
);
13141313

1315-
expect(attributesSpy.get).to.not.have.been.called;
1314+
expect(attributesSpy).not.toHaveBeenCalled();
13161315
});
13171316

13181317
// #2926

‎test/browser/spec.test.js‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { setupRerender } from 'preact/test-utils';
22
import { createElement, render, Component } from 'preact';
33
import { setupScratch, teardown } from '../_util/helpers';
4+
import { vi } from 'vitest';
45

56
/** @jsx createElement */
67

@@ -29,24 +30,26 @@ describe('Component spec', () => {
2930
return <div />;
3031
}
3132
}
32-
sinon.spy(ForceUpdateComponent.prototype, 'componentWillUpdate');
33-
sinon.spy(ForceUpdateComponent.prototype, 'forceUpdate');
33+
vi.spyOn(ForceUpdateComponent.prototype, 'componentWillUpdate');
34+
vi.spyOn(ForceUpdateComponent.prototype, 'forceUpdate');
3435
render(<ForceUpdateComponent />, scratch);
35-
expect(ForceUpdateComponent.prototype.componentWillUpdate).not.to.have
36-
.been.called;
36+
expect(
37+
ForceUpdateComponent.prototype.componentWillUpdate
38+
).not.toHaveBeenCalled();
3739

3840
forceUpdate();
3941
rerender();
4042

41-
expect(ForceUpdateComponent.prototype.componentWillUpdate).to.have.been
42-
.called;
43-
expect(ForceUpdateComponent.prototype.forceUpdate).to.have.been.called;
43+
expect(
44+
ForceUpdateComponent.prototype.componentWillUpdate
45+
).toHaveBeenCalled();
46+
expect(ForceUpdateComponent.prototype.forceUpdate).toHaveBeenCalled();
4447
});
4548

4649
it('should add callback to renderCallbacks', () => {
4750
/** @type {() => void} */
4851
let forceUpdate;
49-
let callback = sinon.spy();
52+
let callback = vi.fn();
5053
class ForceUpdateComponent extends Component {
5154
componentDidMount() {
5255
forceUpdate = () => this.forceUpdate(callback);
@@ -55,17 +58,17 @@ describe('Component spec', () => {
5558
return <div />;
5659
}
5760
}
58-
sinon.spy(ForceUpdateComponent.prototype, 'forceUpdate');
61+
vi.spyOn(ForceUpdateComponent.prototype, 'forceUpdate');
5962
render(<ForceUpdateComponent />, scratch);
6063

6164
forceUpdate();
6265
rerender();
6366

64-
expect(ForceUpdateComponent.prototype.forceUpdate).to.have.been.called;
65-
expect(
66-
ForceUpdateComponent.prototype.forceUpdate
67-
).to.have.been.calledWith(callback);
68-
expect(callback).to.have.been.called;
67+
expect(ForceUpdateComponent.prototype.forceUpdate).toHaveBeenCalled();
68+
expect(ForceUpdateComponent.prototype.forceUpdate).toHaveBeenCalledWith(
69+
callback
70+
);
71+
expect(callback).toHaveBeenCalled();
6972
});
7073
});
7174
});

‎test/browser/style.test.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { createElement, render } from 'preact';
22
import { setupScratch, teardown, sortCss } from '../_util/helpers';
3+
import { vi } from 'vitest';
34

45
/** @jsx createElement */
56

@@ -24,9 +25,11 @@ describe('style attribute', () => {
2425

2526
it('should not call CSSStyleDeclaration.setProperty for style strings', () => {
2627
render(<div style="top: 5px; position: relative;" />, scratch);
27-
sinon.stub(scratch.firstChild.style, 'setProperty');
28+
vi.spyOn(scratch.firstChild.style, 'setProperty').mockImplementation(
29+
() => {}
30+
);
2831
render(<div style="top: 10px; position: absolute;" />, scratch);
29-
expect(scratch.firstChild.style.setProperty).to.not.be.called;
32+
expect(scratch.firstChild.style.setProperty).not.toHaveBeenCalled();
3033
});
3134

3235
it('should properly switch from string styles to object styles and back', () => {
@@ -194,12 +197,14 @@ describe('style attribute', () => {
194197

195198
it('should call CSSStyleDeclaration.setProperty for css vars', () => {
196199
render(<div style={{ padding: '10px' }} />, scratch);
197-
sinon.stub(scratch.firstChild.style, 'setProperty');
200+
vi.spyOn(scratch.firstChild.style, 'setProperty').mockImplementation(
201+
() => {}
202+
);
198203
render(
199204
<div style={{ '--foo': '10px', padding: 'var(--foo)' }} />,
200205
scratch
201206
);
202-
expect(scratch.firstChild.style.setProperty).to.be.calledWith(
207+
expect(scratch.firstChild.style.setProperty).toHaveBeenCalledWith(
203208
'--foo',
204209
'10px'
205210
);

‎test/browser/svg.test.js‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { createElement, Component, render } from 'preact';
22
import { setupRerender } from 'preact/test-utils';
33
import { setupScratch, teardown, sortAttributes } from '../_util/helpers';
4+
import { vi } from 'vitest';
45

56
/** @jsx createElement */
67

@@ -195,25 +196,22 @@ describe('svg', () => {
195196
);
196197
render(<Demo c="1" />, scratch);
197198
let root = scratch.firstChild;
198-
sinon.spy(root, 'removeAttribute');
199+
vi.spyOn(root, 'removeAttribute');
199200
render(<Demo />, scratch);
200-
expect(root.removeAttribute).to.have.been.calledOnce.and.calledWith(
201-
'class'
202-
);
201+
expect(root.removeAttribute).toHaveBeenCalledTimes(1);
202+
expect(root.removeAttribute).toHaveBeenCalledWith('class');
203203

204-
root.removeAttribute.restore();
204+
root.removeAttribute.mockRestore();
205205

206206
render(<div />, scratch);
207207
render(<Demo />, scratch);
208208
root = scratch.firstChild;
209-
sinon.spy(root, 'setAttribute');
209+
vi.spyOn(root, 'setAttribute');
210210
render(<Demo c="2" />, scratch);
211-
expect(root.setAttribute).to.have.been.calledOnce.and.calledWith(
212-
'class',
213-
'foo_2'
214-
);
211+
expect(root.setAttribute).toHaveBeenCalledTimes(1);
212+
expect(root.setAttribute).toHaveBeenCalledWith('class', 'foo_2');
215213

216-
root.setAttribute.restore();
214+
root.setAttribute.mockRestore();
217215
});
218216

219217
it('should still support class attribute', () => {

0 commit comments

Comments
 (0)