Skip to content

Commit 6e2c3d5

Browse files
timdeschryvertimdeschryver
committed
test: add tests
1 parent ad2430c commit 6e2c3d5

File tree

7 files changed

+146
-51
lines changed

7 files changed

+146
-51
lines changed

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
"start": "ng serve",
77
"build": "ng build --prod ngx-testing-library",
88
"postbuild": "cp ./README.md ./dist/ngx-testing-library",
9-
"pretest": "npm run build",
109
"test": "npm run test:lib && npm run build && npm run test:app",
1110
"test:lib": "jest --config ./jest.lib.config.js",
1211
"test:app": "jest --config ./jest.app.config.js",

‎projects/ngx-testing-library/tests/__snapshots__/getComponentInstance.spec.ts.snap

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`template syntax throws an error when no selector is passed 1`] = `"When using the template syntax, you must provide a selector"`;

‎projects/ngx-testing-library/tests/counter/counter.spec.ts

+17-43
Original file line numberDiff line numberDiff line change
@@ -19,43 +19,23 @@ export class CounterComponent {
1919
}
2020
}
2121

22-
test('Counter actions', async () => {
22+
test('Counter actions via template syntax', async () => {
2323
const { detectChanges, getByText, getByTestId } = await createComponent('<counter [counter]="10"></counter>', {
2424
declarations: [CounterComponent],
2525
});
2626

27-
getByText('+').click();
28-
getByText('+').click();
29-
getByText('+').click();
30-
detectChanges();
31-
expect(getByText('Current Count: 13')).toBeTruthy();
32-
expect(getByTestId('count').textContent).toBe('Current Count: 13');
33-
34-
getByText('-').click();
35-
detectChanges();
36-
expect(getByText('Current Count: 12')).toBeTruthy();
37-
expect(getByTestId('count').textContent).toBe('Current Count: 12');
38-
});
39-
40-
test('Counter actions - fireEvent', async () => {
41-
const { detectChanges, getByText, getByTestId } = await createComponent('<counter [counter]="10"></counter>', {
42-
declarations: [CounterComponent],
43-
});
44-
45-
fireEvent.click(getByText('+'));
46-
fireEvent.click(getByText('+'));
4727
fireEvent.click(getByText('+'));
4828
detectChanges();
49-
expect(getByText('Current Count: 13')).toBeTruthy();
50-
expect(getByTestId('count').textContent).toBe('Current Count: 13');
29+
expect(getByText('Current Count: 11')).toBeTruthy();
30+
expect(getByTestId('count').textContent).toBe('Current Count: 11');
5131

52-
fireEvent.click(getByText('-'));
32+
getByText('-').click();
5333
detectChanges();
54-
expect(getByText('Current Count: 12')).toBeTruthy();
55-
expect(getByTestId('count').textContent).toBe('Current Count: 12');
34+
expect(getByText('Current Count: 10')).toBeTruthy();
35+
expect(getByTestId('count').textContent).toBe('Current Count: 10');
5636
});
5737

58-
test('Counter actions via component', async () => {
38+
test('Counter actions via component syntax', async () => {
5939
const { getComponentInstance } = await createComponent(
6040
{
6141
component: CounterComponent,
@@ -70,15 +50,13 @@ test('Counter actions via component', async () => {
7050

7151
const counter = getComponentInstance();
7252
counter.increment();
73-
counter.increment();
74-
counter.increment();
75-
expect(counter.counter).toBe(13);
53+
expect(counter.counter).toBe(11);
7654

7755
counter.decrement();
78-
expect(counter.counter).toBe(12);
56+
expect(counter.counter).toBe(10);
7957
});
8058

81-
test('Counter actions via component without parameters', async () => {
59+
test('Counter actions via component syntax without parameters', async () => {
8260
const { getComponentInstance } = await createComponent(
8361
{
8462
component: CounterComponent,
@@ -90,15 +68,13 @@ test('Counter actions via component without parameters', async () => {
9068

9169
const counter = getComponentInstance();
9270
counter.increment();
93-
counter.increment();
94-
counter.increment();
95-
expect(counter.counter).toBe(3);
71+
expect(counter.counter).toBe(1);
9672

9773
counter.decrement();
98-
expect(counter.counter).toBe(2);
74+
expect(counter.counter).toBe(0);
9975
});
10076

101-
test('Counter via component - test template', async () => {
77+
test('Counter actions via component syntax and dom-testing-library functions', async () => {
10278
const { getByText, detectChanges, getByTestId } = await createComponent(
10379
{
10480
component: CounterComponent,
@@ -111,15 +87,13 @@ test('Counter via component - test template', async () => {
11187
},
11288
);
11389

114-
getByText('+').click();
115-
getByText('+').click();
11690
getByText('+').click();
11791
detectChanges();
118-
expect(getByText('Current Count: 13')).toBeTruthy();
119-
expect(getByTestId('count').textContent).toBe('Current Count: 13');
92+
expect(getByText('Current Count: 11')).toBeTruthy();
93+
expect(getByTestId('count').textContent).toBe('Current Count: 11');
12094

12195
getByText('-').click();
12296
detectChanges();
123-
expect(getByText('Current Count: 12')).toBeTruthy();
124-
expect(getByTestId('count').textContent).toBe('Current Count: 12');
97+
expect(getByText('Current Count: 10')).toBeTruthy();
98+
expect(getByTestId('count').textContent).toBe('Current Count: 10');
12599
});

‎projects/ngx-testing-library/tests/debug.spec.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Component, Input } from '@angular/core';
2+
import { createComponent, fireEvent } from '../src/public_api';
3+
4+
@Component({
5+
selector: 'fixture',
6+
template: `<p>rawr</p>`,
7+
})
8+
class FixtureComponent {}
9+
10+
test('debug', async () => {
11+
jest.spyOn(console, 'log').mockImplementation(() => {});
12+
const { debug } = await createComponent('<fixture></fixture>', {
13+
declarations: [FixtureComponent],
14+
});
15+
debug();
16+
expect(console.log).toBeCalledWith(expect.stringContaining('rawr'));
17+
(<any>console.log).mockRestore();
18+
});

‎projects/ngx-testing-library/tests/detectChanges.spec.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Component, Input } from '@angular/core';
2+
import { createComponent, fireEvent } from '../src/public_api';
3+
4+
@Component({
5+
selector: 'fixture',
6+
template: `<p>rawr</p> `,
7+
})
8+
class FixtureComponent {}
9+
10+
test('calls detect changes on the fixture', async () => {
11+
const { fixture, detectChanges } = await createComponent('<fixture></fixture>', {
12+
declarations: [FixtureComponent],
13+
});
14+
fixture.detectChanges = jest.fn();
15+
16+
detectChanges();
17+
expect(fixture.detectChanges).toBeCalledWith(undefined);
18+
19+
detectChanges(true);
20+
expect(fixture.detectChanges).toBeCalledWith(true);
21+
});

‎projects/ngx-testing-library/tests/form/form.spec.ts

+48-7
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,71 @@
11
import { ReactiveFormsModule } from '@angular/forms';
2-
import { LoginFormComponent } from './form.component';
32
import { createComponent, fireEvent } from '../../src/public_api';
3+
import { LoginFormComponent } from './form.component';
44

5-
test('login form submits', async () => {
5+
test('login form submits using the template syntax', async () => {
66
const fakeUser = { username: 'jackiechan', password: 'hiya! 🥋' };
7-
const { getComponentInstance, getByLabelText, getByText } = await createComponent(`<login-form></login-form>`, {
8-
declarations: [LoginFormComponent],
9-
imports: [ReactiveFormsModule],
10-
});
7+
const { getComponentInstance, getByLabelText, getByText, container } = await createComponent(
8+
`<login-form></login-form>`,
9+
{
10+
declarations: [LoginFormComponent],
11+
imports: [ReactiveFormsModule],
12+
},
13+
);
1114

1215
const loginForm = getComponentInstance<LoginFormComponent>('login-form');
1316
loginForm.handleLogin.emit = jest.fn();
1417

1518
const usernameNode = getByLabelText(/username/i) as HTMLInputElement;
1619
const passwordNode = getByLabelText(/password/i) as HTMLInputElement;
1720
const submitButtonNode = getByText(/submit/i);
21+
const formNode = container.querySelector('form');
1822

1923
usernameNode.value = fakeUser.username;
2024
fireEvent.input(usernameNode);
2125

2226
passwordNode.value = fakeUser.password;
2327
fireEvent.input(passwordNode);
2428

25-
loginForm.handleSubmit();
29+
fireEvent.submit(formNode);
2630

2731
expect(loginForm.handleLogin.emit).toHaveBeenCalledTimes(1);
2832
expect(loginForm.handleLogin.emit).toHaveBeenCalledWith(fakeUser);
2933
expect(submitButtonNode.type).toBe('submit');
3034
});
35+
36+
test('login form submits using the component syntax', async () => {
37+
const fakeUser = { username: 'jackiechan', password: 'hiya! 🥋' };
38+
const handleLogin = {
39+
emit: jest.fn(),
40+
};
41+
42+
const { container, getByLabelText, getByText } = await createComponent(
43+
{
44+
component: LoginFormComponent,
45+
parameters: {
46+
handleLogin: handleLogin as any,
47+
},
48+
},
49+
{
50+
declarations: [LoginFormComponent],
51+
imports: [ReactiveFormsModule],
52+
},
53+
);
54+
55+
const usernameNode = getByLabelText(/username/i) as HTMLInputElement;
56+
const passwordNode = getByLabelText(/password/i) as HTMLInputElement;
57+
const submitButtonNode = getByText(/submit/i);
58+
const formNode = container.querySelector('form');
59+
60+
usernameNode.value = fakeUser.username;
61+
fireEvent.input(usernameNode);
62+
63+
passwordNode.value = fakeUser.password;
64+
fireEvent.input(passwordNode);
65+
66+
fireEvent.submit(formNode);
67+
68+
expect(handleLogin.emit).toHaveBeenCalledTimes(1);
69+
expect(handleLogin.emit).toHaveBeenCalledWith(fakeUser);
70+
expect(submitButtonNode.type).toBe('submit');
71+
});

‎projects/ngx-testing-library/tests/getComponentInstance.spec.ts

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Component, Input } from '@angular/core';
2+
import { createComponent, fireEvent } from '../src/public_api';
3+
4+
@Component({
5+
selector: 'fixture',
6+
template: `<p>rawr</p> `,
7+
})
8+
class FixtureComponent {}
9+
10+
describe('template syntax', () => {
11+
test('gets the component instance with a selector', async () => {
12+
const { getComponentInstance } = await createComponent('<fixture></fixture>', {
13+
declarations: [FixtureComponent],
14+
});
15+
16+
expect(getComponentInstance<FixtureComponent>('fixture')).toBeDefined();
17+
});
18+
19+
test('throws an error when no selector is passed', async () => {
20+
const { getComponentInstance } = await createComponent('<fixture></fixture>', {
21+
declarations: [FixtureComponent],
22+
});
23+
24+
expect(() => getComponentInstance()).toThrowErrorMatchingSnapshot();
25+
});
26+
});
27+
28+
describe('component type syntax', () => {
29+
test('gets the component instance', async () => {
30+
const { getComponentInstance } = await createComponent(
31+
{ component: FixtureComponent },
32+
{
33+
declarations: [FixtureComponent],
34+
},
35+
);
36+
37+
expect(getComponentInstance()).toBeDefined();
38+
});
39+
});

0 commit comments

Comments
 (0)