From 7860c71401dc254566d298222f3e857aa1e2e852 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?W=C3=A9rmeson=20Lopes?=
 <138120453+wermeson-lopes-brisa@users.noreply.github.com>
Date: Tue, 3 Oct 2023 11:40:54 -0300
Subject: [PATCH] feat: add no content text on indicator component (#854)

* feat: add no content text on indicator component

* feat: suggested code refactoring applied

* feat: remove expendable function

* feat: story for this task

---------

Co-authored-by: Iury Nogueira <iunog@hotmail.com>
---
 .../lib/indicator/indicator.component.html    | 21 ++++++++--
 .../lib/indicator/indicator.component.scss    |  4 ++
 .../lib/indicator/indicator.component.spec.ts | 39 +++++++++++++------
 .../src/lib/indicator/indicator.component.ts  |  4 +-
 .../ion/src/lib/indicator/indicator.module.ts | 10 +++--
 stories/Indicator.stories.ts                  | 13 +++++--
 6 files changed, 67 insertions(+), 24 deletions(-)

diff --git a/projects/ion/src/lib/indicator/indicator.component.html b/projects/ion/src/lib/indicator/indicator.component.html
index 1b0edadb4..a4e11dd3a 100644
--- a/projects/ion/src/lib/indicator/indicator.component.html
+++ b/projects/ion/src/lib/indicator/indicator.component.html
@@ -39,9 +39,24 @@ <h1 data-testid="ion-indicator-title">{{ title }}</h1>
           color="primary"
         ></ion-spinner>
       </div>
-      <header *ngIf="!loading && !error">
-        <h4 data-testid="ion-indicator-value">{{ value }}</h4>
-        <p data-testid="ion-indicator-second-value">{{ secondValue }}</p>
+      <header
+        *ngIf="!loading && !error"
+        [class.no-data]="value === null || value === undefined || value === ''"
+      >
+        <ng-container
+          *ngIf="!(value === null || value === undefined || value === '')"
+        >
+          <h4 data-testid="ion-indicator-value">{{ value }}</h4>
+          <p data-testid="ion-indicator-second-value">{{ secondValue }}</p>
+        </ng-container>
+        <ng-container
+          *ngIf="value === null || value === undefined || value === ''"
+        >
+          <ion-no-data
+            iconType="exclamation-rounded"
+            label="Sem dados"
+          ></ion-no-data>
+        </ng-container>
       </header>
       <footer
         data-testid="ion-indicator-footer"
diff --git a/projects/ion/src/lib/indicator/indicator.component.scss b/projects/ion/src/lib/indicator/indicator.component.scss
index 60587a4df..16ce03614 100644
--- a/projects/ion/src/lib/indicator/indicator.component.scss
+++ b/projects/ion/src/lib/indicator/indicator.component.scss
@@ -40,6 +40,10 @@
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
 
+    &.no-data {
+      justify-content: center !important;
+    }
+
     @include icon-style();
 
     h1 {
diff --git a/projects/ion/src/lib/indicator/indicator.component.spec.ts b/projects/ion/src/lib/indicator/indicator.component.spec.ts
index 3492ec216..b28d47b21 100644
--- a/projects/ion/src/lib/indicator/indicator.component.spec.ts
+++ b/projects/ion/src/lib/indicator/indicator.component.spec.ts
@@ -1,29 +1,30 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import {
-  render,
   RenderResult,
-  screen,
   fireEvent,
+  render,
+  screen,
 } from '@testing-library/angular';
+import { IonButtonModule } from '../button/button.module';
 import { IonIndicatorProps } from '../core/types';
+import { IonIconModule } from '../icon/icon.module';
 import { IonModalComponent } from '../modal/component/modal.component';
+import { IonNoDataModule } from '../no-data/no-data.module';
+import { IonPopoverModule } from '../popover/popover.module';
+import { IonSharedModule } from '../shared.module';
+import { IonSkeletonModule } from '../skeleton/skeleton.module';
+import { IonSpinnerModule } from '../spinner/spinner.module';
+import { IonTooltipModule } from '../tooltip/tooltip.module';
 import { BodyMockComponent } from './../card/mock/body-mock.component';
 import { IonIndicatorComponent } from './indicator.component';
+import { IonIndicatorModule } from './indicator.module';
 import {
   buttonEmitterConfig,
   buttonModalConfig,
   buttonRedirectConfig,
 } from './mocks/indicator-button-config';
-import { IonButtonModule } from '../button/button.module';
-import { IonTooltipModule } from '../tooltip/tooltip.module';
-import { IonIconModule } from '../icon/icon.module';
-import { IonSkeletonModule } from '../skeleton/skeleton.module';
-import { IonSpinnerModule } from '../spinner/spinner.module';
-import { IonPopoverModule } from '../popover/popover.module';
 import { IndicatorPopoverComponent } from './mocks/indicator-popover.component';
-import { IonSharedModule } from '../shared.module';
-import { IonIndicatorModule } from './indicator.module';
 
 @NgModule({
   entryComponents: [IonModalComponent, BodyMockComponent],
@@ -43,6 +44,7 @@ const sut = async (
       IonSkeletonModule,
       IonSpinnerModule,
       IonPopoverModule,
+      IonNoDataModule,
     ],
     declarations: [BodyMockComponent, IonIndicatorComponent, IonModalComponent],
     componentProperties: props,
@@ -77,6 +79,7 @@ const elements = {
   preview: 'ion-indicator-preview',
   spinner: 'ion-indicator-spinner',
   error: 'ion-indicator-error',
+  noData: 'ion-no-data-icon',
 };
 
 const getElementByTestId = (key: keyof typeof elements): HTMLElement =>
@@ -88,8 +91,8 @@ describe('IonIndicatorComponent', () => {
     const defaultTitle = 'Ion Indicator';
     expect(screen.getByTestId('ion-indicator')).toBeInTheDocument();
     expect(getElementByTestId('title').textContent).toBe(defaultTitle);
-    expect(getElementByTestId('value').textContent).toBeFalsy();
-    expect(getElementByTestId('secondValue').textContent).toBeFalsy();
+    expect(screen.queryByTestId('ion-indicator-value')).toBeFalsy();
+    expect(screen.queryByTestId('ion-indicator-second-value')).toBeFalsy();
     expect(getElementByTestId('tooltip')).not.toBeInTheDocument();
     expect(getElementByTestId('footer')).not.toBeInTheDocument();
   });
@@ -226,6 +229,18 @@ describe('IonIndicatorComponent', () => {
     });
     expect(getElementByTestId('error')).toBeInTheDocument();
   });
+
+  const notValidValues = [null, undefined, ''];
+
+  it.each(notValidValues)(
+    'Should render no value msg when value is %s',
+    async (notValidValue) => {
+      await sut({
+        value: notValidValue,
+      });
+      expect(getElementByTestId('noData')).toBeInTheDocument();
+    }
+  );
 });
 
 describe('IonIndicatorComponent with popover button', () => {
diff --git a/projects/ion/src/lib/indicator/indicator.component.ts b/projects/ion/src/lib/indicator/indicator.component.ts
index a0d3f0a4e..84efea48a 100644
--- a/projects/ion/src/lib/indicator/indicator.component.ts
+++ b/projects/ion/src/lib/indicator/indicator.component.ts
@@ -6,12 +6,12 @@ import {
   SecurityContext,
 } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
-import { IonModalResponse } from '../modal/models/modal.interface';
-import { IonModalService } from './../modal/modal.service';
 import {
   IonIndicatorButtonConfiguration,
   IonIndicatorButtonType,
 } from '../core/types/indicator';
+import { IonModalResponse } from '../modal/models/modal.interface';
+import { IonModalService } from './../modal/modal.service';
 
 @Component({
   selector: 'ion-indicator',
diff --git a/projects/ion/src/lib/indicator/indicator.module.ts b/projects/ion/src/lib/indicator/indicator.module.ts
index 4e3337aed..7af51d277 100644
--- a/projects/ion/src/lib/indicator/indicator.module.ts
+++ b/projects/ion/src/lib/indicator/indicator.module.ts
@@ -1,13 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { IonIndicatorComponent } from './indicator.component';
 import { IonButtonModule } from '../button/button.module';
-import { IonTooltipModule } from '../tooltip/tooltip.module';
-import { IonModalModule } from '../modal/modal.module';
 import { IonIconModule } from '../icon/icon.module';
+import { IonModalModule } from '../modal/modal.module';
+import { IonNoDataModule } from '../no-data/no-data.module';
+import { IonPopoverModule } from '../popover/popover.module';
 import { IonSkeletonModule } from '../skeleton/skeleton.module';
 import { IonSpinnerModule } from '../spinner/spinner.module';
-import { IonPopoverModule } from '../popover/popover.module';
+import { IonTooltipModule } from '../tooltip/tooltip.module';
+import { IonIndicatorComponent } from './indicator.component';
 
 @NgModule({
   declarations: [IonIndicatorComponent],
@@ -20,6 +21,7 @@ import { IonPopoverModule } from '../popover/popover.module';
     IonSkeletonModule,
     IonSpinnerModule,
     IonPopoverModule,
+    IonNoDataModule,
   ],
   exports: [IonIndicatorComponent],
 })
diff --git a/stories/Indicator.stories.ts b/stories/Indicator.stories.ts
index 0e0fefd8f..5f76de8ac 100644
--- a/stories/Indicator.stories.ts
+++ b/stories/Indicator.stories.ts
@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { Meta, Story } from '@storybook/angular/types-6-0';
-import { BodyMockComponent } from './../projects/ion/src/lib/card/mock/body-mock.component';
-import { IonIndicatorComponent } from './../projects/ion/src/lib/indicator/indicator.component';
-import { IonIndicatorModule } from './../projects/ion/src/lib/indicator/indicator.module';
 import {
   buttonEmitterConfig,
   buttonModalConfig,
   buttonRedirectConfig,
 } from '../projects/ion/src/lib/indicator/mocks/indicator-button-config';
+import { BodyMockComponent } from './../projects/ion/src/lib/card/mock/body-mock.component';
+import { IonIndicatorComponent } from './../projects/ion/src/lib/indicator/indicator.component';
+import { IonIndicatorModule } from './../projects/ion/src/lib/indicator/indicator.module';
 
 export default {
   title: 'Ion/Data Display/Indicator',
@@ -71,6 +71,13 @@ WithError.args = {
   error: true,
 };
 
+export const WithNoContent = Template.bind({});
+WithError.args = {
+  title: 'Tempo de SLA',
+  value: '',
+  tooltipText: 'Texto personalizado via atributo tooltipText',
+};
+
 export const WithEmitterButton = Template.bind({});
 WithEmitterButton.args = {
   title: 'Com botão emitter',