Skip to content

Commit 7ba085a

Browse files
ncamerancamera
committed
Merge branch 'main' into feat/tree-view-get-item-path
2 parents 19fe446 + f9f1de2 commit 7ba085a

File tree

3 files changed

+146
-6
lines changed

3 files changed

+146
-6
lines changed

‎src/common/reserved-names.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -291,6 +291,10 @@ export const COMBO_BOX_PARTS_DICTIONARY = {
291291

292292
export const COMBO_BOX_EXPORT_PARTS = joinParts(COMBO_BOX_PARTS_DICTIONARY);
293293

294+
export const COMBO_BOX_HOST_PARTS = {
295+
PLACEHOLDER: "ch-combo-box-render--placeholder"
296+
} as const;
297+
294298
// - - - - - - - - - - - - - - - - - - - -
295299
// Edit Parts
296300
// - - - - - - - - - - - - - - - - - - - -

‎src/components/combo-box/combo-box.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import {
2828
} from "./types";
2929
import { focusComposedPath } from "../common/helpers";
3030
import {
31+
COMBO_BOX_HOST_PARTS,
3132
COMBO_BOX_PARTS_DICTIONARY,
3233
KEY_CODES
3334
} from "../../common/reserved-names";
@@ -890,6 +891,9 @@ export class ChComboBoxRender
890891

891892
// TODO: Add unit tests for this feature.
892893
const currentValueMapping = this.#getCurrentValueMapping()?.item.value;
894+
const inputValue = filtersAreApplied
895+
? this.value
896+
: this.activeDescendant?.caption;
893897

894898
return (
895899
<Host
@@ -902,6 +906,7 @@ export class ChComboBoxRender
902906
// rendered outside of the ch-combo-box-render render() method
903907
part={tokenMap({
904908
[currentValueMapping]: !!currentValueMapping,
909+
[COMBO_BOX_HOST_PARTS.PLACEHOLDER]: !inputValue,
905910
[this.hostParts]: !!this.hostParts
906911
})}
907912
onKeyDown={
@@ -955,11 +960,7 @@ export class ChComboBoxRender
955960
disabled={this.disabled || !filtersAreApplied}
956961
placeholder={this.placeholder}
957962
readOnly={this.readonly || !filtersAreApplied}
958-
value={
959-
filtersAreApplied
960-
? this.value
961-
: this.activeDescendant?.caption
962-
}
963+
value={inputValue}
963964
onInputCapture={
964965
filtersAreApplied &&
965966
comboBoxIsInteractive &&

‎src/components/combo-box/tests/parts.e2e.ts‎

Lines changed: 136 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
2-
import { simpleModelComboBox1 } from "../../../showcase/assets/components/combo-box/models";
2+
import {
3+
dataTypeInGeneXus,
4+
simpleModelComboBox1
5+
} from "../../../showcase/assets/components/combo-box/models";
6+
7+
const EMPTY_VALUE_PART = "ch-combo-box-render--placeholder";
8+
const DUMMY_VALUE = "Hello world";
9+
const VALID_VALUE = "_Audio";
310

411
describe("[ch-combo-box-render][parts]", () => {
512
let page: E2EPage;
@@ -54,4 +61,132 @@ describe("[ch-combo-box-render][parts]", () => {
5461
expect(collapsedButtonRef.getAttribute("part")).not.toContain("expanded");
5562
expect(collapsedButtonRef.getAttribute("part")).toContain("collapsed");
5663
});
64+
65+
it(`[default] should set the "${EMPTY_VALUE_PART}" part in the Host by default`, async () => {
66+
expect(comboBoxRef.getAttribute("part")).toContain(EMPTY_VALUE_PART);
67+
});
68+
69+
it(`[default] should set the "${EMPTY_VALUE_PART}" part in the Host, even if the model has items`, async () => {
70+
comboBoxRef.setProperty("model", dataTypeInGeneXus);
71+
await page.waitForChanges();
72+
73+
comboBoxRef = await page.find("ch-combo-box-render"); // Refresh the reference
74+
expect(comboBoxRef.getAttribute("part")).toContain(EMPTY_VALUE_PART);
75+
});
76+
77+
it(`[default] should set the "${EMPTY_VALUE_PART}" part in the Host, even if the model has items but the value does not match a valid item`, async () => {
78+
comboBoxRef.setProperty("model", dataTypeInGeneXus);
79+
comboBoxRef.setProperty("value", DUMMY_VALUE);
80+
await page.waitForChanges();
81+
82+
comboBoxRef = await page.find("ch-combo-box-render"); // Refresh the reference
83+
expect(comboBoxRef.getAttribute("part")).toContain(EMPTY_VALUE_PART);
84+
});
85+
86+
it(`[default] should set the "${EMPTY_VALUE_PART}" part in the Host, when the value is set but the model is undefined`, async () => {
87+
comboBoxRef.setProperty("value", DUMMY_VALUE);
88+
await page.waitForChanges();
89+
90+
comboBoxRef = await page.find("ch-combo-box-render"); // Refresh the reference
91+
expect(comboBoxRef.getAttribute("part")).toContain(EMPTY_VALUE_PART);
92+
});
93+
94+
it(`[default] should not set the "${EMPTY_VALUE_PART}" part in the Host, when the value matches a valid item`, async () => {
95+
comboBoxRef.setProperty("model", dataTypeInGeneXus);
96+
comboBoxRef.setProperty("value", VALID_VALUE);
97+
await page.waitForChanges();
98+
99+
comboBoxRef = await page.find("ch-combo-box-render"); // Refresh the reference
100+
expect(comboBoxRef.getAttribute("part")).not.toContain(EMPTY_VALUE_PART);
101+
});
102+
103+
it(`[default] should set again the "${EMPTY_VALUE_PART}" part in the Host, when the value is matches a valid item and then is updated to undefined`, async () => {
104+
comboBoxRef.setProperty("model", dataTypeInGeneXus);
105+
comboBoxRef.setProperty("value", VALID_VALUE);
106+
await page.waitForChanges();
107+
108+
comboBoxRef.setProperty("value", undefined);
109+
await page.waitForChanges();
110+
111+
comboBoxRef = await page.find("ch-combo-box-render"); // Refresh the reference
112+
expect(comboBoxRef.getAttribute("part")).toContain(EMPTY_VALUE_PART);
113+
});
114+
115+
it(`[suggest] should set the "${EMPTY_VALUE_PART}" part in the Host by default`, async () => {
116+
comboBoxRef.setProperty("suggest", true);
117+
await page.waitForChanges();
118+
119+
comboBoxRef = await page.find("ch-combo-box-render"); // Refresh the reference
120+
expect(comboBoxRef.getAttribute("part")).toContain(EMPTY_VALUE_PART);
121+
});
122+
123+
it(`[suggest] should set the "${EMPTY_VALUE_PART}" part in the Host, even if the model has items`, async () => {
124+
comboBoxRef.setProperty("suggest", true);
125+
comboBoxRef.setProperty("model", dataTypeInGeneXus);
126+
await page.waitForChanges();
127+
128+
comboBoxRef = await page.find("ch-combo-box-render"); // Refresh the reference
129+
expect(comboBoxRef.getAttribute("part")).toContain(EMPTY_VALUE_PART);
130+
});
131+
132+
it(`[suggest] should not set the "${EMPTY_VALUE_PART}" part in the Host, when the value is set with an invalid item and the model is undefined`, async () => {
133+
comboBoxRef.setProperty("suggest", true);
134+
comboBoxRef.setProperty("value", DUMMY_VALUE);
135+
await page.waitForChanges();
136+
137+
comboBoxRef = await page.find("ch-combo-box-render"); // Refresh the reference
138+
expect(comboBoxRef.getAttribute("part")).not.toContain(EMPTY_VALUE_PART);
139+
});
140+
141+
it(`[suggest] should not set the "${EMPTY_VALUE_PART}" part in the Host, when the value is set with a valid item and the model is undefined`, async () => {
142+
comboBoxRef.setProperty("suggest", true);
143+
comboBoxRef.setProperty("value", VALID_VALUE);
144+
await page.waitForChanges();
145+
146+
comboBoxRef = await page.find("ch-combo-box-render"); // Refresh the reference
147+
expect(comboBoxRef.getAttribute("part")).not.toContain(EMPTY_VALUE_PART);
148+
});
149+
150+
it(`[suggest] should not set the "${EMPTY_VALUE_PART}" part in the Host, when the value is set with an invalid item and the model is defined`, async () => {
151+
comboBoxRef.setProperty("suggest", true);
152+
comboBoxRef.setProperty("model", dataTypeInGeneXus);
153+
comboBoxRef.setProperty("value", DUMMY_VALUE);
154+
await page.waitForChanges();
155+
156+
comboBoxRef = await page.find("ch-combo-box-render"); // Refresh the reference
157+
expect(comboBoxRef.getAttribute("part")).not.toContain(EMPTY_VALUE_PART);
158+
});
159+
160+
it(`[suggest] should not set the "${EMPTY_VALUE_PART}" part in the Host, when the value is set with a valid item and the model is defined`, async () => {
161+
comboBoxRef.setProperty("suggest", true);
162+
comboBoxRef.setProperty("model", dataTypeInGeneXus);
163+
comboBoxRef.setProperty("value", VALID_VALUE);
164+
await page.waitForChanges();
165+
166+
comboBoxRef = await page.find("ch-combo-box-render"); // Refresh the reference
167+
expect(comboBoxRef.getAttribute("part")).not.toContain(EMPTY_VALUE_PART);
168+
});
169+
170+
it(`[suggest] should set again the "${EMPTY_VALUE_PART}" part in the Host, when the value is defined and then is updated to undefined`, async () => {
171+
comboBoxRef.setProperty("suggest", true);
172+
comboBoxRef.setProperty("value", VALID_VALUE);
173+
await page.waitForChanges();
174+
175+
comboBoxRef.setProperty("value", undefined);
176+
await page.waitForChanges();
177+
178+
comboBoxRef = await page.find("ch-combo-box-render"); // Refresh the reference
179+
expect(comboBoxRef.getAttribute("part")).toContain(EMPTY_VALUE_PART);
180+
});
181+
182+
// TODO: This should work even with the suggestDebounce
183+
it.skip(`[suggest] should remove the "${EMPTY_VALUE_PART}" part in the Host, when the user types a character`, async () => {
184+
comboBoxRef.setProperty("suggest", true);
185+
await page.waitForChanges();
186+
await comboBoxRef.press("A");
187+
await page.waitForChanges();
188+
189+
comboBoxRef = await page.find("ch-combo-box-render"); // Refresh the reference
190+
expect(comboBoxRef.getAttribute("part")).not.toContain(EMPTY_VALUE_PART);
191+
});
57192
});

0 commit comments

Comments
 (0)