@@ -17,88 +17,71 @@ describe("ColorField", () => {
1717 } ) ;
1818
1919 it ( "renders a color input by default (no palette presets)" , ( ) => {
20- const { container } = render (
21- < ColorField includePaletteGroup = { [ ] } includeColorWeight = { [ ] } allowCustomColor = { true } />
22- ) ;
20+ const { container } = render ( < ColorField colorPresets = { [ ] } allowCustomColor = { true } /> ) ;
2321 expect ( container . querySelector ( "input[type='color']" ) ) . toBeInTheDocument ( ) ;
2422 } ) ;
2523
26- // Jest cannot test this because it does not (cannot) load Styles where the palette isconfigured
27- /*
2824 it ( "renders a readonly text input when palette colors are configured, and custom picker CSS class is applied" , ( ) => {
29- const { container } = render(<ColorField className="my-custom-class" />);
25+ const { container } = render (
26+ < ColorField
27+ className = "my-custom-class"
28+ colorPresets = { [
29+ [ "my-black" , "#000000" ] ,
30+ [ "my-white" , "#ffffff" ] ,
31+ ] }
32+ />
33+ ) ;
3034 // With default palette settings, a text input with readOnly is shown
3135 expect ( container . querySelector ( "input[type='text']" ) ) . toBeInTheDocument ( ) ;
3236 expect ( container . querySelector ( "input[readonly]" ) ) . toBeInTheDocument ( ) ;
3337 expect ( container . querySelector ( `.${ eccgui } ) ) . toBeInTheDocument ( ) ;
3438 } ) ;
35- */
3639
3740 it ( "applies additional className" , ( ) => {
38- render (
39- < ColorField
40- className = "my-custom-class"
41- includePaletteGroup = { [ ] }
42- includeColorWeight = { [ ] }
43- allowCustomColor = { true }
44- />
45- ) ;
41+ render ( < ColorField className = "my-custom-class" colorPresets = { [ ] } allowCustomColor = { true } /> ) ;
4642 expect ( document . querySelector ( ".my-custom-class" ) ) . toBeInTheDocument ( ) ;
4743 } ) ;
4844 } ) ;
4945
5046 describe ( "value handling" , ( ) => {
5147 it ( "uses defaultValue as initial color" , ( ) => {
52- render (
53- < ColorField
54- defaultValue = "#ff0000"
55- includePaletteGroup = { [ ] }
56- includeColorWeight = { [ ] }
57- allowCustomColor = { true }
58- />
59- ) ;
48+ render ( < ColorField defaultValue = "#ff0000" colorPresets = { [ ] } allowCustomColor = { true } /> ) ;
6049 const input = document . querySelector ( "input" ) as HTMLInputElement ;
6150 expect ( input . value ) . toBe ( "#ff0000" ) ;
6251 } ) ;
6352
6453 it ( "uses value prop as initial color" , ( ) => {
65- render (
66- < ColorField value = "#00ff00" includePaletteGroup = { [ ] } includeColorWeight = { [ ] } allowCustomColor = { true } />
67- ) ;
54+ render ( < ColorField value = "#00ff00" colorPresets = { [ ] } allowCustomColor = { true } /> ) ;
6855 const input = document . querySelector ( "input" ) as HTMLInputElement ;
6956 expect ( input . value ) . toBe ( "#00ff00" ) ;
7057 } ) ;
7158
7259 it ( "falls back to #000000 when no value or defaultValue is provided" , ( ) => {
73- render ( < ColorField includePaletteGroup = { [ ] } includeColorWeight = { [ ] } allowCustomColor = { true } /> ) ;
60+ render ( < ColorField colorPresets = { [ ] } allowCustomColor = { true } /> ) ;
7461 const input = document . querySelector ( "input" ) as HTMLInputElement ;
7562 expect ( input . value ) . toBe ( "#000000" ) ;
7663 } ) ;
7764
7865 it ( "updates displayed value when value prop changes" , ( ) => {
79- const { rerender } = render (
80- < ColorField value = "#ff0000" includePaletteGroup = { [ ] } includeColorWeight = { [ ] } allowCustomColor = { true } />
81- ) ;
66+ const { rerender } = render ( < ColorField value = "#ff0000" colorPresets = { [ ] } allowCustomColor = { true } /> ) ;
8267 let input = document . querySelector ( "input" ) as HTMLInputElement ;
8368 expect ( input . value ) . toBe ( "#ff0000" ) ;
8469
85- rerender (
86- < ColorField value = "#0000ff" includePaletteGroup = { [ ] } includeColorWeight = { [ ] } allowCustomColor = { true } />
87- ) ;
70+ rerender ( < ColorField value = "#0000ff" colorPresets = { [ ] } allowCustomColor = { true } /> ) ;
8871 input = document . querySelector ( "input" ) as HTMLInputElement ;
8972 expect ( input . value ) . toBe ( "#0000ff" ) ;
9073 } ) ;
9174 } ) ;
9275
9376 describe ( "disabled state" , ( ) => {
9477 it ( "is disabled when disabled prop is true" , ( ) => {
95- render ( < ColorField disabled includePaletteGroup = { [ ] } includeColorWeight = { [ ] } allowCustomColor = { true } /> ) ;
78+ render ( < ColorField disabled colorPresets = { [ ] } allowCustomColor = { true } /> ) ;
9679 const input = document . querySelector ( "input" ) as HTMLInputElement ;
9780 expect ( input ) . toBeDisabled ( ) ;
9881 } ) ;
9982
10083 it ( "is disabled when no palette colors and allowCustomColor is false" , ( ) => {
101- render ( < ColorField includePaletteGroup = { [ ] } includeColorWeight = { [ ] } allowCustomColor = { false } /> ) ;
84+ render ( < ColorField colorPresets = { [ ] } allowCustomColor = { false } /> ) ;
10285 const input = document . querySelector ( "input" ) as HTMLInputElement ;
10386 expect ( input ) . toBeDisabled ( ) ;
10487 } ) ;
@@ -108,14 +91,7 @@ describe("ColorField", () => {
10891 it ( "calls onChange when native color input changes" , async ( ) => {
10992 const user = userEvent . setup ( ) ;
11093 const onChange = jest . fn ( ) ;
111- render (
112- < ColorField
113- onChange = { onChange }
114- includePaletteGroup = { [ ] }
115- includeColorWeight = { [ ] }
116- allowCustomColor = { true }
117- />
118- ) ;
94+ render ( < ColorField onChange = { onChange } colorPresets = { [ ] } allowCustomColor = { true } /> ) ;
11995 const input = document . querySelector ( "input[type='color']" ) as HTMLInputElement ;
12096 input . type = "text" ; // for unknown reasons Jest seems not able to test it on color inputs
12197 await user . type ( input , "#123456" ) ;
0 commit comments