refactor(docs-infra): remove expand button when there is no hidden lines

adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.spec.ts

@@ -112,7 +112,7 @@ describe('DocViewer', () => {
     expect(exampleViewer.componentInstance.view()).toBe(CodeExampleViewMode.SNIPPET);
   });
 
-  it('should display example viewer in multi file mode when user clicks expand', async () => {
+  it('should display example viewer in multi file mode when provided example is multi file snippet', async () => {
     const fixture = TestBed.createComponent(DocViewer);
     fixture.componentRef.setInput(
       'docContent',
@@ -122,10 +122,6 @@ describe('DocViewer', () => {
     await fixture.whenStable();
 
     const exampleViewer = fixture.debugElement.query(By.directive(ExampleViewer));
-    const expandButton = fixture.debugElement.query(
-      By.css('button[aria-label="Expand code example"]'),
-    );
-    expandButton.nativeElement.click();
 
     expect(exampleViewer).not.toBeNull();
     expect(exampleViewer.componentInstance.view()).toBe(CodeExampleViewMode.MULTI_FILE);

adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html

@@ -41,7 +41,7 @@
         </i>
       </button>
       <ng-container *ngTemplateOutlet="openCodeInExternalProvider" />
-      @if (expandable()) {
+      @if (displayExpandButton()) {
         <button
           type="button"
           (click)="toggleExampleVisibility()"

adev/shared-docs/components/viewers/example-viewer/example-viewer.component.spec.ts

@@ -99,26 +99,57 @@ describe('ExampleViewer', () => {
     expect(component.tabs()![2].name).toBe('another-example.ts');
   });
 
-  it('should expandable be false when none of the example files have defined visibleLinesRange ', waitForAsync(async () => {
+  it('should expand button not appear when there is no hidden line', waitForAsync(async () => {
     component.metadata = getMetadata();
     await component.renderExample();
-    expect(component.expandable()).toBeFalse();
+    const button = fixture.debugElement.query(By.css('button[aria-label="Expand code example"]'));
+    expect(button).toBeNull();
   }));
 
-  it('should expandable be true when at least one example file has defined visibleLinesRange ', waitForAsync(async () => {
+  it('should have line with hidden line class when expand button is present', waitForAsync(async  () => {
+    const expectedCodeSnippetContent =
+    'typescript code<br/>' + '<div class="line">hidden line</div>';
+
     component.metadata = getMetadata({
       files: [
-        {name: 'example.ts', content: 'typescript file'},
         {
-          name: 'example.html',
-          content: 'html file',
-          visibleLinesRange: '[1, 2]',
+          name: 'example.ts',
+          content: `<pre><code>${expectedCodeSnippetContent}</code></pre>`,
+          visibleLinesRange: '[1]',
+        },
+      ],
+    });
+
+    await component.renderExample();
+    fixture.detectChanges();
+
+    const hiddenLine = fixture.debugElement.query(By.css('div[class="line hidden"]'));
+    expect(hiddenLine).toBeTruthy();
+  }))
+
+  it('should have no more line with hidden line class when expand button is clicked', waitForAsync(async () => {
+    const expectedCodeSnippetContent =
+    'typescript code<br/>' + '<div class="line">hidden line</div>';
+
+    component.metadata = getMetadata({
+      files: [
+        {
+          name: 'example.ts',
+          content: `<pre><code>${expectedCodeSnippetContent}</code></pre>`,
+          visibleLinesRange: '[1]',
         },
-        {name: 'another-example.ts', content: 'css file'},
       ],
     });
+
     await component.renderExample();
-    expect(component.expandable()).toBeTrue();
+    fixture.detectChanges();
+
+    const expandButton = fixture.debugElement.query(By.css('button[aria-label="Expand code example"]'));
+    expandButton.nativeElement.click();
+    fixture.detectChanges();
+
+    const hiddenLine = fixture.debugElement.query(By.css('div[class="line hidden"]'));
+    expect(hiddenLine).toBeNull();
   }));
 
   it('should set exampleComponent when metadata contains path and preview is true', waitForAsync(async () => {

adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts

@@ -8,17 +8,17 @@
 
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
+  computed,
   DestroyRef,
+  ElementRef,
+  forwardRef,
+  inject,
   Input,
+  signal,
   Type,
-  computed,
-  inject,
-  ChangeDetectorRef,
   ViewChild,
-  signal,
-  ElementRef,
-  forwardRef,
 } from '@angular/core';
 import {CommonModule, DOCUMENT} from '@angular/common';
 import {MatTabGroup, MatTabsModule} from '@angular/material/tabs';
@@ -75,6 +75,7 @@ export class ExampleViewer {
   CodeExampleViewMode = CodeExampleViewMode;
   exampleComponent?: Type<unknown>;
 
+  displayExpandButton = signal<boolean>(false);
   expanded = signal<boolean>(false);
   exampleMetadata = signal<ExampleMetadata | null>(null);
   snippetCode = signal<Snippet | undefined>(undefined);
@@ -116,6 +117,11 @@ export class ExampleViewer {
     this.matTabGroup?.realignInkBar();
 
     this.listenToMatTabIndexChange();
+
+    const lines = this.getHiddenCodeLines();
+    const lineNumbers = this.getHiddenCodeLineNumbers();
+
+    this.displayExpandButton.set(lines.length > 0 || lineNumbers.length > 0);
   }
 
   toggleExampleVisibility(): void {
@@ -158,21 +164,9 @@ export class ExampleViewer {
   }
 
   private handleExpandedStateForCodeBlock(): void {
-    const lines = <HTMLDivElement[]>(
-      Array.from(
-        this.elementRef.nativeElement.querySelectorAll(
-          `.${CODE_LINE_CLASS_NAME}.${HIDDEN_CLASS_NAME}`,
-        ),
-      )
-    );
+    const lines = this.getHiddenCodeLines();
 
-    const lineNumbers = <HTMLSpanElement[]>(
-      Array.from(
-        this.elementRef.nativeElement.querySelectorAll(
-          `.${CODE_LINE_NUMBER_CLASS_NAME}.${HIDDEN_CLASS_NAME}`,
-        ),
-      )
-    );
+    const lineNumbers = this.getHiddenCodeLineNumbers();
 
     const gapLines = <HTMLDivElement[]>(
       Array.from(
@@ -240,4 +234,24 @@ export class ExampleViewer {
       element.parentNode?.insertBefore(separator, element);
     }
   }
+
+  private getHiddenCodeLines(): HTMLDivElement[] {
+    return <HTMLDivElement[]>(
+      Array.from(
+        this.elementRef.nativeElement.querySelectorAll(
+          `.${CODE_LINE_CLASS_NAME}.${HIDDEN_CLASS_NAME}`,
+        ),
+      )
+    );
+  }
+
+  private getHiddenCodeLineNumbers(): HTMLSpanElement[] {
+    return <HTMLSpanElement[]>(
+      Array.from(
+        this.elementRef.nativeElement.querySelectorAll(
+          `.${CODE_LINE_NUMBER_CLASS_NAME}.${HIDDEN_CLASS_NAME}`,
+        ),
+      )
+    );
+  }
 }