From 5e7dffbe73fceda6b89a08ca08daaccd514266df Mon Sep 17 00:00:00 2001
From: ColinJolivet <colin.jvt@gmail.com>
Date: Tue, 22 Oct 2024 11:23:45 +0200
Subject: [PATCH] refactor(docs-infra): remove expand button in example viewer
 if there is no hidden lines

Remove the expand button of an example viewer if there is no hidden lines in it, in order not to confuse people
---
 .../docs-viewer/docs-viewer.component.spec.ts |  6 +--
 .../example-viewer.component.html             |  2 +-
 .../example-viewer.component.spec.ts          | 49 +++++++++++++----
 .../example-viewer.component.ts               | 54 ++++++++++++-------
 4 files changed, 76 insertions(+), 35 deletions(-)

diff --git a/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.spec.ts b/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.spec.ts
index 578db765db37..1b0800187732 100644
--- a/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.spec.ts
+++ b/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);
diff --git a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html
index be364bf503e2..c9fc250850b3 100644
--- a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html
+++ b/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()"
diff --git a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.spec.ts b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.spec.ts
index d0656feb829d..8f2681498ffc 100644
--- a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.spec.ts
+++ b/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 () => {
diff --git a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts
index 0055363b1e48..ffeccdd9a64c 100644
--- a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts
+++ b/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}`,
+        ),
+      )
+    );
+  }
 }