Skip to content

Commit

Permalink
feat(stepper): implementa definições do AnimaliaDS
Browse files Browse the repository at this point in the history 
Implementa definições de estilo e acessibilidade definidos pelo AnimaliaDS

Fixes DTHFUI-7810
  • Loading branch information
@anabye
anabye committed Aug 2, 2024
1 parent 06c9340 commit 1573bc0
Show file tree
Hide file tree
Showing 9 changed files with 593 additions and 77 deletions.
15 changes: 15 additions & 0 deletions projects/ui/src/lib/components/po-stepper/po-step/po-step.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { configureTestSuite } from './../../../util-test/util-expect.spec';
import { PoStepComponent } from './po-step.component';
import { PoStepperModule } from '../po-stepper.module';
import { PoStepperStatus } from '../enums/po-stepper-status.enum';
import { TemplateRef } from '@angular/core';

describe('PoStepComponent:', () => {
let component: PoStepComponent;
Expand Down Expand Up @@ -35,6 +36,20 @@ describe('PoStepComponent:', () => {

expect(component['setDisplayOnActiveOrError']).toHaveBeenCalled();
});

it('iconDefault: should set `iconDefault` width string value', () => {
const icon = 'po-icon po-icon-pin';
component.iconDefault = icon;

expect(component.iconDefault).toBe(icon);
});

it('iconDefault: should set `iconDefault` with templateRef value', () => {
const templateRef = {} as TemplateRef<void>;
component.iconDefault = templateRef;

expect(component.iconDefault).toBe(templateRef);
});
});

describe('Methods:', () => {
Expand Down
177 changes: 125 additions & 52 deletions ...ts/ui/src/lib/components/po-stepper/po-stepper-circle/po-stepper-circle.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,41 +206,54 @@ describe('PoStepperCircleComponent:', () => {
expect(stepperCircleContentLg).toBeTruthy();
});

it('shouldn`t find `po-stepper-circle-content` if `isActive` is true', () => {
it('should have `po-stepper-circle-border` when not active and not error', () => {
component.status = PoStepperStatus.Default;
fixture.detectChanges();

const circleElement = fixture.nativeElement.querySelector('.po-stepper-circle');
expect(circleElement.classList).toContain('po-stepper-circle-border');
expect(circleElement.classList).not.toContain('po-stepper-circle-done');
});

it('should have `po-stepper-circle-done` when isDone', () => {
component.status = PoStepperStatus.Done;
fixture.detectChanges();

const circleElement = fixture.nativeElement.querySelector('.po-stepper-circle');
expect(circleElement.classList).toContain('po-stepper-circle-done');
});

it('should find `po-stepper-circle-active` if `isActive` is true.', () => {
spyOnProperty(component, 'isError').and.returnValue(false);
spyOnProperty(component, 'isActive').and.returnValue(true);

fixture.detectChanges();

const stepperCircleContent = nativeElement.querySelector('.po-stepper-circle-content');
const stepperCircleActive = nativeElement.querySelector('.po-stepper-circle-active');

expect(stepperCircleContent).toBeNull();
expect(stepperCircleActive).toBeTruthy();
});

it('shouldn`t find `po-stepper-circle-with-icon` and `po-icon` if `icons` is `false`.', () => {
component.icons = false;
it('should find `po-stepper-circle-active` if `isError` is true.', () => {
spyOnProperty(component, 'isError').and.returnValue(true);
spyOnProperty(component, 'isActive').and.returnValue(false);

fixture.detectChanges();
const StepperCircleWitchIcon = nativeElement.querySelector('.po-stepper-circle-with-icon');
const iconClass = nativeElement.querySelector('.po-icon');

expect(StepperCircleWitchIcon).toBeNull();
expect(iconClass).toBeNull();
const stepperCircleActive = nativeElement.querySelector('.po-stepper-circle-active');

expect(stepperCircleActive).toBeTruthy();
});

it('should find `po-icon-info` if `status` is `Active`, `Default` or `Disabled` and `icons` is true.', () => {
component.icons = true;
it('shouldn`t find `po-stepper-circle-active` if `isError` and `isActive` is false.', () => {
spyOnProperty(component, 'isError').and.returnValue(false);
spyOnProperty(component, 'isActive').and.returnValue(false);

component.status = PoStepperStatus.Default;
fixture.detectChanges();
expect(PoIconInfo()).toBeTruthy();

component.status = PoStepperStatus.Disabled;
fixture.detectChanges();
expect(PoIconInfo()).toBeTruthy();
const stepperCircleActive = nativeElement.querySelector('.po-stepper-circle-active');

component.status = PoStepperStatus.Error;
fixture.detectChanges();
expect(PoIconInfo()).toBeNull();
expect(stepperCircleActive).toBeNull();
});

it('should find `po-icon` if `isDone` is true.', () => {
Expand All @@ -263,85 +276,145 @@ describe('PoStepperCircleComponent:', () => {
expect(poIcon).toBeNull();
});

it('should find `po-stepper-circle-active` if `isActive` is true.', () => {
spyOnProperty(component, 'isError').and.returnValue(false);
spyOnProperty(component, 'isActive').and.returnValue(true);

it('should apply `iconActive` from Phosphor library if `status` is `Active` and `iconActive` is set.', () => {
component.status = PoStepperStatus.Active;
component.iconActive = 'ph ph-anchor';
fixture.detectChanges();

const stepperCircleActive = nativeElement.querySelector('.po-stepper-circle-active');

expect(stepperCircleActive).toBeTruthy();
const activeIcon = nativeElement.querySelector('po-icon')?.querySelector('i');
expect(activeIcon).toBeTruthy();
expect(activeIcon.classList.contains('ph-anchor')).toBeTrue();
});

it('should find `po-stepper-circle-active` if `isError` is true.', () => {
spyOnProperty(component, 'isError').and.returnValue(true);
spyOnProperty(component, 'isActive').and.returnValue(false);
it('should apply `iconActive` from Icons library if `status` is `Active` and `iconActive` is set.', () => {
component.status = PoStepperStatus.Active;
component.iconActive = 'po-icon po-icon-device-notebook';
fixture.detectChanges();

const activeIcon = nativeElement.querySelector('po-icon')?.querySelector('i');
expect(activeIcon).toBeTruthy();
expect(activeIcon.classList.contains('po-icon-device-notebook')).toBeTrue();
});

it('should apply `ICON_EDIT` if `status` is `Active` and `iconActive` is not set.', () => {
component.status = PoStepperStatus.Active;
component.iconActive = undefined;
fixture.detectChanges();

const stepperCircleActive = nativeElement.querySelector('.po-stepper-circle-active');
const activeIcon = PoIconEdit();

expect(stepperCircleActive).toBeTruthy();
expect(activeIcon).toBeTruthy();
expect(activeIcon.classList.contains('ph-pencil-simple')).toBeTrue();
});

it('shouldn`t find `po-stepper-circle-active` if `isError` and `isActive` is false.', () => {
spyOnProperty(component, 'isError').and.returnValue(false);
spyOnProperty(component, 'isActive').and.returnValue(false);

it('should apply `iconDone` from Phosphor library if `status` is `Done` and `iconDone` is set.', () => {
component.status = PoStepperStatus.Done;
component.iconDone = 'ph ph-check-circle';
fixture.detectChanges();

const stepperCircleActive = nativeElement.querySelector('.po-stepper-circle-active');
const doneIcon = nativeElement.querySelector('po-icon')?.querySelector('i');

expect(stepperCircleActive).toBeNull();
expect(doneIcon).toBeTruthy();
expect(doneIcon.classList.contains('ph-check-circle')).toBeTrue();
});

it('should find `po-icon-ok` if `status` is `Done` and `icons` is true.', () => {
component.icons = true;
it('should apply `iconDone` from Icons library if `status` is `Done` and `iconDone` is set.', () => {
component.status = PoStepperStatus.Done;
component.iconDone = 'po-icon-clock';
fixture.detectChanges();

const doneIcon = nativeElement.querySelector('po-icon')?.querySelector('i');

expect(doneIcon.classList.contains('po-icon-clock')).toBeTrue();
});

it('should apply `ICON_OK` if `status` is `Done` and `iconDone` is not set.', () => {
component.status = PoStepperStatus.Done;
component.iconDone = undefined;
fixture.detectChanges();
expect(PoIconOk()).toBeTruthy();

const doneIcon = PoIconOk;
expect(doneIcon).toBeTruthy();
});

it('should apply `iconDefault` from Phosphor library if `status` is `Default` or `Disabled` and `iconDefault` is set.', () => {
component.status = PoStepperStatus.Default;
component.iconDefault = 'ph ph-first-aid';
fixture.detectChanges();
expect(PoIconOk()).toBeNull();

let defaultIcon = nativeElement.querySelector('po-icon')?.querySelector('i');
expect(defaultIcon).toBeTruthy();
expect(defaultIcon.classList.contains('ph-first-aid')).toBeTrue();

component.status = PoStepperStatus.Disabled;
fixture.detectChanges();
expect(PoIconOk()).toBeNull();

component.status = PoStepperStatus.Error;
defaultIcon = nativeElement.querySelector('po-icon')?.querySelector('i');
expect(defaultIcon).toBeTruthy();
expect(defaultIcon.classList.contains('ph-first-aid')).toBeTrue();
});

it('should apply `iconDefault` from Icons library if `status` is `Default` or `Disabled` and `iconDefault` is set.', () => {
component.status = PoStepperStatus.Default;
component.iconDefault = 'po-icon po-icon-user';
fixture.detectChanges();
expect(PoIconOk()).toBeNull();

let defaultIcon = nativeElement.querySelector('po-icon')?.querySelector('i');
expect(defaultIcon).toBeTruthy();
expect(defaultIcon.classList.contains('po-icon-user')).toBeTrue();

component.status = PoStepperStatus.Disabled;
fixture.detectChanges();

defaultIcon = nativeElement.querySelector('po-icon')?.querySelector('i');
expect(defaultIcon).toBeTruthy();
expect(defaultIcon.classList.contains('po-icon-user')).toBeTrue();
});

it('should find `icon-exclamation` if `status` is `Error` and `icons` is true.', () => {
it('should apply `ICON_INFO` if `status` is `Default` or `Disabled`, `iconDefault` is not set, and `icons` is true.', () => {
component.status = PoStepperStatus.Default;
component.iconDefault = undefined;
component.icons = true;
fixture.detectChanges();

component.status = PoStepperStatus.Error;
const defaultIcon = PoIconInfo();
expect(defaultIcon).toBeTruthy();
expect(defaultIcon.classList.contains('ph-info')).toBeTrue();

component.status = PoStepperStatus.Disabled;
fixture.detectChanges();
expect(PoIconExclamation()).toBeTruthy();

const disabledIcon = PoIconInfo();
expect(disabledIcon).toBeTruthy();
expect(disabledIcon.classList.contains('ph-info')).toBeTrue();
});

it('should display an empty string if `status` is `Default` or `Disabled`, `iconDefault` is not set, and `icons` is false.', () => {
component.status = PoStepperStatus.Default;
component.iconDefault = undefined;
component.icons = false;
fixture.detectChanges();
expect(PoIconExclamation()).toBeNull();

const defaultIcon = nativeElement.querySelector('.po-stepper-circle-content');
expect(defaultIcon.textContent.trim()).toBe('');

component.status = PoStepperStatus.Disabled;
fixture.detectChanges();
expect(PoIconExclamation()).toBeNull();

const disabledIcon = nativeElement.querySelector('.po-stepper-circle-content');
expect(disabledIcon.textContent.trim()).toBe('');
});
});

function PoIconInfo() {
return nativeElement.querySelector('.ph-info');
return nativeElement.querySelector('po-icon')?.querySelector('i.ph.ph-info');
}

function PoIconOk() {
return nativeElement.querySelector('.ph-check');
}

function PoIconExclamation() {
return nativeElement.querySelector('.ph-warning-circle');
function PoIconEdit() {
return nativeElement.querySelector('po-icon')?.querySelector('i.ph-pencil-simple');
}
});
Loading

0 comments on commit 1573bc0

Please sign in to comment.