From f8a29aff940af3faecd2f054d24137975aaff1f7 Mon Sep 17 00:00:00 2001 From: Manuel Angel Garcia Caballero Date: Thu, 24 Mar 2022 16:44:36 +0100 Subject: [PATCH] Fixing problem with default value in hot fix 4.0.3 cdk version --- .../dxc-select/dxc-select.component.spec.ts | 99 +++++++++++++------ .../lib/dxc-select/dxc-select.component.ts | 7 +- 2 files changed, 72 insertions(+), 34 deletions(-) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.spec.ts index f40360226..0ea7fdbed 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.spec.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.spec.ts @@ -63,24 +63,38 @@ describe("DxcSelectComponent tests", () => { onChange: { emit: changeMock, } as any, - value: "1" + value: "1", }, imports: [DxcSelectModule], excludeComponentDeclaration: true, }); expect(dxcSelect.getByText("Select label")); expect(dxcSelect.getByText("Helper Text")); - expect(() => dxcSelect.getByText("Choose an option")).toThrow(); - fireEvent.click(dxcSelect.getByRole('combobox')); - expect((screen.getAllByText('label1')[1].getAttribute("aria-selected"))).toBe("true"); + expect(dxcSelect.getByText("label1")); + fireEvent.click(dxcSelect.getByRole("combobox")); + expect(screen.getAllByText("label1")[1].getAttribute("aria-selected")).toBe( + "true" + ); fireEvent.click(screen.getByText("aida")); - expect(changeMock).toHaveBeenCalledWith({value: "10", error: null}); - expect((screen.getAllByText('label1')[1].getAttribute("aria-selected"))).toBe("true"); - expect((screen.getAllByText('aida')[0].getAttribute("aria-selected"))).toBe("false"); - expect((screen.getAllByText('label2')[0].getAttribute("aria-selected"))).toBe("false"); - expect((screen.getAllByText('label6')[0].getAttribute("aria-selected"))).toBe("false"); - expect((screen.getAllByText('label9')[0].getAttribute("aria-selected"))).toBe("false"); - expect((screen.getAllByText('pepe')[0].getAttribute("aria-selected"))).toBe("false"); + expect(changeMock).toHaveBeenCalledWith({ value: "10", error: null }); + expect(screen.getAllByText("label1")[1].getAttribute("aria-selected")).toBe( + "true" + ); + expect(screen.getAllByText("aida")[0].getAttribute("aria-selected")).toBe( + "false" + ); + expect(screen.getAllByText("label2")[0].getAttribute("aria-selected")).toBe( + "false" + ); + expect(screen.getAllByText("label6")[0].getAttribute("aria-selected")).toBe( + "false" + ); + expect(screen.getAllByText("label9")[0].getAttribute("aria-selected")).toBe( + "false" + ); + expect(screen.getAllByText("pepe")[0].getAttribute("aria-selected")).toBe( + "false" + ); }); test("dxc-select single uncontrolled functionality", async () => { @@ -107,27 +121,50 @@ describe("DxcSelectComponent tests", () => { }); expect(dxcSelect.getByText("Select label")); expect(dxcSelect.getByText("Helper Text")); - dxcSelect.getByText("Choose an option") - fireEvent.click(dxcSelect.getByRole('combobox')); + dxcSelect.getByText("Choose an option"); + fireEvent.click(dxcSelect.getByRole("combobox")); fireEvent.click(screen.getByText("aida")); - expect(changeMock).toHaveBeenCalledWith({value: "10", error: null}); - expect((screen.getAllByText('aida')[1].getAttribute("aria-selected"))).toBe("true"); - expect((screen.getAllByText('label1')[0].getAttribute("aria-selected"))).toBe("false"); - expect((screen.getAllByText('label2')[0].getAttribute("aria-selected"))).toBe("false"); - expect((screen.getAllByText('label6')[0].getAttribute("aria-selected"))).toBe("false"); - expect((screen.getAllByText('label9')[0].getAttribute("aria-selected"))).toBe("false"); - expect((screen.getAllByText('pepe')[0].getAttribute("aria-selected"))).toBe("false"); + expect(changeMock).toHaveBeenCalledWith({ value: "10", error: null }); + expect(screen.getAllByText("aida")[1].getAttribute("aria-selected")).toBe( + "true" + ); + expect(screen.getAllByText("label1")[0].getAttribute("aria-selected")).toBe( + "false" + ); + expect(screen.getAllByText("label2")[0].getAttribute("aria-selected")).toBe( + "false" + ); + expect(screen.getAllByText("label6")[0].getAttribute("aria-selected")).toBe( + "false" + ); + expect(screen.getAllByText("label9")[0].getAttribute("aria-selected")).toBe( + "false" + ); + expect(screen.getAllByText("pepe")[0].getAttribute("aria-selected")).toBe( + "false" + ); fireEvent.click(screen.getByText("pepe")); - expect(changeMock).toHaveBeenCalledWith({value: "11", error: null}); - expect((screen.getAllByText('pepe')[1].getAttribute("aria-selected"))).toBe("true"); - expect((screen.getAllByText('label1')[0].getAttribute("aria-selected"))).toBe("false"); - expect((screen.getAllByText('label2')[0].getAttribute("aria-selected"))).toBe("false"); - expect((screen.getAllByText('label6')[0].getAttribute("aria-selected"))).toBe("false"); - expect((screen.getAllByText('label9')[0].getAttribute("aria-selected"))).toBe("false"); - expect((screen.getAllByText('aida')[0].getAttribute("aria-selected"))).toBe("false"); + expect(changeMock).toHaveBeenCalledWith({ value: "11", error: null }); + expect(screen.getAllByText("pepe")[1].getAttribute("aria-selected")).toBe( + "true" + ); + expect(screen.getAllByText("label1")[0].getAttribute("aria-selected")).toBe( + "false" + ); + expect(screen.getAllByText("label2")[0].getAttribute("aria-selected")).toBe( + "false" + ); + expect(screen.getAllByText("label6")[0].getAttribute("aria-selected")).toBe( + "false" + ); + expect(screen.getAllByText("label9")[0].getAttribute("aria-selected")).toBe( + "false" + ); + expect(screen.getAllByText("aida")[0].getAttribute("aria-selected")).toBe( + "false" + ); }); - test("should render optional error", async () => { const array1: Option[] = [ { label: "label1", value: "1" }, @@ -155,7 +192,9 @@ describe("DxcSelectComponent tests", () => { expect(dxcSelect.getByText("Helper Text")); fireEvent.click(dxcSelect.getByText("Choose an option")); fireEvent.focusOut(dxcSelect.getByText("Choose an option")); - expect(onBlur).toHaveBeenCalledWith({value: "", error: "This field is required. Please, enter a value."}); - + expect(onBlur).toHaveBeenCalledWith({ + value: "", + error: "This field is required. Please, enter a value.", + }); }); }); diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.ts index 096564f3a..6aae0c572 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.ts @@ -227,7 +227,7 @@ export class DxcSelectComponent implements OnInit, ControlValueAccessor { ngOnInit(): void { this.optionalOption = { label: this.setPlaceholderOptional(), value: "" }; - if (this.optional && !this.multiple) { + if (this.optional && !this.multiple && !(this.value || this.value === "")) { this.service.setSelectedValues(this.optionalOption); } this.id = `select-${uuidv4()}`; @@ -254,9 +254,8 @@ export class DxcSelectComponent implements OnInit, ControlValueAccessor { } } else { if (this.optionGroupRef) { - const optionGroupElement = this.optionGroupRef?.toArray()[ - value.group - ]; + const optionGroupElement = + this.optionGroupRef?.toArray()[value.group]; optionGroupElement && this.scrollByIndex(optionGroupElement, value.option + 1); }