button.spec.ts

import {createMouseEvent, dispatchEvent} from '@angular/cdk/testing/private';
import {ApplicationRef, Component, ChangeDetectionStrategy} from '@angular/core';
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {ThemePalette} from '../core';
import {By} from '@angular/platform-browser';
import {
  MAT_BUTTON_CONFIG,
  MAT_FAB_DEFAULT_OPTIONS,
  MatButtonAppearance,
  MatButtonConfig,
  MatButtonModule,
  MatFabDefaultOptions,
} from './index';

describe('MatButton', () => {
  // General button tests
  it('should apply class based on color attribute', () => {
    let fixture = TestBed.createComponent(TestApp);

    let testComponent = fixture.debugElement.componentInstance;
    let buttonDebugElement = fixture.debugElement.query(By.css('button'))!;
    let aDebugElement = fixture.debugElement.query(By.css('a'))!;

    testComponent.buttonColor = 'primary';
    fixture.changeDetectorRef.markForCheck();
    fixture.detectChanges();
    expect(buttonDebugElement.nativeElement.classList.contains('mat-primary')).toBe(true);
    expect(aDebugElement.nativeElement.classList.contains('mat-primary')).toBe(true);

    testComponent.buttonColor = 'accent';
    fixture.changeDetectorRef.markForCheck();
    fixture.detectChanges();
    expect(buttonDebugElement.nativeElement.classList.contains('mat-accent')).toBe(true);
    expect(aDebugElement.nativeElement.classList.contains('mat-accent')).toBe(true);

    testComponent.buttonColor = null;
    fixture.changeDetectorRef.markForCheck();
    fixture.detectChanges();

    expect(buttonDebugElement.nativeElement.classList).not.toContain('mat-accent');
    expect(aDebugElement.nativeElement.classList).not.toContain('mat-accent');
  });

  it('should apply class based on the disabled state', () => {
    const fixture = TestBed.createComponent(TestApp);
    const button = fixture.debugElement.query(By.css('button'))!.nativeElement;
    const anchor = fixture.debugElement.query(By.css('a'))!.nativeElement;

    expect(button.classList).not.toContain('mat-mdc-button-disabled');
    expect(anchor.classList).not.toContain('mat-mdc-button-disabled');

    fixture.componentInstance.isDisabled = true;
    fixture.changeDetectorRef.markForCheck();
    fixture.detectChanges();

    expect(button.classList).toContain('mat-mdc-button-disabled');
    expect(anchor.classList).toContain('mat-mdc-button-disabled');
  });

  it('should not clear previous defined classes', () => {
    let fixture = TestBed.createComponent(TestApp);
    let testComponent = fixture.debugElement.componentInstance;
    let buttonDebugElement = fixture.debugElement.query(By.css('button'))!;

    buttonDebugElement.nativeElement.classList.add('custom-class');

    testComponent.buttonColor = 'primary';
    fixture.changeDetectorRef.markForCheck();
    fixture.detectChanges();

    expect(buttonDebugElement.nativeElement.classList.contains('mat-primary')).toBe(true);
    expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);

    testComponent.buttonColor = 'accent';
    fixture.changeDetectorRef.markForCheck();
    fixture.detectChanges();

    expect(buttonDebugElement.nativeElement.classList.contains('mat-primary')).toBe(false);
    expect(buttonDebugElement.nativeElement.classList.contains('mat-accent')).toBe(true);
    expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
  });

  it('should be able to change the button appearance dynamically', () => {
    const fixture = TestBed.createComponent(TestApp);
    const button = fixture.nativeElement.querySelector('.dynamic') as HTMLElement;
    fixture.detectChanges();

    expect(button.classList).toContain('mat-mdc-button');
    expect(button.classList).not.toContain('mat-mdc-outlined-button');
    expect(button.classList).not.toContain('mat-mdc-raised-button');

    fixture.componentInstance.appearance = 'outlined';
    fixture.changeDetectorRef.markForCheck();
    fixture.detectChanges();
    expect(button.classList).not.toContain('mat-mdc-button');
    expect(button.classList).toContain('mat-mdc-outlined-button');
    expect(button.classList).not.toContain('mat-mdc-raised-button');

    fixture.componentInstance.appearance = 'elevated';
    fixture.changeDetectorRef.markForCheck();
    fixture.detectChanges();
    expect(button.classList).not.toContain('mat-mdc-button');
    expect(button.classList).not.toContain('mat-mdc-outlined-button');
    expect(button.classList).toContain('mat-mdc-raised-button');
  });

  it('should be able to configure the default button appearance', () => {
    const config: MatButtonConfig = {
      defaultAppearance: 'outlined',
    };

    TestBed.configureTestingModule({
      providers: [{provide: MAT_BUTTON_CONFIG, useValue: config}],
    });

    const fixture = TestBed.createComponent(TestApp);
    const button = fixture.nativeElement.querySelector('.default-appearance') as HTMLElement;
    fixture.detectChanges();
    expect(button.classList).toContain('mat-mdc-outlined-button');
  });

  describe('button[mat-fab]', () => {
    it('should have accent palette by default', () => {
      const fixture = TestBed.createComponent(TestApp);
      const fabButtonDebugEl = fixture.debugElement.query(By.css('button[mat-fab]'))!;

      fixture.detectChanges();

      expect(fabButtonDebugEl.nativeElement.classList)
        .withContext('Expected fab buttons to use accent palette by default')
        .toContain('mat-accent');
    });

    it('should show progress indicator when showProgress is true', () => {
      const fixture = TestBed.createComponent(TestApp);
      const fabButtonDebugEl = fixture.debugElement.query(By.css('button[mat-fab]'))!;

      expect(fabButtonDebugEl.queryAll(By.css('[progressIndicator]')).length).toBe(0);
      expect(fabButtonDebugEl.nativeElement.classList).not.toContain(
        'mat-mdc-button-progress-indicator-shown',
      );
      fixture.componentInstance.showProgress = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(fabButtonDebugEl.queryAll(By.css('[progressIndicator]')).length).toBe(1);
      expect(fabButtonDebugEl.nativeElement.classList).toContain(
        'mat-mdc-button-progress-indicator-shown',
      );
    });
  });

  describe('button[mat-mini-fab]', () => {
    it('should have accent palette by default', () => {
      const fixture = TestBed.createComponent(TestApp);
      const miniFabButtonDebugEl = fixture.debugElement.query(By.css('button[mat-mini-fab]'))!;

      fixture.detectChanges();

      expect(miniFabButtonDebugEl.nativeElement.classList)
        .withContext('Expected mini-fab buttons to use accent palette by default')
        .toContain('mat-accent');
    });

    it('should show progress indicator when showProgress is true', () => {
      const fixture = TestBed.createComponent(TestApp);
      const miniFabButtonDebugEl = fixture.debugElement.query(By.css('button[mat-mini-fab]'))!;

      expect(miniFabButtonDebugEl.queryAll(By.css('[progressIndicator]')).length).toBe(0);
      expect(miniFabButtonDebugEl.nativeElement.classList).not.toContain(
        'mat-mdc-button-progress-indicator-shown',
      );
      fixture.componentInstance.showProgress = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(miniFabButtonDebugEl.queryAll(By.css('[progressIndicator]')).length).toBe(1);
      expect(miniFabButtonDebugEl.nativeElement.classList).toContain(
        'mat-mdc-button-progress-indicator-shown',
      );
    });
  });

  describe('button[mat-fab] extended', () => {
    it('should be extended', () => {
      const fixture = TestBed.createComponent(TestApp);
      fixture.detectChanges();
      const extendedFabButtonDebugEl = fixture.debugElement.query(By.css('.extended-fab-test'))!;

      expect(
        extendedFabButtonDebugEl.nativeElement.classList.contains('mat-mdc-extended-fab'),
      ).toBeFalse();

      fixture.componentInstance.extended = true;
      fixture.changeDetectorRef.markForCheck();

      fixture.detectChanges();
      expect(extendedFabButtonDebugEl.nativeElement.classList).toContain('mat-mdc-extended-fab');
    });

    it('should default collapsed to false', () => {
      const fixture = TestBed.createComponent(TestApp);
      fixture.detectChanges();
      const extendedFabButtonDebugEl = fixture.debugElement.query(By.css('.extended-fab-test'))!;

      fixture.componentInstance.extended = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(extendedFabButtonDebugEl.nativeElement.classList).not.toContain(
        'mat-mdc-extended-fab-collapsed',
      );
    });

    it('should add mat-mdc-extended-fab-collapsed class when collapsed is true', () => {
      const fixture = TestBed.createComponent(TestApp);
      fixture.detectChanges();
      const extendedFabButtonDebugEl = fixture.debugElement.query(By.css('.extended-fab-test'))!;

      fixture.componentInstance.extended = true;
      fixture.componentInstance.collapsed = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(extendedFabButtonDebugEl.nativeElement.classList).toContain(
        'mat-mdc-extended-fab-collapsed',
      );
    });
  });

  // Regular button tests
  describe('button[mat-button]', () => {
    it('should handle a click on the button', () => {
      let fixture = TestBed.createComponent(TestApp);
      let testComponent = fixture.debugElement.componentInstance;
      let buttonDebugElement = fixture.debugElement.query(By.css('button'))!;

      buttonDebugElement.nativeElement.click();
      expect(testComponent.clickCount).toBe(1);
    });

    it('should not increment if disabled', () => {
      let fixture = TestBed.createComponent(TestApp);
      let testComponent = fixture.debugElement.componentInstance;
      let buttonDebugElement = fixture.debugElement.query(By.css('button'))!;

      testComponent.isDisabled = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      buttonDebugElement.nativeElement.click();

      expect(testComponent.clickCount).toBe(0);
    });

    it('should disable the native button element', () => {
      let fixture = TestBed.createComponent(TestApp);
      let buttonNativeElement = fixture.nativeElement.querySelector('button');
      expect(buttonNativeElement.disabled)
        .withContext('Expected button not to be disabled')
        .toBeFalsy();

      fixture.componentInstance.isDisabled = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();
      expect(buttonNativeElement.disabled)
        .withContext('Expected button to be disabled')
        .toBeTruthy();
    });

    it('should show progress indicator when showProgress is true', () => {
      const fixture = TestBed.createComponent(TestApp);
      const buttonDebugEl = fixture.debugElement.query(By.css('button'))!;

      expect(buttonDebugEl.queryAll(By.css('[progressIndicator]')).length).toBe(0);
      expect(buttonDebugEl.nativeElement.classList).not.toContain(
        'mat-mdc-button-progress-indicator-shown',
      );
      fixture.componentInstance.showProgress = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(buttonDebugEl.queryAll(By.css('[progressIndicator]')).length).toBe(1);
      expect(buttonDebugEl.nativeElement.classList).toContain(
        'mat-mdc-button-progress-indicator-shown',
      );
    });
  });

  // Anchor button tests
  describe('a[mat-button]', () => {
    it('should not redirect if disabled', () => {
      let fixture = TestBed.createComponent(TestApp);
      let testComponent = fixture.debugElement.componentInstance;
      let buttonDebugElement = fixture.debugElement.query(By.css('a'))!;

      testComponent.isDisabled = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      buttonDebugElement.nativeElement.click();
    });

    it('should remove tabindex if disabled', () => {
      let fixture = TestBed.createComponent(TestApp);
      let testComponent = fixture.debugElement.componentInstance;
      let buttonDebugElement = fixture.debugElement.query(By.css('a'))!;
      fixture.detectChanges();

      expect(buttonDebugElement.nativeElement.hasAttribute('tabindex')).toBe(false);

      testComponent.isDisabled = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();
      expect(buttonDebugElement.nativeElement.getAttribute('tabindex')).toBe('-1');
    });

    it('should add aria-disabled attribute if disabled', () => {
      let fixture = TestBed.createComponent(TestApp);
      let testComponent = fixture.debugElement.componentInstance;
      let buttonDebugElement = fixture.debugElement.query(By.css('a'))!;
      fixture.detectChanges();
      expect(buttonDebugElement.nativeElement.hasAttribute('aria-disabled')).toBe(false);

      testComponent.isDisabled = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();
      expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled')).toBe('true');
    });

    it('should not add aria-disabled attribute if disabled is false', () => {
      let fixture = TestBed.createComponent(TestApp);
      let testComponent = fixture.debugElement.componentInstance;
      let buttonDebugElement = fixture.debugElement.query(By.css('a'))!;
      fixture.detectChanges();
      expect(buttonDebugElement.nativeElement.hasAttribute('aria-disabled')).toBe(false);
      expect(buttonDebugElement.nativeElement.getAttribute('disabled')).toBeNull();

      testComponent.isDisabled = false;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();
      expect(buttonDebugElement.nativeElement.hasAttribute('aria-disabled')).toBe(false);
      expect(buttonDebugElement.nativeElement.getAttribute('disabled')).toBeNull();
    });

    it('should be able to set a custom tabindex', () => {
      let fixture = TestBed.createComponent(TestApp);
      let testComponent = fixture.debugElement.componentInstance;
      let buttonElement = fixture.debugElement.query(By.css('a'))!.nativeElement;

      fixture.componentInstance.tabIndex = 3;
      fixture.detectChanges();

      expect(buttonElement.getAttribute('tabindex'))
        .withContext('Expected custom tabindex to be set')
        .toBe('3');

      testComponent.isDisabled = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(buttonElement.getAttribute('tabindex'))
        .withContext('Expected custom tabindex to be overwritten when disabled.')
        .toBe('-1');
    });

    it('should not set a default tabindex on enabled links', () => {
      const fixture = TestBed.createComponent(TestApp);
      const buttonElement = fixture.debugElement.query(By.css('a'))!.nativeElement;
      fixture.detectChanges();

      expect(buttonElement.hasAttribute('tabindex')).toBe(false);
    });

    it('should show progress indicator when showProgress is true', () => {
      const fixture = TestBed.createComponent(TestApp);
      const anchorDebugEl = fixture.debugElement.query(By.css('a'))!;

      expect(anchorDebugEl.queryAll(By.css('[progressIndicator]')).length).toBe(0);
      expect(anchorDebugEl.nativeElement.classList).not.toContain(
        'mat-mdc-button-progress-indicator-shown',
      );
      fixture.componentInstance.showProgress = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(anchorDebugEl.queryAll(By.css('[progressIndicator]')).length).toBe(1);
      expect(anchorDebugEl.nativeElement.classList).toContain(
        'mat-mdc-button-progress-indicator-shown',
      );
    });

    describe('change detection behavior', () => {
      it('should not run change detection for disabled anchor but should prevent the default behavior and stop event propagation', () => {
        const appRef = TestBed.inject(ApplicationRef);
        const fixture = TestBed.createComponent(TestApp);
        fixture.componentInstance.isDisabled = true;
        fixture.changeDetectorRef.markForCheck();
        fixture.detectChanges();
        const anchorElement = fixture.debugElement.query(By.css('a'))!.nativeElement;

        spyOn(appRef, 'tick');

        const event = createMouseEvent('click');
        spyOn(event, 'preventDefault').and.callThrough();
        spyOn(event, 'stopImmediatePropagation').and.callThrough();

        dispatchEvent(anchorElement, event);

        expect(appRef.tick).not.toHaveBeenCalled();
        expect(event.preventDefault).toHaveBeenCalled();
        expect(event.stopImmediatePropagation).toHaveBeenCalled();
      });
    });
  });

  it('should have a focus indicator', () => {
    const fixture = TestBed.createComponent(TestApp);
    const buttonNativeElements = [
      ...fixture.debugElement.nativeElement.querySelectorAll('a, button'),
    ];

    expect(
      buttonNativeElements.every(element => !!element.querySelector('.mat-focus-indicator')),
    ).toBe(true);
  });

  it('should be able to configure the default color of buttons', () => {
    @Component({
      template: `<button mat-button>Click me</button>`,
      imports: [MatButtonModule],
      changeDetection: ChangeDetectionStrategy.Eager,
    })
    class ConfigTestApp {}

    TestBed.resetTestingModule();
    TestBed.configureTestingModule({
      providers: [
        {
          provide: MAT_BUTTON_CONFIG,
          useValue: {color: 'warn'},
        },
      ],
    });
    const fixture = TestBed.createComponent(ConfigTestApp);
    fixture.detectChanges();
    const button = fixture.nativeElement.querySelector('button');
    expect(button.classList).toContain('mat-warn');
  });

  describe('interactive disabled buttons', () => {
    let fixture: ComponentFixture<TestApp>;
    let button: HTMLButtonElement;
    let anchor: HTMLAnchorElement;

    beforeEach(() => {
      fixture = TestBed.createComponent(TestApp);
      fixture.componentInstance.isDisabled = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();
      button = fixture.nativeElement.querySelector('button');
      anchor = fixture.nativeElement.querySelector('a');
    });

    it('should set a class when allowing disabled interactivity', () => {
      expect(button.classList).not.toContain('mat-mdc-button-disabled-interactive');

      fixture.componentInstance.disabledInteractive = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(button.classList).toContain('mat-mdc-button-disabled-interactive');
    });

    it('should set aria-disabled when allowing disabled interactivity', () => {
      expect(button.hasAttribute('aria-disabled')).toBe(false);

      fixture.componentInstance.disabledInteractive = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(button.getAttribute('aria-disabled')).toBe('true');
    });

    it('should not set the disabled attribute when allowing disabled interactivity', () => {
      expect(button.getAttribute('disabled')).toBe('true');

      fixture.componentInstance.disabledInteractive = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(button.hasAttribute('disabled')).toBe(false);
    });

    it('should set aria-disabled on anchor when disabledInteractive is enabled', () => {
      fixture.componentInstance.isDisabled = false;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();
      expect(anchor.hasAttribute('aria-disabled')).toBe(false);
      expect(anchor.hasAttribute('disabled')).toBe(false);
      expect(anchor.classList).not.toContain('mat-mdc-button-disabled-interactive');

      fixture.componentInstance.isDisabled = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();
      expect(anchor.getAttribute('aria-disabled')).toBe('true');
      expect(anchor.hasAttribute('disabled')).toBe(true);
      expect(anchor.classList).not.toContain('mat-mdc-button-disabled-interactive');

      fixture.componentInstance.disabledInteractive = true;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();
      expect(anchor.getAttribute('aria-disabled')).toBe('true');
      expect(anchor.hasAttribute('disabled')).toBe(false);
      expect(anchor.classList).toContain('mat-mdc-button-disabled-interactive');
    });
  });
});

describe('MatFabDefaultOptions', () => {
  function configure(defaults: MatFabDefaultOptions) {
    TestBed.configureTestingModule({
      providers: [{provide: MAT_FAB_DEFAULT_OPTIONS, useValue: defaults}],
    });
  }

  it('should override default color in component', () => {
    configure({color: 'primary'});
    const fixture: ComponentFixture<TestApp> = TestBed.createComponent(TestApp);
    fixture.detectChanges();
    const fabButtonDebugEl = fixture.debugElement.query(By.css('button[mat-fab]'))!;
    expect(fabButtonDebugEl.nativeElement.classList).toContain('mat-primary');
  });

  it('should default to accent if config does not specify color', () => {
    configure({});
    const fixture: ComponentFixture<TestApp> = TestBed.createComponent(TestApp);
    fixture.detectChanges();
    const fabButtonDebugEl = fixture.debugElement.query(By.css('button[mat-fab]'))!;
    expect(fabButtonDebugEl.nativeElement.classList).toContain('mat-accent');
  });
});

/** Test component that contains an MatButton. */
@Component({
  selector: 'test-app',
  template: `
    <button [tabIndex]="tabIndex" mat-button type="button" (click)="increment()"
      [disabled]="isDisabled" [color]="buttonColor" [disableRipple]="rippleDisabled"
      [disabledInteractive]="disabledInteractive"
      [showProgress]="showProgress">
      Go
      <span progressIndicator>Progress...</span>
    </button>
    <a [tabIndex]="tabIndex" href="https://www.google.com" mat-button [disabled]="isDisabled"
      [color]="buttonColor" [disabledInteractive]="disabledInteractive"
      [showProgress]="showProgress">
      Link
      <span progressIndicator>Progress...</span>
    </a>
    <button mat-fab [showProgress]="showProgress">
      Fab Button
      <span progressIndicator>Progress...</span>
    </button>
    <button mat-fab [extended]="extended" [collapsed]="collapsed" class="extended-fab-test">Extended</button>
    <button mat-mini-fab [showProgress]="showProgress">
      Mini Fab Button
      <span progressIndicator>Progress...</span>
    </button>
    <button class="dynamic" [matButton]="appearance">Dynamic button</button>
    <button class="default-appearance" matButton>Dynamic button</button>
  `,
  imports: [MatButtonModule],
  changeDetection: ChangeDetectionStrategy.Eager,
})
class TestApp {
  clickCount = 0;
  isDisabled = false;
  rippleDisabled = false;
  buttonColor!: ThemePalette;
  tabIndex!: number;
  extended = false;
  collapsed = false;
  disabledInteractive = false;
  appearance: MatButtonAppearance = 'text';
  showProgress = false;

  increment() {
    this.clickCount++;
  }
}