fix(expandable-section): Fixes an issue where the inital state set vi…

…a dom attribute for `disabled` and `expandable` is not applied correctly.

Fixes #1489
Fixes #1472

apps/dev/src/expandable-section/expandable-section-demo.component.html

@@ -1,4 +1,4 @@
-<dt-expandable-section>
+<dt-expandable-section expanded disabled>
   <dt-expandable-section-header>My header text</dt-expandable-section-header>
   <p>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy

jest.config.js

@@ -8,6 +8,7 @@ module.exports = {
   moduleFileExtensions: ['ts', 'js', 'html'],
   resolver: '@nrwl/jest/plugins/resolver',
   collectCoverage: true,
+  verbose: false,
   reporters: [
     'default',
     [

libs/barista-components/expandable-section/src/expandable-section.html

@@ -3,7 +3,7 @@
     [dtExpandablePanel]="expandablepanel"
     class="dt-expandable-section-header-trigger"
     [attr.aria-controls]="id"
-    [attr.aria-expanded]="expanded"
+    [attr.aria-expanded]="opened"
   >
     <div>
       <dt-icon
@@ -20,7 +20,9 @@
 
 <dt-expandable-panel
   #expandablepanel
-  [id]="[id]"
+  [id]="id"
+  [expanded]="opened"
+  [disabled]="disabled"
   class="dt-expandable-section-container"
   (expandChange)="expandChange.emit($event)"
 >

libs/barista-components/expandable-section/src/expandable-section.spec.ts

@@ -33,18 +33,18 @@ import { DtIconModule } from '@dynatrace/barista-components/icon';
 import { createComponent } from '@dynatrace/testing/browser';
 
 describe('DtExpandableSection', () => {
-  beforeEach(async(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
         HttpClientTestingModule,
         NoopAnimationsModule,
         DtIconModule.forRoot({ svgIconLocation: `{{name}}.svg` }),
         DtExpandableSectionModule,
       ],
-      declarations: [TestApp],
+      declarations: [TestApp, StaticAttrTestApp],
     });
     TestBed.compileComponents();
-  }));
+  });
 
   describe('dt-expandable-section', () => {
     let fixture: ComponentFixture<TestApp>;
@@ -103,12 +103,12 @@ describe('DtExpandableSection', () => {
       expect(expandableSectionInstance.expanded).toBe(false);
     });
 
-    // test expanded and disabled state
+    // test opened and disabled state
     it('should close when open and disabled', () => {
       expandableSectionInstance.open();
-      expect(expandableSectionInstance.expanded).toBe(true);
+      expect(expandableSectionInstance.opened).toBe(true);
       expandableSectionInstance.disabled = true;
-      expect(expandableSectionInstance.expanded).toBe(false);
+      expect(expandableSectionInstance.opened).toBe(false);
     });
 
     // check CSS class when expanded
@@ -231,6 +231,7 @@ describe('DtExpandableSection', () => {
     // check collapsed and expandChange outputs
     it('should fire collapsed and expandChange events on close', () => {
       expandableSectionInstance.expanded = true;
+      fixture.detectChanges();
       const collapsedSpy = jest.fn();
       const changedSpy = jest.fn();
       const instance = instanceDebugElement.componentInstance;
@@ -249,6 +250,28 @@ describe('DtExpandableSection', () => {
       changedSubscription.unsubscribe();
     });
   });
+
+  describe('dt-expandable-section static attributes', () => {
+    let fixture: ComponentFixture<StaticAttrTestApp>;
+    let instanceDebugElement: DebugElement;
+    let expandableSectionInstance: DtExpandableSection;
+
+    beforeEach(async(() => {
+      fixture = createComponent(StaticAttrTestApp);
+      instanceDebugElement = fixture.debugElement.query(
+        By.directive(DtExpandableSection),
+      );
+      expandableSectionInstance = instanceDebugElement.injector.get<
+        DtExpandableSection
+      >(DtExpandableSection);
+      fixture.detectChanges();
+    }));
+
+    it('should reflect the disabled and expandable attribute to the property', () => {
+      expect(expandableSectionInstance.expanded).toBe(true);
+      expect(expandableSectionInstance.disabled).toBe(true);
+    });
+  });
 });
 
 @Component({
@@ -263,3 +286,14 @@ describe('DtExpandableSection', () => {
 class TestApp {
   id: string | null;
 }
+
+@Component({
+  selector: 'dt-static-attr-test-app',
+  template: `
+    <dt-expandable-section disabled expanded>
+      <dt-expandable-section-header>Header</dt-expandable-section-header>
+      text
+    </dt-expandable-section>
+  `,
+})
+class StaticAttrTestApp {}

libs/barista-components/expandable-section/src/expandable-section.ts

@@ -22,14 +22,10 @@ import {
   Directive,
   EventEmitter,
   Input,
-  OnChanges,
   Output,
-  SimpleChanges,
-  ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
 import { CanDisable, HasId, mixinId } from '@dynatrace/barista-components/core';
-import { DtExpandablePanel } from '@dynatrace/barista-components/expandable-panel';
 import { filter } from 'rxjs/operators';
 
 @Directive({
@@ -56,7 +52,7 @@ export const _ExpandableSectionBase = mixinId(
   styleUrls: ['expandable-section.scss'],
   host: {
     class: 'dt-expandable-section',
-    '[class.dt-expandable-section-opened]': 'expanded',
+    '[class.dt-expandable-section-opened]': 'opened',
     '[class.dt-expandable-section-disabled]': 'disabled',
     '[attr.aria-disabled]': 'disabled',
   },
@@ -66,27 +62,31 @@ export const _ExpandableSectionBase = mixinId(
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DtExpandableSection extends _ExpandableSectionBase
-  implements CanDisable, HasId, OnChanges {
+  implements CanDisable, HasId {
   /** Whether the expandable section is expanded. */
   @Input()
   get expanded(): boolean {
-    return this._panel.expanded;
+    return this._expanded;
   }
   set expanded(value: boolean) {
-    this._panel.expanded = coerceBooleanProperty(value);
+    this._expanded = coerceBooleanProperty(value);
     this._changeDetectorRef.markForCheck();
   }
+  private _expanded = false;
 
   /** Whether the expandable section is disabled. */
   @Input()
   get disabled(): boolean {
-    return Boolean(this._panel?.disabled);
+    return this._disabled;
   }
   set disabled(value: boolean) {
-    if (this._panel) {
-      this._panel.disabled = coerceBooleanProperty(value);
-      this._changeDetectorRef.markForCheck();
-    }
+    this._disabled = coerceBooleanProperty(value);
+    this._changeDetectorRef.markForCheck();
+  }
+  private _disabled = false;
+
+  get opened(): boolean {
+    return !this.disabled && this._expanded;
   }
 
   /** Event emitted when the section's expandable state changes. */
@@ -102,39 +102,33 @@ export class DtExpandableSection extends _ExpandableSectionBase
     filter((v) => !v),
   );
 
-  @ViewChild(DtExpandablePanel, { static: true })
-  private _panel: DtExpandablePanel;
-
   constructor(private _changeDetectorRef: ChangeDetectorRef) {
     super();
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.disabled?.firstChange) {
-      this._panel.disabled = this.disabled;
-    }
-  }
-
   /**
    * Toggles the expanded state of the panel.
    */
   toggle(): void {
     if (!this.disabled) {
-      this._panel.toggle();
-      this._changeDetectorRef.markForCheck();
+      if (this._expanded) {
+        this.close();
+      } else {
+        this.open();
+      }
     }
   }
 
   /** Sets the expanded state of the panel to false. */
   close(): void {
-    this._panel.close();
+    this._expanded = false;
     this._changeDetectorRef.markForCheck();
   }
 
   /** Sets the expanded state of the panel to true. */
   open(): void {
     if (!this.disabled) {
-      this._panel.open();
+      this._expanded = true;
       this._changeDetectorRef.markForCheck();
     }
   }

tools/bazel_rules/jest/jest-runner.js

@@ -29,6 +29,9 @@ function updateJestConfig(configPath, suiteName, suitePath) {
     ],
   ];
 
+  // Ensure that jest prints out all console.logs
+  parsed.verbose = false;
+
   const updatedFileName = join(dir, `${name}-updated${ext}`);
   writeFileSync(updatedFileName, JSON.stringify(parsed, undefined, 2));