+
Collapse directive content
`;
@@ -14,12 +15,13 @@ const template = `
template,
})
class TestCollapseComponent {
+ @ViewChild('collapse') collapse: MdbCollapseDirective;
+
collapsed = true;
- onShown = () => {};
- onHidden = () => {};
}
describe('MDB Collapse', () => {
+ const ANIMATION_TIME = 355;
let fixture: ComponentFixture
;
let element: any;
let component: any;
@@ -42,28 +44,68 @@ describe('MDB Collapse', () => {
expect(collapse.classList.contains('show')).toBe(false);
});
- it('should have content expanded if collapsed input is set to false', () => {
- // const onShownSpy = jest.spyOn(component, 'onShown');
- // component.collapsed = false;
- // fixture.detectChanges();
- // onShownSpy.and.callFake(() => {
- // expect(collapse.classList.contains('show')).toBe(true);
- // });
- });
+ it('should be expanded if collapsed input is set to false', fakeAsync(() => {
+ component.collapsed = false;
+ fixture.detectChanges();
- it('should allow toggling component by clicking on another element', () => {
- // const onShownSpy = jest.spyOn(component, 'onShown');
- // const onHiddenSpy = jest.spyOn(component, 'onHidden');
- // const buttonEl = fixture.nativeElement.querySelector('#button');
- // buttonEl.click();
- // fixture.detectChanges();
- // onShownSpy.and.callFake(() => {
- // expect(collapse.classList.contains('show')).toBe(true);
- // });
- // buttonEl.click();
- // fixture.detectChanges();
- // onHiddenSpy.and.callFake(() => {
- // expect(collapse.classList.contains('show')).toBe(false);
- // });
- });
+ tick(ANIMATION_TIME);
+ flush();
+ fixture.detectChanges();
+
+ expect(collapse.classList).toContain('show');
+ }));
+
+ it('should allow toggling component by clicking on another element', fakeAsync(() => {
+ const button = fixture.nativeElement.querySelector('button');
+
+ expect(collapse.classList).not.toContain('show');
+
+ button.click();
+ fixture.detectChanges();
+
+ tick(ANIMATION_TIME);
+ flush();
+ fixture.detectChanges();
+
+ expect(collapse.classList).toContain('show');
+
+ button.click();
+ fixture.detectChanges();
+
+ tick(ANIMATION_TIME);
+ flush();
+ fixture.detectChanges();
+
+ expect(collapse.classList).not.toContain('show');
+ }));
+
+ it('should emit events on collapse and expand', fakeAsync(() => {
+ const button = fixture.nativeElement.querySelector('button');
+ const showSpy = jest.spyOn(component.collapse.collapseShow, 'emit');
+ const shownSpy = jest.spyOn(component.collapse.collapseShown, 'emit');
+ const hideSpy = jest.spyOn(component.collapse.collapseHide, 'emit');
+ const hiddenSpy = jest.spyOn(component.collapse.collapseHidden, 'emit');
+
+ button.click();
+ fixture.detectChanges();
+
+ expect(showSpy).toHaveBeenCalled();
+
+ tick(ANIMATION_TIME);
+ flush();
+ fixture.detectChanges();
+
+ expect(shownSpy).toHaveBeenCalled();
+
+ button.click();
+ fixture.detectChanges();
+
+ expect(hideSpy).toHaveBeenCalled();
+
+ tick(ANIMATION_TIME);
+ flush();
+ fixture.detectChanges();
+
+ expect(hiddenSpy).toHaveBeenCalled();
+ }));
});
diff --git a/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.spec.ts b/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.spec.ts
index 067c2de8..de5f362b 100644
--- a/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.spec.ts
+++ b/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.spec.ts
@@ -1,5 +1,5 @@
import { ComponentFixture, fakeAsync, flush, inject, TestBed } from '@angular/core/testing';
-import { Component, DebugElement, Directive } from '@angular/core';
+import { Component, DebugElement } from '@angular/core';
import { MdbDropdownModule } from './index';
import { MdbDropdownDirective } from './index';
import { By } from '@angular/platform-browser';
@@ -10,13 +10,12 @@ describe('MDB Dropdown', () => {
let fixture: ComponentFixture;
let element: any;
let component: TestDropdownComponent;
- let directive: any;
- let debugElement: DebugElement;
+ let directive: MdbDropdownDirective;
let overlayContainer: OverlayContainer;
let overlayContainerElement: HTMLElement;
- beforeEach(async () => {
- await TestBed.configureTestingModule({
+ beforeEach(() => {
+ TestBed.configureTestingModule({
imports: [MdbDropdownModule, NoopAnimationsModule],
declarations: [TestDropdownComponent],
teardown: { destroyAfterEach: false },
@@ -30,7 +29,9 @@ describe('MDB Dropdown', () => {
fixture = TestBed.createComponent(TestDropdownComponent);
component = fixture.componentInstance;
element = fixture.nativeElement;
- debugElement = fixture.debugElement;
+ directive = fixture.debugElement
+ .query(By.directive(MdbDropdownDirective))
+ .injector.get(MdbDropdownDirective);
fixture.detectChanges();
});
@@ -40,127 +41,92 @@ describe('MDB Dropdown', () => {
overlayContainer.ngOnDestroy();
}));
- describe('after init', () => {
- it('should create the component', () => {
- expect(component).toBeTruthy();
- });
-
+ describe('Opening and closing', () => {
it('should open and close dropdown on click', fakeAsync(() => {
- directive = fixture.debugElement
- .query(By.directive(MdbDropdownDirective))
- .injector.get(MdbDropdownDirective) as MdbDropdownDirective;
-
- const onOpen = jest.spyOn(directive, 'show');
- const onClose = jest.spyOn(directive, 'hide');
+ jest.spyOn(directive, 'show');
+ jest.spyOn(directive, 'hide');
- const buttonEl = debugElement.query(By.css('.dropdown-toggle')).nativeElement;
+ const buttonEl: HTMLButtonElement = element.querySelector('.dropdown-toggle');
- buttonEl.dispatchEvent(new Event('click'));
+ buttonEl.click();
fixture.detectChanges();
- flush();
expect(directive.show).toHaveBeenCalled();
expect(overlayContainerElement.textContent).toContain('Action');
- buttonEl.dispatchEvent(new Event('click'));
+ buttonEl.click();
fixture.detectChanges();
+
flush();
+ fixture.detectChanges();
expect(directive.hide).toHaveBeenCalled();
- expect(overlayContainerElement.textContent).toContain('');
+ expect(overlayContainerElement.textContent).toEqual('');
}));
- it('should don`t modify dropdown position', () => {
- directive = fixture.debugElement
- .query(By.directive(MdbDropdownDirective))
- .injector.get(MdbDropdownDirective) as MdbDropdownDirective;
-
- const buttonEl = debugElement.query(By.css('.dropdown-toggle')).nativeElement;
-
- buttonEl.dispatchEvent(new Event('click'));
-
- expect(directive._isDropUp).toBe(false);
- expect(directive._isDropStart).toBe(false);
- expect(directive._isDropEnd).toBe(false);
- expect(directive._isDropdownMenuEnd).toBe(false);
- expect(directive._xPosition).toBe('start');
- });
-
- it('should set dropup', () => {
- component.positionClass = 'dropup';
-
+ it('should close dropdown on outside click', fakeAsync(() => {
+ directive.show();
fixture.detectChanges();
- directive = fixture.debugElement
- .query(By.directive(MdbDropdownDirective))
- .injector.get(MdbDropdownDirective) as MdbDropdownDirective;
-
- const buttonEl = debugElement.query(By.css('.dropdown-toggle')).nativeElement;
-
- buttonEl.dispatchEvent(new Event('click'));
-
- expect(directive._isDropUp).toBe(true);
- });
-
- it('should set dropstart', () => {
- component.positionClass = 'dropstart';
+ document.body.click();
+ fixture.detectChanges();
+ flush();
fixture.detectChanges();
- directive = fixture.debugElement
- .query(By.directive(MdbDropdownDirective))
- .injector.get(MdbDropdownDirective) as MdbDropdownDirective;
+ expect(overlayContainerElement.textContent).toEqual('');
+ }));
- const buttonEl = debugElement.query(By.css('.dropdown-toggle')).nativeElement;
+ it('should not close dropdown on outside click if closeOnOutsideClick is set to false', fakeAsync(() => {
+ component.closeOnOutsideClick = false;
+ directive.show();
+ fixture.detectChanges();
- buttonEl.dispatchEvent(new Event('click'));
+ document.body.click();
+ fixture.detectChanges();
- expect(directive._isDropStart).toBe(true);
- });
+ flush();
+ fixture.detectChanges();
- it('should set dropend', () => {
- component.positionClass = 'dropend';
+ expect(overlayContainerElement.textContent).toContain('Action');
+ }));
+ it('should close dropdown on dropdown item click', fakeAsync(() => {
+ directive.show();
fixture.detectChanges();
- directive = fixture.debugElement
- .query(By.directive(MdbDropdownDirective))
- .injector.get(MdbDropdownDirective) as MdbDropdownDirective;
-
- const buttonEl = debugElement.query(By.css('.dropdown-toggle')).nativeElement;
+ const item: HTMLElement = document.querySelector('.dropdown-item');
- buttonEl.dispatchEvent(new Event('click'));
+ item.click();
+ fixture.detectChanges();
- expect(directive._isDropEnd).toBe(true);
- });
+ flush();
+ fixture.detectChanges();
- it('should set dropdownMenuEnd', () => {
- component.menuEndClass = 'dropdown-menu-end';
+ expect(overlayContainerElement.textContent).toEqual('');
+ }));
+ it('should not close dropdown on dropdown item click if closeOnItemClick is set to false', fakeAsync(() => {
+ component.closeOnItemClick = false;
+ directive.show();
fixture.detectChanges();
- directive = fixture.debugElement
- .query(By.directive(MdbDropdownDirective))
- .injector.get(MdbDropdownDirective) as MdbDropdownDirective;
+ const item: HTMLElement = document.querySelector('.dropdown-item');
- const buttonEl = debugElement.query(By.css('.dropdown-toggle')).nativeElement;
+ item.click();
+ fixture.detectChanges();
- buttonEl.dispatchEvent(new Event('click'));
+ flush();
+ fixture.detectChanges();
- expect(directive._isDropdownMenuEnd).toBe(true);
- expect(directive._xPosition).toBe('end');
- });
+ expect(overlayContainerElement.textContent).toContain('Action');
+ }));
});
describe('Keyboard navigation', () => {
- it('should correctly focus dropdown items when ArrowUp or ArrowDown key is used', fakeAsync(() => {
- directive = fixture.debugElement
- .query(By.directive(MdbDropdownDirective))
- .injector.get(MdbDropdownDirective) as MdbDropdownDirective;
-
+ it('should correctly focus dropdown items when ArrowUp or ArrowDown key is used', () => {
directive.show();
fixture.detectChanges();
- flush();
const menu = document.querySelector('.dropdown-menu');
const items = menu.querySelectorAll('.dropdown-item');
@@ -179,16 +145,11 @@ describe('MDB Dropdown', () => {
fixture.detectChanges();
expect(document.activeElement).toBe(items[0]);
- }));
-
- it('should focus last option if ArrowUp is used and no item is selected', fakeAsync(() => {
- directive = fixture.debugElement
- .query(By.directive(MdbDropdownDirective))
- .injector.get(MdbDropdownDirective) as MdbDropdownDirective;
+ });
+ it('should focus last option if ArrowUp is used and no item is selected', () => {
directive.show();
fixture.detectChanges();
- flush();
const menu = document.querySelector('.dropdown-menu');
const items = menu.querySelectorAll('.dropdown-item');
@@ -197,6 +158,33 @@ describe('MDB Dropdown', () => {
fixture.detectChanges();
expect(document.activeElement).toBe(items[items.length - 1]);
+ });
+
+ it('should close dropdown on ESC keyup', fakeAsync(() => {
+ directive.show();
+ fixture.detectChanges();
+
+ document.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' }));
+ fixture.detectChanges();
+
+ flush();
+ fixture.detectChanges();
+
+ expect(overlayContainerElement.textContent).toEqual('');
+ }));
+
+ it('should not close dropdown on ESC keyup if closeOnEsc is set to false', fakeAsync(() => {
+ component.closeOnEsc = false;
+ directive.show();
+ fixture.detectChanges();
+
+ document.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' }));
+ fixture.detectChanges();
+
+ flush();
+ fixture.detectChanges();
+
+ expect(overlayContainerElement.textContent).toContain('Action');
}));
});
});
@@ -204,14 +192,15 @@ describe('MDB Dropdown', () => {
@Component({
selector: 'mdb-dropdown-test',
template: `
-