title: Set the toggle to check by clicking on the label is failed
body: <p>I create a slideToggle in Angular (latest version). Unfortunately, I got a failure from a unit test that set the toggle to check by clicking on the label.</p>
  <p>FYI, I already set the <code>for</code> attribute to the id of the element.</p>
  <p>Here are the component and spec files:</p>
  <p><strong>Component</strong></p>
  <pre class="lang-js prettyprint-override"><code>@Component({
      template: `&lt;label [attr.for]=&quot;id&quot;
            &gt;&lt;input
                #input
                type=&quot;checkbox&quot;
                [ngClass]=&quot;{'checked': checked}&quot;
                [checked]=&quot;checked&quot;
                [attr.id]=&quot;id&quot;
                [name]=&quot;name&quot;
                [disabled]=&quot;disabled&quot;
                [required]=&quot;required&quot;
                [attr.aria-checked]=&quot;checked&quot;
                (change)=&quot;onChangeEvent($event)&quot;
                (click)=&quot;onInputClick($event)&quot;
            /&gt;&lt;span&gt;{{ placeholder }}&lt;/span&gt;&lt;/label
        &gt;`,
    })
    class TestToggleComponent {
      @Input() public placeholder = '';
      @Input() public name = '';
      @Input() public checked = false;
      @Input() public disabled = false;
      @Input() public required = false;
      @HostBinding() public id = `toggle-input-${TestToggleComponent.nextId}`;
      @ViewChild('input') inputElement?: ElementRef&lt;HTMLInputElement&gt;;
    
      private static get nextId(): string {
        return uid();
      }
    
      public onChangeEvent(event: Event): void {
        event.stopPropagation();
    
        if (this.inputElement &amp;&amp; !this.disabled) {
            this.checked = !this.checked;
            this.inputElement.nativeElement.checked = this.checked;
            return;
          }
  
          this.checked = this.inputElement?.nativeElement.checked ?? this.checked;
      }
    
      public onInputClick(event: Event): void {
        event.stopPropagation();
      }
    }
  </code></pre>
  <p><strong>Spec file</strong></p>
  <pre class="lang-js prettyprint-override"><code>describe('TestToggleComponent', () =&gt; {
      let fixture: ComponentFixture&lt;TestToggleComponent&gt;;
      let component: TestToggleComponent;
      let toggleEl: DebugElement;
      let labelEl: DebugElement;
      let spanEl: DebugElement;
  
      beforeEach(async () =&gt; {
          await TestBed.configureTestingModule({
              declarations: [TestToggleComponent],
              providers: [{provide: ComponentFixtureAutoDetect, useValue: true}],
          }).compileComponents();
  
          fixture = TestBed.createComponent(TestToggleComponent);
          component = fixture.componentInstance;
          toggleEl = fixture.debugElement.query(By.css('input'));
          labelEl = fixture.debugElement.query(By.css('label'));
          spanEl = fixture.debugElement.query(By.css('span'));
          fixture.detectChanges();
      });
  
      it('should set the toggle to checked on click', fakeAsync(() =&gt; {
          const toggle = toggleEl.nativeElement;
          const label = labelEl.nativeElement;
  
          expect(toggle.checked).toBe(false);
          expect(toggle.getAttribute('aria-checked')).toBe('false');
          expect(toggle.classList).not.toContain('checked');
          const spyOnChangeEvent = jest.spyOn(component, 'onChangeEvent');
  
          label.click();
          fixture.detectChanges();
          flush();
  
          expect(spyOnChangeEvent).toBeCalled();
          expect(toggle.classList).toContain('checked');
          expect(toggle.checked).toBe(true);
          expect(toggle.getAttribute('aria-checked')).toBe('true');
      }));
  });
  </code></pre>