1/*
2 * Copyright (C) 2024 The Android Open Source Project
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 *      http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17import {ComponentFixture, TestBed} from '@angular/core/testing';
18import {MatButtonModule} from '@angular/material/button';
19import {MatIconModule} from '@angular/material/icon';
20import {assertDefined} from 'common/assert_utils';
21import {CollapsibleSections} from 'viewers/common/collapsible_sections';
22import {CollapsibleSectionType} from 'viewers/common/collapsible_section_type';
23import {CollapsedSectionsComponent} from './collapsed_sections_component';
24
25describe('CollapsedSectionsComponent', () => {
26  let fixture: ComponentFixture<CollapsedSectionsComponent>;
27  let component: CollapsedSectionsComponent;
28  let htmlElement: HTMLElement;
29
30  beforeEach(async () => {
31    await TestBed.configureTestingModule({
32      imports: [MatButtonModule, MatIconModule],
33      declarations: [CollapsedSectionsComponent],
34    }).compileComponents();
35    fixture = TestBed.createComponent(CollapsedSectionsComponent);
36    component = fixture.componentInstance;
37    htmlElement = fixture.nativeElement;
38    component.sections = new CollapsibleSections([
39      {
40        type: CollapsibleSectionType.RECTS,
41        label: 'rects',
42        isCollapsed: false,
43      },
44      {
45        type: CollapsibleSectionType.HIERARCHY,
46        label: 'hierarchy',
47        isCollapsed: true,
48      },
49      {
50        type: CollapsibleSectionType.PROPERTIES,
51        label: 'properties',
52        isCollapsed: false,
53      },
54    ]);
55    fixture.detectChanges();
56  });
57
58  it('can be created', () => {
59    expect(component).toBeTruthy();
60  });
61
62  it('displays only collapsed sections', () => {
63    let sections = htmlElement.querySelectorAll('.collapsed-section');
64    expect(sections.length).toEqual(1);
65    expect(sections.item(0).textContent).toContain('HIERARCHY');
66    assertDefined(sections.item(0).querySelector('button'));
67
68    assertDefined(component.sections).onCollapseStateChange(
69      CollapsibleSectionType.RECTS,
70      true,
71    );
72    fixture.detectChanges();
73    sections = htmlElement.querySelectorAll('.collapsed-section');
74    expect(sections.length).toEqual(2);
75    expect(sections.item(0).textContent).toContain('RECTS');
76    assertDefined(sections.item(0).querySelector('button'));
77    expect(sections.item(1).textContent).toContain('HIERARCHY');
78    assertDefined(sections.item(1).querySelector('button'));
79  });
80
81  it('emits sectionChange event', () => {
82    const spy = spyOn(component.sectionChange, 'emit');
83    const expandButton = assertDefined(
84      htmlElement.querySelector('.collapsed-section button'),
85    ) as HTMLElement;
86    expandButton.click();
87    fixture.detectChanges();
88    expect(spy).toHaveBeenCalledOnceWith(CollapsibleSectionType.HIERARCHY);
89  });
90});
91