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

[AAE-18450] fixed form value not updating instantly on radio change #9141

Merged
merged 4 commits into from
Dec 5, 2023
Merged

[AAE-18450] fixed form value not updating instantly on radio change #9141

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fb79bd7
[AAE-18450] fixed form value not updating instantly on radio change
wojd0 Dec 4, 2023
829fb2a
[AAE-18450] added tests, removed material references
wojd0 Dec 4, 2023
2a280ed
[AAE-18450] test enhancements
wojd0 Dec 4, 2023
3223da5
[AAE-18450] added label to filter
wojd0 Dec 4, 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
79 changes: 45 additions & 34 deletions ...es-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,17 @@ import { FormCloudService } from '../../../services/form-cloud.service';
import { RadioButtonsCloudWidgetComponent } from './radio-buttons-cloud.widget';
import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
import { of, throwError } from 'rxjs';
import { By } from '@angular/platform-browser';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatRadioButtonHarness, MatRadioGroupHarness } from '@angular/material/radio/testing';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';

describe('RadioButtonsCloudWidgetComponent', () => {
let fixture: ComponentFixture<RadioButtonsCloudWidgetComponent>;
let widget: RadioButtonsCloudWidgetComponent;
let formCloudService: FormCloudService;
let element: HTMLElement;
let loader: HarnessLoader;
const restOption: FormFieldOption[] = [
{
id: 'opt-1',
Expand All @@ -51,6 +55,7 @@ describe('RadioButtonsCloudWidgetComponent', () => {
fixture = TestBed.createComponent(RadioButtonsCloudWidgetComponent);
widget = fixture.componentInstance;
element = fixture.nativeElement;
loader = TestbedHarnessEnvironment.loader(fixture);
widget.field = new FormFieldModel(new FormModel(), { restUrl: '<url>' });
});

Expand Down Expand Up @@ -124,18 +129,15 @@ describe('RadioButtonsCloudWidgetComponent', () => {
expect(widgetLabel.innerText).toBe('radio-name-label*');
expect(widget.field.isValid).toBe(false);

const option = element.querySelector<HTMLElement>('#radio-id-opt-1 label');
option.click();
const option = await loader.getHarness(MatRadioButtonHarness.with({ label: 'opt-name-1' }));
await option.check();

fixture.detectChanges();
await fixture.whenStable();
fixture.detectChanges();
const selectedOption = element.querySelector<HTMLElement>('[class*="mat-radio-checked"]');
expect(selectedOption.innerText).toBe('opt-name-1');
const selectedOption = await loader.getHarness(MatRadioButtonHarness.with({ checked: true }));
Copy link
Contributor

Choose a reason for hiding this comment

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

same as below, label can be added to the filter

expect(await selectedOption.getLabelText()).toBe('opt-name-1');
expect(widget.field.isValid).toBe(true);
});

it('should set Radio Button as valid when required and not empty', () => {
it('should set Radio Button as valid when required and not empty', async () => {
widget.field = new FormFieldModel(new FormModel({}), {
id: 'radio-id',
name: 'radio-name-label',
Expand All @@ -149,8 +151,7 @@ describe('RadioButtonsCloudWidgetComponent', () => {
});

fixture.detectChanges();
const selectedOption = element.querySelector<HTMLElement>('[class*="mat-radio-checked"]');
expect(selectedOption.innerText).toBe('opt-name-2');
await loader.getHarness(MatRadioButtonHarness.with({ checked: true, label: 'opt-name-2' }));
expect(widget.field.isValid).toBe(true);
});

Expand All @@ -167,22 +168,22 @@ describe('RadioButtonsCloudWidgetComponent', () => {
restUrl: 'http://mocky.com/mocky-12344',
value: { id: 'opt-1' }
});

fixture.detectChanges();
const selectedOption = element.querySelector<HTMLElement>('[class*="mat-radio-checked"]');
expect(selectedOption.innerText).toBe('opt-name-1');

expect(widget.isChecked(widget.field.options[0])).toBeTrue();
expect(widget.field.isValid).toBe(true);
});

it('should show error message if the restUrl failed to fetch options', () => {
it('should show error message if the restUrl failed to fetch options', async () => {
spyOn(formCloudService, 'getRestWidgetData').and.returnValue(throwError('Failed to fetch options'));
widget.field.restUrl = 'https://fake-rest-url';
widget.field.optionType = 'rest';
widget.field.restIdProperty = 'name';
fixture.detectChanges();

const radioButtons = element.querySelector<HTMLInputElement>('mat-radio-group');
radioButtons.click();
const radioButtons = await loader.getHarness(MatRadioGroupHarness);
await (await radioButtons.host()).click();

fixture.detectChanges();

const errorMessage = element.querySelector('.adf-radio-group-error-message .adf-error-text');
Expand All @@ -192,6 +193,23 @@ describe('RadioButtonsCloudWidgetComponent', () => {
expect(errorMessage.textContent).toBe('FORM.FIELD.REST_API_FAILED');
});

it('should change the value of the form when an option is clicked', async () => {
const form = new FormModel({});
widget.field = new FormFieldModel(form, {
id: 'radio-id',
name: 'radio-name-label',
type: FormFieldTypes.RADIO_BUTTONS,
options: restOption
});
fixture.detectChanges();
const formValueSpy = spyOn(widget.formService.formRulesEvent, 'next');
const radioButton = await loader.getHarness(MatRadioButtonHarness.with({ label: 'opt-name-1' }));
await radioButton.check();

expect(widget.field.value).toEqual('opt-1');
expect(formValueSpy).toHaveBeenCalled();
});

describe('when tooltip is set', () => {

beforeEach(() => {
Expand All @@ -205,28 +223,21 @@ describe('RadioButtonsCloudWidgetComponent', () => {
});

it('should show tooltip', async () => {
const radioButtonsInput = element.querySelector('mat-radio-button');
radioButtonsInput.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();

const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement;
expect(tooltipElement).toBeTruthy();
expect(tooltipElement.textContent.trim()).toBe('my custom tooltip');
const radioButton = await loader.getHarness(MatRadioButtonHarness);
await (await radioButton.host()).hover();
const tooltip = await loader.getHarness(MatTooltipHarness);
ehsan-2019 marked this conversation as resolved.
Show resolved Hide resolved
expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
});

it('should hide tooltip', async () => {
const radioButtonsInput = element.querySelector('mat-radio-button');
radioButtonsInput.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();
const radioButton = await loader.getHarness(MatRadioButtonHarness);
const tooltipElement = await loader.getHarness(MatTooltipHarness);

radioButtonsInput.dispatchEvent(new Event('mouseleave'));
await fixture.whenStable();
fixture.detectChanges();
await (await radioButton.host()).hover();
expect(await tooltipElement.isOpen()).toBeTrue();

const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip'));
expect(tooltipElement).toBeFalsy();
await (await radioButton.host()).mouseAway();
expect(await tooltipElement.isOpen()).toBeFalse();
ehsan-2019 marked this conversation as resolved.
Show resolved Hide resolved
});
});
});
2 changes: 1 addition & 1 deletion ...ervices-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export class RadioButtonsCloudWidgetComponent extends WidgetComponent implements

onOptionClick(optionSelected: any) {
this.field.value = optionSelected;
this.fieldChanged.emit(this.field);
this.onFieldChanged(this.field);
}

handleError(error: any) {
Expand Down
Loading