Jest builder for Angular
START
https://github.com/meltedspark/angular-builders
Slide 14
Slide 14 text
Jest builder for Angular
START
@angular-builders/jest
jest.config.js
tsconfig.spec.json
ts-jest
jest-preset-angular
reads
Slide 15
Slide 15 text
Jest builder for Angular
START
angular.json
"test": {
+ "builder": "@angular-builders/jest:run",
- "builder": "@angular-devkit/build-angular:karma",
"options": {
"configPath": "src/jest.config.js"
}
}
Slide 16
Slide 16 text
JEST CLI
Slide 17
Slide 17 text
Improving Development Experience
CLI
Slide 18
Slide 18 text
Watch mode
CLI
jest --wach
Slide 19
Slide 19 text
BYE BYE
fit
xdescribe
xit
fdescribe
Slide 20
Slide 20 text
Haste Map
CLI
Failed > Duration > Size
Tests
Slide 21
Slide 21 text
RIGHT
EXPECTATIONS
Slide 22
Slide 22 text
any(constructor)
RIGHT EXPECTATIONS
expect.any(constructor);
Assert a certain type of the given property.
Slide 23
Slide 23 text
anything()
RIGHT EXPECTATIONS
expect.anything();
Assert that anything is defined.
Slide 24
Slide 24 text
arrayContaining([])
RIGHT EXPECTATIONS
Check subset of
the given collection.
[
// …
{ ??? },
{ ??? }
//…
]
Slide 25
Slide 25 text
objectContaining({})
RIGHT EXPECTATIONS
Check subset of
the given object.
{
// …
a: ???,
b: ???
//…
}
Slide 26
Slide 26 text
REPITITION
DONE RIGHT
Slide 27
Slide 27 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 28
Slide 28 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 29
Slide 29 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 30
Slide 30 text
it.each using a tagged template
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 31
Slide 31 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 32
Slide 32 text
SNAPSHOT
TESTING
Slide 33
Slide 33 text
Process
SNAPSHOT TESTING
Generation Maintenance
Create Check Update
Slide 34
Slide 34 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 35
Slide 35 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 36
Slide 36 text
Test in
isolation
Slide 37
Slide 37 text
jest.fn
TEST IN ISOLATION
const mock = jest.fn();
Slide 38
Slide 38 text
https://jestjs.io/
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
@co-it/schematics
Slide 41
Slide 41 text
@co-it/schematics:jest
AUTOMATE EVERYTHING
ng generate @co-it/schematics:jest --hook
Slide 42
Slide 42 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 43
Slide 43 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 44
Slide 44 text
medium.com/@gregor.woiwode @GregOnNet co-IT.eu GmbH Inspire to change
Thank you for
listening.
http://speakerdeck.com/gregonnet/jest-wdc-19
Slide 45
Slide 45 text
Images & Icons
CREDITS
- , , made by Freepik from flaticon.com
- Photos by
- Jakob Owens
- Andreas Wagner
- Shiro hatori
- Josue Valencia
- Jonathan Chng
- Ivars Krutainis
- on Unsplash