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.

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

[ACS-6812] Add new chip only when input value is valid #9358

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ import { CardViewItemFloatValidator } from '../../validators/card-view-item-floa
import { CardViewItemIntValidator } from '../../validators/card-view-item-int.validator';
import { CardViewIntItemModel } from '../../models/card-view-intitem.model';
import { CardViewFloatItemModel } from '../../models/card-view-floatitem.model';
import { MatChipsModule } from '@angular/material/chips';
import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
import { ClipboardService } from '../../../clipboard/clipboard.service';
import { SimpleChange } from '@angular/core';
import { DebugElement, SimpleChange } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { CardViewItemValidator } from '../../interfaces/card-view-item-validator.interface';
import { HarnessLoader } from '@angular/cdk/testing';
Expand All @@ -41,23 +41,36 @@ describe('CardViewTextItemComponent', () => {

const expectedErrorMessages = [{ message: 'Something went wrong' } as CardViewItemValidator];

const updateTextField = (key, value) => {
const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${key}"]`));
editInput.nativeElement.value = value;
editInput.nativeElement.dispatchEvent(new Event('input'));
const getTextField = (key: string): HTMLInputElement => {
return fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${key}"]`)).nativeElement;
};

const updateTextField = (key: string, value) => {
const editInput = getTextField(key);
editInput.value = value;
editInput.dispatchEvent(new Event('input'));
fixture.detectChanges();
};

const getTextFieldValue = (key): string => {
const textItemInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${key}"]`));
const getTextFieldValue = (key: string): string => {
const textItemInput = getTextField(key);
expect(textItemInput).not.toBeNull();
return textItemInput.nativeElement.value;
return textItemInput.value;
};

const getTextFieldError = (key): string => {
const textItemInputError = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${key}"] li`));
expect(textItemInputError).not.toBeNull();
return textItemInputError.nativeElement.innerText;
const getErrorElements = (key: string, includeItems = false): DebugElement[] => {
return fixture.debugElement.queryAll(By.css(`[data-automation-id="card-textitem-error-${key}"]${includeItems ? ' li' : ''}`));
};

const getTextFieldError = (key: string): string => {
const textItemInputErrors = getErrorElements(key, true);
expect(textItemInputErrors.length).not.toBe(0);
return textItemInputErrors[0].nativeElement.innerText;
};

const verifyNoErrors = (key: string) => {
const errorElement = getErrorElements(key);
expect(errorElement.length).toBe(0);
};

const checkCtrlZActions = (ctrlKeyValue: boolean, codeValue: string, metaKeyValue: boolean, mockTestValue: string, flag: boolean) => {
Expand Down Expand Up @@ -208,7 +221,7 @@ describe('CardViewTextItemComponent', () => {
editable: true,
multivalued: true
};
renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, 'item1', 'item2', 'item3');
await renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, 'item1', 'item2', 'item3');
});

it('should render chips for multivalue integers when chips are enabled', async () => {
Expand All @@ -219,7 +232,7 @@ describe('CardViewTextItemComponent', () => {
editable: true,
multivalued: true
};
renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, '1', '2', '3');
await renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, '1', '2', '3');
});

it('should render chips for multivalue decimal numbers when chips are enabled', async () => {
Expand All @@ -230,7 +243,36 @@ describe('CardViewTextItemComponent', () => {
editable: true,
multivalued: true
};
renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, '1.1', '2.2', '3.3');
await renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, '1.1', '2.2', '3.3');
});

it('should only render new chip when provided value is valid for specified validators set', async () => {
const cardViewTextItemFloatObject = {
label: 'Test label',
value: [10, 20.2, 35.8],
key: 'textkey',
editable: true,
multivalued: true,
type: 'float'
};
component.editable = true;
await renderChipsForMultiValuedProperties(cardViewTextItemFloatObject, true, 3, '10', '20.2', '35.8');
const floatValidator: CardViewItemValidator = new CardViewItemFloatValidator();
component.property.validators = [floatValidator];
const inputElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-editchipinput-textkey"]')).nativeElement;
component.addValueToList({ value: 'abcd', chipInput: inputElement } as MatChipInputEvent);
fixture.detectChanges();

expect(getTextFieldError('textkey')).toBe('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
let valueChips = await loader.getAllHarnesses(MatChipHarness);
expect(valueChips.length).toBe(3);

component.addValueToList({ value: '22.1', chipInput: inputElement } as MatChipInputEvent);
fixture.detectChanges();

verifyNoErrors('textkey');
valueChips = await loader.getAllHarnesses(MatChipHarness);
expect(valueChips.length).toBe(4);
});

it('should render string for multivalue properties when chips are disabled', async () => {
Expand Down Expand Up @@ -697,20 +739,17 @@ describe('CardViewTextItemComponent', () => {
await fixture.whenStable();
fixture.detectChanges();

const errorElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-error-textkey"]'));
expect(errorElement).toBeNull();
verifyNoErrors('textkey');
});

it('should NOT show validation error for null', async () => {
updateTextField(component.property.key, null);
await fixture.whenStable();
fixture.detectChanges();

const inputElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-textkey"]'));
const errorElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-error-textkey"]'));

expect(inputElement.nativeElement.value).toBe('');
expect(errorElement).toBeNull();
const inputElement = getTextField('textkey');
expect(inputElement.value).toBe('');
verifyNoErrors('textkey');
});

it('should show validation error for only spaces string', async () => {
Expand All @@ -722,27 +761,6 @@ describe('CardViewTextItemComponent', () => {
expect(errorMessage).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
});

it('should NOT show validation error for empty string', async () => {
updateTextField(component.property.key, '');
await fixture.whenStable();
fixture.detectChanges();

const errorElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-error-textkey"]'));
expect(errorElement).toBeNull();
});

it('should NOT show validation error for null', async () => {
updateTextField(component.property.key, null);
await fixture.whenStable();
fixture.detectChanges();

const inputElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-textkey"]'));
const errorElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-error-textkey"]'));

expect(inputElement.nativeElement.value).toBe('');
expect(errorElement).toBeNull();
});

it('should show validation error for float number', async () => {
updateTextField(component.property.key, 123.456);
await fixture.whenStable();
Expand All @@ -768,8 +786,7 @@ describe('CardViewTextItemComponent', () => {
await fixture.whenStable();
fixture.detectChanges();

const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
expect(error).toBeFalsy();
verifyNoErrors(component.property.key);
expect(component.property.value).toBe('2147483647');
});

Expand All @@ -788,8 +805,7 @@ describe('CardViewTextItemComponent', () => {
}
});

const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
expect(error).toBeFalsy();
verifyNoErrors(component.property.key);
expect(getTextFieldValue(component.property.key)).toEqual(expectedNumber.toString());
expect(component.property.value).toBe(expectedNumber.toString());
});
Expand Down Expand Up @@ -849,8 +865,7 @@ describe('CardViewTextItemComponent', () => {
}
});

const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
expect(error).toBeFalsy();
verifyNoErrors(component.property.key);
expect(getTextFieldValue(component.property.key)).toEqual(expectedNumber.toString());
expect(component.property.value).toBe(expectedNumber.toString());
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -148,17 +148,21 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
}

addValueToList(newListItem: MatChipInputEvent) {
const chipInput = newListItem.input;
const chipInput = newListItem.chipInput.inputElement;
const chipValue = newListItem.value.trim() || '';

if (typeof this.editedValue !== 'string') {
if (chipValue) {
this.editedValue.push(chipValue);
this.update();
}
if (this.property.isValid(chipValue)) {
if (chipValue) {
this.editedValue.push(chipValue);
this.update();
}

if (chipInput) {
chipInput.value = '';
if (chipInput) {
chipInput.value = '';
}
} else {
this.errors = this.property.getValidationErrors(chipValue);
}
}
}
Expand Down
4 changes: 4 additions & 0 deletions lib/core/src/lib/pipes/decimal-number.pipe.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,10 @@ describe('DecimalNumberPipe', () => {
expect(pipe.transform(1234.567)).toBe('1,234.57');
});

it('should properly transform array of values', () => {
expect(pipe.transform([1234.567, 22])).toEqual(['1,234.57', '22']);
});

it('should return number with at least the minimum of digints in the integer part', () => {
const decimalValues = {
minIntegerDigits: 6,
Expand Down
7 changes: 6 additions & 1 deletion lib/core/src/lib/pipes/decimal-number.pipe.ts
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,12 @@ export class DecimalNumberPipe implements PipeTransform, OnDestroy {
const actualLocale = locale || this.defaultLocale;

const decimalPipe: DecimalPipe = new DecimalPipe(actualLocale);
return decimalPipe.transform(value, actualDigitsInfo);

if (value instanceof Array) {
return value.map((val) => decimalPipe.transform(val, actualDigitsInfo));
} else {
return decimalPipe.transform(value, actualDigitsInfo);
}
}

ngOnDestroy(): void {
Expand Down
Loading