mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
ADF-2974] New Buttons Menu component version (#3429)
* [ADF-2974] Buttons injected from parent html component * [ADF-2974] New version of buttons menu component * [ADF-2974] Updated unit tests * [ADF-2974] Updated documentation * [ADF-2974] Removed unused variable * [ADF-2974] Fixed failing test at analytics report parameters * [ADF-2974] Removed fdescribe * [ADF-2974] Moved mock inside testing file for buttons menu component
This commit is contained in:
committed by
Eugenio Romano
parent
1838818295
commit
3759a7967c
@@ -16,76 +16,125 @@
|
||||
*/
|
||||
|
||||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { ButtonsMenuComponent } from './buttons-menu.component';
|
||||
import { MenuButton } from './menu-button.model';
|
||||
import { MaterialModule } from '../material.module';
|
||||
import { CoreTestingModule } from '../testing/core.testing.module';
|
||||
import { setupTestBed } from '../testing/setupTestBed';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-custom-container',
|
||||
template: `
|
||||
<adf-buttons-action-menu>
|
||||
<button mat-menu-item (click)="assignValue()">
|
||||
<mat-icon>settings</mat-icon><span> Button </span>
|
||||
</button>
|
||||
</adf-buttons-action-menu>
|
||||
`
|
||||
})
|
||||
export class CustomContainerComponent {
|
||||
|
||||
value: number;
|
||||
|
||||
assignValue() {
|
||||
this.value = 1;
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'adf-custom-empty-container',
|
||||
template: `
|
||||
<adf-buttons-action-menu>
|
||||
</adf-buttons-action-menu>
|
||||
`
|
||||
})
|
||||
export class CustomEmptyContainerComponent {
|
||||
}
|
||||
|
||||
describe('ButtonsMenuComponent', () => {
|
||||
|
||||
let fixture;
|
||||
let buttonsMenuComponent: ButtonsMenuComponent;
|
||||
let element: HTMLElement;
|
||||
describe('When Buttons are injected', () => {
|
||||
|
||||
setupTestBed({
|
||||
imports: [
|
||||
CoreTestingModule,
|
||||
MaterialModule
|
||||
]
|
||||
});
|
||||
let fixture;
|
||||
let component: CustomContainerComponent;
|
||||
let element: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ButtonsMenuComponent);
|
||||
element = fixture.nativeElement;
|
||||
buttonsMenuComponent = <ButtonsMenuComponent> fixture.debugElement.componentInstance;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.destroy();
|
||||
TestBed.resetTestingModule();
|
||||
});
|
||||
|
||||
it('should hide buttons menu div if buttons input is empty', async(() => {
|
||||
buttonsMenuComponent.buttons = [];
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const buttonsMenuElement = element.querySelector('#adf-buttons-menu');
|
||||
expect(buttonsMenuElement).toBeNull();
|
||||
setupTestBed({
|
||||
imports: [
|
||||
CoreTestingModule,
|
||||
MaterialModule
|
||||
],
|
||||
declarations: [
|
||||
CustomContainerComponent
|
||||
],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
});
|
||||
}));
|
||||
|
||||
it('should render buttons menu when there is at least one button declared in the buttons array', async(() => {
|
||||
const button = new MenuButton({
|
||||
label: 'button',
|
||||
icon: 'button',
|
||||
id: 'clickMe'
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CustomContainerComponent);
|
||||
element = fixture.debugElement.nativeElement;
|
||||
component = fixture.componentInstance;
|
||||
});
|
||||
buttonsMenuComponent.buttons = [button];
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const buttonsMenuElement = element.querySelector('#adf-buttons-menu');
|
||||
expect(buttonsMenuElement).not.toBeNull();
|
||||
expect(buttonsMenuElement).toBeDefined();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should call the handler function when button is clicked', async(() => {
|
||||
const button = new MenuButton({
|
||||
label: 'button',
|
||||
icon: 'button',
|
||||
id: 'clickMe'
|
||||
afterEach(() => {
|
||||
fixture.destroy();
|
||||
TestBed.resetTestingModule();
|
||||
});
|
||||
button.handler = jasmine.createSpy('handler');
|
||||
buttonsMenuComponent.buttons = [button];
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const buttonsMenuElement: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#clickMe');
|
||||
expect(buttonsMenuElement).not.toBeNull();
|
||||
expect(buttonsMenuElement).toBeDefined();
|
||||
buttonsMenuElement.click();
|
||||
|
||||
it('should render buttons menu when at least one button is declared', async(() => {
|
||||
fixture.detectChanges();
|
||||
expect(button.handler).toHaveBeenCalled();
|
||||
fixture.whenStable().then(() => {
|
||||
const buttonsMenuElement = element.querySelector('#adf-buttons-menu');
|
||||
expect(buttonsMenuElement).toBeDefined();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should trigger event when a specific button is clicked', async(() => {
|
||||
expect(component.value).toBeUndefined();
|
||||
let button = element.querySelector('button');
|
||||
button.click();
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
expect(component.value).toBe(1);
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
describe('When no buttons are injected', () => {
|
||||
let fixture;
|
||||
let element: HTMLElement;
|
||||
|
||||
setupTestBed({
|
||||
imports: [
|
||||
CoreTestingModule,
|
||||
MaterialModule
|
||||
],
|
||||
declarations: [
|
||||
CustomEmptyContainerComponent
|
||||
],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
});
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CustomEmptyContainerComponent);
|
||||
element = fixture.nativeElement;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.destroy();
|
||||
TestBed.resetTestingModule();
|
||||
});
|
||||
|
||||
it('should hide buttons menu if buttons input is empty', async(() => {
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const buttonsMenuElement = element.querySelector('#adf-buttons-menu');
|
||||
expect(buttonsMenuElement).toBeNull();
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
});
|
||||
|
Reference in New Issue
Block a user