| /** |
| * Licensed to the Apache Software Foundation (ASF) under one or more |
| * contributor license agreements. See the NOTICE file distributed with |
| * this work for additional information regarding copyright ownership. |
| * The ASF licenses this file to You under the Apache License, Version 2.0 |
| * (the "License"); you may not use this file except in compliance with |
| * the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| import {DebugElement} from '@angular/core'; |
| import {async, ComponentFixture, TestBed} from '@angular/core/testing'; |
| import {By} from '@angular/platform-browser'; |
| import {TranslationModules} from '@app/test-config.spec'; |
| import {HttpClientService} from '@app/services/http-client.service'; |
| |
| import {CollapsiblePanelComponent} from './collapsible-panel.component'; |
| |
| describe('CollapsiblePanelComponent', () => { |
| let component: CollapsiblePanelComponent; |
| let fixture: ComponentFixture<CollapsiblePanelComponent>; |
| let de: DebugElement; |
| let el: HTMLElement; |
| |
| beforeEach(async(() => { |
| const httpClient = { |
| get: () => { |
| return { |
| subscribe: () => { |
| } |
| } |
| } |
| }; |
| TestBed.configureTestingModule({ |
| declarations: [CollapsiblePanelComponent], |
| imports: TranslationModules, |
| providers: [ |
| { |
| provide: HttpClientService, |
| useValue: httpClient |
| } |
| ] |
| }) |
| .compileComponents(); |
| })); |
| |
| beforeEach(() => { |
| fixture = TestBed.createComponent(CollapsiblePanelComponent); |
| component = fixture.componentInstance; |
| fixture.detectChanges(); |
| de = fixture.debugElement.query(By.css('div.panel')); |
| el = de.nativeElement; |
| }); |
| |
| it('should create component', () => { |
| expect(component).toBeTruthy(); |
| }); |
| |
| it('should call toggleCollapsed', () => { |
| let mockEvent: MouseEvent = document.createEvent('MouseEvent'); |
| mockEvent.initEvent('click', true, true); |
| spyOn(component,'toggleCollapsed'); |
| component.handleCollapseBtnClick(mockEvent); |
| expect(component.toggleCollapsed).toHaveBeenCalled(); |
| }); |
| |
| it('should prevent default action on event after toggle button click',() => { |
| let mockEvent: MouseEvent = document.createEvent('MouseEvent'); |
| mockEvent.initEvent('click', true, true); |
| spyOn(mockEvent,'preventDefault'); |
| component.handleCollapseBtnClick(mockEvent); |
| expect(mockEvent.preventDefault).toHaveBeenCalled(); |
| }); |
| |
| it('should negate the isCollapsed property', () => { |
| let valueBefore = component.isCollapsed; |
| component.toggleCollapsed(); |
| fixture.detectChanges(); |
| expect(component.isCollapsed).toEqual(!valueBefore); |
| }); |
| |
| it('should add `panel-collapsed` css class to the element when the isCollapsed is true', () => { |
| component.isCollapsed = true; |
| fixture.detectChanges(); |
| expect(el.className).toContain('panel-collapsed'); |
| }); |
| |
| it('should not have `panel-collapsed` css class on the element when the isCollapsed is false', () => { |
| component.isCollapsed = false; |
| fixture.detectChanges(); |
| expect(el.className).not.toContain('panel-collapsed'); |
| }); |
| |
| it('should display the openTitle if presented and the isCollapsed property is false', () => { |
| let title = 'Open title'; |
| let headingEl = el.querySelector('.panel-heading'); |
| component.openTitle = title; |
| component.isCollapsed = false; |
| fixture.detectChanges(); |
| expect(headingEl.textContent).toContain(title); |
| }); |
| |
| it('should display the collapsedTitle if it presented and the isCollapsed property is true', () => { |
| let title = 'Collapsed title'; |
| let headingEl = el.querySelector('.panel-heading'); |
| component.collapsedTitle = title; |
| component.isCollapsed = true; |
| fixture.detectChanges(); |
| expect(headingEl.textContent).toContain(title); |
| }); |
| |
| it('should display the title if openTitle is not presented and the isCollapsed property is false', () => { |
| let title = 'Title'; |
| let headingEl = el.querySelector('.panel-heading'); |
| component.openTitle = ''; |
| component.commonTitle = title; |
| component.isCollapsed = false; |
| fixture.detectChanges(); |
| expect(headingEl.textContent).toContain(title); |
| }); |
| |
| it('should display the title if collapsedTitle is not presented and the isCollapsed property is true', () => { |
| let title = 'Title'; |
| let headingEl = el.querySelector('.panel-heading'); |
| component.collapsedTitle = ''; |
| component.commonTitle = title; |
| component.isCollapsed = true; |
| fixture.detectChanges(); |
| expect(headingEl.textContent).toContain(title); |
| }); |
| |
| }); |