Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add no content text on indicator component #854

Merged
merged 6 commits into from
Oct 3, 2023
Merged

feat: add no content text on indicator component #854

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e1417fc
feat: add no content text on indicator component
wermeson-lopes-brisa Sep 29, 2023
ddbb74f
Merge branch 'main' into 852-feat-add-no-content-text-on-indicator-co…
wermeson-lopes-brisa Sep 29, 2023
2ba98e6
feat: suggested code refactoring applied
wermeson-lopes-brisa Oct 2, 2023
e957f71
feat: remove expendable function
wermeson-lopes-brisa Oct 2, 2023
975b18e
feat: story for this task
wermeson-lopes-brisa Oct 2, 2023
65586bb
Merge branch 'main' into 852-feat-add-no-content-text-on-indicator-co…
iurynogueira Oct 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions projects/ion/src/lib/indicator/indicator.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 === ''"
wermeson-lopes-brisa marked this conversation as resolved.
Show resolved Hide resolved
>
<ion-no-data
iconType="exclamation-rounded"
label="Sem dados"
></ion-no-data>
</ng-container>
</header>
<footer
data-testid="ion-indicator-footer"
Expand Down
4 changes: 4 additions & 0 deletions projects/ion/src/lib/indicator/indicator.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@
border-top-left-radius: 8px;
border-top-right-radius: 8px;

&.no-data {
justify-content: center !important;
}

@include icon-style();

h1 {
Expand Down
39 changes: 27 additions & 12 deletions projects/ion/src/lib/indicator/indicator.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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],
Expand All @@ -43,6 +44,7 @@ const sut = async (
IonSkeletonModule,
IonSpinnerModule,
IonPopoverModule,
IonNoDataModule,
],
declarations: [BodyMockComponent, IonIndicatorComponent, IonModalComponent],
componentProperties: props,
Expand Down Expand Up @@ -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 =>
Expand All @@ -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();
});
Expand Down Expand Up @@ -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) => {
Comment on lines +233 to +237
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏 Good!

await sut({
value: notValidValue,
});
expect(getElementByTestId('noData')).toBeInTheDocument();
}
);
});

describe('IonIndicatorComponent with popover button', () => {
Expand Down
4 changes: 2 additions & 2 deletions projects/ion/src/lib/indicator/indicator.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
10 changes: 6 additions & 4 deletions projects/ion/src/lib/indicator/indicator.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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],
Expand All @@ -20,6 +21,7 @@ import { IonPopoverModule } from '../popover/popover.module';
IonSkeletonModule,
IonSpinnerModule,
IonPopoverModule,
IonNoDataModule,
],
exports: [IonIndicatorComponent],
})
Expand Down
13 changes: 10 additions & 3 deletions stories/Indicator.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -71,6 +71,13 @@ WithError.args = {
error: true,
};

export const WithNoContent = Template.bind({});
WithError.args = {
wermeson-lopes-brisa marked this conversation as resolved.
Show resolved Hide resolved
title: 'Tempo de SLA',
value: '',
tooltipText: 'Texto personalizado via atributo tooltipText',
};

export const WithEmitterButton = Template.bind({});
WithEmitterButton.args = {
title: 'Com botão emitter',
Expand Down
Loading