angular/adev/shared-docs/components/slide-toggle/slide-toggle.component.spec.ts
Andrew Scott 953c4b2580 feat(core): Move zoneless change detection to dev preview (#60748)
This commit moves zoneless from experimental to developer preview.

* Update tag on provider API
* Remove "experimental" from provider name
* Move documentation from "experimental features" to "Best practives ->
  Performance" (at least temporarily until there is a better place)

BREAKING CHANGE: `provideExperimentalZonelessChangeDetection` is
renamed to `provideZonelessChangeDetection` as it is now "Developer
Preview" rather than "Experimental".

PR Close #60748
2025-04-23 11:47:56 +02:00

62 lines
2 KiB
TypeScript

/*!
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {SlideToggle} from './slide-toggle.component';
import {provideZonelessChangeDetection} from '@angular/core';
describe('SlideToggle', () => {
let component: SlideToggle;
let fixture: ComponentFixture<SlideToggle>;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [SlideToggle],
providers: [provideZonelessChangeDetection()],
});
fixture = TestBed.createComponent(SlideToggle);
fixture.componentRef.setInput('buttonId', 'id');
fixture.componentRef.setInput('label', 'foo');
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should toggle the value when clicked', () => {
expect(component['checked']()).toBeFalse();
const buttonElement = fixture.nativeElement.querySelector('input');
buttonElement.click();
expect(component['checked']()).toBeTrue();
});
it('should call onChange and onTouched when toggled', () => {
const onChangeSpy = jasmine.createSpy('onChangeSpy');
const onTouchedSpy = jasmine.createSpy('onTouchedSpy');
component.registerOnChange(onChangeSpy);
component.registerOnTouched(onTouchedSpy);
component.toggle();
expect(onChangeSpy).toHaveBeenCalled();
expect(onChangeSpy).toHaveBeenCalledWith(true);
expect(onTouchedSpy).toHaveBeenCalled();
});
it('should set active class for button when is checked', () => {
component.writeValue(true);
fixture.detectChanges();
const buttonElement: HTMLButtonElement = fixture.nativeElement.querySelector('input');
expect(buttonElement.classList.contains('docs-toggle-active')).toBeTrue();
component.writeValue(false);
fixture.detectChanges();
expect(buttonElement.classList.contains('docs-toggle-active')).toBeFalse();
});
});