Skip to content

Commit 0bc43d1

Browse files
timdeschryvertimdeschryver
authored
refactor: use screen to query elements
2 parents 2644c53 + f18574a commit 0bc43d1

13 files changed

+162
-164
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"@angular/platform-browser": "^9.0.3",
3434
"@angular/platform-browser-dynamic": "^9.0.3",
3535
"@angular/router": "^9.0.3",
36-
"@ngrx/store": "^8.0.0-rc.0",
36+
"@ngrx/store": "^9.0.0-rc.0",
3737
"@phenomnomnominal/tsquery": "^3.0.0",
3838
"@testing-library/dom": "^6.12.2",
3939
"@testing-library/user-event": "^8.1.0",

‎src/app/examples/00-single-component.spec.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
import { render } from '@testing-library/angular';
1+
import { render, screen } from '@testing-library/angular';
22

33
import { SingleComponent } from './00-single-component';
44

55
test('renders the current value and can increment and decrement', async () => {
6-
const component = await render(SingleComponent);
6+
const { click } = await render(SingleComponent);
77

8-
const incrementControl = component.getByText('Increment');
9-
const decrementControl = component.getByText('Decrement');
10-
const valueControl = component.getByTestId('value');
8+
const incrementControl = screen.getByText('Increment');
9+
const decrementControl = screen.getByText('Decrement');
10+
const valueControl = screen.getByTestId('value');
1111

1212
expect(valueControl.textContent).toBe('0');
1313

14-
component.click(incrementControl);
15-
component.click(incrementControl);
14+
click(incrementControl);
15+
click(incrementControl);
1616
expect(valueControl.textContent).toBe('2');
1717

18-
component.click(decrementControl);
18+
click(decrementControl);
1919
expect(valueControl.textContent).toBe('1');
2020
});

‎src/app/examples/01-nested-component.spec.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
import { render } from '@testing-library/angular';
1+
import { render, screen } from '@testing-library/angular';
22

33
import { NestedButtonComponent, NestedValueComponent, NestedContainerComponent } from './01-nested-component';
44

55
test('renders the current value and can increment and decrement', async () => {
6-
const component = await render(NestedContainerComponent, {
6+
const { click } = await render(NestedContainerComponent, {
77
declarations: [NestedButtonComponent, NestedValueComponent],
88
});
99

10-
const incrementControl = component.getByText('Increment');
11-
const decrementControl = component.getByText('Decrement');
12-
const valueControl = component.getByTestId('value');
10+
const incrementControl = screen.getByText('Increment');
11+
const decrementControl = screen.getByText('Decrement');
12+
const valueControl = screen.getByTestId('value');
1313

1414
expect(valueControl.textContent).toBe('0');
1515

16-
component.click(incrementControl);
17-
component.click(incrementControl);
16+
click(incrementControl);
17+
click(incrementControl);
1818
expect(valueControl.textContent).toBe('2');
1919

20-
component.click(decrementControl);
20+
click(decrementControl);
2121
expect(valueControl.textContent).toBe('1');
2222
});

‎src/app/examples/02-input-output.spec.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { render } from '@testing-library/angular';
1+
import { render, screen } from '@testing-library/angular';
22

33
import { InputOutputComponent } from './02-input-output';
44

55
test('is possible to set input and listen for output', async () => {
66
const sendValue = jest.fn();
77

8-
const component = await render(InputOutputComponent, {
8+
const { click } = await render(InputOutputComponent, {
99
componentProperties: {
1010
value: 47,
1111
sendValue: {
@@ -14,18 +14,18 @@ test('is possible to set input and listen for output', async () => {
1414
},
1515
});
1616

17-
const incrementControl = component.getByText('Increment');
18-
const valueControl = component.getByTestId('value');
19-
const sendControl = component.getByText('Send');
17+
const incrementControl = screen.getByText('Increment');
18+
const valueControl = screen.getByTestId('value');
19+
const sendControl = screen.getByText('Send');
2020

2121
expect(valueControl.textContent).toBe('47');
2222

23-
component.click(incrementControl);
24-
component.click(incrementControl);
25-
component.click(incrementControl);
23+
click(incrementControl);
24+
click(incrementControl);
25+
click(incrementControl);
2626
expect(valueControl.textContent).toBe('50');
2727

28-
component.click(sendControl);
28+
click(sendControl);
2929
expect(sendValue).toHaveBeenCalledTimes(1);
3030
expect(sendValue).toHaveBeenCalledWith(50);
3131
});

‎src/app/examples/03-forms.spec.ts‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
11
import { ReactiveFormsModule } from '@angular/forms';
2-
import { render } from '@testing-library/angular';
2+
import { render, screen } from '@testing-library/angular';
33

44
import { FormsComponent } from './03-forms';
55

66
test('is possible to fill in a form and verify error messages (with the help of jest-dom https://testing-library.com/docs/ecosystem-jest-dom)', async () => {
7-
const component = await render(FormsComponent, {
7+
const { type, blur, selectOptions } = await render(FormsComponent, {
88
imports: [ReactiveFormsModule],
99
});
1010

11-
const nameControl = component.getByLabelText('Name');
12-
const scoreControl = component.getByLabelText(/score/i);
13-
const colorControl = component.getByLabelText('color', { exact: false });
14-
const errors = component.getByRole('alert');
11+
const nameControl = screen.getByLabelText('Name');
12+
const scoreControl = screen.getByLabelText(/score/i);
13+
const colorControl = screen.getByLabelText('color', { exact: false });
14+
const errors = screen.getByRole('alert');
1515

16-
expect(errors).toContainElement(component.queryByText('name is required'));
17-
expect(errors).toContainElement(component.queryByText('score must be greater than 1'));
18-
expect(errors).toContainElement(component.queryByText('color is required'));
16+
expect(errors).toContainElement(screen.queryByText('name is required'));
17+
expect(errors).toContainElement(screen.queryByText('score must be greater than 1'));
18+
expect(errors).toContainElement(screen.queryByText('color is required'));
1919

2020
expect(nameControl).toBeInvalid();
21-
component.type(nameControl, 'Tim');
22-
component.type(scoreControl, '12');
23-
component.blur(scoreControl);
24-
component.selectOptions(colorControl, 'Green');
21+
type(nameControl, 'Tim');
22+
type(scoreControl, '12');
23+
blur(scoreControl);
24+
selectOptions(colorControl, 'Green');
2525

26-
expect(component.queryByText('name is required')).not.toBeInTheDocument();
27-
expect(component.queryByText('score must be lesser than 10')).toBeInTheDocument();
28-
expect(component.queryByText('color is required')).not.toBeInTheDocument();
26+
expect(screen.queryByText('name is required')).not.toBeInTheDocument();
27+
expect(screen.queryByText('score must be lesser than 10')).toBeInTheDocument();
28+
expect(screen.queryByText('color is required')).not.toBeInTheDocument();
2929

3030
expect(scoreControl).toBeInvalid();
31-
component.type(scoreControl, 7);
32-
component.blur(scoreControl);
31+
type(scoreControl, 7);
32+
blur(scoreControl);
3333
expect(scoreControl).toBeValid();
3434

3535
expect(errors).not.toBeInTheDocument();
@@ -38,7 +38,7 @@ test('is possible to fill in a form and verify error messages (with the help of
3838
expect(scoreControl).toHaveValue(7);
3939
expect(colorControl).toHaveValue('G');
4040

41-
const form = component.getByTestId('my-form');
41+
const form = screen.getByTestId('my-form');
4242
expect(form).toHaveFormValues({
4343
name: 'Tim',
4444
score: 7,

‎src/app/examples/04-forms-with-material.spec.ts‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,46 @@
11
import { ReactiveFormsModule } from '@angular/forms';
2-
import { render } from '@testing-library/angular';
2+
import { render, screen } from '@testing-library/angular';
33

44
import { MaterialModule } from '../material.module';
55
import { MaterialFormsComponent } from './04-forms-with-material';
66

77
test('is possible to fill in a form and verify error messages (with the help of jest-dom https://testing-library.com/docs/ecosystem-jest-dom)', async () => {
8-
const component = await render(MaterialFormsComponent, {
8+
const { type, selectOptions, fixture } = await render(MaterialFormsComponent, {
99
imports: [ReactiveFormsModule, MaterialModule],
1010
});
1111

12-
const nameControl = component.getByPlaceholderText('Name');
13-
const scoreControl = component.getByPlaceholderText(/score/i);
14-
const colorControl = component.getByPlaceholderText('color', { exact: false });
15-
const errors = component.getByRole('alert');
12+
const nameControl = screen.getByPlaceholderText('Name');
13+
const scoreControl = screen.getByPlaceholderText(/score/i);
14+
const colorControl = screen.getByPlaceholderText('color', { exact: false });
15+
const errors = screen.getByRole('alert');
1616

17-
expect(errors).toContainElement(component.queryByText('name is required'));
18-
expect(errors).toContainElement(component.queryByText('score must be greater than 1'));
19-
expect(errors).toContainElement(component.queryByText('color is required'));
17+
expect(errors).toContainElement(screen.queryByText('name is required'));
18+
expect(errors).toContainElement(screen.queryByText('score must be greater than 1'));
19+
expect(errors).toContainElement(screen.queryByText('color is required'));
2020

21-
component.type(nameControl, 'Tim');
22-
component.type(scoreControl, 12);
23-
component.selectOptions(colorControl, 'Green');
21+
type(nameControl, 'Tim');
22+
type(scoreControl, 12);
23+
selectOptions(colorControl, 'Green');
2424

25-
expect(component.queryByText('name is required')).not.toBeInTheDocument();
26-
expect(component.queryByText('score must be lesser than 10')).toBeInTheDocument();
27-
expect(component.queryByText('color is required')).not.toBeInTheDocument();
25+
expect(screen.queryByText('name is required')).not.toBeInTheDocument();
26+
expect(screen.queryByText('score must be lesser than 10')).toBeInTheDocument();
27+
expect(screen.queryByText('color is required')).not.toBeInTheDocument();
2828

2929
expect(scoreControl).toBeInvalid();
30-
component.type(scoreControl, 7);
30+
type(scoreControl, 7);
3131
expect(scoreControl).toBeValid();
3232

3333
expect(errors).not.toBeInTheDocument();
3434

3535
expect(nameControl).toHaveValue('Tim');
3636
expect(scoreControl).toHaveValue(7);
3737

38-
const form = component.getByTestId('my-form');
38+
const form = screen.getByTestId('my-form');
3939
expect(form).toHaveFormValues({
4040
name: 'Tim',
4141
score: 7,
4242
});
4343

4444
// not added to the form?
45-
expect((component.fixture.componentInstance as MaterialFormsComponent).form.get('color').value).toBe('G');
45+
expect((fixture.componentInstance as MaterialFormsComponent).form.get('color').value).toBe('G');
4646
});

‎src/app/examples/05-component-provider.spec.ts‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { TestBed } from '@angular/core/testing';
2-
import { render } from '@testing-library/angular';
2+
import { render, screen } from '@testing-library/angular';
33
import { provideMock, Mock, createMock } from '@testing-library/angular/jest-utils';
44

55
import { ComponentWithProviderComponent, CounterService } from './05-component-provider';
66

77
test('renders the current value and can increment and decrement', async () => {
8-
const component = await render(ComponentWithProviderComponent, {
8+
const { click } = await render(ComponentWithProviderComponent, {
99
componentProviders: [
1010
{
1111
provide: CounterService,
@@ -14,17 +14,17 @@ test('renders the current value and can increment and decrement', async () => {
1414
],
1515
});
1616

17-
const incrementControl = component.getByText('Increment');
18-
const decrementControl = component.getByText('Decrement');
19-
const valueControl = component.getByTestId('value');
17+
const incrementControl = screen.getByText('Increment');
18+
const decrementControl = screen.getByText('Decrement');
19+
const valueControl = screen.getByTestId('value');
2020

2121
expect(valueControl.textContent).toBe('0');
2222

23-
component.click(incrementControl);
24-
component.click(incrementControl);
23+
click(incrementControl);
24+
click(incrementControl);
2525
expect(valueControl.textContent).toBe('2');
2626

27-
component.click(decrementControl);
27+
click(decrementControl);
2828
expect(valueControl.textContent).toBe('1');
2929
});
3030

@@ -35,7 +35,7 @@ test('renders the current value and can increment and decrement with a mocked je
3535
counter.decrement.mockImplementation(() => (fakeCounterValue -= 10));
3636
counter.value.mockImplementation(() => fakeCounterValue);
3737

38-
const component = await render(ComponentWithProviderComponent, {
38+
const { click } = await render(ComponentWithProviderComponent, {
3939
componentProviders: [
4040
{
4141
provide: CounterService,
@@ -44,33 +44,33 @@ test('renders the current value and can increment and decrement with a mocked je
4444
],
4545
});
4646

47-
const incrementControl = component.getByText('Increment');
48-
const decrementControl = component.getByText('Decrement');
49-
const valueControl = component.getByTestId('value');
47+
const incrementControl = screen.getByText('Increment');
48+
const decrementControl = screen.getByText('Decrement');
49+
const valueControl = screen.getByTestId('value');
5050

5151
expect(valueControl.textContent).toBe('50');
5252

53-
component.click(incrementControl);
54-
component.click(incrementControl);
53+
click(incrementControl);
54+
click(incrementControl);
5555
expect(valueControl.textContent).toBe('70');
5656

57-
component.click(decrementControl);
57+
click(decrementControl);
5858
expect(valueControl.textContent).toBe('60');
5959
});
6060

6161
test('renders the current value and can increment and decrement with provideMocked from jest-utils', async () => {
62-
const component = await render(ComponentWithProviderComponent, {
62+
const { click } = await render(ComponentWithProviderComponent, {
6363
componentProviders: [provideMock(CounterService)],
6464
});
6565

66-
const incrementControl = component.getByText('Increment');
67-
const decrementControl = component.getByText('Decrement');
66+
const incrementControl = screen.getByText('Increment');
67+
const decrementControl = screen.getByText('Decrement');
6868

69-
component.click(incrementControl);
70-
component.click(incrementControl);
71-
component.click(decrementControl);
69+
click(incrementControl);
70+
click(incrementControl);
71+
click(decrementControl);
7272

73-
const counterService = TestBed.get<CounterService>(CounterService) as Mock<CounterService>;
73+
const counterService = TestBed.inject(CounterService) as Mock<CounterService>;
7474
expect(counterService.increment).toHaveBeenCalledTimes(2);
7575
expect(counterService.decrement).toHaveBeenCalledTimes(1);
7676
});

‎src/app/examples/06-with-ngrx-store.spec.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { render } from '@testing-library/angular';
1+
import { render, screen } from '@testing-library/angular';
22
import { StoreModule } from '@ngrx/store';
33

44
import { WithNgRxStoreComponent, reducer } from './06-with-ngrx-store';
55

66
test('works with ngrx store', async () => {
7-
const component = await render(WithNgRxStoreComponent, {
7+
const { click } = await render(WithNgRxStoreComponent, {
88
imports: [
99
StoreModule.forRoot(
1010
{
@@ -17,16 +17,16 @@ test('works with ngrx store', async () => {
1717
],
1818
});
1919

20-
const incrementControl = component.getByText('Increment');
21-
const decrementControl = component.getByText('Decrement');
22-
const valueControl = component.getByTestId('value');
20+
const incrementControl = screen.getByText('Increment');
21+
const decrementControl = screen.getByText('Decrement');
22+
const valueControl = screen.getByTestId('value');
2323

2424
expect(valueControl.textContent).toBe('0');
2525

26-
component.click(incrementControl);
27-
component.click(incrementControl);
26+
click(incrementControl);
27+
click(incrementControl);
2828
expect(valueControl.textContent).toBe('20');
2929

30-
component.click(decrementControl);
30+
click(decrementControl);
3131
expect(valueControl.textContent).toBe('10');
3232
});

‎src/app/examples/07-with-ngrx-mock-store.spec.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { render } from '@testing-library/angular';
1+
import { TestBed } from '@angular/core/testing';
2+
import { Store } from '@ngrx/store';
23
import { provideMockStore, MockStore } from '@ngrx/store/testing';
4+
import { render, screen } from '@testing-library/angular';
35

46
import { WithNgRxMockStoreComponent, selectItems } from './07-with-ngrx-mock-store';
5-
import { TestBed } from '@angular/core/testing';
6-
import { Store } from '@ngrx/store';
77

88
test('works with provideMockStore', async () => {
9-
const component = await render(WithNgRxMockStoreComponent, {
9+
const { click } = await render(WithNgRxMockStoreComponent, {
1010
providers: [
1111
provideMockStore({
1212
selectors: [
@@ -19,11 +19,11 @@ test('works with provideMockStore', async () => {
1919
],
2020
});
2121

22-
const store = TestBed.get(Store) as MockStore<any>;
22+
const store = TestBed.inject(MockStore);
2323
store.dispatch = jest.fn();
2424

25-
component.getByText('Four');
26-
component.click(component.getByText('Seven'));
25+
screen.getByText('Four');
26+
click(screen.getByText('Seven'));
2727

2828
expect(store.dispatch).toBeCalledWith({ type: '[Item List] send', item: 'Seven' });
2929
});

0 commit comments

Comments
 (0)