to-mock-or-not-to-mock.pdf

View Slide

1. Tradeoffs Everywhere

View Slide

Inside-Out, no mocks: Chicago School TDD
Outside-in, embrace mocks: London School TDD
Outside-in, no mocks: Munich School TDD
@dtanzer
3

View Slide

To Mock or Not to Mock
@dtanzer
4

View Slide

View Slide

2. Powerful, Dangerous Tool

View Slide

{ foo; bar=baz }
it('returns option for correctly parsed option', () => {

const option = 'foo = bar'

const result = optionParser.parse(option, 0, option.length)

expect(result).toHaveProperty('startIndex', 0)

expect(result).toHaveProperty('length', option.length)

expect(result?.content).toHaveProperty('key', 'foo')

expect(result?.content).toHaveProperty('value', 'bar')

expect(result?.content).toHaveProperty('asText', 'foo = bar')

})
@dtanzer
9

View Slide

Andrea Angealla: Universal Architecture (Coined by J.B. Rainsberger)
@dtanzer
10

View Slide

@dtanzer
11

View Slide

@dtanzer
12

View Slide

@dtanzer
13

View Slide

@dtanzer
14

View Slide

@dtanzer
15

View Slide

@dtanzer
16

View Slide

{ foo; bar=baz }
it('returns option for correctly parsed option', () => {

const option = 'foo = bar'

const result = optionParser.parse(option, 0, option.length)

expect(result).toHaveProperty('startIndex', 0)

expect(result).toHaveProperty('length', option.length)

expect(result?.content).toHaveProperty('key', 'foo')

expect(result?.content).toHaveProperty('value', 'bar')

expect(result?.content).toHaveProperty('asText', 'foo = bar')

})
@dtanzer
17

View Slide

Easy-Peasy!
Easy-Peasy!
Easy-Peasy!
Easy-Peasy!
Easy-Peasy!
if(value) {

return {
startIndex: start,

length: i,

content: new UpdatableOption(

text.substring(start, start+i),

ident.foundText,

value.foundText.trim(),

start, i,

this,

),

}

}
@dtanzer
18

View Slide

@dtanzer
19

View Slide

{ foo; bar=baz }
it('parses key-value option at start of the options block', () => {

const options = '{ foo = bar}'

const result = parse(options)

expect(result?.content.asMap).toHaveProperty('foo', 'bar')

expect(result?.length).toEqual(options.length)

})
@dtanzer
20

View Slide

But!
But!
But!
But!
But!
let nextParser = this.

let nextOption: ParserResult | null

do {

nextOption = start+i, length-i)

if(nextOption) {

// ...

}

} while(nextOption != null)
defaultOptionParser
nextParser.parse(text,
@dtanzer
21

View Slide

3. No Mocks: Error Boundary

View Slide

Test Doubles
Test Doubles
Test Doubles
Test Doubles
Test Doubles
Dummy: Just a value
Stub: Returns canned answers
Fake: Simpler implementation
Mock: Has interaction-verification baked in
Spy: Can be asked questions about interactions later
Martin Fowler: Mocks aren't Stubs
@dtanzer
23

View Slide

Dummy: Just Make it Run!
@dtanzer
24

View Slide

it('shows a tab with a given name when named tab is registered',()=> {

const { tabs, tabsModel, } = createApplicationTabs()

act(() => {tabsModel.registerTab({id: 'dummy', name: 'tab name'})})

tabs.update()

expect(tabs).to.have.descendants(Tab)

expect(tabs.find(Tab).at(0)).to.have.text('tab name')

})
@dtanzer
25

View Slide

const locations: [string, any][] = [

[ 'left', RightArrow, ],

//...

]

locations.forEach(td => {

it(`creates a ${td[1]} when direction is ${td[0]}`, () => {

const arrowRenderer = mount(

)

expect(arrowRenderer.find(td[1])).to.have.length(1)

})

})
text
@dtanzer
26

View Slide

const locations: [string, any][] = [

[ 'left', RightArrow, ],

//...

]

locations.forEach(td => {

it(`creates a ${td[1]} when direction is ${td[0]}`, () => {

const arrowRenderer = mount(

)

expect(arrowRenderer.find(td[1])).to.have.length(1)

})

})
dummy
@dtanzer
27

View Slide

4. Make Test-Doubles Visible

View Slide

const createPresentationWindow = (

overrideProperties: Partial = {}

) => {

const defaultProperties: Required={

_getVersion: () => 'dummy',

//...

}

const properties = { ...defaultProperties, ...overrideProperties, }

const result = mount(
{...properties}

/>)

result.update()

return result

}
@dtanzer
29

View Slide

Stub: Answer-in-a-Can
it('displays the version number', () => {

const presentationWindow = createPresentationWindow({

_getVersion: () => '1.2.3',

})

expect(/*...*/).toHaveTextContent('1.2.3')

})
@dtanzer
30

View Slide

@dtanzer
31

View Slide

Fake: Something, but not Real
@dtanzer
32

View Slide



) => {


_setTimeout: (cb: ()=>unknown) => { cb() },

//...

}

const properties = { ...defaultProperties, ...overrideProperties, }

const result = mount(
{...properties}

/>)

result.update()

return result

}
@dtanzer
33

View Slide

@dtanzer
34

View Slide

Setting Presentation Data
@dtanzer
35

View Slide

const onSetPresentationData = (callback: OnSetPresentationDataCB) => {

const document = parseMarkdown('# first\n# second\n# third\n')

callback(document, 'design', 1, 'basePath',

new Annotations().serialize())

}


) => {


_onSetPresentationData: onSetPresentationData,

//...

}

//...

}
@dtanzer
36

View Slide

5. Fake DMZ / Outside World

View Slide

Spy: I Know what You Did to Me!
@dtanzer
38

View Slide

Mock: Use Correctly or Blow Up
@dtanzer
39

View Slide

it('sends start-video event when start button was clicked', () => {

const startVideoMock = mockvoid>('startVideoMock')

const { controls } = startConfiguration({

_startVideo: instance(startVideoMock),

})

act(() => {

controls.find('.start-mirroring').at(0).simulate('click')

})

controls.update()

})
when(startVideoMock(anyString())).return().once()
verify(startVideoMock)
@dtanzer
40

View Slide

Result-Based
Result-Based
Result-Based
Result-Based
Result-Based
Observe result or state
Verify result matches the expected result
Use dummies, stubs or fakes if you need
them
expect
"Frontdoor testing"
Interaction-Based
Interaction-Based
Interaction-Based
Interaction-Based
Interaction-Based
Nothing to observe
Verify expected interaction has happened
Use mocks and/or spies; and dummies,
stubs or fakes if you need them
when / verify
Backdoor testing
@dtanzer
41

View Slide

6. Result -or- Interaction

View Slide

@dtanzer
43

View Slide

@dtanzer
44

View Slide

Special Case: Jest Mock ES-Module
"^(.*)/MonacoEditor$": "/__mocks__/reactMonacoMock.js",
module.exports = {

languages: {

register: function(language) {},

setMonarchTokensProvider: function(name, tokens) {},

registerCompletionItemProvider: function(name, provider) {}

},

editor: {

defineTheme: function(name, theme) {}

}

};
@dtanzer
45

View Slide

Mock / Fake Close to DMZ
it('loads 2 designs when 2 designs are found', () => {

const findSlideDesignsMock =

mockvoid>('findDesignsMock')

when(findSlideDesignsMock(anyString(), anyArray()))

.callFake((p, d) => {

d.push({ /* ... */ })

d.push({ /* ... */ })

})

const designs = loadAllDesigns(undefined, instance(findSlideDesignsMock))

expect(loadedDesigns).to.have.length(2)

expect(loadedDesigns[0]).to.contain({ id: 'design/1', })

expect(loadedDesigns[1]).to.contain({ id: 'design/2', })

})
@dtanzer
46

View Slide

it('clones the design when everything is OK', () => {

const cloneDesignFolderMock =

mock
id: string, basePath: string | undefined,

pathToClone: string

) => string | void>('cloneDesignMock')

when(cloneDesignFolderMock(

'foo/bar', '/base/path', 'path/to/clone'

)).return().once()

cloneDesign('foo/bar', '/base/path', 'path/to/clone',

() => [], instance(cloneDesignFolderMock))

verify(cloneDesignFolderMock)

})
@dtanzer
47

View Slide

7. Don't Mock what You don't Own

View Slide

@dtanzer
49

View Slide

it('finds existing designs', () => {

const designs: SlideDesign[] = []

findSlideDesigns(path.join(__dirname, 'designs'), designs)

expect(designs).to.have.length(2)

})
|- findSlideDesigns.spec.ts

|- designs

| \- marmota

| |- d1

| | |- design.json

| | |- design.css

| | \- preview.md

| |- d2

...
@dtanzer
50

View Slide

8. Integration-Test at Boundary

View Slide

Boundary AND Hard to Test
Electron IPC
Electron IPC
Electron IPC
Electron IPC
Electron IPC
sendSync(channel: C_MAIN, ...args: any[]) {

return ipcRenderer.sendSync(channel, ...args)

}
sendSync(window: BrowserWindow, channel: C_RENDERER, ...args: any[]) {

window.webContents.send(channel, ...args)

}
@dtanzer
52

View Slide

export type ChannelToMain = {

'--annotation--delete-annotation':

(fromWindow: AnnotationWindowName, annotationId: string)

=> unknown,

}
sendSync(

channel: C, ...args: InferArguments

): InferReturnType {

if(typeof channel !== 'string') throw new Error('...')

return ipcRenderer.sendSync(channel, ...args)

}
@dtanzer
53

View Slide

export interface AnnotationsApi {

deleteAnnotation: ChannelToMain['--annotation--delete-annotation']

}
export const annotations: AnnotationsApi = {

deleteAnnotation:

(fromWindow: AnnotationWindowName, annotationId: string) =>

rendererIpc.sendSync(

'--annotation--delete-annotation',

fromWindow, annotationId

)

}
@dtanzer
54

View Slide

on(callbacks: { [key in keyof C_MAIN]: C_MAIN[key]}) {

Object.keys(callbacks).forEach((channel) => {

if(typeof channel !== 'string') throw new Error('...')

ipcMain.on(channel, (ipcEvent, ...args) => {

ipcEvent.returnValue=callbacks[channel](...args, ipcEvent)

})

})

}
'--annotation--delete-annotation':

(fromWindow: AnnotationWindowName, annotationId: string) => {

// ...

},
@dtanzer
55

View Slide

9. Leverage the Type System

View Slide

To Recap...
@dtanzer
57

View Slide

6. Result- -or- Interaction-based
@dtanzer
58

View Slide

Heuristics: Mocks
Heuristics: Mocks
Heuristics: Mocks
Heuristics: Mocks
Heuristics: Mocks
Do not mock what you don't own
Avoid mocks to make untestable code testable
Avoid mocks that return mocks
Avoid expect and verify in the same test
Don't mix result-based and interaction-based testing
@dtanzer
59

View Slide

About David
About David
About David
About David
About David
Trainer, Coach, Developer
https://davidtanzer.net
@dtanzer

View Slide

Press [ESC] to exit presentation...
Presented with
Presented with
Presented with
Presented with
Presented with
marmota.app
@dtanzer
61

View Slide

to-mock-or-not-to-mock.pdf

to-mock-or-not-to-mock.pdf

David Tanzer

More Decks by David Tanzer

Other Decks in Technology

Featured

Transcript