@dxc-technology/halstack-react 7.0.0 → 8.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/HalstackContext.js +7 -8
- package/checkbox/Checkbox.d.ts +2 -2
- package/checkbox/Checkbox.js +16 -15
- package/checkbox/Checkbox.stories.tsx +79 -59
- package/checkbox/types.d.ts +4 -0
- package/common/variables.js +14 -10
- package/date-input/Calendar.d.ts +4 -0
- package/date-input/Calendar.js +258 -0
- package/date-input/DateInput.js +77 -222
- package/date-input/DateInput.stories.tsx +30 -17
- package/date-input/DateInput.test.js +411 -138
- package/date-input/DatePicker.d.ts +4 -0
- package/date-input/DatePicker.js +160 -0
- package/date-input/YearPicker.d.ts +4 -0
- package/date-input/YearPicker.js +115 -0
- package/date-input/types.d.ts +53 -0
- package/dropdown/Dropdown.js +32 -29
- package/dropdown/Dropdown.test.js +17 -22
- package/file-input/FileInput.d.ts +2 -2
- package/file-input/FileInput.js +166 -216
- package/file-input/FileInput.stories.tsx +38 -10
- package/file-input/FileInput.test.js +12 -12
- package/file-input/FileItem.d.ts +4 -14
- package/file-input/FileItem.js +38 -63
- package/file-input/types.d.ts +17 -0
- package/link/Link.js +1 -1
- package/number-input/NumberInput.test.js +5 -6
- package/package.json +7 -12
- package/resultsetTable/Icons.d.ts +7 -0
- package/resultsetTable/Icons.js +51 -0
- package/resultsetTable/ResultsetTable.js +48 -105
- package/resultsetTable/ResultsetTable.stories.tsx +50 -25
- package/resultsetTable/ResultsetTable.test.js +23 -41
- package/resultsetTable/types.d.ts +2 -2
- package/select/Select.stories.tsx +2 -5
- package/slider/Slider.d.ts +2 -2
- package/slider/Slider.js +5 -4
- package/slider/types.d.ts +4 -0
- package/switch/Switch.d.ts +3 -3
- package/switch/Switch.js +4 -3
- package/switch/types.d.ts +6 -1
- package/table/Table.test.js +1 -1
- package/text-input/TextInput.test.js +469 -616
- package/common/RequiredComponent.js +0 -32
|
@@ -401,27 +401,16 @@ describe("TextInput component tests", function () {
|
|
|
401
401
|
value: "Blur test"
|
|
402
402
|
});
|
|
403
403
|
});
|
|
404
|
-
test("Clear action tooltip is correct",
|
|
405
|
-
var _render10,
|
|
404
|
+
test("Clear action tooltip is correct", function () {
|
|
405
|
+
var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
406
|
+
label: "Input label",
|
|
407
|
+
value: "Text",
|
|
408
|
+
clearable: true
|
|
409
|
+
})),
|
|
410
|
+
getByTitle = _render10.getByTitle;
|
|
406
411
|
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
switch (_context.prev = _context.next) {
|
|
410
|
-
case 0:
|
|
411
|
-
_render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
412
|
-
label: "Input label",
|
|
413
|
-
value: "Text",
|
|
414
|
-
clearable: true
|
|
415
|
-
})), getByTitle = _render10.getByTitle;
|
|
416
|
-
expect(getByTitle("Clear field")).toBeTruthy();
|
|
417
|
-
|
|
418
|
-
case 2:
|
|
419
|
-
case "end":
|
|
420
|
-
return _context.stop();
|
|
421
|
-
}
|
|
422
|
-
}
|
|
423
|
-
}, _callee);
|
|
424
|
-
})));
|
|
412
|
+
expect(getByTitle("Clear field")).toBeTruthy();
|
|
413
|
+
});
|
|
425
414
|
test("Clear action onClick cleans the input", function () {
|
|
426
415
|
var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
427
416
|
label: "Input label",
|
|
@@ -691,113 +680,88 @@ describe("TextInput component tests", function () {
|
|
|
691
680
|
});
|
|
692
681
|
});
|
|
693
682
|
describe("TextInput component synchronous autosuggest tests", function () {
|
|
694
|
-
test("Autosuggest is displayed when the input gains focus",
|
|
695
|
-
var onChange
|
|
683
|
+
test("Autosuggest is displayed when the input gains focus", function () {
|
|
684
|
+
var onChange = jest.fn();
|
|
696
685
|
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
suggestions: countries,
|
|
705
|
-
onChange: onChange
|
|
706
|
-
})), getByRole = _render21.getByRole, getByText = _render21.getByText;
|
|
707
|
-
input = getByRole("combobox");
|
|
686
|
+
var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
687
|
+
label: "Autocomplete Countries",
|
|
688
|
+
suggestions: countries,
|
|
689
|
+
onChange: onChange
|
|
690
|
+
})),
|
|
691
|
+
getByRole = _render21.getByRole,
|
|
692
|
+
getByText = _render21.getByText;
|
|
708
693
|
|
|
709
|
-
|
|
694
|
+
var input = getByRole("combobox");
|
|
710
695
|
|
|
711
|
-
|
|
712
|
-
expect(list).toBeTruthy();
|
|
713
|
-
expect(getByText("Afghanistan")).toBeTruthy();
|
|
714
|
-
expect(getByText("Albania")).toBeTruthy();
|
|
715
|
-
expect(getByText("Algeria")).toBeTruthy();
|
|
716
|
-
expect(getByText("Andorra")).toBeTruthy();
|
|
696
|
+
_react2.fireEvent.focus(input);
|
|
717
697
|
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
})
|
|
725
|
-
test("Autosuggest is displayed when the user clicks the input",
|
|
726
|
-
var onChange
|
|
698
|
+
var list = getByRole("listbox");
|
|
699
|
+
expect(list).toBeTruthy();
|
|
700
|
+
expect(getByText("Afghanistan")).toBeTruthy();
|
|
701
|
+
expect(getByText("Albania")).toBeTruthy();
|
|
702
|
+
expect(getByText("Algeria")).toBeTruthy();
|
|
703
|
+
expect(getByText("Andorra")).toBeTruthy();
|
|
704
|
+
});
|
|
705
|
+
test("Autosuggest is displayed when the user clicks the input", function () {
|
|
706
|
+
var onChange = jest.fn();
|
|
727
707
|
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
suggestions: countries,
|
|
736
|
-
onChange: onChange
|
|
737
|
-
})), getByRole = _render22.getByRole, getByText = _render22.getByText;
|
|
738
|
-
input = getByRole("combobox");
|
|
708
|
+
var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
709
|
+
label: "Autocomplete Countries",
|
|
710
|
+
suggestions: countries,
|
|
711
|
+
onChange: onChange
|
|
712
|
+
})),
|
|
713
|
+
getByRole = _render22.getByRole,
|
|
714
|
+
getByText = _render22.getByText;
|
|
739
715
|
|
|
740
|
-
|
|
716
|
+
var input = getByRole("combobox");
|
|
741
717
|
|
|
742
|
-
|
|
743
|
-
expect(list).toBeTruthy();
|
|
744
|
-
expect(getByText("Afghanistan")).toBeTruthy();
|
|
745
|
-
expect(getByText("Albania")).toBeTruthy();
|
|
746
|
-
expect(getByText("Algeria")).toBeTruthy();
|
|
747
|
-
expect(getByText("Andorra")).toBeTruthy();
|
|
718
|
+
_react2.fireEvent.focus(input);
|
|
748
719
|
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
})
|
|
756
|
-
test("Autosuggest is displayed while the user is writing (if closed previously, if it is open stays open)",
|
|
757
|
-
var onChange
|
|
720
|
+
var list = getByRole("listbox");
|
|
721
|
+
expect(list).toBeTruthy();
|
|
722
|
+
expect(getByText("Afghanistan")).toBeTruthy();
|
|
723
|
+
expect(getByText("Albania")).toBeTruthy();
|
|
724
|
+
expect(getByText("Algeria")).toBeTruthy();
|
|
725
|
+
expect(getByText("Andorra")).toBeTruthy();
|
|
726
|
+
});
|
|
727
|
+
test("Autosuggest is displayed while the user is writing (if closed previously, if it is open stays open)", function () {
|
|
728
|
+
var onChange = jest.fn();
|
|
758
729
|
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
})), getByRole = _render23.getByRole, queryByRole = _render23.queryByRole, getByText = _render23.getByText, getAllByText = _render23.getAllByText;
|
|
769
|
-
input = getByRole("combobox");
|
|
730
|
+
var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
731
|
+
label: "Autocomplete Countries",
|
|
732
|
+
suggestions: countries,
|
|
733
|
+
onChange: onChange
|
|
734
|
+
})),
|
|
735
|
+
getByRole = _render23.getByRole,
|
|
736
|
+
queryByRole = _render23.queryByRole,
|
|
737
|
+
getByText = _render23.getByText,
|
|
738
|
+
getAllByText = _render23.getAllByText;
|
|
770
739
|
|
|
771
|
-
|
|
740
|
+
var input = getByRole("combobox");
|
|
772
741
|
|
|
773
|
-
|
|
774
|
-
expect(list).toBeTruthy();
|
|
742
|
+
_react2.fireEvent.focus(input);
|
|
775
743
|
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
code: "Esc",
|
|
779
|
-
keyCode: 27,
|
|
780
|
-
charCode: 27
|
|
781
|
-
});
|
|
744
|
+
var list = getByRole("listbox");
|
|
745
|
+
expect(list).toBeTruthy();
|
|
782
746
|
|
|
783
|
-
|
|
747
|
+
_react2.fireEvent.keyDown(input, {
|
|
748
|
+
key: "Esc",
|
|
749
|
+
code: "Esc",
|
|
750
|
+
keyCode: 27,
|
|
751
|
+
charCode: 27
|
|
752
|
+
});
|
|
784
753
|
|
|
785
|
-
|
|
754
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
786
755
|
|
|
787
|
-
|
|
788
|
-
expect(getAllByText("B").length).toBe(4);
|
|
789
|
-
expect(getByText("ahamas")).toBeTruthy();
|
|
790
|
-
expect(getByText("ahrain")).toBeTruthy();
|
|
791
|
-
expect(getByText("angladesh")).toBeTruthy();
|
|
792
|
-
expect(getByText("arbados")).toBeTruthy();
|
|
756
|
+
_userEvent["default"].type(input, "B");
|
|
793
757
|
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
})
|
|
758
|
+
expect(list).toBeTruthy();
|
|
759
|
+
expect(getAllByText("B").length).toBe(4);
|
|
760
|
+
expect(getByText("ahamas")).toBeTruthy();
|
|
761
|
+
expect(getByText("ahrain")).toBeTruthy();
|
|
762
|
+
expect(getByText("angladesh")).toBeTruthy();
|
|
763
|
+
expect(getByText("arbados")).toBeTruthy();
|
|
764
|
+
});
|
|
801
765
|
test("Autosuggest displays filtered when the input has a default value", function () {
|
|
802
766
|
var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
803
767
|
label: "Uncontrolled suggestions filtered by default",
|
|
@@ -821,517 +785,412 @@ describe("TextInput component synchronous autosuggest tests", function () {
|
|
|
821
785
|
expect(getByText("3")).toBeTruthy();
|
|
822
786
|
expect(getByText("4")).toBeTruthy();
|
|
823
787
|
});
|
|
824
|
-
test("Autosuggest is not displayed when prop suggestions is an empty array",
|
|
825
|
-
var onChange
|
|
826
|
-
|
|
827
|
-
return _regenerator["default"].wrap(function _callee5$(_context5) {
|
|
828
|
-
while (1) {
|
|
829
|
-
switch (_context5.prev = _context5.next) {
|
|
830
|
-
case 0:
|
|
831
|
-
onChange = jest.fn();
|
|
832
|
-
_render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
833
|
-
label: "Autocomplete Countries",
|
|
834
|
-
suggestions: [],
|
|
835
|
-
onChange: onChange
|
|
836
|
-
})), queryByRole = _render25.queryByRole;
|
|
837
|
-
input = queryByRole("textbox");
|
|
788
|
+
test("Autosuggest is not displayed when prop suggestions is an empty array", function () {
|
|
789
|
+
var onChange = jest.fn();
|
|
838
790
|
|
|
839
|
-
|
|
791
|
+
var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
792
|
+
label: "Autocomplete Countries",
|
|
793
|
+
suggestions: [],
|
|
794
|
+
onChange: onChange
|
|
795
|
+
})),
|
|
796
|
+
queryByRole = _render25.queryByRole;
|
|
840
797
|
|
|
841
|
-
|
|
798
|
+
var input = queryByRole("textbox");
|
|
842
799
|
|
|
843
|
-
|
|
844
|
-
case "end":
|
|
845
|
-
return _context5.stop();
|
|
846
|
-
}
|
|
847
|
-
}
|
|
848
|
-
}, _callee5);
|
|
849
|
-
})));
|
|
850
|
-
test("Autosuggest closes the listbox when there are no matches for the user's input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
|
|
851
|
-
var onChange, _render26, getByRole, queryByRole, getByText, input, list;
|
|
800
|
+
_react2.fireEvent.focus(input);
|
|
852
801
|
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
onChange = jest.fn();
|
|
858
|
-
_render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
859
|
-
label: "Autocomplete Countries",
|
|
860
|
-
suggestions: countries,
|
|
861
|
-
onChange: onChange
|
|
862
|
-
})), getByRole = _render26.getByRole, queryByRole = _render26.queryByRole, getByText = _render26.getByText;
|
|
863
|
-
input = getByRole("combobox");
|
|
802
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
803
|
+
});
|
|
804
|
+
test("Autosuggest closes the listbox when there are no matches for the user's input", function () {
|
|
805
|
+
var onChange = jest.fn();
|
|
864
806
|
|
|
865
|
-
|
|
807
|
+
var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
808
|
+
label: "Autocomplete Countries",
|
|
809
|
+
suggestions: countries,
|
|
810
|
+
onChange: onChange
|
|
811
|
+
})),
|
|
812
|
+
getByRole = _render26.getByRole,
|
|
813
|
+
queryByRole = _render26.queryByRole,
|
|
814
|
+
getByText = _render26.getByText;
|
|
866
815
|
|
|
867
|
-
|
|
868
|
-
expect(list).toBeTruthy();
|
|
869
|
-
expect(getByText("Afghanistan")).toBeTruthy();
|
|
816
|
+
var input = getByRole("combobox");
|
|
870
817
|
|
|
871
|
-
|
|
818
|
+
_react2.fireEvent.focus(input);
|
|
872
819
|
|
|
873
|
-
|
|
820
|
+
var list = getByRole("listbox");
|
|
821
|
+
expect(list).toBeTruthy();
|
|
822
|
+
expect(getByText("Afghanistan")).toBeTruthy();
|
|
874
823
|
|
|
875
|
-
|
|
876
|
-
case "end":
|
|
877
|
-
return _context6.stop();
|
|
878
|
-
}
|
|
879
|
-
}
|
|
880
|
-
}, _callee6);
|
|
881
|
-
})));
|
|
882
|
-
test("Autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
|
|
883
|
-
var onChange, _render27, getByRole, queryByRole, getByText, input, list;
|
|
824
|
+
_userEvent["default"].type(input, "x");
|
|
884
825
|
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
onChange = jest.fn();
|
|
890
|
-
_render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
891
|
-
label: "Autocomplete Countries",
|
|
892
|
-
suggestions: countries,
|
|
893
|
-
onChange: onChange
|
|
894
|
-
})), getByRole = _render27.getByRole, queryByRole = _render27.queryByRole, getByText = _render27.getByText;
|
|
895
|
-
input = getByRole("combobox");
|
|
826
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
827
|
+
});
|
|
828
|
+
test("Autosuggest with no matches founded doesn't let the listbox to be opened", function () {
|
|
829
|
+
var onChange = jest.fn();
|
|
896
830
|
|
|
897
|
-
|
|
831
|
+
var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
832
|
+
label: "Autocomplete Countries",
|
|
833
|
+
suggestions: countries,
|
|
834
|
+
onChange: onChange
|
|
835
|
+
})),
|
|
836
|
+
getByRole = _render27.getByRole,
|
|
837
|
+
queryByRole = _render27.queryByRole,
|
|
838
|
+
getByText = _render27.getByText;
|
|
898
839
|
|
|
899
|
-
|
|
900
|
-
expect(list).toBeTruthy();
|
|
901
|
-
expect(getByText("Afghanistan")).toBeTruthy();
|
|
840
|
+
var input = getByRole("combobox");
|
|
902
841
|
|
|
903
|
-
|
|
842
|
+
_react2.fireEvent.focus(input);
|
|
904
843
|
|
|
905
|
-
|
|
844
|
+
var list = getByRole("listbox");
|
|
845
|
+
expect(list).toBeTruthy();
|
|
846
|
+
expect(getByText("Afghanistan")).toBeTruthy();
|
|
906
847
|
|
|
907
|
-
|
|
848
|
+
_userEvent["default"].type(input, "x");
|
|
908
849
|
|
|
909
|
-
|
|
850
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
910
851
|
|
|
911
|
-
|
|
912
|
-
key: "ArrowUp",
|
|
913
|
-
code: "ArrowUp",
|
|
914
|
-
keyCode: 38,
|
|
915
|
-
charCode: 38
|
|
916
|
-
});
|
|
852
|
+
_react2.fireEvent.focus(input);
|
|
917
853
|
|
|
918
|
-
|
|
854
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
919
855
|
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
856
|
+
_react2.fireEvent.keyDown(input, {
|
|
857
|
+
key: "ArrowUp",
|
|
858
|
+
code: "ArrowUp",
|
|
859
|
+
keyCode: 38,
|
|
860
|
+
charCode: 38
|
|
861
|
+
});
|
|
926
862
|
|
|
927
|
-
|
|
863
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
928
864
|
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
}
|
|
935
|
-
})));
|
|
936
|
-
test("Autosuggest uncontrolled - Suggestion selected by click", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
|
|
937
|
-
var onChange, _render28, getByRole, getByText, queryByRole, input;
|
|
865
|
+
_react2.fireEvent.keyDown(input, {
|
|
866
|
+
key: "ArrowDown",
|
|
867
|
+
code: "ArrowDown",
|
|
868
|
+
keyCode: 40,
|
|
869
|
+
charCode: 40
|
|
870
|
+
});
|
|
938
871
|
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
onChange = jest.fn();
|
|
944
|
-
_render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
945
|
-
label: "Autocomplete Countries",
|
|
946
|
-
suggestions: countries,
|
|
947
|
-
onChange: onChange
|
|
948
|
-
})), getByRole = _render28.getByRole, getByText = _render28.getByText, queryByRole = _render28.queryByRole;
|
|
949
|
-
input = getByRole("combobox");
|
|
872
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
873
|
+
});
|
|
874
|
+
test("Autosuggest uncontrolled - Suggestion selected by click", function () {
|
|
875
|
+
var onChange = jest.fn();
|
|
950
876
|
|
|
951
|
-
|
|
877
|
+
var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
878
|
+
label: "Autocomplete Countries",
|
|
879
|
+
suggestions: countries,
|
|
880
|
+
onChange: onChange
|
|
881
|
+
})),
|
|
882
|
+
getByRole = _render28.getByRole,
|
|
883
|
+
getByText = _render28.getByText,
|
|
884
|
+
queryByRole = _render28.queryByRole;
|
|
952
885
|
|
|
953
|
-
|
|
886
|
+
var input = getByRole("combobox");
|
|
954
887
|
|
|
955
|
-
|
|
956
|
-
expect(getByText("Alba")).toBeTruthy();
|
|
957
|
-
expect(getByText("nia")).toBeTruthy();
|
|
888
|
+
_react2.fireEvent.focus(input);
|
|
958
889
|
|
|
959
|
-
|
|
890
|
+
_userEvent["default"].type(input, "Alba");
|
|
960
891
|
|
|
961
|
-
|
|
962
|
-
|
|
892
|
+
expect(onChange).toHaveBeenCalled();
|
|
893
|
+
expect(getByText("Alba")).toBeTruthy();
|
|
894
|
+
expect(getByText("nia")).toBeTruthy();
|
|
963
895
|
|
|
964
|
-
|
|
965
|
-
case "end":
|
|
966
|
-
return _context8.stop();
|
|
967
|
-
}
|
|
968
|
-
}
|
|
969
|
-
}, _callee8);
|
|
970
|
-
})));
|
|
971
|
-
test("Autosuggest controlled - Suggestion selected by click", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
|
|
972
|
-
var onChange, _render29, getByRole, getByText, queryByRole, input;
|
|
896
|
+
_userEvent["default"].click(getByRole("option"));
|
|
973
897
|
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
_render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
980
|
-
label: "Autocomplete Countries",
|
|
981
|
-
value: "Andor",
|
|
982
|
-
suggestions: countries,
|
|
983
|
-
onChange: onChange
|
|
984
|
-
})), getByRole = _render29.getByRole, getByText = _render29.getByText, queryByRole = _render29.queryByRole;
|
|
985
|
-
input = getByRole("combobox");
|
|
898
|
+
expect(input.value).toBe("Albania");
|
|
899
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
900
|
+
});
|
|
901
|
+
test("Autosuggest controlled - Suggestion selected by click", function () {
|
|
902
|
+
var onChange = jest.fn();
|
|
986
903
|
|
|
987
|
-
|
|
904
|
+
var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
905
|
+
label: "Autocomplete Countries",
|
|
906
|
+
value: "Andor",
|
|
907
|
+
suggestions: countries,
|
|
908
|
+
onChange: onChange
|
|
909
|
+
})),
|
|
910
|
+
getByRole = _render29.getByRole,
|
|
911
|
+
getByText = _render29.getByText,
|
|
912
|
+
queryByRole = _render29.queryByRole;
|
|
988
913
|
|
|
989
|
-
|
|
990
|
-
expect(getByText("Andor")).toBeTruthy();
|
|
991
|
-
expect(getByText("ra")).toBeTruthy();
|
|
914
|
+
var input = getByRole("combobox");
|
|
992
915
|
|
|
993
|
-
|
|
916
|
+
_userEvent["default"].click(getByText("Autocomplete Countries"));
|
|
994
917
|
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
expect(queryByRole("listbox")).toBeFalsy();
|
|
918
|
+
expect(input.value).toBe("Andor");
|
|
919
|
+
expect(getByText("Andor")).toBeTruthy();
|
|
920
|
+
expect(getByText("ra")).toBeTruthy();
|
|
999
921
|
|
|
1000
|
-
|
|
1001
|
-
case "end":
|
|
1002
|
-
return _context9.stop();
|
|
1003
|
-
}
|
|
1004
|
-
}
|
|
1005
|
-
}, _callee9);
|
|
1006
|
-
})));
|
|
1007
|
-
test("Autosuggest - Pattern constraint", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
|
|
1008
|
-
var onChange, onBlur, _render30, getByRole, getByText, input;
|
|
922
|
+
_userEvent["default"].click(getByRole("option"));
|
|
1009
923
|
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
suggestions: countries,
|
|
1019
|
-
onChange: onChange,
|
|
1020
|
-
onBlur: onBlur,
|
|
1021
|
-
pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
|
|
1022
|
-
})), getByRole = _render30.getByRole, getByText = _render30.getByText;
|
|
1023
|
-
input = getByRole("combobox");
|
|
924
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
925
|
+
value: "Andorra"
|
|
926
|
+
});
|
|
927
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
928
|
+
});
|
|
929
|
+
test("Autosuggest - Pattern constraint", function () {
|
|
930
|
+
var onChange = jest.fn();
|
|
931
|
+
var onBlur = jest.fn();
|
|
1024
932
|
|
|
1025
|
-
|
|
933
|
+
var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
934
|
+
label: "Autocomplete Countries",
|
|
935
|
+
suggestions: countries,
|
|
936
|
+
onChange: onChange,
|
|
937
|
+
onBlur: onBlur,
|
|
938
|
+
pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
|
|
939
|
+
})),
|
|
940
|
+
getByRole = _render30.getByRole,
|
|
941
|
+
getByText = _render30.getByText;
|
|
1026
942
|
|
|
1027
|
-
|
|
943
|
+
var input = getByRole("combobox");
|
|
1028
944
|
|
|
1029
|
-
|
|
1030
|
-
expect(getByText("ra")).toBeTruthy();
|
|
945
|
+
_react2.fireEvent.focus(input);
|
|
1031
946
|
|
|
1032
|
-
|
|
947
|
+
_userEvent["default"].type(input, "Andor");
|
|
1033
948
|
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
error: "Please match the format requested."
|
|
1037
|
-
});
|
|
949
|
+
expect(getByText("Andor")).toBeTruthy();
|
|
950
|
+
expect(getByText("ra")).toBeTruthy();
|
|
1038
951
|
|
|
1039
|
-
|
|
952
|
+
_userEvent["default"].click(getByRole("option"));
|
|
1040
953
|
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
954
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
955
|
+
value: "Andorra",
|
|
956
|
+
error: "Please match the format requested."
|
|
957
|
+
});
|
|
1045
958
|
|
|
1046
|
-
|
|
1047
|
-
case "end":
|
|
1048
|
-
return _context10.stop();
|
|
1049
|
-
}
|
|
1050
|
-
}
|
|
1051
|
-
}, _callee10);
|
|
1052
|
-
})));
|
|
1053
|
-
test("Autosuggest - Length constraint", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
|
|
1054
|
-
var onChange, onBlur, _render31, getByText, getByRole, input;
|
|
959
|
+
_react2.fireEvent.blur(input);
|
|
1055
960
|
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
suggestions: countries,
|
|
1065
|
-
onChange: onChange,
|
|
1066
|
-
onBlur: onBlur,
|
|
1067
|
-
minLength: 5,
|
|
1068
|
-
maxLength: 10
|
|
1069
|
-
})), getByText = _render31.getByText, getByRole = _render31.getByRole;
|
|
1070
|
-
input = getByRole("combobox");
|
|
961
|
+
expect(onBlur).toHaveBeenCalledWith({
|
|
962
|
+
value: "Andorra",
|
|
963
|
+
error: "Please match the format requested."
|
|
964
|
+
});
|
|
965
|
+
});
|
|
966
|
+
test("Autosuggest - Length constraint", function () {
|
|
967
|
+
var onChange = jest.fn();
|
|
968
|
+
var onBlur = jest.fn();
|
|
1071
969
|
|
|
1072
|
-
|
|
970
|
+
var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
971
|
+
label: "Autocomplete Countries",
|
|
972
|
+
suggestions: countries,
|
|
973
|
+
onChange: onChange,
|
|
974
|
+
onBlur: onBlur,
|
|
975
|
+
minLength: 5,
|
|
976
|
+
maxLength: 10
|
|
977
|
+
})),
|
|
978
|
+
getByText = _render31.getByText,
|
|
979
|
+
getByRole = _render31.getByRole;
|
|
1073
980
|
|
|
1074
|
-
|
|
981
|
+
var input = getByRole("combobox");
|
|
1075
982
|
|
|
1076
|
-
|
|
1077
|
-
expect(getByText("d")).toBeTruthy();
|
|
983
|
+
_react2.fireEvent.focus(input);
|
|
1078
984
|
|
|
1079
|
-
|
|
985
|
+
_userEvent["default"].type(input, "Cha");
|
|
1080
986
|
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
error: "Min length 5, max length 10."
|
|
1084
|
-
});
|
|
987
|
+
expect(getByText("Cha")).toBeTruthy();
|
|
988
|
+
expect(getByText("d")).toBeTruthy();
|
|
1085
989
|
|
|
1086
|
-
|
|
990
|
+
_userEvent["default"].click(getByRole("option"));
|
|
1087
991
|
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
992
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
993
|
+
value: "Cha",
|
|
994
|
+
error: "Min length 5, max length 10."
|
|
995
|
+
});
|
|
1092
996
|
|
|
1093
|
-
|
|
1094
|
-
case "end":
|
|
1095
|
-
return _context11.stop();
|
|
1096
|
-
}
|
|
1097
|
-
}
|
|
1098
|
-
}, _callee11);
|
|
1099
|
-
})));
|
|
1100
|
-
test("Autosuggest keys: arrow down key opens autosuggest, active first option is selected with Enter and closes the autosuggest", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12() {
|
|
1101
|
-
var onChange, _render32, getByRole, queryByRole, input, list;
|
|
997
|
+
_react2.fireEvent.blur(input);
|
|
1102
998
|
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
suggestions: countries,
|
|
1111
|
-
onChange: onChange
|
|
1112
|
-
})), getByRole = _render32.getByRole, queryByRole = _render32.queryByRole;
|
|
1113
|
-
input = getByRole("combobox");
|
|
999
|
+
expect(onBlur).toHaveBeenCalledWith({
|
|
1000
|
+
value: "Chad",
|
|
1001
|
+
error: "Min length 5, max length 10."
|
|
1002
|
+
});
|
|
1003
|
+
});
|
|
1004
|
+
test("Autosuggest keys: arrow down key opens autosuggest, active first option is selected with Enter and closes the autosuggest", function () {
|
|
1005
|
+
var onChange = jest.fn();
|
|
1114
1006
|
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1007
|
+
var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1008
|
+
label: "Autocomplete Countries",
|
|
1009
|
+
suggestions: countries,
|
|
1010
|
+
onChange: onChange
|
|
1011
|
+
})),
|
|
1012
|
+
getByRole = _render32.getByRole,
|
|
1013
|
+
queryByRole = _render32.queryByRole;
|
|
1121
1014
|
|
|
1122
|
-
|
|
1123
|
-
expect(list).toBeTruthy();
|
|
1015
|
+
var input = getByRole("combobox");
|
|
1124
1016
|
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1017
|
+
_react2.fireEvent.keyDown(input, {
|
|
1018
|
+
key: "ArrowDown",
|
|
1019
|
+
code: "ArrowDown",
|
|
1020
|
+
keyCode: 40,
|
|
1021
|
+
charCode: 40
|
|
1022
|
+
});
|
|
1131
1023
|
|
|
1132
|
-
|
|
1133
|
-
|
|
1024
|
+
var list = getByRole("listbox");
|
|
1025
|
+
expect(list).toBeTruthy();
|
|
1134
1026
|
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
}
|
|
1141
|
-
})));
|
|
1142
|
-
test("Autosuggest keys: arrow up key opens autosuggest, active last option is selected with Enter and closes the autosuggest", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13() {
|
|
1143
|
-
var onChange, _render33, getByRole, queryByRole, input, list;
|
|
1027
|
+
_react2.fireEvent.keyDown(input, {
|
|
1028
|
+
key: "Enter",
|
|
1029
|
+
code: "Enter",
|
|
1030
|
+
keyCode: 13,
|
|
1031
|
+
charCode: 13
|
|
1032
|
+
});
|
|
1144
1033
|
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
_render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1151
|
-
label: "Autocomplete Countries",
|
|
1152
|
-
suggestions: countries,
|
|
1153
|
-
onChange: onChange
|
|
1154
|
-
})), getByRole = _render33.getByRole, queryByRole = _render33.queryByRole;
|
|
1155
|
-
input = getByRole("combobox");
|
|
1034
|
+
expect(input.value).toBe("Afghanistan");
|
|
1035
|
+
expect(queryByRole("list")).toBeFalsy();
|
|
1036
|
+
});
|
|
1037
|
+
test("Autosuggest keys: arrow up key opens autosuggest, active last option is selected with Enter and closes the autosuggest", function () {
|
|
1038
|
+
var onChange = jest.fn();
|
|
1156
1039
|
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1040
|
+
var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1041
|
+
label: "Autocomplete Countries",
|
|
1042
|
+
suggestions: countries,
|
|
1043
|
+
onChange: onChange
|
|
1044
|
+
})),
|
|
1045
|
+
getByRole = _render33.getByRole,
|
|
1046
|
+
queryByRole = _render33.queryByRole;
|
|
1163
1047
|
|
|
1164
|
-
|
|
1165
|
-
expect(list).toBeTruthy();
|
|
1048
|
+
var input = getByRole("combobox");
|
|
1166
1049
|
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1050
|
+
_react2.fireEvent.keyDown(input, {
|
|
1051
|
+
key: "ArrowUp",
|
|
1052
|
+
code: "ArrowUp",
|
|
1053
|
+
keyCode: 38,
|
|
1054
|
+
charCode: 38
|
|
1055
|
+
});
|
|
1173
1056
|
|
|
1174
|
-
|
|
1175
|
-
|
|
1057
|
+
var list = getByRole("listbox");
|
|
1058
|
+
expect(list).toBeTruthy();
|
|
1176
1059
|
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
}
|
|
1183
|
-
})));
|
|
1184
|
-
test("Autosuggest keys: Esc key closes the autosuggest and cleans the input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14() {
|
|
1185
|
-
var onChange, _render34, getByRole, queryByRole, input, list;
|
|
1060
|
+
_react2.fireEvent.keyDown(input, {
|
|
1061
|
+
key: "Enter",
|
|
1062
|
+
code: "Enter",
|
|
1063
|
+
keyCode: 13,
|
|
1064
|
+
charCode: 13
|
|
1065
|
+
});
|
|
1186
1066
|
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
_render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1193
|
-
label: "Autocomplete Countries",
|
|
1194
|
-
suggestions: countries,
|
|
1195
|
-
onChange: onChange
|
|
1196
|
-
})), getByRole = _render34.getByRole, queryByRole = _render34.queryByRole;
|
|
1197
|
-
input = getByRole("combobox");
|
|
1067
|
+
expect(input.value).toBe("Djibouti");
|
|
1068
|
+
expect(queryByRole("list")).toBeFalsy();
|
|
1069
|
+
});
|
|
1070
|
+
test("Autosuggest keys: Esc key closes the autosuggest and cleans the input", function () {
|
|
1071
|
+
var onChange = jest.fn();
|
|
1198
1072
|
|
|
1199
|
-
|
|
1073
|
+
var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1074
|
+
label: "Autocomplete Countries",
|
|
1075
|
+
suggestions: countries,
|
|
1076
|
+
onChange: onChange
|
|
1077
|
+
})),
|
|
1078
|
+
getByRole = _render34.getByRole,
|
|
1079
|
+
queryByRole = _render34.queryByRole;
|
|
1200
1080
|
|
|
1201
|
-
|
|
1081
|
+
var input = getByRole("combobox");
|
|
1202
1082
|
|
|
1203
|
-
|
|
1204
|
-
expect(list).toBeTruthy();
|
|
1083
|
+
_react2.fireEvent.focus(input);
|
|
1205
1084
|
|
|
1206
|
-
|
|
1207
|
-
key: "Esc",
|
|
1208
|
-
code: "Esc",
|
|
1209
|
-
keyCode: 27,
|
|
1210
|
-
charCode: 27
|
|
1211
|
-
});
|
|
1085
|
+
_userEvent["default"].type(input, "Bangla");
|
|
1212
1086
|
|
|
1213
|
-
|
|
1214
|
-
|
|
1087
|
+
var list = getByRole("listbox");
|
|
1088
|
+
expect(list).toBeTruthy();
|
|
1215
1089
|
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
}
|
|
1222
|
-
})));
|
|
1223
|
-
test("Autosuggest keys: Enter, if no active suggestion closes the autosuggest", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee15() {
|
|
1224
|
-
var onChange, _render35, getByRole, queryByRole, input, list;
|
|
1090
|
+
_react2.fireEvent.keyDown(input, {
|
|
1091
|
+
key: "Esc",
|
|
1092
|
+
code: "Esc",
|
|
1093
|
+
keyCode: 27,
|
|
1094
|
+
charCode: 27
|
|
1095
|
+
});
|
|
1225
1096
|
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
_render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1232
|
-
label: "Autocomplete Countries",
|
|
1233
|
-
suggestions: countries,
|
|
1234
|
-
onChange: onChange
|
|
1235
|
-
})), getByRole = _render35.getByRole, queryByRole = _render35.queryByRole;
|
|
1236
|
-
input = getByRole("combobox");
|
|
1097
|
+
expect(input.value).toBe("");
|
|
1098
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
1099
|
+
});
|
|
1100
|
+
test("Autosuggest keys: Enter, if no active suggestion closes the autosuggest", function () {
|
|
1101
|
+
var onChange = jest.fn();
|
|
1237
1102
|
|
|
1238
|
-
|
|
1103
|
+
var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1104
|
+
label: "Autocomplete Countries",
|
|
1105
|
+
suggestions: countries,
|
|
1106
|
+
onChange: onChange
|
|
1107
|
+
})),
|
|
1108
|
+
getByRole = _render35.getByRole,
|
|
1109
|
+
queryByRole = _render35.queryByRole;
|
|
1239
1110
|
|
|
1240
|
-
|
|
1241
|
-
expect(list).toBeTruthy();
|
|
1111
|
+
var input = getByRole("combobox");
|
|
1242
1112
|
|
|
1243
|
-
|
|
1244
|
-
key: "Enter",
|
|
1245
|
-
code: "Enter",
|
|
1246
|
-
keyCode: 27,
|
|
1247
|
-
charCode: 27
|
|
1248
|
-
});
|
|
1113
|
+
_react2.fireEvent.focus(input);
|
|
1249
1114
|
|
|
1250
|
-
|
|
1251
|
-
|
|
1115
|
+
var list = getByRole("listbox");
|
|
1116
|
+
expect(list).toBeTruthy();
|
|
1252
1117
|
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
}
|
|
1259
|
-
})));
|
|
1260
|
-
test("Autosuggest complex key secuence: write, arrow up two times, arrow down and select with Enter. Then, clean with Esc.", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16() {
|
|
1261
|
-
var onChange, _render36, getByRole, queryByRole, input;
|
|
1118
|
+
_react2.fireEvent.keyDown(input, {
|
|
1119
|
+
key: "Enter",
|
|
1120
|
+
code: "Enter",
|
|
1121
|
+
keyCode: 27,
|
|
1122
|
+
charCode: 27
|
|
1123
|
+
});
|
|
1262
1124
|
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
_render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1269
|
-
label: "Autocomplete Countries",
|
|
1270
|
-
suggestions: countries,
|
|
1271
|
-
onChange: onChange
|
|
1272
|
-
})), getByRole = _render36.getByRole, queryByRole = _render36.queryByRole;
|
|
1273
|
-
input = getByRole("combobox");
|
|
1125
|
+
expect(input.value).toBe("");
|
|
1126
|
+
expect(queryByRole("list")).toBeFalsy();
|
|
1127
|
+
});
|
|
1128
|
+
test("Autosuggest complex key secuence: write, arrow up two times, arrow down and select with Enter. Then, clean with Esc.", function () {
|
|
1129
|
+
var onChange = jest.fn();
|
|
1274
1130
|
|
|
1275
|
-
|
|
1131
|
+
var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1132
|
+
label: "Autocomplete Countries",
|
|
1133
|
+
suggestions: countries,
|
|
1134
|
+
onChange: onChange
|
|
1135
|
+
})),
|
|
1136
|
+
getByRole = _render36.getByRole,
|
|
1137
|
+
queryByRole = _render36.queryByRole;
|
|
1276
1138
|
|
|
1277
|
-
|
|
1139
|
+
var input = getByRole("combobox");
|
|
1278
1140
|
|
|
1279
|
-
|
|
1280
|
-
key: "ArrowUp",
|
|
1281
|
-
code: "ArrowUp",
|
|
1282
|
-
keyCode: 38,
|
|
1283
|
-
charCode: 38
|
|
1284
|
-
});
|
|
1141
|
+
_react2.fireEvent.focus(input);
|
|
1285
1142
|
|
|
1286
|
-
|
|
1287
|
-
key: "ArrowUp",
|
|
1288
|
-
code: "ArrowUpp",
|
|
1289
|
-
keyCode: 38,
|
|
1290
|
-
charCode: 38
|
|
1291
|
-
});
|
|
1143
|
+
_userEvent["default"].type(input, "Ba");
|
|
1292
1144
|
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1145
|
+
_react2.fireEvent.keyDown(input, {
|
|
1146
|
+
key: "ArrowUp",
|
|
1147
|
+
code: "ArrowUp",
|
|
1148
|
+
keyCode: 38,
|
|
1149
|
+
charCode: 38
|
|
1150
|
+
});
|
|
1299
1151
|
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1152
|
+
_react2.fireEvent.keyDown(input, {
|
|
1153
|
+
key: "ArrowUp",
|
|
1154
|
+
code: "ArrowUpp",
|
|
1155
|
+
keyCode: 38,
|
|
1156
|
+
charCode: 38
|
|
1157
|
+
});
|
|
1306
1158
|
|
|
1307
|
-
|
|
1308
|
-
|
|
1159
|
+
_react2.fireEvent.keyDown(input, {
|
|
1160
|
+
key: "ArrowDown",
|
|
1161
|
+
code: "ArrowDown",
|
|
1162
|
+
keyCode: 40,
|
|
1163
|
+
charCode: 40
|
|
1164
|
+
});
|
|
1309
1165
|
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1166
|
+
_react2.fireEvent.keyDown(input, {
|
|
1167
|
+
key: "Enter",
|
|
1168
|
+
code: "Enter",
|
|
1169
|
+
keyCode: 13,
|
|
1170
|
+
charCode: 13
|
|
1171
|
+
});
|
|
1316
1172
|
|
|
1317
|
-
|
|
1318
|
-
|
|
1173
|
+
expect(input.value).toBe("Barbados");
|
|
1174
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
1319
1175
|
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
}
|
|
1326
|
-
|
|
1176
|
+
_react2.fireEvent.keyDown(input, {
|
|
1177
|
+
key: "Esc",
|
|
1178
|
+
code: "Esp",
|
|
1179
|
+
keyCode: 27,
|
|
1180
|
+
charCode: 27
|
|
1181
|
+
});
|
|
1182
|
+
|
|
1183
|
+
expect(input.value).toBe("");
|
|
1184
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
1185
|
+
});
|
|
1327
1186
|
});
|
|
1328
1187
|
describe("TextInput component asynchronous autosuggest tests", function () {
|
|
1329
|
-
test("Autosuggest 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1188
|
+
test("Autosuggest 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
|
|
1330
1189
|
var callbackFunc, onChange, _render37, getByRole, getByText, input;
|
|
1331
1190
|
|
|
1332
|
-
return _regenerator["default"].wrap(function
|
|
1191
|
+
return _regenerator["default"].wrap(function _callee$(_context) {
|
|
1333
1192
|
while (1) {
|
|
1334
|
-
switch (
|
|
1193
|
+
switch (_context.prev = _context.next) {
|
|
1335
1194
|
case 0:
|
|
1336
1195
|
callbackFunc = jest.fn(function (newValue) {
|
|
1337
1196
|
var result = new Promise(function (resolve) {
|
|
@@ -1354,7 +1213,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1354
1213
|
_react2.fireEvent.focus(input);
|
|
1355
1214
|
|
|
1356
1215
|
expect(getByRole("listbox")).toBeTruthy();
|
|
1357
|
-
|
|
1216
|
+
_context.next = 8;
|
|
1358
1217
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1359
1218
|
return getByText("Searching...");
|
|
1360
1219
|
});
|
|
@@ -1367,7 +1226,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1367
1226
|
|
|
1368
1227
|
_userEvent["default"].type(input, "Ab");
|
|
1369
1228
|
|
|
1370
|
-
|
|
1229
|
+
_context.next = 15;
|
|
1371
1230
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1372
1231
|
return getByText("Searching...");
|
|
1373
1232
|
});
|
|
@@ -1393,66 +1252,58 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1393
1252
|
|
|
1394
1253
|
case 19:
|
|
1395
1254
|
case "end":
|
|
1396
|
-
return
|
|
1255
|
+
return _context.stop();
|
|
1397
1256
|
}
|
|
1398
1257
|
}
|
|
1399
|
-
},
|
|
1258
|
+
}, _callee);
|
|
1400
1259
|
})));
|
|
1401
|
-
test("Autosuggest Esc key works while 'Searching...' message is shown",
|
|
1402
|
-
var callbackFunc
|
|
1260
|
+
test("Autosuggest Esc key works while 'Searching...' message is shown", function () {
|
|
1261
|
+
var callbackFunc = jest.fn(function (newValue) {
|
|
1262
|
+
var result = new Promise(function (resolve) {
|
|
1263
|
+
return setTimeout(function () {
|
|
1264
|
+
resolve(newValue ? countries.filter(function (option) {
|
|
1265
|
+
return option.toUpperCase().includes(newValue.toUpperCase());
|
|
1266
|
+
}) : countries);
|
|
1267
|
+
}, 100);
|
|
1268
|
+
});
|
|
1269
|
+
return result;
|
|
1270
|
+
});
|
|
1271
|
+
var onChange = jest.fn();
|
|
1403
1272
|
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
return option.toUpperCase().includes(newValue.toUpperCase());
|
|
1413
|
-
}) : countries);
|
|
1414
|
-
}, 100);
|
|
1415
|
-
});
|
|
1416
|
-
return result;
|
|
1417
|
-
});
|
|
1418
|
-
onChange = jest.fn();
|
|
1419
|
-
_render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1420
|
-
label: "Autosuggest Countries",
|
|
1421
|
-
suggestions: callbackFunc,
|
|
1422
|
-
onChange: onChange
|
|
1423
|
-
})), getByRole = _render38.getByRole, queryByText = _render38.queryByText, queryByRole = _render38.queryByRole;
|
|
1424
|
-
input = getByRole("combobox");
|
|
1273
|
+
var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1274
|
+
label: "Autosuggest Countries",
|
|
1275
|
+
suggestions: callbackFunc,
|
|
1276
|
+
onChange: onChange
|
|
1277
|
+
})),
|
|
1278
|
+
getByRole = _render38.getByRole,
|
|
1279
|
+
queryByText = _render38.queryByText,
|
|
1280
|
+
queryByRole = _render38.queryByRole;
|
|
1425
1281
|
|
|
1426
|
-
|
|
1282
|
+
var input = getByRole("combobox");
|
|
1427
1283
|
|
|
1428
|
-
|
|
1284
|
+
_react2.fireEvent.focus(input);
|
|
1429
1285
|
|
|
1430
|
-
|
|
1286
|
+
expect(getByRole("listbox")).toBeTruthy();
|
|
1431
1287
|
|
|
1432
|
-
|
|
1433
|
-
key: "Esc",
|
|
1434
|
-
code: "Esc",
|
|
1435
|
-
keyCode: 27,
|
|
1436
|
-
charCode: 27
|
|
1437
|
-
});
|
|
1288
|
+
_userEvent["default"].type(input, "Ab");
|
|
1438
1289
|
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1290
|
+
_react2.fireEvent.keyDown(input, {
|
|
1291
|
+
key: "Esc",
|
|
1292
|
+
code: "Esc",
|
|
1293
|
+
keyCode: 27,
|
|
1294
|
+
charCode: 27
|
|
1295
|
+
});
|
|
1442
1296
|
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
}, _callee18);
|
|
1449
|
-
})));
|
|
1450
|
-
test("Autosuggest Esc + arrow down working while 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee19() {
|
|
1297
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
1298
|
+
expect(queryByText("Searching...")).toBeFalsy();
|
|
1299
|
+
expect(input.value).toBe("");
|
|
1300
|
+
});
|
|
1301
|
+
test("Autosuggest Esc + arrow down working while 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
|
|
1451
1302
|
var callbackFunc, onChange, _render39, getByRole, getByText, queryByText, queryByRole, input, list;
|
|
1452
1303
|
|
|
1453
|
-
return _regenerator["default"].wrap(function
|
|
1304
|
+
return _regenerator["default"].wrap(function _callee2$(_context2) {
|
|
1454
1305
|
while (1) {
|
|
1455
|
-
switch (
|
|
1306
|
+
switch (_context2.prev = _context2.next) {
|
|
1456
1307
|
case 0:
|
|
1457
1308
|
callbackFunc = jest.fn(function (newValue) {
|
|
1458
1309
|
var result = new Promise(function (resolve) {
|
|
@@ -1498,7 +1349,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1498
1349
|
});
|
|
1499
1350
|
|
|
1500
1351
|
expect(list).toBeTruthy();
|
|
1501
|
-
|
|
1352
|
+
_context2.next = 16;
|
|
1502
1353
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1503
1354
|
return getByText("Searching...");
|
|
1504
1355
|
});
|
|
@@ -1511,17 +1362,17 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1511
1362
|
|
|
1512
1363
|
case 20:
|
|
1513
1364
|
case "end":
|
|
1514
|
-
return
|
|
1365
|
+
return _context2.stop();
|
|
1515
1366
|
}
|
|
1516
1367
|
}
|
|
1517
|
-
},
|
|
1368
|
+
}, _callee2);
|
|
1518
1369
|
})));
|
|
1519
|
-
test("Asynchronous uncontrolled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1370
|
+
test("Asynchronous uncontrolled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
|
|
1520
1371
|
var callbackFunc, onChange, _render40, getByRole, getByText, input;
|
|
1521
1372
|
|
|
1522
|
-
return _regenerator["default"].wrap(function
|
|
1373
|
+
return _regenerator["default"].wrap(function _callee3$(_context3) {
|
|
1523
1374
|
while (1) {
|
|
1524
|
-
switch (
|
|
1375
|
+
switch (_context3.prev = _context3.next) {
|
|
1525
1376
|
case 0:
|
|
1526
1377
|
callbackFunc = jest.fn(function (newValue) {
|
|
1527
1378
|
var result = new Promise(function (resolve) {
|
|
@@ -1545,7 +1396,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1545
1396
|
|
|
1546
1397
|
_userEvent["default"].type(input, "Den");
|
|
1547
1398
|
|
|
1548
|
-
|
|
1399
|
+
_context3.next = 8;
|
|
1549
1400
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1550
1401
|
return getByText("Searching...");
|
|
1551
1402
|
});
|
|
@@ -1562,17 +1413,17 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1562
1413
|
|
|
1563
1414
|
case 12:
|
|
1564
1415
|
case "end":
|
|
1565
|
-
return
|
|
1416
|
+
return _context3.stop();
|
|
1566
1417
|
}
|
|
1567
1418
|
}
|
|
1568
|
-
},
|
|
1419
|
+
}, _callee3);
|
|
1569
1420
|
})));
|
|
1570
|
-
test("Asynchronous controlled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1421
|
+
test("Asynchronous controlled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
|
|
1571
1422
|
var callbackFunc, onChange, _render41, getByRole, getByText, queryByRole, input;
|
|
1572
1423
|
|
|
1573
|
-
return _regenerator["default"].wrap(function
|
|
1424
|
+
return _regenerator["default"].wrap(function _callee4$(_context4) {
|
|
1574
1425
|
while (1) {
|
|
1575
|
-
switch (
|
|
1426
|
+
switch (_context4.prev = _context4.next) {
|
|
1576
1427
|
case 0:
|
|
1577
1428
|
callbackFunc = jest.fn(function (newValue) {
|
|
1578
1429
|
var result = new Promise(function (resolve) {
|
|
@@ -1592,38 +1443,40 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1592
1443
|
suggestions: callbackFunc
|
|
1593
1444
|
})), getByRole = _render41.getByRole, getByText = _render41.getByText, queryByRole = _render41.queryByRole;
|
|
1594
1445
|
input = getByRole("combobox");
|
|
1446
|
+
expect(input.value).toBe("Denm");
|
|
1595
1447
|
|
|
1596
|
-
|
|
1448
|
+
_userEvent["default"].click(getByText("Autosuggest Countries"));
|
|
1597
1449
|
|
|
1598
|
-
|
|
1450
|
+
_context4.next = 8;
|
|
1599
1451
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1600
1452
|
return getByText("Searching...");
|
|
1601
1453
|
});
|
|
1602
1454
|
|
|
1603
|
-
case
|
|
1604
|
-
expect(input.value).toBe("Denm");
|
|
1455
|
+
case 8:
|
|
1605
1456
|
expect(getByText("Denmark")).toBeTruthy();
|
|
1606
1457
|
|
|
1607
|
-
|
|
1458
|
+
_react2.fireEvent.focus(getByRole("option"));
|
|
1459
|
+
|
|
1460
|
+
_userEvent["default"].click(getByText("Denmark"));
|
|
1608
1461
|
|
|
1609
1462
|
expect(onChange).toHaveBeenCalledWith({
|
|
1610
1463
|
value: "Denmark"
|
|
1611
1464
|
});
|
|
1612
1465
|
expect(queryByRole("listbox")).toBeFalsy();
|
|
1613
1466
|
|
|
1614
|
-
case
|
|
1467
|
+
case 13:
|
|
1615
1468
|
case "end":
|
|
1616
|
-
return
|
|
1469
|
+
return _context4.stop();
|
|
1617
1470
|
}
|
|
1618
1471
|
}
|
|
1619
|
-
},
|
|
1472
|
+
}, _callee4);
|
|
1620
1473
|
})));
|
|
1621
|
-
test("Asynchronous autosuggest closes the listbox after finishing no matches search", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1474
|
+
test("Asynchronous autosuggest closes the listbox after finishing no matches search", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
|
|
1622
1475
|
var callbackFunc, onChange, _render42, getByText, getByRole, queryByRole, input;
|
|
1623
1476
|
|
|
1624
|
-
return _regenerator["default"].wrap(function
|
|
1477
|
+
return _regenerator["default"].wrap(function _callee5$(_context5) {
|
|
1625
1478
|
while (1) {
|
|
1626
|
-
switch (
|
|
1479
|
+
switch (_context5.prev = _context5.next) {
|
|
1627
1480
|
case 0:
|
|
1628
1481
|
callbackFunc = jest.fn(function (newValue) {
|
|
1629
1482
|
var result = new Promise(function (resolve) {
|
|
@@ -1647,7 +1500,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1647
1500
|
|
|
1648
1501
|
_userEvent["default"].type(input, "Example text");
|
|
1649
1502
|
|
|
1650
|
-
|
|
1503
|
+
_context5.next = 8;
|
|
1651
1504
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1652
1505
|
return getByText("Searching...");
|
|
1653
1506
|
});
|
|
@@ -1657,17 +1510,17 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1657
1510
|
|
|
1658
1511
|
case 9:
|
|
1659
1512
|
case "end":
|
|
1660
|
-
return
|
|
1513
|
+
return _context5.stop();
|
|
1661
1514
|
}
|
|
1662
1515
|
}
|
|
1663
|
-
},
|
|
1516
|
+
}, _callee5);
|
|
1664
1517
|
})));
|
|
1665
|
-
test("Asynchronous autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1518
|
+
test("Asynchronous autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
|
|
1666
1519
|
var callbackFunc, onChange, _render43, getByText, getByRole, queryByRole, input;
|
|
1667
1520
|
|
|
1668
|
-
return _regenerator["default"].wrap(function
|
|
1521
|
+
return _regenerator["default"].wrap(function _callee6$(_context6) {
|
|
1669
1522
|
while (1) {
|
|
1670
|
-
switch (
|
|
1523
|
+
switch (_context6.prev = _context6.next) {
|
|
1671
1524
|
case 0:
|
|
1672
1525
|
callbackFunc = jest.fn(function (newValue) {
|
|
1673
1526
|
var result = new Promise(function (resolve) {
|
|
@@ -1691,7 +1544,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1691
1544
|
|
|
1692
1545
|
_userEvent["default"].type(input, "wrong");
|
|
1693
1546
|
|
|
1694
|
-
|
|
1547
|
+
_context6.next = 8;
|
|
1695
1548
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1696
1549
|
return getByText("Searching...");
|
|
1697
1550
|
});
|
|
@@ -1723,17 +1576,17 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1723
1576
|
|
|
1724
1577
|
case 15:
|
|
1725
1578
|
case "end":
|
|
1726
|
-
return
|
|
1579
|
+
return _context6.stop();
|
|
1727
1580
|
}
|
|
1728
1581
|
}
|
|
1729
|
-
},
|
|
1582
|
+
}, _callee6);
|
|
1730
1583
|
})));
|
|
1731
|
-
test("Asynchronous autosuggest request failed, shows 'Error fetching data' message", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1584
|
+
test("Asynchronous autosuggest request failed, shows 'Error fetching data' message", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
|
|
1732
1585
|
var errorCallbackFunc, onChange, _render44, getByRole, getByText, input;
|
|
1733
1586
|
|
|
1734
|
-
return _regenerator["default"].wrap(function
|
|
1587
|
+
return _regenerator["default"].wrap(function _callee7$(_context7) {
|
|
1735
1588
|
while (1) {
|
|
1736
|
-
switch (
|
|
1589
|
+
switch (_context7.prev = _context7.next) {
|
|
1737
1590
|
case 0:
|
|
1738
1591
|
errorCallbackFunc = jest.fn(function () {
|
|
1739
1592
|
var result = new Promise(function (resolve, reject) {
|
|
@@ -1753,7 +1606,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1753
1606
|
|
|
1754
1607
|
_react2.fireEvent.focus(input);
|
|
1755
1608
|
|
|
1756
|
-
|
|
1609
|
+
_context7.next = 7;
|
|
1757
1610
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1758
1611
|
return getByText("Searching...");
|
|
1759
1612
|
});
|
|
@@ -1763,9 +1616,9 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1763
1616
|
|
|
1764
1617
|
case 8:
|
|
1765
1618
|
case "end":
|
|
1766
|
-
return
|
|
1619
|
+
return _context7.stop();
|
|
1767
1620
|
}
|
|
1768
1621
|
}
|
|
1769
|
-
},
|
|
1622
|
+
}, _callee7);
|
|
1770
1623
|
})));
|
|
1771
1624
|
});
|