Input type of date is not working on testing library Angular , throwin - Enhance your coding expertise with Enrique GF on @onlycoders.net

1 year ago

#161658

Enrique GF

Input type of date is not working on testing library Angular , throwing error of not found label

im trying to do this test oover an input of type date in angular using Testing Library. But keep receiving this error:

 TestingLibraryElementError: Unable to find a label with the text of: date-input-label

My template would be kind of:

<ng-container [formGroup]="reactivationDateForm">
  <label for="date-input-label" class="form-label">GLOBAL_date</label>
  <input
    formControlName="inputReactivationDate"
    type="date"
    id="date-input-label"
    class="form-control"
    name="date-input"
    (change)="inputDateValue()"
  />
</ng-container>

then my test related to the input being filled with some date woild be like this :

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { fireEvent, render, RenderComponentOptions, screen } from '@testing-library/angular';
import { Component } from '...';



describe('ContractCardComponent', () => {
  const getOptions = (
    props?: Partial<Component>
  ): RenderComponentOptions<Component> => {
    return {
      componentProperties: props,
      providers: [FormBuilder, ReactiveFormsModule],
      declarations: [Component],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    };
  };

  it('Component', async () => {
    await render(Component, getOptions());

    const input = await screen.getByLabelText('date-input-label').querySelector('input');


    fireEvent.change(input, { target: { value: '23' } });

    expect(screen.getByText('Error in date format')).toBeInTheDocument();
  });
});

But for some reason the input dom is not rendered despite of receiving in console the whole rendered component included the label which according to the error is not found:


TestingLibraryElementError: Unable to find a label with the text of: date-input-label

    Ignored nodes: comments, <script />, <style />
    <body>
      <div
        id="root1"
        ng-version="11.0.2"
      >
        <label
          class="form-label"
          for="date-input-label"
        >
          GLOBAL_date
        </label>
        <input
          class="form-control"
          formcontrolname="inputReactivationDate"
          id="date-input-label"
          min="2022-02-10"
          name="date-input"
          type="date"
        />
       
      </div>
    </body>

      28 |     await render(Component, getOptions());
      29 |
    > 30 |     const input = await screen.getByLabelText('date-input-label').querySelector('input');
         |                                ^

Could somebody give me an idea to improve this situation?

angular

testing

input

dom-events

angular-testing-library

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs