update more specs

Author: markgoho

apps/example-app/src/app/examples/05-component-provider.spec.ts

@@ -1,10 +1,13 @@
 import { TestBed } from '@angular/core/testing';
-import { render, screen, fireEvent } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
 import { provideMock, Mock, createMock } from '@testing-library/angular/jest-utils';
+import userEvent from '@testing-library/user-event';
 
 import { ComponentWithProviderComponent, CounterService } from './05-component-provider';
 
 test('renders the current value and can increment and decrement', async () => {
+  const user = userEvent.setup();
+
   await render(ComponentWithProviderComponent, {
     componentProviders: [
       {
@@ -20,15 +23,17 @@ test('renders the current value and can increment and decrement', async () => {
 
   expect(valueControl).toHaveTextContent('0');
 
-  fireEvent.click(incrementControl);
-  fireEvent.click(incrementControl);
+  await user.click(incrementControl);
+  await user.click(incrementControl);
   expect(valueControl).toHaveTextContent('2');
 
-  fireEvent.click(decrementControl);
+  await user.click(decrementControl);
   expect(valueControl).toHaveTextContent('1');
 });
 
 test('renders the current value and can increment and decrement with a mocked jest-utils service', async () => {
+  const user = userEvent.setup();
+
   const counter = createMock(CounterService);
   let fakeCounterValue = 50;
   counter.increment.mockImplementation(() => (fakeCounterValue += 10));
@@ -50,25 +55,27 @@ test('renders the current value and can increment and decrement with a mocked je
 
   expect(valueControl).toHaveTextContent('50');
 
-  fireEvent.click(incrementControl);
-  fireEvent.click(incrementControl);
+  await user.click(incrementControl);
+  await user.click(incrementControl);
   expect(valueControl).toHaveTextContent('70');
 
-  fireEvent.click(decrementControl);
+  await user.click(decrementControl);
   expect(valueControl).toHaveTextContent('60');
 });
 
 test('renders the current value and can increment and decrement with provideMocked from jest-utils', async () => {
+  const user = userEvent.setup();
+
   await render(ComponentWithProviderComponent, {
     componentProviders: [provideMock(CounterService)],
   });
 
   const incrementControl = screen.getByRole('button', { name: /increment/i });
   const decrementControl = screen.getByRole('button', { name: /decrement/i });
 
-  fireEvent.click(incrementControl);
-  fireEvent.click(incrementControl);
-  fireEvent.click(decrementControl);
+  await user.click(incrementControl);
+  await user.click(incrementControl);
+  await user.click(decrementControl);
 
   const counterService = TestBed.inject(CounterService) as Mock<CounterService>;
   expect(counterService.increment).toHaveBeenCalledTimes(2);

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

@@ -1,9 +1,12 @@
-import { render, screen, fireEvent } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
 import { StoreModule } from '@ngrx/store';
+import userEvent from '@testing-library/user-event';
 
 import { WithNgRxStoreComponent, reducer } from './06-with-ngrx-store';
 
 test('works with ngrx store', async () => {
+  const user = userEvent.setup();
+
   await render(WithNgRxStoreComponent, {
     imports: [
       StoreModule.forRoot(
@@ -23,10 +26,10 @@ test('works with ngrx store', async () => {
 
   expect(valueControl).toHaveTextContent('0');
 
-  fireEvent.click(incrementControl);
-  fireEvent.click(incrementControl);
+  await user.click(incrementControl);
+  await user.click(incrementControl);
   expect(valueControl).toHaveTextContent('20');
 
-  fireEvent.click(decrementControl);
+  await user.click(decrementControl);
   expect(valueControl).toHaveTextContent('10');
 });

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

@@ -1,10 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
-import { render, screen, fireEvent } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
 
 import { WithNgRxMockStoreComponent, selectItems } from './07-with-ngrx-mock-store';
 
 test('works with provideMockStore', async () => {
+  const user = userEvent.setup();
+
   await render(WithNgRxMockStoreComponent, {
     providers: [
       provideMockStore({
@@ -21,7 +24,7 @@ test('works with provideMockStore', async () => {
   const store = TestBed.inject(MockStore);
   store.dispatch = jest.fn();
 
-  fireEvent.click(screen.getByText(/seven/i));
+  await user.click(screen.getByText(/seven/i));
 
   expect(store.dispatch).toHaveBeenCalledWith({ type: '[Item List] send', item: 'Seven' });
 });

apps/example-app/src/app/examples/08-directive.spec.ts

@@ -1,8 +1,11 @@
-import { render, screen, fireEvent } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
 
 import { SpoilerDirective } from './08-directive';
 
 test('it is possible to test directives', async () => {
+  const user = userEvent.setup();
+
   await render('<div appSpoiler data-testid="dir"></div>', {
     declarations: [SpoilerDirective],
   });
@@ -12,16 +15,17 @@ test('it is possible to test directives', async () => {
   expect(screen.queryByText('I am visible now...')).not.toBeInTheDocument();
   expect(screen.getByText('SPOILER')).toBeInTheDocument();
 
-  fireEvent.mouseOver(directive);
+  await user.hover(directive);
   expect(screen.queryByText('SPOILER')).not.toBeInTheDocument();
   expect(screen.getByText('I am visible now...')).toBeInTheDocument();
 
-  fireEvent.mouseLeave(directive);
+  await user.unhover(directive);
   expect(screen.getByText('SPOILER')).toBeInTheDocument();
   expect(screen.queryByText('I am visible now...')).not.toBeInTheDocument();
 });
 
 test('it is possible to test directives with props', async () => {
+  const user = userEvent.setup();
   const hidden = 'SPOILER ALERT';
   const visible = 'There is nothing to see here ...';
 
@@ -36,16 +40,17 @@ test('it is possible to test directives with props', async () => {
   expect(screen.queryByText(visible)).not.toBeInTheDocument();
   expect(screen.getByText(hidden)).toBeInTheDocument();
 
-  fireEvent.mouseOver(screen.getByText(hidden));
+  await user.hover(screen.getByText(hidden));
   expect(screen.queryByText(hidden)).not.toBeInTheDocument();
   expect(screen.getByText(visible)).toBeInTheDocument();
 
-  fireEvent.mouseLeave(screen.getByText(visible));
+  await user.unhover(screen.getByText(visible));
   expect(screen.getByText(hidden)).toBeInTheDocument();
   expect(screen.queryByText(visible)).not.toBeInTheDocument();
 });
 
 test('it is possible to test directives with props in template', async () => {
+  const user = userEvent.setup();
   const hidden = 'SPOILER ALERT';
   const visible = 'There is nothing to see here ...';
 
@@ -56,11 +61,11 @@ test('it is possible to test directives with props in template', async () => {
   expect(screen.queryByText(visible)).not.toBeInTheDocument();
   expect(screen.getByText(hidden)).toBeInTheDocument();
 
-  fireEvent.mouseOver(screen.getByText(hidden));
+  await user.hover(screen.getByText(hidden));
   expect(screen.queryByText(hidden)).not.toBeInTheDocument();
   expect(screen.getByText(visible)).toBeInTheDocument();
 
-  fireEvent.mouseLeave(screen.getByText(visible));
+  await user.unhover(screen.getByText(visible));
   expect(screen.getByText(hidden)).toBeInTheDocument();
   expect(screen.queryByText(visible)).not.toBeInTheDocument();
 });