Mocks, Spies, and Timers - Oh My!

Mocks, Spies, and Timers
Oh My!

Lisa Backer
Senior Software Engineer
DockYard

Unit Tests
Unit Tests are useful for testing pure functions
where the return value is only determined by its
input values, without any observable side
effects.

Unit Tests
export const isMagicShoes = (shoes) => {
}

Unit Tests
}
return shoes !== undefined && shoes.type === 'ruby';

Unit Tests
module('Unit | Utils | shoes', function() {
module('isMagicShoes', function() {
test('returns true only for magic shoes', function(assert) {
});
});
});
}

Unit Tests
});
});
});
assert.deepEqual(isMagicShoes({ type: 'ruby' }), true);
}

Unit Tests
});
});
});
assert.deepEqual(isMagicShoes({ type: 'silver' }), false);
}

Unit Tests
});
});
});
assert.deepEqual(isMagicShoes(), false);
}

Container Tests
Test the functionality around an Ember class
instance by setting up the application's container.

Container Tests
export default class Magic extends Service {
makeWish(shoes, wishCallback) {
}
}

Container Tests
}
}
if (isMagicShoes(shoes) && shoes.clicked === 3) {
wishCallback();
}

Container Tests
}
}
wishCallback();
}
module('Unit | Service | magic', function(hooks) {
setupTest(hooks);
test('makeWish', function(assert) {
});
});

Container Tests
}
}
wishCallback();
}
setupTest(hooks);
});
});
let service = this.owner.lookup('service:magic');
let wish = () => {
assert.ok(true, 'Wish was made');
}

Container Tests
}
}
wishCallback();
}
setupTest(hooks);
});
});
let wish = () => {
}
service.makeWish({ type: 'ruby', clicked: 3 }, wish);

Container Tests
}
}
wishCallback();
}
setupTest(hooks);
});
});
let wish = () => {
}
assert.expect(1);

Rendering Tests
Test the interactions between various parts of
the application, such as behavior between UI
controls.

{{#if isHappy}}
<p class="happy">Dorothy is Happy</p>
{{else}}
<p class="scared">Dorothy is scared and wants to go home</p>
{{/if}}
Rendering Tests

{{#if isHappy}}
{{else}}
{{/if}}
Rendering Tests
<button class="shoes" {{on "click" this.theresNoPlaceLikeHome}}>
Shoes
</button>

Rendering Tests
{{#if isHappy}}
{{else}}
{{/if}}
<button class="shoes" {{action "theresNoPlaceLikeHome"}}>
Clicked {{this.shoes.clicked}}
</button>
export default Component.extend({
magic: inject(),
isHappy: false,
onMakeWish() => {}
actions: {
theresNoPlaceLikeHome() {
}
}
});

Rendering Tests
{{#if isHappy}}
{{else}}
{{/if}}
</button>
magic: inject(),
isHappy: false,
onMakeWish() => {}
actions: {
}
}
});
set(this, 'shoes.clicked', this.shoes.clicked + 1);

Rendering Tests
{{#if isHappy}}
{{else}}
{{/if}}
</button>
magic: inject(),
isHappy: false,
onMakeWish() => {}
actions: {
}
}
});
this.magic.makeWish(this.shoes, () => {
});

Rendering Tests
{{#if isHappy}}
{{else}}
{{/if}}
</button>
magic: inject(),
isHappy: false,
onMakeWish() => {}
actions: {
}
}
});
});
set(this, 'isHappy', true);
this.onMakeWish();

Rendering Tests
{{#if isHappy}}
{{else}}
{{/if}}
</button>
magic: inject(),
isHappy: false,
actions: {
}
}
});
});
test('Dorothy is happy when magic happens', async function(assert) {
this.set('shoes', { type: 'ruby', clicked: 0 });
});

Rendering Tests
{{#if isHappy}}
{{else}}
{{/if}}
</button>
magic: inject(),
isHappy: false,
actions: {
}
}
});
});
});
await render(hbs`<Dorothy @shoes={{shoes}} />`);
assert.notOk(this.element.querySelector('.happy'));
assert.ok(this.element.querySelector('.scared'));

Rendering Tests
{{#if isHappy}}
{{else}}
{{/if}}
</button>
magic: inject(),
isHappy: false,
actions: {
}
}
});
});
});
const shoes = this.element.querySelector('.shoes');
await click(shoes);
await click(shoes);
await click(shoes);

Rendering Tests
{{#if isHappy}}
{{else}}
{{/if}}
</button>
magic: inject(),
isHappy: false,
actions: {
}
}
});
});
});
await click(shoes);
await click(shoes);
await click(shoes);
assert.ok(this.element.querySelector('.happy'));
assert.notOk(this.element.querySelector('.scared'));

Application Tests
Test user interaction and application ﬂow in
order to verify user stories or a feature from an
end-user perspective.

Application Tests
<h1>Oz</h1>
{{dorothy shoes=model.shoes onMakeWish=(action "goHome")}}

Application Tests
<h1>Oz</h1>
{{dorothy shoes=model.shoes onMakeWish=(action "goHome")}}
export default Controller.extend({
  actions: {
    goHome() {
      this.transitionToRoute('kansas');
    }
  }
});

Application Tests
test('Make a wish', async function(assert) {
});

Application Tests
});
this.owner.lookup('route:oz').model = function() {
return {
shoes: {
type: 'ruby',
clicked: 0
}
};
};

Application Tests
});
return {
shoes: {
type: 'ruby',
clicked: 0
}
};
};
await visit('/oz');
assert.equal(currentURL(), '/oz');

Application Tests
});
return {
shoes: {
type: 'ruby',
clicked: 0
}
};
};
await visit('/oz');
await click('.shoes');

Application Tests
});
return {
shoes: {
type: 'ruby',
clicked: 0
}
};
};
await visit('/oz');
assert.equal(currentURL(), '/kansas');

Unit Tests
}

Unit Tests
return shoes !== undefined && shoes.type === 'silver';
}

Unit Tests
});
});
});

Unit Tests
assert.deepEqual(isMagicShoes({ type: 'ruby' }), false);
assert.deepEqual(isMagicShoes({ type: 'silver' }), true);
});
});
});

Container Tests
setupTest(hooks);
assert.expect(1);
let wish = () => {
}
});
});

Container Tests
setupTest(hooks);
assert.expect(1);
let wish = () => {
}
service.makeWish({ type: 'silver', clicked: 3 }, wish);
});
});

Rendering Tests
await click(shoes);
await click(shoes);
await click(shoes);
});

Rendering Tests
this.set('shoes', { type: 'silver', clicked: 0 });
await click(shoes);
await click(shoes);
await click(shoes);
});

Application Tests
return {
shoes: {
type: 'ruby',
clicked: 0
}
};
};
await visit('/oz');
});

Application Tests
return {
shoes: {
type: 'silver',
clicked: 0
}
};
};
await visit('/oz');
});

System Under Test
"Short for 'whatever we are testing' and is always
defined from the perspective of the test."
xUnit Patterns

wishCallback();
}
});
let wish = () => {
}
assert.expect(1);
service.makeWish(myShoes, wish);
SinonJS: Spies

wishCallback();
}
SinonJS: Spies
});
let wish = sinon.spy();

wishCallback();
}
SinonJS: Spies
});

wishCallback();
}
SinonJS: Spies
});
    assert.ok(wish.calledOnce);

import * as ShoeUtils from 'oz/utils/shoes';
test('shoes are validated with each heel click',
async function(assert) {
});
SinonJS: Spies

});
SinonJS: Spies
const spy = sinon.spy(ShoeUtils, 'isMagicShoes');

});
SinonJS: Spies
await click(shoes);
await click(shoes);
await click(shoes);

});
SinonJS: Spies
await click(shoes);
await click(shoes);
await click(shoes);
assert.equal(spy.callCount, 3);

SinonJS: Stubs
if (isMagicShoes(shoes) && clicked === 3) {
wishCallback();
}
}
}
let clicked = shoes.clicked;

SinonJS: Stubs
wishCallback();
}
}
}
let clicked = await this.ajax.request('https://www.random.org/integers/?
num=1&min=1&max=5&col=1&base=10&format=plain&rnd=new');

SinonJS: Stubs
});

SinonJS: Stubs
});
const magicService = this.owner.lookup('service:magic');
const stub = sinon.stub(magicService.ajax, 'request')
.onCall(0).resolves(1)
.onCall(1).resolves(3);

SinonJS: Stubs
});
await click(shoes);

SinonJS: Stubs
});
await click(shoes);
await click(shoes);

SinonJS: Stubs
});
await click(shoes);
await click(shoes);
assert.equal(stub.callCount.length, 2);

SinonJS: Fakes
wishCallback();
}
});
    assert.ok(spy.calledOnce);

SinonJS: Fakes
wishCallback();
}
});
    let wish = sinon.fake();

test('no magic wishes for non-magic shoes', async function(assert) {
});
SinonJS: Fakes
await click(shoes);
await click(shoes);
await click(shoes);

test('no magic wishes for non-magic shoes', async function(assert) {
});
SinonJS: Fakes
const fake = sinon.fake.returns(false);
sinon.replace(ShoeUtils, 'isMagicShoes', fake);
await click(shoes);
await click(shoes);
await click(shoes);
assert.equal(fake.callCount, 3);

SinonJS: Mocks
test('clicking three times with magic shoes', async function(assert) {
});

SinonJS: Mocks
});
const mock = sinon.mock(ShoeUtils);
mock.expects('isMagicShoes').exactly(3).returns(true);

SinonJS: Mocks
});
await click(shoes);
await click(shoes);
await click(shoes);

SinonJS: Mocks
});
await click(shoes);
await click(shoes);
await click(shoes);
mock.verify();

Usage: SinonJS
Spies When you want to verify a callback or
ensure a function was called with specific
inputs.

Usage: SinonJS
inputs.
Stubs When you need to simulate different
responses from systems that are complicated
to initialize.

Usage: SinonJS
inputs.
to initialize.
Fakes When you can't remember whether to use a
spy or a stub.

Usage: SinonJS
inputs.
to initialize.
Fakes When you can't remember whether to use a
spy or a stub.
Mocks If you like to set up your assertions at the
beginning when you define your mocked
behavior.

SinonJS: Timers
setTimeout
clearTimeout
setImmediate
clearImmediate
process.hrtime
performance.now
Date

SinonJS: Timers
actions: {
goHome() {
}
}

SinonJS: Timers
actions: {
goHome() {
}
}
// ooohhh suspense
setTimeout(() => {
}, 5000);

SinonJS: Timers
actions: {
goHome() {
// ooohhh suspense
setTimeout(() => {
}, 5000);
}
}
  await visit('/oz');
});
// ¯_(ツ)_/¯

SinonJS: Timers
actions: {
goHome() {
// ooohhh suspense
setTimeout(() => {
}, 5000);
}
}
const clock = sinon.useFakeTimers();
});

SinonJS: Timers
actions: {
goHome() {
// ooohhh suspense
setTimeout(() => {
}, 5000);
}
}
});
await visit('/oz');

SinonJS: Timers
actions: {
goHome() {
// ooohhh suspense
setTimeout(() => {
}, 5000);
}
}
});
await visit('/oz');
clock.runAll();
await settled();

ember-sinon-chai
Usage: SinonJS
ember-sinon
ember-sinon-qunit

ember-cli-chai
Usage: SinonJS
ember-sinon
ember-sinon-qunit

ember-cli-chai
Usage: SinonJS
ember-sinon
ember-sinon-qunit
ember-sinon-sandbox

ember-cli-chai
Usage: SinonJS
ember-sinon
ember-sinon-qunit
ember-sinon-sinoff

TestDouble.js
• Combines all into single test double function

TestDouble.js
• Allows for dynamic object stubbing

TestDouble.js
• Simple replace functions

TestDouble.js
• Always replaces functions rather than wrapping

TestDouble.js
• Nice introspection

TestDouble.js
• Nice introspection
• ember-cli-testdouble (-chai, -qunit)

Jest
• Full set of assertions using a chai-like syntax

Jest
• Allows automatic mocking

Jest
• Allows manual mocks

Jest
• Snapshot tests

Jest
• Snapshot tests
• Can include test coverage

Jest
• Snapshot tests
• Can include test coverage
• Does not run in browser

Mocking makes
refactoring harder

Mocking makes
refactoring harder
Mocking is a Code Smell

Mocking makes
refactoring harder
Mocking violates DRY

Mocking makes refactoring harder
"the process of changing a software system in such a
way that it does not alter the external behavior of the
code yet improves its internal structure"
Martin Fowler

"A code smell is a surface indication that usually
corresponds to a deeper problem in the system."
Martin Fowler

Mocking violates DRY
"Every piece of knowledge must have a single,
unambiguous, authoritative representation within a
system."
The Pragmatic Programmer

Don't mock what you don't own
API
Data
Files
HTTP

API
Data
Files
HTTPService

API
Data
Files
HTTPService
Codebase

API
Data
Files
HTTPService
Codebase
Tests

API
Data
Files
HTTPService
Codebase
Tests
Service Mock

wishCallback();
}
}
}

export default class HeelClick extends Service {
ajax: service(),
async getClickCount() {
}
}
return this.ajax.request('https://www.random.org/integers/?

ajax: service(),
}
}
wishCallback();
}
}
}

ajax: service(),
}
}
wishCallback();
}
}
}
let clicked = await this.heelClick.getClickedCount();
heelClick: service(),

});
const stub = sinon.stub(magicService.ajax, 'request').returns(3);
await click(shoes);
assert.ok(stub.calledOnce);

});
const heelClick = this.owner.lookup('service:heelClick');
const stub = sinon.stub(heelClick, 'getClickedCount').returns(3);
await click(shoes);
assert.ok(stub.calledOnce);

Don't strive for 100% coverage
"I expect a high level of coverage. Sometimes managers
require one. There's a subtle difference."
Brian Marick

Test behavior, not implementation
"Implementation details are things which users of your
code will not typically use, see, or event know about."
Kent C. Dodds

Lisa Backer, DockYard
@eshtadc
Thank you!

Mocks, Spies, and Timers - Oh My!

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Mocks, Spies, and Timers - Oh My!

Similar to Mocks, Spies, and Timers - Oh My! (20)

Recently uploaded

Recently uploaded (20)

Mocks, Spies, and Timers - Oh My!