inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2709] Replace the ADF accordion with material accordion (#3187)

Browse Source 
* [DW-569] Replace the ADF accordion with material accordion

* * Added  testcases for the recent changes.

* * Used angular materail mat-accordion
* Refactored accordion/group component

* * Refactored accordion group component.

* * Refactored accordion scss
This commit is contained in:
siva kumar
2018-04-21 04:37:07 +05:30
committed by Eugenio Romano
parent 5a255d27fd
commit 9fbfcfa96e
7 changed files with 114 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
lib/core/collapsable/accordion-group.component.spec.ts
View File

@@ -46,62 +46,68 @@ describe('AccordionGroupComponent', () => {
});
it('should be closed by default', async(() => {
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
fixture.whenStable().then(() => {
fixture.detectChanges();
let headerText = element.querySelector('#heading-text');
expect(headerText.innerText).toEqual('Fake Header');
let headerIcon = element.querySelector('#heading-icon .material-icons');
expect(headerIcon.innerText).toEqual('fake-icon');
let headerToggle = element.querySelector('#accordion-button .material-icons');
expect(headerToggle.innerText).toEqual('expand_more');
});
}));
it('should be open when click', async(() => {
it('should define mat-accordion ', async(() => {
component.isSelected = true;
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
fixture.detectChanges();
element.querySelector('#accordion-button').click();
fixture.whenStable().then(() => {
fixture.detectChanges();
let accordin = element.querySelector('mat-accordion');
let expansionPanel = element.querySelector('mat-expansion-panel');
let accordinHeader = element.querySelector('mat-expansion-panel-header');
let content = element.querySelector('#adf-expansion-panel-content-id').innerHTML;
expect(accordin).toBeDefined();
expect(expansionPanel).toBeDefined();
expect(accordinHeader).toBeDefined();
expect(content).toEqual('<a>Test</a>');
});
}));
it('should be display accordion title and icon', async(() => {
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
fixture.whenStable().then(() => {
fixture.detectChanges();
let headerText = element.querySelector('#heading-text');
let headerIcon = element.querySelector('#adf-expansion-panel-id .material-icons');
expect(headerText.innerText).toEqual('Fake Header');
let headerIcon = element.querySelector('#heading-icon .material-icons');
expect(headerIcon.innerText).toEqual('fake-icon');
let headerToggle = element.querySelector('#accordion-button .material-icons');
expect(headerToggle.innerText).toEqual('expand_less');
});
}));
it('should show expand icon by default', async(() => {
it('should be display only accordion title', async(() => {
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
component.headingIcon = '';
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
fixture.whenStable().then(() => {
fixture.detectChanges();
let headerIcon = element.querySelector('#accordion-button');
expect(headerIcon).toBeDefined();
});
}));
it('should hide expand icon', async(() => {
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
component.hasAccordionIcon = false;
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
fixture.whenStable().then(() => {
fixture.detectChanges();
let headerIcon = element.querySelector('#accordion-button');
let headerText = element.querySelector('#heading-text');
let headerIcon = element.querySelector('#adf-expansion-panel-id .material-icons');
expect(headerText.innerText).toEqual('Fake Header');
expect(headerIcon).toBeNull();
});
}));
it('should be display accordion title and content', async(() => {
component.isSelected = true;
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
let headerText = element.querySelector('#heading-text');
let headerIcon = element.querySelector('#heading-icon .material-icons');
let content = element.querySelector('#adf-expansion-panel-content-id').innerHTML;
expect(headerText.innerText).toEqual('Fake Header');
expect(headerIcon.innerText).toEqual('fake-icon');
expect(content).toEqual('<a>Test</a>');
});
}));
it('should emit an event when a heading clicked', async(() => {
component.heading = 'Fake Header';
fixture.detectChanges();