Background
START
- maintains Jest
- Jasmine is used under the hood
- Git is used to improve test runs
- Open Source
Slide 6
Slide 6 text
JSDOM
START
Slide 7
Slide 7 text
PARALLEL
TEST
EXECUTION
Slide 8
Slide 8 text
Configuration
START
OR
PAC KAGE
.JSON
JE ST.C ON F IG
.JS
Slide 9
Slide 9 text
Preset for Angular
START
https://github.com/thymikee/jest-preset-angular
Slide 10
Slide 10 text
Preset for Angular
START
jest.config.js Jest Preset for Angular TS Jest
J E S T . C O N F I G
. J S
Slide 11
Slide 11 text
JEST CLI
Slide 12
Slide 12 text
Improving Development Experience
CLI
Slide 13
Slide 13 text
Haste Map
CLI
Failed > Duration > Size
Tests
Slide 14
Slide 14 text
Watch mode
CLI
jest --wach
Slide 15
Slide 15 text
RIGHT
EXPECTATIONS
Slide 16
Slide 16 text
any(constructor)
RIGHT EXPECTATIONS
expect.any(constructor);
Assert a certain type of the given property.
Slide 17
Slide 17 text
anything()
RIGHT EXPECTATIONS
expect.anything();
Assert that anything is defined.
Slide 18
Slide 18 text
arrayContaining([])
RIGHT EXPECTATIONS
Check subset of
the given collection.
[
// …
{ ??? },
{ ??? }
//…
]
Slide 19
Slide 19 text
objectContaining({})
RIGHT EXPECTATIONS
Check subset of
the given object.
{
// …
a: ???,
b: ???
//…
}
Slide 20
Slide 20 text
REPITITION
DONE RIGHT
Slide 21
Slide 21 text
it.each
REPITITION DONE RIGHT
it.each([['.huskyrc.json'], ['.huskyrc.js']])(
' should warn if detected in %s',
(file: string) => {
project.create(file, JSON.stringify({}));
runner.runSchematic('prettier', {}, project);
expect(warn).toHaveBeenCalledWith(
`Found competing husky configuration in ${file}.`
);
});
Slide 22
Slide 22 text
it.each
REPITITION DONE RIGHT
it.each([['.huskyrc.json'], ['.huskyrc.js']])(
' should warn if detected in %s',
(file: string) => {
project.create(file, JSON.stringify({}));
runner.runSchematic('prettier', {}, project);
expect(warn).toHaveBeenCalledWith(
`Found competing husky configuration in ${file}.`
);
});
Slide 23
Slide 23 text
it.each
REPITITION DONE RIGHT
it.each([['.huskyrc.json'], ['.huskyrc.js']])(
' should warn if detected in %s',
(file: string) => {
project.create(file, JSON.stringify({}));
runner.runSchematic('prettier', {}, project);
expect(warn).toHaveBeenCalledWith(
`Found competing husky configuration in ${file}.`
);
});
Slide 24
Slide 24 text
it.each``
REPITITION DONE RIGHT
it.each`
compilerOption | expected
${'strict‘} | ${true}
${'noUnusedParameters'} | ${true}
${'noUnusedLocals‘} | ${true}
${'noImplicitAny‘} | ${true}
`
(
'should set $compilerOption to default value of schema ($expected)‘,
({ compilerOption, expected }) => {
// ...
expect(tsconfig.compilerOptions[option]).toBe(expected);
}
);
Slide 25
Slide 25 text
it.each``
it.each`
compilerOption | expected
${'strict‘} | ${true}
${'noUnusedParameters'} | ${true}
${'noUnusedLocals‘} | ${true}
${'noImplicitAny‘} | ${true}
`
(
'should set $compilerOption to default value of schema ($expected)‘,
({ compilerOption, expected }) => {
// ...
expect(tsconfig.compilerOptions[option]).toBe(expected);
}
);
REPITITION DONE RIGHT
Slide 26
Slide 26 text
SNAPSHOT
TESTING
Slide 27
Slide 27 text
Process
SNAPSHOT TESTING
Generation Maintenance
Create Check Update
Slide 28
Slide 28 text
Anathomy
SNAPSHOT TESTING
exports[` When the application starts displays
the welcome message 1`] = `
Welcome to the playground, you will find all testing
samples in *.spec.ts files.
`;
__snapshots__/*.spec.ts.snap
Slide 29
Slide 29 text
Anathomy
SNAPSHOT TESTING
exports[` When the application starts displays
the welcome message 1`] = `
Welcome to the playground, you will find all testing
samples in *.spec.ts files.
`;
__snapshots__/*.spec.ts.snap
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
@co-it/schematics
Slide 32
Slide 32 text
@co-it/schematics:jest
AUTOMATE EVERYTHING
ng generate @co-it/schematics:jest --hook
Slide 33
Slide 33 text
… really everything
AUTOMATE EVERYTHING
ng generate @co-it/schematics:jest
ng generate @co-it/schematics:commitlint
ng generate @co-it/schematics:cypress
ng generate @co-it/schematics:tsconfig
ng generate @co-it/schematics:prettier
Slide 34
Slide 34 text
Summary
JEST
it.each simplify generation of test cases
jest.fn is used for mocking depencencies
expect.??? contains usefule additions
@co-IT/schematics configure Jest automatically
Slide 35
Slide 35 text
co-IT.eu GmbH
Inspire To Change
@GregOnNet
Thank you for listening @co-it/schematics
https://github.com/GregOnNet/jest-playground
Slide 36
Slide 36 text
Images & Icons
CREDITS
- , , made by Freepik from flaticon.com
- Photos by
- Jakob Owens
- Andreas Wagner
- Shiro hatori
- Josue Valencia
- Jonathan Chng
- on Unsplash