import {LiveAnnouncer} from '@angular/cdk/a11y';
import {OverlayContainer} from '@angular/cdk/overlay';
import {Platform} from '@angular/cdk/platform';
import {
  ChangeDetectionStrategy,
  Component,
  Directive,
  TemplateRef,
  ViewChild,
  ViewContainerRef,
  signal,
  inject,
} from '@angular/core';
import {ComponentFixture, TestBed, fakeAsync, flush, tick} from '@angular/core/testing';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {
  MAT_SNACK_BAR_DATA,
  MatSnackBar,
  MatSnackBarConfig,
  MatSnackBarContainer,
  MatSnackBarModule,
  MatSnackBarRef,
  SimpleSnackBar,
} from './index';
import {MAT_SNACK_BAR_DEFAULT_OPTIONS} from './snack-bar';

describe('MatSnackBar', () => {
  let snackBar: MatSnackBar;
  let liveAnnouncer: LiveAnnouncer;
  let overlayContainerElement: HTMLElement;

  let testViewContainerRef: ViewContainerRef;
  let viewContainerFixture: ComponentFixture<ComponentWithChildViewContainer>;

  let simpleMessage = 'Burritos are here!';
  let simpleActionLabel = 'pickup';

  const announceDelay = 150;
  const animationFrameDelay = 16;

  beforeEach(fakeAsync(() => {
    TestBed.configureTestingModule({
      imports: [
        MatSnackBarModule,
        NoopAnimationsModule,
        ComponentWithChildViewContainer,
        BurritosNotification,
        DirectiveWithViewContainer,
      ],
    });

    snackBar = TestBed.inject(MatSnackBar);
    liveAnnouncer = TestBed.inject(LiveAnnouncer);
    overlayContainerElement = TestBed.inject(OverlayContainer).getContainerElement();
    viewContainerFixture = TestBed.createComponent(ComponentWithChildViewContainer);
    viewContainerFixture.detectChanges();
    testViewContainerRef = viewContainerFixture.componentInstance.childViewContainer;
  }));

  it('should open with content first in the inert region', () => {
    snackBar.open('Snack time!', 'Chew');
    viewContainerFixture.detectChanges();

    const containerElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
    const inertElement = containerElement.querySelector('[aria-hidden]')!;

    expect(inertElement.getAttribute('aria-hidden'))
      .withContext('Expected the non-live region to be aria-hidden')
      .toBe('true');
    expect(inertElement.textContent)
      .withContext('Expected non-live region to contain the snack bar content')
      .toContain('Snack time!');

    const liveElement = containerElement.querySelector('[aria-live]')!;
    expect(liveElement.childNodes.length)
      .withContext('Expected live region to not contain any content')
      .toBe(0);
  });

  it('should move content to the live region after 150ms', fakeAsync(() => {
    snackBar.open('Snack time!', 'Chew');
    viewContainerFixture.detectChanges();

    const containerElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
    const liveElement = containerElement.querySelector('[aria-live]')!;
    tick(announceDelay);

    expect(liveElement.textContent)
      .withContext('Expected live region to contain the snack bar content')
      .toContain('Snack time!');

    const inertElement = containerElement.querySelector('[aria-hidden]')!;
    expect(inertElement)
      .withContext('Expected non-live region to not contain any content')
      .toBeFalsy();
    flush();
  }));

  it('should preserve focus when moving content to the live region', fakeAsync(() => {
    snackBar.open('Snack time!', 'Chew');
    viewContainerFixture.detectChanges();
    tick(animationFrameDelay);

    const actionButton = overlayContainerElement.querySelector(
      '.mat-mdc-simple-snack-bar .mat-mdc-snack-bar-action',
    )! as HTMLElement;
    actionButton.focus();
    expect(document.activeElement)
      .withContext('Expected the focus to move to the action button')
      .toBe(actionButton);

    flush();
    expect(document.activeElement)
      .withContext('Expected the focus to remain on the action button')
      .toBe(actionButton);
  }));

  it(
    'should have aria-live of `assertive` with an `assertive` politeness if no announcement ' +
      'message is provided',
    () => {
      snackBar.openFromComponent(BurritosNotification, {
        announcementMessage: '',
        politeness: 'assertive',
      });

      viewContainerFixture.detectChanges();

      const containerElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
      const liveElement = containerElement.querySelector('[aria-live]')!;

      expect(liveElement.getAttribute('aria-live'))
        .withContext('Expected snack bar container live region to have aria-live="assertive"')
        .toBe('assertive');
    },
  );

  it(
    'should have aria-live of `polite` with an `assertive` politeness if an announcement ' +
      'message is provided',
    () => {
      snackBar.openFromComponent(BurritosNotification, {
        announcementMessage: 'Yay Burritos',
        politeness: 'assertive',
      });
      viewContainerFixture.detectChanges();

      const containerElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
      const liveElement = containerElement.querySelector('[aria-live]')!;

      expect(liveElement.getAttribute('aria-live'))
        .withContext('Expected snack bar container live region to have aria-live="polite"')
        .toBe('polite');
    },
  );

  it('should have aria-live of `polite` with a `polite` politeness', () => {
    snackBar.openFromComponent(BurritosNotification, {politeness: 'polite'});
    viewContainerFixture.detectChanges();

    const containerElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
    const liveElement = containerElement.querySelector('[aria-live]')!;

    expect(liveElement.getAttribute('aria-live'))
      .withContext('Expected snack bar container live region to have aria-live="polite"')
      .toBe('polite');
  });

  it('should have aria-live of `off` if the politeness is turned off', () => {
    snackBar.openFromComponent(BurritosNotification, {politeness: 'off'});
    viewContainerFixture.detectChanges();

    const containerElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
    const liveElement = containerElement.querySelector('[aria-live]')!;

    expect(liveElement.getAttribute('aria-live'))
      .withContext('Expected snack bar container live region to have aria-live="off"')
      .toBe('off');
  });

  it('should have role of `alert` with an `assertive` politeness (Firefox only)', () => {
    const platform = TestBed.inject(Platform);
    snackBar.openFromComponent(BurritosNotification, {politeness: 'assertive'});
    viewContainerFixture.detectChanges();

    const containerElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
    const liveElement = containerElement.querySelector('[aria-live]')!;

    expect(liveElement.getAttribute('role')).toBe(platform.FIREFOX ? 'alert' : null);
  });

  it('should have role of `status` with an `polite` politeness (Firefox only)', () => {
    const platform = TestBed.inject(Platform);
    snackBar.openFromComponent(BurritosNotification, {politeness: 'polite'});
    viewContainerFixture.detectChanges();

    const containerElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
    const liveElement = containerElement.querySelector('[aria-live]')!;

    expect(liveElement.getAttribute('role')).toBe(platform.FIREFOX ? 'status' : null);
  });

  it('should have exactly one MDC label element when opened through simple snack bar', () => {
    let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef};
    snackBar.open(simpleMessage, simpleActionLabel, config);
    viewContainerFixture.detectChanges();

    expect(overlayContainerElement.querySelectorAll('.mdc-snackbar__label').length).toBe(1);
  });

  it('should open and close a snackbar without a ViewContainerRef', fakeAsync(() => {
    let snackBarRef = snackBar.open('Snack time!', 'Chew');
    viewContainerFixture.detectChanges();

    let messageElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
    expect(messageElement.textContent)
      .withContext('Expected snack bar to show a message without a ViewContainerRef')
      .toContain('Snack time!');

    snackBarRef.dismiss();
    viewContainerFixture.detectChanges();
    flush();

    expect(overlayContainerElement.childNodes.length)
      .withContext('Expected snack bar to be dismissed without a ViewContainerRef')
      .toBe(0);
  }));

  it('should open a simple message with a button', () => {
    let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef};
    let snackBarRef = snackBar.open(simpleMessage, simpleActionLabel, config);

    viewContainerFixture.detectChanges();

    expect(snackBarRef.instance instanceof SimpleSnackBar)
      .withContext('Expected the snack bar content component to be SimpleSnackBar')
      .toBe(true);
    expect(snackBarRef.instance.snackBarRef)
      .withContext('Expected the snack bar reference to be placed in the component instance')
      .toBe(snackBarRef);

    let messageElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
    expect(messageElement.textContent)
      .withContext(`Expected the snack bar message to be '${simpleMessage}'`)
      .toContain(simpleMessage);

    let buttonElement = overlayContainerElement.querySelector('button.mat-mdc-button')!;
    expect(buttonElement.tagName)
      .withContext('Expected snack bar action label to be a <button>')
      .toBe('BUTTON');
    expect((buttonElement.textContent || '').trim())
      .withContext(`Expected the snack bar action label to be '${simpleActionLabel}'`)
      .toBe(simpleActionLabel);
  });

  it('should open a simple message with no button', () => {
    let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef};
    let snackBarRef = snackBar.open(simpleMessage, undefined, config);

    viewContainerFixture.detectChanges();

    expect(snackBarRef.instance instanceof SimpleSnackBar)
      .withContext('Expected the snack bar content component to be SimpleSnackBar')
      .toBe(true);
    expect(snackBarRef.instance.snackBarRef)
      .withContext('Expected the snack bar reference to be placed in the component instance')
      .toBe(snackBarRef);

    let messageElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
    expect(messageElement.textContent)
      .withContext(`Expected the snack bar message to be '${simpleMessage}'`)
      .toContain(simpleMessage);
    expect(overlayContainerElement.querySelector('button.mat-mdc-button'))
      .withContext('Expected the query selection for action label to be null')
      .toBeNull();
  });

  it('should dismiss the snack bar and remove itself from the view', fakeAsync(() => {
    let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef};
    let dismissCompleteSpy = jasmine.createSpy('dismiss complete spy');

    let snackBarRef = snackBar.open(simpleMessage, undefined, config);
    viewContainerFixture.detectChanges();
    flush();
    expect(overlayContainerElement.childElementCount)
      .withContext('Expected overlay container element to have at least one child')
      .toBeGreaterThan(0);

    snackBarRef.afterDismissed().subscribe({complete: dismissCompleteSpy});
    const messageElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;

    snackBarRef.dismiss();
    viewContainerFixture.detectChanges();
    expect(messageElement.hasAttribute('mat-exit'))
      .withContext('Expected the snackbar container to have the "exit" attribute upon dismiss')
      .toBe(true);

    flush();

    expect(dismissCompleteSpy).toHaveBeenCalled();
    expect(overlayContainerElement.childElementCount)
      .withContext('Expected the overlay container element to have no child elements')
      .toBe(0);
  }));

  it('should clear the announcement message if it is the same as main message', fakeAsync(() => {
    spyOn(liveAnnouncer, 'announce');

    snackBar.open(simpleMessage, undefined, {announcementMessage: simpleMessage});
    viewContainerFixture.detectChanges();
    flush();

    expect(overlayContainerElement.childElementCount)
      .withContext('Expected the overlay with the default announcement message to be added')
      .toBe(1);

    expect(liveAnnouncer.announce).not.toHaveBeenCalled();
  }));

  it('should be able to specify a custom announcement message', fakeAsync(() => {
    spyOn(liveAnnouncer, 'announce');

    snackBar.open(simpleMessage, '', {
      announcementMessage: 'Custom announcement',
      politeness: 'assertive',
    });
    viewContainerFixture.detectChanges();
    flush();

    expect(overlayContainerElement.childElementCount)
      .withContext('Expected the overlay with a custom `announcementMessage` to be added')
      .toBe(1);

    expect(liveAnnouncer.announce).toHaveBeenCalledWith('Custom announcement', 'assertive');
  }));

  it('should be able to get dismissed through the service', fakeAsync(() => {
    snackBar.open(simpleMessage);
    viewContainerFixture.detectChanges();
    expect(overlayContainerElement.childElementCount).toBeGreaterThan(0);

    snackBar.dismiss();
    viewContainerFixture.detectChanges();
    flush();

    expect(overlayContainerElement.childElementCount).toBe(0);
  }));

  it('should clean itself up when the view container gets destroyed', fakeAsync(() => {
    snackBar.open(simpleMessage, undefined, {viewContainerRef: testViewContainerRef});
    viewContainerFixture.detectChanges();
    expect(overlayContainerElement.childElementCount).toBeGreaterThan(0);

    viewContainerFixture.componentInstance.childComponentExists.set(false);
    viewContainerFixture.detectChanges();
    flush();

    expect(overlayContainerElement.childElementCount)
      .withContext('Expected snack bar to be removed after the view container was destroyed')
      .toBe(0);
  }));

  it('should set the animation state to visible on entry', () => {
    const config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef};
    const snackBarRef = snackBar.open(simpleMessage, undefined, config);

    viewContainerFixture.detectChanges();
    const container = snackBarRef.containerInstance as MatSnackBarContainer;
    expect(container._animationState)
      .withContext(`Expected the animation state would be 'visible'.`)
      .toBe('visible');
    snackBarRef.dismiss();

    viewContainerFixture.detectChanges();
    expect(container._animationState)
      .withContext(`Expected the animation state would be 'hidden'.`)
      .toBe('hidden');
  });

  it('should set the animation state to complete on exit', () => {
    const config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef};
    const snackBarRef = snackBar.open(simpleMessage, undefined, config);
    snackBarRef.dismiss();

    viewContainerFixture.detectChanges();
    const container = snackBarRef.containerInstance as MatSnackBarContainer;
    expect(container._animationState)
      .withContext(`Expected the animation state would be 'hidden'.`)
      .toBe('hidden');
  });

  it(`should set the old snack bar animation state to complete and the new snack bar animation
      state to visible on entry of new snack bar`, fakeAsync(() => {
    const config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef};
    const snackBarRef = snackBar.open(simpleMessage, undefined, config);
    const dismissCompleteSpy = jasmine.createSpy('dismiss complete spy');

    viewContainerFixture.detectChanges();

    const containerElement = document.querySelector('mat-snack-bar-container')!;
    expect(containerElement.classList).toContain('ng-animating');
    const container1 = snackBarRef.containerInstance as MatSnackBarContainer;
    expect(container1._animationState)
      .withContext(`Expected the animation state would be 'visible'.`)
      .toBe('visible');

    const config2 = {viewContainerRef: testViewContainerRef};
    const snackBarRef2 = snackBar.open(simpleMessage, undefined, config2);

    viewContainerFixture.detectChanges();
    snackBarRef.afterDismissed().subscribe({complete: dismissCompleteSpy});
    flush();

    expect(dismissCompleteSpy).toHaveBeenCalled();
    const container2 = snackBarRef2.containerInstance as MatSnackBarContainer;
    expect(container1._animationState)
      .withContext(`Expected the animation state would be 'hidden'.`)
      .toBe('hidden');
    expect(container2._animationState)
      .withContext(`Expected the animation state would be 'visible'.`)
      .toBe('visible');
  }));

  it('should open a new snackbar after dismissing a previous snackbar', fakeAsync(() => {
    let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef};
    let snackBarRef = snackBar.open(simpleMessage, 'Dismiss', config);

    viewContainerFixture.detectChanges();

    snackBarRef.dismiss();
    viewContainerFixture.detectChanges();

    // Wait for the snackbar dismiss animation to finish.
    flush();
    snackBar.open('Second snackbar');
    viewContainerFixture.detectChanges();

    // Wait for the snackbar open animation to finish.
    flush();
    expect(overlayContainerElement.textContent!.trim()).toBe('Second snackbar');
  }));

  it('should remove past snackbars when opening new snackbars', fakeAsync(() => {
    snackBar.open('First snackbar');
    viewContainerFixture.detectChanges();

    snackBar.open('Second snackbar');
    viewContainerFixture.detectChanges();
    flush();

    snackBar.open('Third snackbar');
    viewContainerFixture.detectChanges();
    flush();

    expect(overlayContainerElement.textContent!.trim()).toBe('Third snackbar');
  }));

  it('should remove snackbar if another is shown while its still animating open', fakeAsync(() => {
    snackBar.open('First snackbar');
    viewContainerFixture.detectChanges();

    snackBar.open('Second snackbar');
    viewContainerFixture.detectChanges();

    flush();
    expect(overlayContainerElement.textContent!.trim()).toBe('Second snackbar');
  }));

  it('should dismiss the snackbar when the action is called, notifying of both action and dismiss', fakeAsync(() => {
    const dismissNextSpy = jasmine.createSpy('dismiss next spy');
    const dismissCompleteSpy = jasmine.createSpy('dismiss complete spy');
    const actionNextSpy = jasmine.createSpy('action next spy');
    const actionCompleteSpy = jasmine.createSpy('action complete spy');
    const snackBarRef = snackBar.open('Some content', 'Dismiss');
    viewContainerFixture.detectChanges();

    snackBarRef.afterDismissed().subscribe({next: dismissNextSpy, complete: dismissCompleteSpy});
    snackBarRef.onAction().subscribe({next: actionNextSpy, complete: actionCompleteSpy});

    const actionButton = overlayContainerElement.querySelector(
      'button.mat-mdc-button',
    ) as HTMLButtonElement;
    actionButton.click();
    viewContainerFixture.detectChanges();
    tick();

    expect(dismissNextSpy).toHaveBeenCalled();
    expect(dismissCompleteSpy).toHaveBeenCalled();
    expect(actionNextSpy).toHaveBeenCalled();
    expect(actionCompleteSpy).toHaveBeenCalled();

    tick(500);
  }));

  it('should allow manually dismissing with an action', fakeAsync(() => {
    const dismissCompleteSpy = jasmine.createSpy('dismiss complete spy');
    const actionCompleteSpy = jasmine.createSpy('action complete spy');
    const snackBarRef = snackBar.open('Some content');
    viewContainerFixture.detectChanges();

    snackBarRef.afterDismissed().subscribe({complete: dismissCompleteSpy});
    snackBarRef.onAction().subscribe({complete: actionCompleteSpy});

    snackBarRef.dismissWithAction();
    viewContainerFixture.detectChanges();
    flush();

    expect(dismissCompleteSpy).toHaveBeenCalled();
    expect(actionCompleteSpy).toHaveBeenCalled();
  }));

  it('should indicate in `afterClosed` whether it was dismissed by an action', fakeAsync(() => {
    const dismissSpy = jasmine.createSpy('dismiss spy');
    const snackBarRef = snackBar.open('Some content');
    viewContainerFixture.detectChanges();

    snackBarRef.afterDismissed().subscribe(dismissSpy);
    snackBarRef.dismissWithAction();
    viewContainerFixture.detectChanges();
    flush();

    expect(dismissSpy).toHaveBeenCalledWith(jasmine.objectContaining({dismissedByAction: true}));
  }));

  it('should complete the onAction stream when not closing via an action', fakeAsync(() => {
    const actionCompleteSpy = jasmine.createSpy('action complete spy');
    const snackBarRef = snackBar.open('Some content');
    viewContainerFixture.detectChanges();

    snackBarRef.onAction().subscribe({complete: actionCompleteSpy});
    snackBarRef.dismiss();
    viewContainerFixture.detectChanges();
    flush();

    expect(actionCompleteSpy).toHaveBeenCalled();
  }));

  it('should dismiss automatically after a specified timeout', fakeAsync(() => {
    const config = new MatSnackBarConfig();
    config.duration = 250;
    const snackBarRef = snackBar.open('content', 'test', config);
    const afterDismissSpy = jasmine.createSpy('after dismiss spy');
    snackBarRef.afterDismissed().subscribe(afterDismissSpy);

    viewContainerFixture.detectChanges();
    tick();
    expect(afterDismissSpy).not.toHaveBeenCalled();

    tick(1000);
    viewContainerFixture.detectChanges();
    tick();
    expect(afterDismissSpy).toHaveBeenCalled();
  }));

  it('should add extra classes to the container', () => {
    snackBar.open(simpleMessage, simpleActionLabel, {panelClass: ['one', 'two']});
    viewContainerFixture.detectChanges();

    let containerClasses =
      overlayContainerElement.querySelector('mat-snack-bar-container')!.classList;

    expect(containerClasses).toContain('one');
    expect(containerClasses).toContain('two');
  });

  it('should set the layout direction', () => {
    snackBar.open(simpleMessage, simpleActionLabel, {direction: 'rtl'});
    viewContainerFixture.detectChanges();

    let pane = overlayContainerElement.querySelector('.cdk-global-overlay-wrapper')!;

    expect(pane.getAttribute('dir'))
      .withContext('Expected the pane to be in RTL mode.')
      .toBe('rtl');
  });

  it('should be able to override the default config', fakeAsync(() => {
    viewContainerFixture.destroy();

    TestBed.resetTestingModule()
      .overrideProvider(MAT_SNACK_BAR_DEFAULT_OPTIONS, {
        deps: [],
        useFactory: () => ({panelClass: 'custom-class'}),
      })
      .configureTestingModule({imports: [MatSnackBarModule, NoopAnimationsModule]});

    snackBar = TestBed.inject(MatSnackBar);
    overlayContainerElement = TestBed.inject(OverlayContainer).getContainerElement();

    snackBar.open(simpleMessage);
    flush();

    expect(overlayContainerElement.querySelector('mat-snack-bar-container')!.classList)
      .withContext('Expected class applied through the defaults to be applied.')
      .toContain('custom-class');
  }));

  it('should dismiss the open snack bar on destroy', fakeAsync(() => {
    snackBar.open(simpleMessage);
    viewContainerFixture.detectChanges();
    expect(overlayContainerElement.childElementCount).toBeGreaterThan(0);

    snackBar.ngOnDestroy();
    viewContainerFixture.detectChanges();
    flush();

    expect(overlayContainerElement.childElementCount).toBe(0);
  }));

  it('should cap the timeout to the maximum accepted delay in setTimeout', fakeAsync(() => {
    const config = new MatSnackBarConfig();
    config.duration = Infinity;
    snackBar.open('content', 'test', config);
    viewContainerFixture.detectChanges();
    spyOn(window, 'setTimeout').and.callThrough();
    tick(100);

    expect(window.setTimeout).toHaveBeenCalledWith(jasmine.any(Function), Math.pow(2, 31) - 1);

    flush();
  }));

  it('should only keep one snack bar in the DOM if multiple are opened at the same time', fakeAsync(() => {
    for (let i = 0; i < 10; i++) {
      snackBar.open('Snack time!', 'Chew');
      viewContainerFixture.detectChanges();
    }

    flush();
    expect(overlayContainerElement.querySelectorAll('mat-snack-bar-container').length).toBe(1);
  }));

  describe('with custom component', () => {
    it('should open a custom component', () => {
      const snackBarRef = snackBar.openFromComponent(BurritosNotification);

      expect(snackBarRef.instance instanceof BurritosNotification)
        .withContext('Expected the snack bar content component to be BurritosNotification')
        .toBe(true);
      expect(overlayContainerElement.textContent!.trim())
        .withContext('Expected component to have the proper text.')
        .toBe('Burritos are on the way.');
    });

    it('should inject the snack bar reference into the component', () => {
      const snackBarRef = snackBar.openFromComponent(BurritosNotification);

      expect(snackBarRef.instance.snackBarRef)
        .withContext('Expected component to have an injected snack bar reference.')
        .toBe(snackBarRef);
    });

    it('should have exactly one MDC label element', () => {
      snackBar.openFromComponent(BurritosNotification);
      viewContainerFixture.detectChanges();
      expect(overlayContainerElement.querySelectorAll('.mdc-snackbar__label').length).toBe(1);
    });

    it('should be able to inject arbitrary user data', () => {
      const snackBarRef = snackBar.openFromComponent(BurritosNotification, {
        data: {
          burritoType: 'Chimichanga',
        },
      });

      expect(snackBarRef.instance.data)
        .withContext('Expected component to have a data object.')
        .toBeTruthy();
      expect(snackBarRef.instance.data.burritoType)
        .withContext('Expected the injected data object to be the one the user provided.')
        .toBe('Chimichanga');
    });

    it('should allow manually dismissing with an action', fakeAsync(() => {
      const dismissCompleteSpy = jasmine.createSpy('dismiss complete spy');
      const actionCompleteSpy = jasmine.createSpy('action complete spy');
      const snackBarRef = snackBar.openFromComponent(BurritosNotification);
      viewContainerFixture.detectChanges();

      snackBarRef.afterDismissed().subscribe({complete: dismissCompleteSpy});
      snackBarRef.onAction().subscribe({complete: actionCompleteSpy});

      snackBarRef.dismissWithAction();
      viewContainerFixture.detectChanges();
      flush();

      expect(dismissCompleteSpy).toHaveBeenCalled();
      expect(actionCompleteSpy).toHaveBeenCalled();
    }));
  });

  describe('with TemplateRef', () => {
    let templateFixture: ComponentFixture<ComponentWithTemplateRef>;

    beforeEach(() => {
      templateFixture = TestBed.createComponent(ComponentWithTemplateRef);
      templateFixture.detectChanges();
    });

    it('should be able to open a snack bar using a TemplateRef', () => {
      templateFixture.componentInstance.localValue = 'Pizza';
      templateFixture.changeDetectorRef.markForCheck();
      snackBar.openFromTemplate(templateFixture.componentInstance.templateRef);
      templateFixture.detectChanges();

      const containerElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;

      expect(containerElement.textContent).toContain('Fries');
      expect(containerElement.textContent).toContain('Pizza');

      templateFixture.componentInstance.localValue = 'Pasta';
      templateFixture.changeDetectorRef.markForCheck();
      templateFixture.detectChanges();

      expect(containerElement.textContent).toContain('Pasta');
    });

    it('should be able to pass in contextual data when opening with a TemplateRef', () => {
      snackBar.openFromTemplate(templateFixture.componentInstance.templateRef, {
        data: {value: 'Oranges'},
      });
      templateFixture.detectChanges();

      const containerElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;

      expect(containerElement.textContent).toContain('Oranges');
    });
  });
});

describe('MatSnackBar with parent MatSnackBar', () => {
  let parentSnackBar: MatSnackBar;
  let childSnackBar: MatSnackBar;
  let overlayContainerElement: HTMLElement;
  let fixture: ComponentFixture<ComponentThatProvidesMatSnackBar>;

  beforeEach(fakeAsync(() => {
    TestBed.configureTestingModule({
      imports: [
        MatSnackBarModule,
        NoopAnimationsModule,
        ComponentThatProvidesMatSnackBar,
        DirectiveWithViewContainer,
      ],
    });

    parentSnackBar = TestBed.inject(MatSnackBar);
    overlayContainerElement = TestBed.inject(OverlayContainer).getContainerElement();
    fixture = TestBed.createComponent(ComponentThatProvidesMatSnackBar);
    childSnackBar = fixture.componentInstance.snackBar;
    fixture.detectChanges();
  }));

  it('should close snackBars opened by parent when opening from child', fakeAsync(() => {
    parentSnackBar.open('Pizza');
    fixture.detectChanges();
    tick(1000);

    expect(overlayContainerElement.textContent)
      .withContext('Expected a snackBar to be opened')
      .toContain('Pizza');

    childSnackBar.open('Taco');
    fixture.detectChanges();
    tick(1000);

    expect(overlayContainerElement.textContent)
      .withContext('Expected parent snackbar msg to be dismissed by opening from child')
      .toContain('Taco');
  }));

  it('should close snackBars opened by child when opening from parent', fakeAsync(() => {
    childSnackBar.open('Pizza');
    fixture.detectChanges();
    tick(1000);

    expect(overlayContainerElement.textContent)
      .withContext('Expected a snackBar to be opened')
      .toContain('Pizza');

    parentSnackBar.open('Taco');
    fixture.detectChanges();
    tick(1000);

    expect(overlayContainerElement.textContent)
      .withContext('Expected child snackbar msg to be dismissed by opening from parent')
      .toContain('Taco');
  }));

  it('should not dismiss parent snack bar if child is destroyed', fakeAsync(() => {
    parentSnackBar.open('Pizza');
    fixture.detectChanges();
    expect(overlayContainerElement.childElementCount).toBeGreaterThan(0);

    childSnackBar.ngOnDestroy();
    fixture.detectChanges();
    flush();

    expect(overlayContainerElement.childElementCount).toBeGreaterThan(0);
  }));
});

describe('MatSnackBar Positioning', () => {
  let snackBar: MatSnackBar;
  let overlayContainerEl: HTMLElement;

  let viewContainerFixture: ComponentFixture<ComponentWithChildViewContainer>;

  let simpleMessage = 'Burritos are here!';
  let simpleActionLabel = 'pickup';

  beforeEach(fakeAsync(() => {
    TestBed.configureTestingModule({
      imports: [
        MatSnackBarModule,
        NoopAnimationsModule,
        ComponentWithChildViewContainer,
        DirectiveWithViewContainer,
      ],
    });

    snackBar = TestBed.inject(MatSnackBar);
    overlayContainerEl = TestBed.inject(OverlayContainer).getContainerElement();
    viewContainerFixture = TestBed.createComponent(ComponentWithChildViewContainer);
    viewContainerFixture.detectChanges();
  }));

  it('should default to bottom center', fakeAsync(() => {
    snackBar.open(simpleMessage, simpleActionLabel);

    viewContainerFixture.detectChanges();
    flush();

    const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
    expect(overlayPaneEl.style.marginBottom)
      .withContext('Expected margin-bottom to be "0px"')
      .toBe('0px');
    expect(overlayPaneEl.style.marginTop).withContext('Expected margin-top to be ""').toBe('');
    expect(overlayPaneEl.style.marginRight).withContext('Expected margin-right to be ""').toBe('');
    expect(overlayPaneEl.style.marginLeft).withContext('Expected margin-left  to be ""').toBe('');
  }));

  it('should be in the bottom left corner', fakeAsync(() => {
    snackBar.open(simpleMessage, simpleActionLabel, {
      verticalPosition: 'bottom',
      horizontalPosition: 'left',
    });

    viewContainerFixture.detectChanges();
    flush();

    const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
    expect(overlayPaneEl.style.marginBottom)
      .withContext('Expected margin-bottom to be "0px"')
      .toBe('0px');
    expect(overlayPaneEl.style.marginTop).withContext('Expected margin-top to be ""').toBe('');
    expect(overlayPaneEl.style.marginRight).withContext('Expected margin-right to be ""').toBe('');
    expect(overlayPaneEl.style.marginLeft)
      .withContext('Expected margin-left  to be "0px"')
      .toBe('0px');
  }));

  it('should be in the bottom right corner', fakeAsync(() => {
    snackBar.open(simpleMessage, simpleActionLabel, {
      verticalPosition: 'bottom',
      horizontalPosition: 'right',
    });

    viewContainerFixture.detectChanges();
    flush();

    const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
    expect(overlayPaneEl.style.marginBottom)
      .withContext('Expected margin-bottom to be "0px"')
      .toBe('0px');
    expect(overlayPaneEl.style.marginTop).withContext('Expected margin-top to be ""').toBe('');
    expect(overlayPaneEl.style.marginRight)
      .withContext('Expected margin-right to be "0px"')
      .toBe('0px');
    expect(overlayPaneEl.style.marginLeft).withContext('Expected margin-left  to be ""').toBe('');
  }));

  it('should be in the bottom center', fakeAsync(() => {
    snackBar.open(simpleMessage, simpleActionLabel, {
      verticalPosition: 'bottom',
      horizontalPosition: 'center',
    });

    viewContainerFixture.detectChanges();
    flush();

    const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
    expect(overlayPaneEl.style.marginBottom)
      .withContext('Expected margin-bottom to be "0px"')
      .toBe('0px');
    expect(overlayPaneEl.style.marginTop).withContext('Expected margin-top to be ""').toBe('');
    expect(overlayPaneEl.style.marginRight).withContext('Expected margin-right to be ""').toBe('');
    expect(overlayPaneEl.style.marginLeft).withContext('Expected margin-left  to be ""').toBe('');
  }));

  it('should be in the top left corner', fakeAsync(() => {
    snackBar.open(simpleMessage, simpleActionLabel, {
      verticalPosition: 'top',
      horizontalPosition: 'left',
    });

    viewContainerFixture.detectChanges();
    flush();

    const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
    expect(overlayPaneEl.style.marginBottom)
      .withContext('Expected margin-bottom to be ""')
      .toBe('');
    expect(overlayPaneEl.style.marginTop)
      .withContext('Expected margin-top to be "0px"')
      .toBe('0px');
    expect(overlayPaneEl.style.marginRight).withContext('Expected margin-right to be ""').toBe('');
    expect(overlayPaneEl.style.marginLeft)
      .withContext('Expected margin-left  to be "0px"')
      .toBe('0px');
  }));

  it('should be in the top right corner', fakeAsync(() => {
    snackBar.open(simpleMessage, simpleActionLabel, {
      verticalPosition: 'top',
      horizontalPosition: 'right',
    });

    viewContainerFixture.detectChanges();
    flush();

    const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
    expect(overlayPaneEl.style.marginBottom)
      .withContext('Expected margin-bottom to be ""')
      .toBe('');
    expect(overlayPaneEl.style.marginTop)
      .withContext('Expected margin-top to be "0px"')
      .toBe('0px');
    expect(overlayPaneEl.style.marginRight)
      .withContext('Expected margin-right to be "0px"')
      .toBe('0px');
    expect(overlayPaneEl.style.marginLeft).withContext('Expected margin-left  to be ""').toBe('');
  }));

  it('should be in the top center', fakeAsync(() => {
    snackBar.open(simpleMessage, simpleActionLabel, {
      verticalPosition: 'top',
      horizontalPosition: 'center',
    });

    viewContainerFixture.detectChanges();
    flush();

    const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
    expect(overlayPaneEl.style.marginBottom)
      .withContext('Expected margin-bottom to be ""')
      .toBe('');
    expect(overlayPaneEl.style.marginTop)
      .withContext('Expected margin-top to be "0px"')
      .toBe('0px');
    expect(overlayPaneEl.style.marginRight).withContext('Expected margin-right to be ""').toBe('');
    expect(overlayPaneEl.style.marginLeft).withContext('Expected margin-left  to be ""').toBe('');
  }));

  it('should handle start based on direction (rtl)', fakeAsync(() => {
    snackBar.open(simpleMessage, simpleActionLabel, {
      verticalPosition: 'top',
      horizontalPosition: 'start',
      direction: 'rtl',
    });

    viewContainerFixture.detectChanges();
    flush();

    const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
    expect(overlayPaneEl.style.marginBottom)
      .withContext('Expected margin-bottom to be ""')
      .toBe('');
    expect(overlayPaneEl.style.marginTop)
      .withContext('Expected margin-top to be "0px"')
      .toBe('0px');
    expect(overlayPaneEl.style.marginRight)
      .withContext('Expected margin-right to be "0px"')
      .toBe('0px');
    expect(overlayPaneEl.style.marginLeft).withContext('Expected margin-left  to be ""').toBe('');
  }));

  it('should handle start based on direction (ltr)', fakeAsync(() => {
    snackBar.open(simpleMessage, simpleActionLabel, {
      verticalPosition: 'top',
      horizontalPosition: 'start',
      direction: 'ltr',
    });

    viewContainerFixture.detectChanges();
    flush();

    const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
    expect(overlayPaneEl.style.marginBottom)
      .withContext('Expected margin-bottom to be ""')
      .toBe('');
    expect(overlayPaneEl.style.marginTop)
      .withContext('Expected margin-top to be "0px"')
      .toBe('0px');
    expect(overlayPaneEl.style.marginRight).withContext('Expected margin-right to be ""').toBe('');
    expect(overlayPaneEl.style.marginLeft)
      .withContext('Expected margin-left  to be "0px"')
      .toBe('0px');
  }));

  it('should handle end based on direction (rtl)', fakeAsync(() => {
    snackBar.open(simpleMessage, simpleActionLabel, {
      verticalPosition: 'top',
      horizontalPosition: 'end',
      direction: 'rtl',
    });

    viewContainerFixture.detectChanges();
    flush();

    const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
    expect(overlayPaneEl.style.marginBottom)
      .withContext('Expected margin-bottom to be ""')
      .toBe('');
    expect(overlayPaneEl.style.marginTop)
      .withContext('Expected margin-top to be "0px"')
      .toBe('0px');
    expect(overlayPaneEl.style.marginRight).withContext('Expected margin-right to be ""').toBe('');
    expect(overlayPaneEl.style.marginLeft)
      .withContext('Expected margin-left  to be "0px"')
      .toBe('0px');
  }));

  it('should handle end based on direction (ltr)', fakeAsync(() => {
    snackBar.open(simpleMessage, simpleActionLabel, {
      verticalPosition: 'top',
      horizontalPosition: 'end',
      direction: 'ltr',
    });

    viewContainerFixture.detectChanges();
    flush();

    const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement;
    expect(overlayPaneEl.style.marginBottom)
      .withContext('Expected margin-bottom to be ""')
      .toBe('');
    expect(overlayPaneEl.style.marginTop)
      .withContext('Expected margin-top to be "0px"')
      .toBe('0px');
    expect(overlayPaneEl.style.marginRight)
      .withContext('Expected margin-right to be "0px"')
      .toBe('0px');
    expect(overlayPaneEl.style.marginLeft).withContext('Expected margin-left  to be ""').toBe('');
  }));
});

@Directive({
  selector: 'dir-with-view-container',
  standalone: true,
})
class DirectiveWithViewContainer {
  viewContainerRef = inject(ViewContainerRef);
}

@Component({
  selector: 'arbitrary-component',
  template: `@if (childComponentExists()) {<dir-with-view-container></dir-with-view-container>}`,
  standalone: true,
  imports: [DirectiveWithViewContainer],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
class ComponentWithChildViewContainer {
  @ViewChild(DirectiveWithViewContainer) childWithViewContainer: DirectiveWithViewContainer;

  childComponentExists = signal(true);

  get childViewContainer() {
    return this.childWithViewContainer.viewContainerRef;
  }
}

@Component({
  selector: 'arbitrary-component-with-template-ref',
  template: `
    <ng-template let-data>
      Fries {{localValue}} {{data?.value}}
    </ng-template>
  `,
  standalone: true,
})
class ComponentWithTemplateRef {
  @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
  localValue: string;
}

/** Simple component for testing ComponentPortal. */
@Component({
  template: '<p>Burritos are on the way.</p>',
  standalone: true,
})
class BurritosNotification {
  snackBarRef = inject<MatSnackBarRef<BurritosNotification>>(MatSnackBarRef);
  data = inject(MAT_SNACK_BAR_DATA);
}

@Component({
  template: '',
  providers: [MatSnackBar],
  standalone: true,
})
class ComponentThatProvidesMatSnackBar {
  snackBar = inject(MatSnackBar);
}