How to use @testing-library/angular - 10 common examples

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 () => {
  const component = await render(MaterialFormsComponent, {
    imports: [ReactiveFormsModule, MaterialModule],
  });

  const nameControl = component.getByPlaceholderText('Name');
  const scoreControl = component.getByPlaceholderText(/score/i);
  const colorControl = component.getByPlaceholderText('color', { exact: false });
  const errors = component.getByRole('alert');

  expect(errors).toContainElement(component.queryByText('name is required'));
  expect(errors).toContainElement(component.queryByText('score must be greater than 1'));
  expect(errors).toContainElement(component.queryByText('color is required'));

  component.type(nameControl, 'Tim');
  component.type(scoreControl, 12);
  component.selectOptions(colorControl, 'Green');

test('injects data into the component', async () => {
  const component = await render(DataInjectedComponent, {
    providers: [
      {
        provide: DATA,
        useValue: { text: 'Hello boys and girls' },
      },
    ],
  });

  expect(component.getByText(/Hello boys and girls/i)).toBeInTheDocument();
});

test(`should have form validations`, async () => {
    const component = await render(AppComponent, {
      imports: [ReactiveFormsModule],
      providers: [provideMockStore()],
    });

    const appComponent = component.fixture.componentInstance as AppComponent;
    expect(appComponent.form.valid).toBe(false);

    const nameInput = component.getByLabelText('Name:');
    const ageInput = component.getByLabelText('Age:');

    const nameValue = appComponent.form.get('name');
    const ageValue = appComponent.form.get('age');

    component.type(nameInput, 'B');
    expect(nameValue.valid).toBe(false);

test('works with provideMockStore', async () => {
  const component = await render(WithNgRxMockStoreComponent, {
    providers: [
      provideMockStore({
        selectors: [
          {
            selector: selectItems,
            value: ['Four', 'Seven'],
          },
        ],
      }),
    ],
  });

  const store = TestBed.get(Store) as MockStore;
  store.dispatch = jest.fn();

  component.getByText('Four');

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 () => {
  const component = await render(FormsComponent, {
    imports: [ReactiveFormsModule],
  });

  const nameControl = component.getByLabelText('Name');
  const scoreControl = component.getByLabelText(/score/i);
  const colorControl = component.getByLabelText('color', { exact: false });
  const errors = component.getByRole('alert');

  expect(errors).toContainElement(component.queryByText('name is required'));
  expect(errors).toContainElement(component.queryByText('score must be greater than 1'));
  expect(errors).toContainElement(component.queryByText('color is required'));

  expect(nameControl).toBeInvalid();
  component.type(nameControl, 'Tim');
  component.type(scoreControl, '12');
  component.blur(scoreControl);

test(`should render title in a h1 tag`, async () => {
  const { container } = await render('', {
    declarations: [AppComponent],
    imports: [ReactiveFormsModule],
    providers: [provideMockStore()],
  });
  expect(container.querySelector('h1').textContent).toContain('Welcome to app!');
});

test('renders the current value and can increment and decrement with a mocked jest-utils service', async () => {
  const counter = createMock(CounterService);
  let fakeCounterValue = 50;
  counter.increment.mockImplementation(() => (fakeCounterValue += 10));
  counter.decrement.mockImplementation(() => (fakeCounterValue -= 10));
  counter.value.mockImplementation(() => fakeCounterValue);

  const component = await render(ComponentWithProviderComponent, {
    componentProviders: [
      {
        provide: CounterService,
        useValue: counter,
      },
    ],
  });

  const incrementControl = component.getByText('Increment');
  const decrementControl = component.getByText('Decrement');
  const valueControl = component.getByTestId('value');

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

  component.click(incrementControl);
  component.click(incrementControl);

test(`should provide a mock greet service`, async () => {
  const component = await render(AppComponent, {
    declarations: [AppComponent],
    imports: [ReactiveFormsModule],
    providers: [provideMockStore(), provideMock(GreetService)],
  });
  const service: GreetService = TestBed.get(GreetService);

  component.click(component.getByText('Greet'));

  expect(service.greet).toHaveBeenCalled();
});

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

  const incrementControl = component.getByText('Increment');
  const decrementControl = component.getByText('Decrement');

  component.click(incrementControl);
  component.click(incrementControl);
  component.click(decrementControl);

  const counterService = TestBed.get(CounterService) as Mock;
  expect(counterService.increment).toHaveBeenCalledTimes(2);
  expect(counterService.decrement).toHaveBeenCalledTimes(1);
});

test('renders the current value and can increment and decrement with a mocked jest-utils service', async () => {
  const counter = createMock(CounterService);
  let fakeCounterValue = 50;
  counter.increment.mockImplementation(() => (fakeCounterValue += 10));
  counter.decrement.mockImplementation(() => (fakeCounterValue -= 10));
  counter.value.mockImplementation(() => fakeCounterValue);

  const component = await render(ComponentWithProviderComponent, {
    componentProviders: [
      {
        provide: CounterService,
        useValue: counter,
      },
    ],
  });

  const incrementControl = component.getByText('Increment');
  const decrementControl = component.getByText('Decrement');