feat(cdk): accordion item

src/cdk/accordion/accordion-item.spec.ts

@@ -0,0 +1,275 @@
+import { Component } from '@angular/core';
+import { async, TestBed, ComponentFixture } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { CdkAccordionModule, CdkAccordionItem } from './public-api';
+
+
+// tslint:disable:no-empty
+// tslint:disable:no-unbound-method
+describe('CdkAccordionItem', () => {
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                BrowserAnimationsModule,
+                CdkAccordionModule
+            ],
+            declarations: [
+                SingleItem,
+                ItemGroupWithoutAccordion,
+                ItemGroupWithAccordion
+            ]
+        });
+        TestBed.compileComponents();
+    }));
+
+    describe('single item', () => {
+        let fixture: ComponentFixture<SingleItem>;
+        let item: CdkAccordionItem;
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(SingleItem);
+            item = fixture.debugElement
+                .query(By.directive(CdkAccordionItem))
+                .injector.get<CdkAccordionItem>(CdkAccordionItem);
+        });
+
+        describe('that is not disabled', () => {
+            beforeEach(() => {
+                item.disabled = false;
+            });
+
+            it('should toggle its expanded state', () => {
+                expect(item.expanded).toBe(false);
+                item.toggle();
+                expect(item.expanded).toBe(true);
+                item.toggle();
+                expect(item.expanded).toBe(false);
+            });
+
+            it('should set its expanded state to expanded', () => {
+                item.expanded = false;
+                item.open();
+                expect(item.expanded).toBe(true);
+            });
+
+            it('should set its expanded state to closed', () => {
+                item.expanded = true;
+                item.close();
+                expect(item.expanded).toBe(false);
+            });
+
+            it('should emit a closed event', () => {
+                item.open();
+                fixture.detectChanges();
+                spyOn(item.closed, 'emit');
+                item.close();
+                fixture.detectChanges();
+                expect(item.closed.emit).toHaveBeenCalled();
+            });
+
+            it('should not emit a closed event when the item is closed already', () => {
+                expect(item.expanded).toBe(false);
+                spyOn(item.closed, 'emit');
+                item.close();
+                fixture.detectChanges();
+                expect(item.closed.emit).not.toHaveBeenCalled();
+            });
+
+            it('should emit an opened event', () => {
+                spyOn(item.opened, 'emit');
+                item.open();
+                fixture.detectChanges();
+                expect(item.opened.emit).toHaveBeenCalled();
+            });
+
+            it('should emit a destroyed event', () => {
+                spyOn(item.destroyed, 'emit');
+                item.ngOnDestroy();
+                fixture.detectChanges();
+                expect(item.destroyed.emit).toHaveBeenCalled();
+            });
+        });
+
+        describe('that is disabled', () => {
+            beforeEach(() => {
+                item.disabled = true;
+            });
+
+            it('should not toggle its expanded state', () => {
+                expect(item.expanded).toBe(false);
+                item.toggle();
+                expect(item.expanded).toBe(false);
+            });
+
+            it('should not set its expanded state to expanded', () => {
+                item.expanded = false;
+                item.open();
+                expect(item.expanded).toBe(false);
+            });
+
+            it('should not set its expanded state to closed', () => {
+                item.expanded = true;
+                item.close();
+                expect(item.expanded).toBe(true);
+            });
+
+            it('should not emit a closed event', () => {
+                spyOn(item.closed, 'emit');
+                item.close();
+                fixture.detectChanges();
+                expect(item.closed.emit).not.toHaveBeenCalled();
+            });
+
+            it('should not emit an opened event', () => {
+                spyOn(item.opened, 'emit');
+                item.open();
+                fixture.detectChanges();
+                expect(item.opened.emit).not.toHaveBeenCalled();
+            });
+
+            it('should emit a destroyed event', () => {
+                spyOn(item.destroyed, 'emit');
+                item.ngOnDestroy();
+                fixture.detectChanges();
+                expect(item.destroyed.emit).toHaveBeenCalled();
+            });
+        });
+
+        it('should emit to and complete the `destroyed` stream on destroy', () => {
+            const emitSpy = jasmine.createSpy('emit spy');
+            const completeSpy = jasmine.createSpy('complete spy');
+            const subscription = item.destroyed.subscribe(emitSpy, undefined, completeSpy);
+
+            fixture.detectChanges();
+            fixture.destroy();
+
+            expect(emitSpy).toHaveBeenCalled();
+            expect(completeSpy).toHaveBeenCalled();
+
+            subscription.unsubscribe();
+        });
+
+        it('should complete the `opened` stream on destroy', () => {
+            const completeSpy = jasmine.createSpy('complete spy');
+            const subscription = item.opened.subscribe(() => {
+            }, undefined, completeSpy);
+
+            fixture.detectChanges();
+            fixture.destroy();
+
+            expect(completeSpy).toHaveBeenCalled();
+
+            subscription.unsubscribe();
+        });
+
+        it('should complete the `closed` stream on destroy', () => {
+            const completeSpy = jasmine.createSpy('complete spy');
+            const subscription = item.closed.subscribe(() => {
+            }, undefined, completeSpy);
+
+            fixture.detectChanges();
+            fixture.destroy();
+
+            expect(completeSpy).toHaveBeenCalled();
+
+            subscription.unsubscribe();
+        });
+
+    });
+
+    describe('items without accordion', () => {
+        let fixture: ComponentFixture<SingleItem>;
+        let firstItem: CdkAccordionItem;
+        let secondItem: CdkAccordionItem;
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(ItemGroupWithoutAccordion);
+            [firstItem, secondItem] = fixture.debugElement
+                .queryAll(By.directive(CdkAccordionItem))
+                .map((el) => el.injector.get<CdkAccordionItem>(CdkAccordionItem));
+        });
+
+        it('should not change expanded state based on unrelated items', () => {
+            expect(firstItem.expanded).toBe(false);
+            expect(secondItem.expanded).toBe(false);
+            firstItem.open();
+            fixture.detectChanges();
+            expect(firstItem.expanded).toBe(true);
+            expect(secondItem.expanded).toBe(false);
+            secondItem.open();
+            fixture.detectChanges();
+            expect(firstItem.expanded).toBe(true);
+            expect(secondItem.expanded).toBe(true);
+        });
+
+        it('should not change expanded state for disabled items', () => {
+            firstItem.disabled = true;
+            expect(firstItem.expanded).toBe(false);
+            expect(secondItem.expanded).toBe(false);
+            firstItem.open();
+            fixture.detectChanges();
+            expect(firstItem.expanded).toBe(false);
+            expect(secondItem.expanded).toBe(false);
+            secondItem.open();
+            fixture.detectChanges();
+            expect(firstItem.expanded).toBe(false);
+            expect(secondItem.expanded).toBe(true);
+        });
+    });
+
+
+    describe('items in accordion', () => {
+        let fixture: ComponentFixture<SingleItem>;
+        let firstItem: CdkAccordionItem;
+        let secondItem: CdkAccordionItem;
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(ItemGroupWithAccordion);
+            [firstItem, secondItem] = fixture.debugElement
+                .queryAll(By.directive(CdkAccordionItem))
+                .map((el) => el.injector.get<CdkAccordionItem>(CdkAccordionItem));
+        });
+
+        it('should change expanded state based on related items', () => {
+            expect(firstItem.expanded).toBe(false);
+            expect(secondItem.expanded).toBe(false);
+            firstItem.open();
+            fixture.detectChanges();
+            expect(firstItem.expanded).toBe(true);
+            expect(secondItem.expanded).toBe(false);
+            secondItem.open();
+            fixture.detectChanges();
+            expect(firstItem.expanded).toBe(false);
+            expect(secondItem.expanded).toBe(true);
+        });
+    });
+});
+
+@Component({
+    template: `
+        <cdk-accordion-item #item1></cdk-accordion-item>`
+})
+class SingleItem {
+}
+
+@Component({
+    template: `
+        <cdk-accordion-item #item1></cdk-accordion-item>
+        <cdk-accordion-item #item2></cdk-accordion-item>
+    `
+})
+class ItemGroupWithoutAccordion {
+}
+
+@Component({
+    template: `
+        <cdk-accordion>
+            <cdk-accordion-item #item1></cdk-accordion-item>
+            <cdk-accordion-item #item2></cdk-accordion-item>
+        </cdk-accordion>
+    `
+})
+class ItemGroupWithAccordion {
+}