test(detectChanges): refine test description

Author: GregOnNet

projects/testing-library/tests/detect-changes.spec.ts

@@ -20,22 +20,24 @@ class FixtureComponent implements OnInit {
  }
 }
 
-test('allows detecting changes directly', async () => {
- const { getByTestId, type } = await render(FixtureComponent, { imports: [ReactiveFormsModule] });
+describe('detectChanges', () => {
+ test('does not recognize change if execution is delayed', async () => {
+ const { getByTestId, type } = await render(FixtureComponent, { imports: [ReactiveFormsModule] });
 
- type(getByTestId('input'), 'What a great day!');
- expect(getByTestId('button').innerHTML).toBe('Button');
-});
-
-test('allows detecting changes directly', fakeAsync(async () => {
- const { getByTestId, type, detectChanges } = await render(FixtureComponent, {
- imports: [ReactiveFormsModule],
+ type(getByTestId('input'), 'What a great day!');
+ expect(getByTestId('button').innerHTML).toBe('Button');
  });
 
- type(getByTestId('input'), 'What a great day!');
+ test('exposes detectChanges triggering a change detection cycle', fakeAsync(async () => {
+ const { getByTestId, type, detectChanges } = await render(FixtureComponent, {
+ imports: [ReactiveFormsModule],
+ });
 
- tick(500);
- detectChanges();
+ type(getByTestId('input'), 'What a great day!');
 
- expect(getByTestId('button').innerHTML).toBe('Button updated after 400ms');
-}));
+ tick(500);
+ detectChanges();
+
+ expect(getByTestId('button').innerHTML).toBe('Button updated after 400ms');
+ }));
+});