Skip to content

Commit 3bfd0f1

Browse files
aleksandar-terzievaleksandar-terziev
committed
feat(ui5-input,ui5-multi-input,ui5-combobox,ui5-multi-combobox): composition handling
1 parent 033a6d6 commit 3bfd0f1

File tree

13 files changed

+1016
-18
lines changed

13 files changed

+1016
-18
lines changed

‎packages/main/cypress/specs/ComboBox.cy.tsx‎

Lines changed: 177 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -398,25 +398,25 @@ describe("General Interaction", () => {
398398

399399
it("should not render ComboBox items list when no items are present", () => {
400400
cy.mount(
401-
<ComboBox valueState="Negative" open>
402-
{/* No ComboBox items */}
403-
</ComboBox>
404-
);
401+
<ComboBox valueState="Negative" open>
402+
{/* No ComboBox items */}
403+
</ComboBox>
404+
);
405405

406406
cy.get("[ui5-combobox]")
407-
.as("combo")
408-
.shadow()
409-
.find("ui5-responsive-popover")
410-
.as("popover")
411-
.should("have.attr", "open");
407+
.as("combo")
408+
.shadow()
409+
.find("ui5-responsive-popover")
410+
.as("popover")
411+
.should("have.attr", "open");
412412

413413
cy.get("@popover")
414-
.find(".ui5-responsive-popover-header.ui5-valuestatemessage-root")
415-
.should("exist");
414+
.find(".ui5-responsive-popover-header.ui5-valuestatemessage-root")
415+
.should("exist");
416416

417417
cy.get("@popover")
418-
.find("ui5-list")
419-
.should("not.exist");
418+
.find("ui5-list")
419+
.should("not.exist");
420420
});
421421
});
422422

@@ -2744,3 +2744,167 @@ describe("Scrolling", () => {
27442744
.should("be.visible");
27452745
});
27462746
});
2747+
2748+
describe("ComboBox Composition", () => {
2749+
it("should handle Korean composition correctly", () => {
2750+
cy.mount(
2751+
<ComboBox
2752+
id="combobox-composition-korean"
2753+
placeholder="Type in Korean ..."
2754+
>
2755+
<ComboBoxItem text="안녕하세요" />
2756+
<ComboBoxItem text="고맙습니다" />
2757+
<ComboBoxItem text="사랑" />
2758+
<ComboBoxItem text="한국" />
2759+
</ComboBox>
2760+
);
2761+
2762+
cy.get("[ui5-combobox]")
2763+
.as("combobox")
2764+
.realClick();
2765+
2766+
cy.get("@combobox")
2767+
.shadow()
2768+
.find("input")
2769+
.as("nativeInput")
2770+
.focus();
2771+
2772+
cy.get("@nativeInput").trigger("compositionstart", { data: "" });
2773+
2774+
cy.get("@combobox").should("have.prop", "_isComposing", true);
2775+
2776+
cy.get("@nativeInput").trigger("compositionupdate", { data: "사랑" });
2777+
2778+
cy.get("@combobox").should("have.prop", "_isComposing", true);
2779+
2780+
cy.get("@nativeInput").trigger("compositionend", { data: "사랑" });
2781+
2782+
cy.get("@nativeInput")
2783+
.invoke("val", "사랑")
2784+
.trigger("input", { inputType: "insertCompositionText" });
2785+
2786+
cy.get("@combobox").should("have.prop", "_isComposing", false);
2787+
2788+
cy.get("@combobox").should("have.attr", "value", "사랑");
2789+
2790+
cy.get("@combobox")
2791+
.shadow()
2792+
.find<ResponsivePopover>("[ui5-responsive-popover]")
2793+
.as("popover")
2794+
.ui5ResponsivePopoverOpened();
2795+
2796+
cy.get("@combobox")
2797+
.realPress("Enter");
2798+
2799+
cy.get("@combobox")
2800+
.should("have.attr", "value", "사랑");
2801+
});
2802+
2803+
it("should handle Japanese composition correctly", () => {
2804+
cy.mount(
2805+
<ComboBox
2806+
id="combobox-composition-japanese"
2807+
placeholder="Type in Japanese ..."
2808+
>
2809+
<ComboBoxItem text="こんにちは" />
2810+
<ComboBoxItem text="ありがとう" />
2811+
<ComboBoxItem text="東京" />
2812+
<ComboBoxItem text="日本" />
2813+
</ComboBox>
2814+
);
2815+
2816+
cy.get("[ui5-combobox]")
2817+
.as("combobox")
2818+
.realClick();
2819+
2820+
cy.get("@combobox")
2821+
.shadow()
2822+
.find("input")
2823+
.as("nativeInput")
2824+
.focus();
2825+
2826+
cy.get("@nativeInput").trigger("compositionstart", { data: "" });
2827+
2828+
cy.get("@combobox").should("have.prop", "_isComposing", true);
2829+
2830+
cy.get("@nativeInput").trigger("compositionupdate", { data: "ありがとう" });
2831+
2832+
cy.get("@combobox").should("have.prop", "_isComposing", true);
2833+
2834+
cy.get("@nativeInput").trigger("compositionend", { data: "ありがとう" });
2835+
2836+
cy.get("@nativeInput")
2837+
.invoke("val", "ありがとう")
2838+
.trigger("input", { inputType: "insertCompositionText" });
2839+
2840+
cy.get("@combobox").should("have.prop", "_isComposing", false);
2841+
2842+
cy.get("@combobox").should("have.attr", "value", "ありがとう");
2843+
2844+
cy.get("@combobox")
2845+
.shadow()
2846+
.find<ResponsivePopover>("[ui5-responsive-popover]")
2847+
.as("popover")
2848+
.ui5ResponsivePopoverOpened();
2849+
2850+
cy.get("@combobox")
2851+
.realPress("Enter");
2852+
2853+
cy.get("@combobox")
2854+
.should("have.attr", "value", "ありがとう");
2855+
});
2856+
2857+
it("should handle Chinese composition correctly", () => {
2858+
cy.mount(
2859+
<ComboBox
2860+
id="combobox-composition-chinese"
2861+
placeholder="Type in Chinese ..."
2862+
>
2863+
<ComboBoxItem text="你好" />
2864+
<ComboBoxItem text="谢谢" />
2865+
<ComboBoxItem text="北京" />
2866+
<ComboBoxItem text="中国" />
2867+
</ComboBox>
2868+
);
2869+
2870+
cy.get("[ui5-combobox]")
2871+
.as("combobox")
2872+
.realClick();
2873+
2874+
cy.get("@combobox")
2875+
.shadow()
2876+
.find("input")
2877+
.as("nativeInput")
2878+
.focus();
2879+
2880+
cy.get("@nativeInput").trigger("compositionstart", { data: "" });
2881+
2882+
cy.get("@combobox").should("have.prop", "_isComposing", true);
2883+
2884+
cy.get("@nativeInput").trigger("compositionupdate", { data: "谢谢" });
2885+
2886+
cy.get("@combobox").should("have.prop", "_isComposing", true);
2887+
2888+
cy.get("@nativeInput").trigger("compositionend", { data: "谢谢" });
2889+
2890+
cy.get("@nativeInput")
2891+
.invoke("val", "谢谢")
2892+
.trigger("input", { inputType: "insertCompositionText" });
2893+
2894+
cy.get("@combobox").should("have.prop", "_isComposing", false);
2895+
2896+
cy.get("@combobox").should("have.attr", "value", "谢谢");
2897+
2898+
cy.get("@combobox")
2899+
.shadow()
2900+
.find<ResponsivePopover>("[ui5-responsive-popover]")
2901+
.as("popover")
2902+
.ui5ResponsivePopoverOpened();
2903+
2904+
cy.get("@combobox")
2905+
.realPress("Enter");
2906+
2907+
cy.get("@combobox")
2908+
.should("have.attr", "value", "谢谢");
2909+
});
2910+
});

‎packages/main/cypress/specs/Input.cy.tsx‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2630,3 +2630,170 @@ describe("Property open", () => {
26302630
.ui5ResponsivePopoverClosed();
26312631
});
26322632
});
2633+
2634+
describe("Input Composition", () => {
2635+
it("should handle Korean composition correctly", () => {
2636+
cy.mount(
2637+
<Input
2638+
id="input-composition-korean"
2639+
showSuggestions
2640+
placeholder="Type in Korean ..."
2641+
>
2642+
<SuggestionItem text="안녕하세요" />
2643+
<SuggestionItem text="고맙습니다" />
2644+
<SuggestionItem text="사랑" />
2645+
<SuggestionItem text="한국" />
2646+
</Input>
2647+
);
2648+
2649+
cy.get("[ui5-input]")
2650+
.as("input")
2651+
.realClick();
2652+
2653+
cy.get("@input")
2654+
.shadow()
2655+
.find("input")
2656+
.as("nativeInput")
2657+
.focus();
2658+
2659+
cy.get("@nativeInput").trigger("compositionstart", { data: "" });
2660+
2661+
cy.get("@input").should("have.prop", "_isComposing", true);
2662+
2663+
cy.get("@nativeInput").trigger("compositionupdate", { data: "사랑" });
2664+
2665+
cy.get("@input").should("have.prop", "_isComposing", true);
2666+
2667+
cy.get("@nativeInput").trigger("compositionend", { data: "사랑" });
2668+
2669+
cy.get("@nativeInput")
2670+
.invoke("val", "사랑")
2671+
.trigger("input", { inputType: "insertCompositionText" });
2672+
2673+
cy.get("@input").should("have.prop", "_isComposing", false);
2674+
2675+
cy.get("@input").should("have.attr", "value", "사랑");
2676+
2677+
cy.get("@input")
2678+
.shadow()
2679+
.find<ResponsivePopover>("[ui5-responsive-popover]")
2680+
.as("popover")
2681+
.ui5ResponsivePopoverOpened();
2682+
2683+
cy.get("@input")
2684+
.realPress("Enter");
2685+
2686+
cy.get("@input")
2687+
.should("have.attr", "value", "사랑");
2688+
});
2689+
2690+
it("should handle Japanese composition correctly", () => {
2691+
cy.mount(
2692+
<Input
2693+
id="input-composition-japanese"
2694+
showSuggestions
2695+
placeholder="Type in Japanese ..."
2696+
>
2697+
<SuggestionItem text="こんにちは" />
2698+
<SuggestionItem text="ありがとう" />
2699+
<SuggestionItem text="東京" />
2700+
<SuggestionItem text="日本" />
2701+
</Input>
2702+
);
2703+
2704+
cy.get("[ui5-input]")
2705+
.as("input")
2706+
.realClick();
2707+
2708+
cy.get("@input")
2709+
.shadow()
2710+
.find("input")
2711+
.as("nativeInput")
2712+
.focus();
2713+
2714+
cy.get("@nativeInput").trigger("compositionstart", { data: "" });
2715+
2716+
cy.get("@input").should("have.prop", "_isComposing", true);
2717+
2718+
cy.get("@nativeInput").trigger("compositionupdate", { data: "ありがとう" });
2719+
2720+
cy.get("@input").should("have.prop", "_isComposing", true);
2721+
2722+
cy.get("@nativeInput").trigger("compositionend", { data: "ありがとう" });
2723+
2724+
cy.get("@nativeInput")
2725+
.invoke("val", "ありがとう")
2726+
.trigger("input", { inputType: "insertCompositionText" });
2727+
2728+
cy.get("@input").should("have.prop", "_isComposing", false);
2729+
2730+
cy.get("@input").should("have.attr", "value", "ありがとう");
2731+
2732+
cy.get("@input")
2733+
.shadow()
2734+
.find<ResponsivePopover>("[ui5-responsive-popover]")
2735+
.as("popover")
2736+
.ui5ResponsivePopoverOpened();
2737+
2738+
cy.get("@input")
2739+
.realPress("Enter");
2740+
2741+
cy.get("@input")
2742+
.should("have.attr", "value", "ありがとう");
2743+
});
2744+
2745+
it("should handle Chinese composition correctly", () => {
2746+
cy.mount(
2747+
<Input
2748+
id="input-composition-chinese"
2749+
showSuggestions
2750+
placeholder="Type in Chinese ..."
2751+
>
2752+
<SuggestionItem text="你好" />
2753+
<SuggestionItem text="谢谢" />
2754+
<SuggestionItem text="北京" />
2755+
<SuggestionItem text="中国" />
2756+
</Input>
2757+
);
2758+
2759+
cy.get("[ui5-input]")
2760+
.as("input")
2761+
.realClick();
2762+
2763+
cy.get("@input")
2764+
.shadow()
2765+
.find("input")
2766+
.as("nativeInput")
2767+
.focus();
2768+
2769+
cy.get("@nativeInput").trigger("compositionstart", { data: "" });
2770+
2771+
cy.get("@input").should("have.prop", "_isComposing", true);
2772+
2773+
cy.get("@nativeInput").trigger("compositionupdate", { data: "谢谢" });
2774+
2775+
cy.get("@input").should("have.prop", "_isComposing", true);
2776+
2777+
cy.get("@nativeInput").trigger("compositionend", { data: "谢谢" });
2778+
2779+
cy.get("@nativeInput")
2780+
.invoke("val", "谢谢")
2781+
.trigger("input", { inputType: "insertCompositionText" });
2782+
2783+
cy.get("@input").should("have.prop", "_isComposing", false);
2784+
2785+
cy.get("@input").should("have.attr", "value", "谢谢");
2786+
2787+
cy.get("@input")
2788+
.shadow()
2789+
.find<ResponsivePopover>("[ui5-responsive-popover]")
2790+
.as("popover")
2791+
.ui5ResponsivePopoverOpened();
2792+
2793+
cy.get("@input")
2794+
.realPress("Enter");
2795+
2796+
cy.get("@input")
2797+
.should("have.attr", "value", "谢谢");
2798+
});
2799+
});

0 commit comments

Comments
 (0)