@usertour/helpers 0.0.58 → 0.0.60
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/dist/__tests__/convert-settings.test.cjs +1086 -0
- package/dist/__tests__/convert-settings.test.d.cts +2 -0
- package/dist/__tests__/convert-settings.test.d.ts +2 -0
- package/dist/__tests__/convert-settings.test.js +754 -0
- package/dist/{chunk-RYJKESYH.js → chunk-77ALLS35.js} +153 -116
- package/dist/convert-settings.cjs +159 -115
- package/dist/convert-settings.js +2 -1
- package/dist/index.cjs +200 -166
- package/dist/index.js +6 -6
- package/package.json +1 -1
|
@@ -0,0 +1,1086 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
12
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
+
}
|
|
14
|
+
return to;
|
|
15
|
+
};
|
|
16
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
18
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
19
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
20
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
|
|
25
|
+
// src/__tests__/convert-settings.test.ts
|
|
26
|
+
var import_types2 = require("@usertour/types");
|
|
27
|
+
|
|
28
|
+
// src/convert-settings.ts
|
|
29
|
+
var import_types = require("@usertour/types");
|
|
30
|
+
|
|
31
|
+
// src/color.ts
|
|
32
|
+
var import_chroma_js = __toESM(require("chroma-js"), 1);
|
|
33
|
+
function hexToHSLString(hexColor) {
|
|
34
|
+
try {
|
|
35
|
+
const color = (0, import_chroma_js.default)(hexColor);
|
|
36
|
+
const [h, s, l] = color.hsl();
|
|
37
|
+
const hDeg = Math.round(h || 0);
|
|
38
|
+
const sPct = Math.round(s * 100);
|
|
39
|
+
const lPct = Math.round(l * 100);
|
|
40
|
+
return `${hDeg} ${sPct}% ${lPct}%`;
|
|
41
|
+
} catch (error) {
|
|
42
|
+
console.warn(`Failed to convert ${hexColor} to HSL string:`, error);
|
|
43
|
+
return "0 0% 0%";
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
var hexToRGBStr = (hex) => {
|
|
47
|
+
try {
|
|
48
|
+
const color = (0, import_chroma_js.default)(hex);
|
|
49
|
+
const [r, g, b] = color.rgb();
|
|
50
|
+
return `${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}`;
|
|
51
|
+
} catch (error) {
|
|
52
|
+
console.warn(`Failed to convert ${hex} to RGB string:`, error);
|
|
53
|
+
return "0, 0, 0";
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
// src/convert-settings.ts
|
|
58
|
+
var import_deepmerge_ts = require("deepmerge-ts");
|
|
59
|
+
|
|
60
|
+
// src/type-utils.ts
|
|
61
|
+
var nativeIsArray = Array.isArray;
|
|
62
|
+
var ObjProto = Object.prototype;
|
|
63
|
+
var objToString = ObjProto.toString;
|
|
64
|
+
var objHasOwn = ObjProto.hasOwnProperty;
|
|
65
|
+
var isUndefined = (x) => x === void 0;
|
|
66
|
+
|
|
67
|
+
// src/utils.ts
|
|
68
|
+
var deepClone = (obj) => {
|
|
69
|
+
try {
|
|
70
|
+
return structuredClone(obj);
|
|
71
|
+
} catch (error) {
|
|
72
|
+
console.warn("structuredClone failed, falling back to JSON method:", error);
|
|
73
|
+
return JSON.parse(JSON.stringify(obj));
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
// src/convert-settings.ts
|
|
78
|
+
var defaultFontFamily = '-apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
|
|
79
|
+
var mergeWithDefaults = (0, import_deepmerge_ts.deepmergeCustom)({
|
|
80
|
+
mergeOthers: (values) => {
|
|
81
|
+
const settingsValue = values[values.length - 1];
|
|
82
|
+
if (settingsValue === null || settingsValue === void 0) {
|
|
83
|
+
return values[0];
|
|
84
|
+
}
|
|
85
|
+
return settingsValue;
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
var resolveAutoValue = (value, fallback) => {
|
|
89
|
+
if (value === "Auto" || value === void 0 || value === null) {
|
|
90
|
+
return fallback;
|
|
91
|
+
}
|
|
92
|
+
return value;
|
|
93
|
+
};
|
|
94
|
+
var mergeThemeDefaultSettings = (settings) => {
|
|
95
|
+
const base = deepClone(import_types.defaultSettings);
|
|
96
|
+
return mergeWithDefaults(base, settings);
|
|
97
|
+
};
|
|
98
|
+
var convertSettings = (settings) => {
|
|
99
|
+
const data = mergeThemeDefaultSettings(settings);
|
|
100
|
+
data.mainColor.hover = resolveAutoValue(data.mainColor.hover, data.mainColor.autoHover);
|
|
101
|
+
data.mainColor.active = resolveAutoValue(
|
|
102
|
+
data.mainColor.active,
|
|
103
|
+
data.mainColor.autoActive
|
|
104
|
+
);
|
|
105
|
+
data.brandColor.hover = resolveAutoValue(
|
|
106
|
+
data.brandColor.hover,
|
|
107
|
+
data.brandColor.autoHover
|
|
108
|
+
);
|
|
109
|
+
data.brandColor.active = resolveAutoValue(
|
|
110
|
+
data.brandColor.active,
|
|
111
|
+
data.brandColor.autoActive
|
|
112
|
+
);
|
|
113
|
+
data.border.borderColor = resolveAutoValue(data.border.borderColor, data.mainColor.color);
|
|
114
|
+
data.buttons.primary.textColor.color = resolveAutoValue(
|
|
115
|
+
data.buttons.primary.textColor.color,
|
|
116
|
+
data.brandColor.color
|
|
117
|
+
);
|
|
118
|
+
data.buttons.primary.textColor.hover = resolveAutoValue(
|
|
119
|
+
data.buttons.primary.textColor.hover,
|
|
120
|
+
data.brandColor.color
|
|
121
|
+
);
|
|
122
|
+
data.buttons.primary.textColor.active = resolveAutoValue(
|
|
123
|
+
data.buttons.primary.textColor.active,
|
|
124
|
+
data.brandColor.color
|
|
125
|
+
);
|
|
126
|
+
data.buttons.primary.backgroundColor.background = resolveAutoValue(
|
|
127
|
+
data.buttons.primary.backgroundColor.background,
|
|
128
|
+
data.brandColor.background
|
|
129
|
+
);
|
|
130
|
+
data.buttons.primary.backgroundColor.hover = resolveAutoValue(
|
|
131
|
+
data.buttons.primary.backgroundColor.hover,
|
|
132
|
+
data.brandColor.autoHover
|
|
133
|
+
);
|
|
134
|
+
data.buttons.primary.backgroundColor.active = resolveAutoValue(
|
|
135
|
+
data.buttons.primary.backgroundColor.active,
|
|
136
|
+
data.brandColor.autoActive
|
|
137
|
+
);
|
|
138
|
+
data.buttons.primary.border.color.color = resolveAutoValue(
|
|
139
|
+
data.buttons.primary.border.color.color,
|
|
140
|
+
data.brandColor.background
|
|
141
|
+
);
|
|
142
|
+
data.buttons.primary.border.color.hover = resolveAutoValue(
|
|
143
|
+
data.buttons.primary.border.color.hover,
|
|
144
|
+
data.brandColor.autoHover
|
|
145
|
+
);
|
|
146
|
+
data.buttons.primary.border.color.active = resolveAutoValue(
|
|
147
|
+
data.buttons.primary.border.color.active,
|
|
148
|
+
data.brandColor.autoActive
|
|
149
|
+
);
|
|
150
|
+
data.buttons.secondary.textColor.color = resolveAutoValue(
|
|
151
|
+
data.buttons.secondary.textColor.color,
|
|
152
|
+
data.brandColor.background
|
|
153
|
+
);
|
|
154
|
+
data.buttons.secondary.textColor.hover = resolveAutoValue(
|
|
155
|
+
data.buttons.secondary.textColor.hover,
|
|
156
|
+
data.brandColor.background
|
|
157
|
+
);
|
|
158
|
+
data.buttons.secondary.textColor.active = resolveAutoValue(
|
|
159
|
+
data.buttons.secondary.textColor.active,
|
|
160
|
+
data.brandColor.background
|
|
161
|
+
);
|
|
162
|
+
data.buttons.secondary.backgroundColor.background = resolveAutoValue(
|
|
163
|
+
data.buttons.secondary.backgroundColor.background,
|
|
164
|
+
data.mainColor.background
|
|
165
|
+
);
|
|
166
|
+
data.buttons.secondary.backgroundColor.hover = resolveAutoValue(
|
|
167
|
+
data.buttons.secondary.backgroundColor.hover,
|
|
168
|
+
data.mainColor.autoHover
|
|
169
|
+
);
|
|
170
|
+
data.buttons.secondary.backgroundColor.active = resolveAutoValue(
|
|
171
|
+
data.buttons.secondary.backgroundColor.active,
|
|
172
|
+
data.mainColor.autoActive
|
|
173
|
+
);
|
|
174
|
+
data.buttons.secondary.border.color.color = resolveAutoValue(
|
|
175
|
+
data.buttons.secondary.border.color.color,
|
|
176
|
+
data.brandColor.background
|
|
177
|
+
);
|
|
178
|
+
data.buttons.secondary.border.color.hover = resolveAutoValue(
|
|
179
|
+
data.buttons.secondary.border.color.hover,
|
|
180
|
+
data.brandColor.background
|
|
181
|
+
);
|
|
182
|
+
data.buttons.secondary.border.color.active = resolveAutoValue(
|
|
183
|
+
data.buttons.secondary.border.color.active,
|
|
184
|
+
data.brandColor.background
|
|
185
|
+
);
|
|
186
|
+
data.font.linkColor = resolveAutoValue(data.font.linkColor, data.brandColor.background);
|
|
187
|
+
data.xbutton.color = resolveAutoValue(data.xbutton.color, data.mainColor.color);
|
|
188
|
+
data.progress.color = resolveAutoValue(data.progress.color, data.brandColor.background);
|
|
189
|
+
data.launcherBeacon.color = resolveAutoValue(
|
|
190
|
+
data.launcherBeacon.color,
|
|
191
|
+
data.brandColor.background
|
|
192
|
+
);
|
|
193
|
+
data.launcherIcon.color.color = resolveAutoValue(
|
|
194
|
+
data.launcherIcon.color.color,
|
|
195
|
+
data.brandColor.background
|
|
196
|
+
);
|
|
197
|
+
data.launcherIcon.color.hover = resolveAutoValue(
|
|
198
|
+
data.launcherIcon.color.hover,
|
|
199
|
+
data.brandColor.autoHover
|
|
200
|
+
);
|
|
201
|
+
data.launcherIcon.color.active = resolveAutoValue(
|
|
202
|
+
data.launcherIcon.color.active,
|
|
203
|
+
data.brandColor.autoActive
|
|
204
|
+
);
|
|
205
|
+
data.checklistLauncher.color.color = resolveAutoValue(
|
|
206
|
+
data.checklistLauncher.color.color,
|
|
207
|
+
data.brandColor.color
|
|
208
|
+
);
|
|
209
|
+
data.checklistLauncher.color.background = resolveAutoValue(
|
|
210
|
+
data.checklistLauncher.color.background,
|
|
211
|
+
data.brandColor.background
|
|
212
|
+
);
|
|
213
|
+
data.checklistLauncher.color.hover = resolveAutoValue(
|
|
214
|
+
data.checklistLauncher.color.hover,
|
|
215
|
+
data.brandColor.autoHover
|
|
216
|
+
);
|
|
217
|
+
data.checklistLauncher.color.active = resolveAutoValue(
|
|
218
|
+
data.checklistLauncher.color.active,
|
|
219
|
+
data.brandColor.autoActive
|
|
220
|
+
);
|
|
221
|
+
data.checklistLauncher.counter.color = resolveAutoValue(
|
|
222
|
+
data.checklistLauncher.counter.color,
|
|
223
|
+
data.brandColor.background
|
|
224
|
+
);
|
|
225
|
+
data.checklistLauncher.counter.background = resolveAutoValue(
|
|
226
|
+
data.checklistLauncher.counter.background,
|
|
227
|
+
data.brandColor.color
|
|
228
|
+
);
|
|
229
|
+
data.survey.color = resolveAutoValue(data.survey.color, data.brandColor.background);
|
|
230
|
+
if (data.font.fontFamily === "System font") {
|
|
231
|
+
data.font.fontFamily = defaultFontFamily;
|
|
232
|
+
} else if (!data.font.fontFamily.includes("sans-serif")) {
|
|
233
|
+
data.font.fontFamily += ", sans-serif;";
|
|
234
|
+
}
|
|
235
|
+
return data;
|
|
236
|
+
};
|
|
237
|
+
var convertToCssVars = (settings, type = "tooltip") => {
|
|
238
|
+
const cssMapping = {
|
|
239
|
+
"--usertour-background": hexToHSLString(settings.mainColor.background),
|
|
240
|
+
"--usertour-foreground": hexToHSLString(settings.mainColor.color),
|
|
241
|
+
"--usertour-brand-active-background-color": hexToHSLString(
|
|
242
|
+
settings.brandColor.autoActive
|
|
243
|
+
),
|
|
244
|
+
"--usertour-brand-hover-background-color": hexToHSLString(
|
|
245
|
+
settings.brandColor.autoHover
|
|
246
|
+
),
|
|
247
|
+
"--usertour-font-family": settings.font.fontFamily,
|
|
248
|
+
"--usertour-font-size": `${settings.font.fontSize}px`,
|
|
249
|
+
"--usertour-main-background-color": settings.mainColor.background,
|
|
250
|
+
"--usertour-main-foreground-color": settings.mainColor.color,
|
|
251
|
+
"--usertour-main-hover-background-color": hexToHSLString(
|
|
252
|
+
settings.mainColor.autoHover
|
|
253
|
+
),
|
|
254
|
+
"--usertour-main-active-background-color": hexToHSLString(
|
|
255
|
+
settings.mainColor.autoActive
|
|
256
|
+
),
|
|
257
|
+
"--usertour-line-height": `${settings.font.lineHeight}px`,
|
|
258
|
+
"--usertour-widget-popper-border-radius": `${settings.border.borderRadius}px`,
|
|
259
|
+
"--usertour-font-weight-normal": settings.font.fontWeightNormal,
|
|
260
|
+
"--usertour-font-weight-bold": settings.font.fontWeightBold,
|
|
261
|
+
"--usertour-h1-font-size": `${settings.font.h1FontSize}px`,
|
|
262
|
+
"--usertour-h2-font-size": `${settings.font.h2FontSize}px`,
|
|
263
|
+
"--usertour-link-color": hexToHSLString(settings.font.linkColor),
|
|
264
|
+
"--usertour-widget-popper-border-width": settings.border.borderWidthEnabled ? `${settings.border.borderWidth}px` : "0px",
|
|
265
|
+
"--usertour-widget-popper-border-color": settings.border.borderColor,
|
|
266
|
+
"--usertour-button-border-radius": `${settings.buttons.borderRadius}px`,
|
|
267
|
+
"--usertour-button-height": `${settings.buttons.height}px`,
|
|
268
|
+
"--usertour-button-min-width": `${settings.buttons.minWidth}px`,
|
|
269
|
+
"--usertour-button-px": `${settings.buttons.px}px`,
|
|
270
|
+
"--usertour-primary": settings.buttons.primary.backgroundColor.background,
|
|
271
|
+
"--usertour-primary-hover": settings.buttons.primary.backgroundColor.hover,
|
|
272
|
+
"--usertour-primary-active": settings.buttons.primary.backgroundColor.active,
|
|
273
|
+
"--usertour-primary-foreground": settings.buttons.primary.textColor.color,
|
|
274
|
+
"--usertour-primary-foreground-hover": settings.buttons.primary.textColor.hover,
|
|
275
|
+
"--usertour-primary-foreground-active": settings.buttons.primary.textColor.active,
|
|
276
|
+
"--usertour-primary-border-width": settings.buttons.primary.border.enabled ? `${settings.buttons.primary.border.borderWidth}px` : "0px",
|
|
277
|
+
"--usertour-primary-border-color": settings.buttons.primary.border.color.color,
|
|
278
|
+
"--usertour-primary-border-hover": settings.buttons.primary.border.color.hover,
|
|
279
|
+
"--usertour-primary-border-active": settings.buttons.primary.border.color.active,
|
|
280
|
+
"--usertour-primary-font-weight": settings.buttons.primary.fontWeight,
|
|
281
|
+
"--usertour-secondary": settings.buttons.secondary.backgroundColor.background,
|
|
282
|
+
"--usertour-secondary-hover": settings.buttons.secondary.backgroundColor.hover,
|
|
283
|
+
"--usertour-secondary-active": settings.buttons.secondary.backgroundColor.active,
|
|
284
|
+
"--usertour-secondary-foreground": settings.buttons.secondary.textColor.color,
|
|
285
|
+
"--usertour-secondary-foreground-hover": settings.buttons.secondary.textColor.hover,
|
|
286
|
+
"--usertour-secondary-foreground-active": settings.buttons.secondary.textColor.active,
|
|
287
|
+
"--usertour-secondary-border-width": settings.buttons.secondary.border.enabled ? `${settings.buttons.secondary.border.borderWidth}px` : "0px",
|
|
288
|
+
"--usertour-secondary-border-color": settings.buttons.secondary.border.color.color,
|
|
289
|
+
"--usertour-secondary-border-hover": settings.buttons.secondary.border.color.hover,
|
|
290
|
+
"--usertour-secondary-border-active": settings.buttons.secondary.border.color.active,
|
|
291
|
+
"--usertour-secondary-font-weight": settings.buttons.secondary.fontWeight,
|
|
292
|
+
"--usertour-backdrop-color-rgb": hexToRGBStr(settings.backdrop.color),
|
|
293
|
+
"--usertour-backdrop-highlight-color-rgb": hexToRGBStr(settings.backdrop.highlight.color),
|
|
294
|
+
"--usertour-backdrop-highlight-opacity": settings.backdrop.highlight.opacity / 100,
|
|
295
|
+
"--usertour-backdrop-highlight-radius": `${settings.backdrop.highlight.radius}px`,
|
|
296
|
+
"--usertour-backdrop-highlight-spread": `${settings.backdrop.highlight.spread}px`,
|
|
297
|
+
"--usertour-backdrop-opacity": settings.backdrop.opacity / 100,
|
|
298
|
+
"--usertour-progress-bar-color": settings.progress.color,
|
|
299
|
+
"--usertour-progress-bar-height": `${settings.progress.height}px`,
|
|
300
|
+
"--usertour-narrow-progress-bar-height": `${settings.progress.narrowHeight}px`,
|
|
301
|
+
"--usertour-squared-progress-bar-height": `${settings.progress.chainSquaredHeight}px`,
|
|
302
|
+
"--usertour-rounded-progress-bar-height": `${settings.progress.chainRoundedHeight}px`,
|
|
303
|
+
"--usertour-dotted-progress-bar-height": `${settings.progress.dotsHeight}px`,
|
|
304
|
+
"--usertour-numbered-progress-bar-height": `${settings.progress.numberedHeight}px`,
|
|
305
|
+
"--usertour-widget-popper-padding": type === "modal" ? `${settings.modal.padding}px` : void 0,
|
|
306
|
+
"--usertour-xbutton": settings.xbutton.color,
|
|
307
|
+
"--usertour-widget-launcher-icon-color": settings.launcherIcon.color.color,
|
|
308
|
+
"--usertour-widget-launcher-icon-hover-color": settings.launcherIcon.color.hover,
|
|
309
|
+
"--usertour-widget-launcher-icon-active-color": settings.launcherIcon.color.active,
|
|
310
|
+
"--usertour-widget-launcher-icon-size": `${settings.launcherIcon.size}px`,
|
|
311
|
+
"--usertour-widget-beacon-color": settings.launcherBeacon.color,
|
|
312
|
+
"--usertour-widget-beacon-size": `${settings.launcherBeacon.size}px`,
|
|
313
|
+
"--usertour-widget-launcher-icon-opacity": settings.launcherIcon.opacity / 100,
|
|
314
|
+
"--usertour-widget-popper-padding-top": "2px",
|
|
315
|
+
"--usertour-widget-popper-padding-bottom": "2px",
|
|
316
|
+
"--usertour-checklist-trigger-active-background-color": settings.checklistLauncher.color.active,
|
|
317
|
+
"--usertour-checklist-trigger-background-color": settings.checklistLauncher.color.background,
|
|
318
|
+
"--usertour-checklist-trigger-border-radius": `${settings.checklistLauncher.borderRadius}px`,
|
|
319
|
+
"--usertour-checklist-trigger-counter-background-color": settings.checklistLauncher.counter.background,
|
|
320
|
+
"--usertour-checklist-trigger-counter-font-color": settings.checklistLauncher.counter.color,
|
|
321
|
+
"--usertour-checklist-trigger-font-color-rgb": settings.checklistLauncher.color.color,
|
|
322
|
+
"--usertour-checklist-trigger-font-color": hexToHSLString(
|
|
323
|
+
settings.checklistLauncher.color.color
|
|
324
|
+
),
|
|
325
|
+
"--usertour-checklist-trigger-font-weight": settings.checklistLauncher.fontWeight,
|
|
326
|
+
"--usertour-checkmark-background-color": settings.checklist.checkmarkColor,
|
|
327
|
+
"--usertour-checklist-trigger-height": `${settings.checklistLauncher.height}px`,
|
|
328
|
+
"--usertour-checklist-trigger-hover-background-color": settings.checklistLauncher.color.hover,
|
|
329
|
+
"--usertour-question-color": hexToHSLString(settings.survey.color)
|
|
330
|
+
};
|
|
331
|
+
if (settings.backdrop.highlight.type === "inside") {
|
|
332
|
+
cssMapping["--usertour-backdrop-highlight-inset"] = "inset";
|
|
333
|
+
}
|
|
334
|
+
let css = "";
|
|
335
|
+
for (const key in cssMapping) {
|
|
336
|
+
const value = cssMapping[key];
|
|
337
|
+
if (!isUndefined(value)) {
|
|
338
|
+
css += `${key}:${value};`;
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
return css;
|
|
342
|
+
};
|
|
343
|
+
|
|
344
|
+
// src/__tests__/convert-settings.test.ts
|
|
345
|
+
var originalDefaultMainColorHover = import_types2.defaultSettings.mainColor.hover;
|
|
346
|
+
var originalDefaultBrandColorHover = import_types2.defaultSettings.brandColor.hover;
|
|
347
|
+
describe("convert-settings", () => {
|
|
348
|
+
const completeSettings = {
|
|
349
|
+
mainColor: {
|
|
350
|
+
background: "#FFFFFF",
|
|
351
|
+
color: "#0f172a",
|
|
352
|
+
hover: "Auto",
|
|
353
|
+
active: "Auto",
|
|
354
|
+
autoHover: "#e7eefd",
|
|
355
|
+
autoActive: "#cedcfb"
|
|
356
|
+
},
|
|
357
|
+
brandColor: {
|
|
358
|
+
background: "#2563eb",
|
|
359
|
+
color: "#ffffff",
|
|
360
|
+
hover: "Auto",
|
|
361
|
+
active: "Auto",
|
|
362
|
+
autoHover: "#4b7eee",
|
|
363
|
+
autoActive: "#2055c9"
|
|
364
|
+
},
|
|
365
|
+
font: {
|
|
366
|
+
fontFamily: "System font",
|
|
367
|
+
fontSize: 16,
|
|
368
|
+
lineHeight: 24,
|
|
369
|
+
fontWeightNormal: 400,
|
|
370
|
+
fontWeightBold: 600,
|
|
371
|
+
h1FontSize: 24,
|
|
372
|
+
h2FontSize: 20,
|
|
373
|
+
linkColor: "Auto"
|
|
374
|
+
},
|
|
375
|
+
border: {
|
|
376
|
+
borderRadius: "10",
|
|
377
|
+
borderWidthEnabled: false,
|
|
378
|
+
borderWidth: 1,
|
|
379
|
+
borderColor: "Auto"
|
|
380
|
+
},
|
|
381
|
+
xbutton: {
|
|
382
|
+
color: "Auto"
|
|
383
|
+
},
|
|
384
|
+
progress: {
|
|
385
|
+
enabled: true,
|
|
386
|
+
color: "Auto",
|
|
387
|
+
height: 2,
|
|
388
|
+
type: "full-width",
|
|
389
|
+
position: "top",
|
|
390
|
+
narrowHeight: 5,
|
|
391
|
+
chainSquaredHeight: 4,
|
|
392
|
+
chainRoundedHeight: 6,
|
|
393
|
+
dotsHeight: 6,
|
|
394
|
+
numberedHeight: 12
|
|
395
|
+
},
|
|
396
|
+
survey: {
|
|
397
|
+
color: "Auto"
|
|
398
|
+
},
|
|
399
|
+
launcherBeacon: {
|
|
400
|
+
color: "Auto",
|
|
401
|
+
size: 16
|
|
402
|
+
},
|
|
403
|
+
launcherIcon: {
|
|
404
|
+
color: {
|
|
405
|
+
color: "Auto",
|
|
406
|
+
hover: "Auto",
|
|
407
|
+
active: "Auto",
|
|
408
|
+
background: "#1d4ed8"
|
|
409
|
+
},
|
|
410
|
+
opacity: 100,
|
|
411
|
+
size: 16
|
|
412
|
+
},
|
|
413
|
+
checklist: {
|
|
414
|
+
checkmarkColor: "#4ade80",
|
|
415
|
+
width: 360,
|
|
416
|
+
placement: {
|
|
417
|
+
position: "rightBottom",
|
|
418
|
+
positionOffsetX: 20,
|
|
419
|
+
positionOffsetY: 20
|
|
420
|
+
}
|
|
421
|
+
},
|
|
422
|
+
checklistLauncher: {
|
|
423
|
+
borderRadius: 30,
|
|
424
|
+
height: 60,
|
|
425
|
+
fontWeight: 600,
|
|
426
|
+
placement: {
|
|
427
|
+
position: "rightBottom",
|
|
428
|
+
positionOffsetX: 100,
|
|
429
|
+
positionOffsetY: 20
|
|
430
|
+
},
|
|
431
|
+
color: {
|
|
432
|
+
color: "Auto",
|
|
433
|
+
hover: "Auto",
|
|
434
|
+
active: "Auto",
|
|
435
|
+
background: "Auto"
|
|
436
|
+
},
|
|
437
|
+
counter: {
|
|
438
|
+
color: "Auto",
|
|
439
|
+
background: "Auto"
|
|
440
|
+
}
|
|
441
|
+
},
|
|
442
|
+
buttons: {
|
|
443
|
+
height: 32,
|
|
444
|
+
minWidth: 0,
|
|
445
|
+
px: 16,
|
|
446
|
+
borderRadius: 8,
|
|
447
|
+
primary: {
|
|
448
|
+
fontWeight: 600,
|
|
449
|
+
textColor: {
|
|
450
|
+
color: "Auto",
|
|
451
|
+
hover: "Auto",
|
|
452
|
+
active: "Auto",
|
|
453
|
+
background: "#FFFFFF"
|
|
454
|
+
},
|
|
455
|
+
backgroundColor: {
|
|
456
|
+
color: "#FFFFFF",
|
|
457
|
+
hover: "Auto",
|
|
458
|
+
active: "Auto",
|
|
459
|
+
background: "Auto"
|
|
460
|
+
},
|
|
461
|
+
border: {
|
|
462
|
+
enabled: false,
|
|
463
|
+
borderWidth: 1,
|
|
464
|
+
color: {
|
|
465
|
+
color: "Auto",
|
|
466
|
+
hover: "Auto",
|
|
467
|
+
active: "Auto",
|
|
468
|
+
background: "#FFFFFF"
|
|
469
|
+
}
|
|
470
|
+
}
|
|
471
|
+
},
|
|
472
|
+
secondary: {
|
|
473
|
+
fontWeight: 600,
|
|
474
|
+
textColor: {
|
|
475
|
+
color: "Auto",
|
|
476
|
+
hover: "Auto",
|
|
477
|
+
active: "Auto",
|
|
478
|
+
background: "#FFFFFF"
|
|
479
|
+
},
|
|
480
|
+
backgroundColor: {
|
|
481
|
+
color: "#FFFFFF",
|
|
482
|
+
hover: "Auto",
|
|
483
|
+
active: "Auto",
|
|
484
|
+
background: "Auto"
|
|
485
|
+
},
|
|
486
|
+
border: {
|
|
487
|
+
enabled: true,
|
|
488
|
+
borderWidth: 1,
|
|
489
|
+
color: {
|
|
490
|
+
color: "Auto",
|
|
491
|
+
hover: "Auto",
|
|
492
|
+
active: "Auto",
|
|
493
|
+
background: "#FFFFFF"
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
}
|
|
497
|
+
},
|
|
498
|
+
tooltip: {
|
|
499
|
+
width: 300,
|
|
500
|
+
notchSize: 20
|
|
501
|
+
},
|
|
502
|
+
modal: {
|
|
503
|
+
width: 600,
|
|
504
|
+
padding: 40
|
|
505
|
+
},
|
|
506
|
+
backdrop: {
|
|
507
|
+
color: "#000000",
|
|
508
|
+
opacity: 40,
|
|
509
|
+
highlight: {
|
|
510
|
+
type: "outside",
|
|
511
|
+
radius: 4,
|
|
512
|
+
spread: 0,
|
|
513
|
+
color: "#ffffff",
|
|
514
|
+
opacity: 50
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
};
|
|
518
|
+
describe("mergeThemeDefaultSettings", () => {
|
|
519
|
+
it("should merge with defaultSettings for empty input", () => {
|
|
520
|
+
const result = mergeThemeDefaultSettings({});
|
|
521
|
+
expect(result.mainColor).toBeDefined();
|
|
522
|
+
expect(result.brandColor).toBeDefined();
|
|
523
|
+
expect(result.buttons).toBeDefined();
|
|
524
|
+
expect(result.font).toBeDefined();
|
|
525
|
+
});
|
|
526
|
+
it("should override defaultSettings with provided values", () => {
|
|
527
|
+
const customSettings = {
|
|
528
|
+
mainColor: {
|
|
529
|
+
background: "#000000",
|
|
530
|
+
color: "#ffffff",
|
|
531
|
+
hover: "#333333",
|
|
532
|
+
active: "#666666"
|
|
533
|
+
}
|
|
534
|
+
};
|
|
535
|
+
const result = mergeThemeDefaultSettings(customSettings);
|
|
536
|
+
expect(result.mainColor.background).toBe("#000000");
|
|
537
|
+
expect(result.mainColor.color).toBe("#ffffff");
|
|
538
|
+
});
|
|
539
|
+
});
|
|
540
|
+
describe("convertSettings - Auto value resolution", () => {
|
|
541
|
+
describe("mainColor Auto values", () => {
|
|
542
|
+
it("should resolve mainColor.hover from autoHover when set to Auto", () => {
|
|
543
|
+
const result = convertSettings(completeSettings);
|
|
544
|
+
expect(result.mainColor.hover).toBe(completeSettings.mainColor.autoHover);
|
|
545
|
+
});
|
|
546
|
+
it("should resolve mainColor.active from autoActive when set to Auto", () => {
|
|
547
|
+
const result = convertSettings(completeSettings);
|
|
548
|
+
expect(result.mainColor.active).toBe(completeSettings.mainColor.autoActive);
|
|
549
|
+
});
|
|
550
|
+
it("should keep custom hover value when not Auto", () => {
|
|
551
|
+
const settings = {
|
|
552
|
+
...completeSettings,
|
|
553
|
+
mainColor: {
|
|
554
|
+
...completeSettings.mainColor,
|
|
555
|
+
hover: "#custom123"
|
|
556
|
+
}
|
|
557
|
+
};
|
|
558
|
+
const result = convertSettings(settings);
|
|
559
|
+
expect(result.mainColor.hover).toBe("#custom123");
|
|
560
|
+
});
|
|
561
|
+
});
|
|
562
|
+
describe("brandColor Auto values", () => {
|
|
563
|
+
it("should resolve brandColor.hover from autoHover when set to Auto", () => {
|
|
564
|
+
const result = convertSettings(completeSettings);
|
|
565
|
+
expect(result.brandColor.hover).toBe(completeSettings.brandColor.autoHover);
|
|
566
|
+
});
|
|
567
|
+
it("should resolve brandColor.active from autoActive when set to Auto", () => {
|
|
568
|
+
const result = convertSettings(completeSettings);
|
|
569
|
+
expect(result.brandColor.active).toBe(completeSettings.brandColor.autoActive);
|
|
570
|
+
});
|
|
571
|
+
});
|
|
572
|
+
describe("border Auto values", () => {
|
|
573
|
+
it("should resolve border.borderColor from mainColor.color when set to Auto", () => {
|
|
574
|
+
const result = convertSettings(completeSettings);
|
|
575
|
+
expect(result.border.borderColor).toBe(completeSettings.mainColor.color);
|
|
576
|
+
});
|
|
577
|
+
});
|
|
578
|
+
describe("primary button Auto values", () => {
|
|
579
|
+
it("should resolve primary button textColor from brandColor.color when set to Auto", () => {
|
|
580
|
+
const result = convertSettings(completeSettings);
|
|
581
|
+
expect(result.buttons.primary.textColor.color).toBe(completeSettings.brandColor.color);
|
|
582
|
+
expect(result.buttons.primary.textColor.hover).toBe(completeSettings.brandColor.color);
|
|
583
|
+
expect(result.buttons.primary.textColor.active).toBe(completeSettings.brandColor.color);
|
|
584
|
+
});
|
|
585
|
+
it("should resolve primary button backgroundColor from brandColor when set to Auto", () => {
|
|
586
|
+
const result = convertSettings(completeSettings);
|
|
587
|
+
expect(result.buttons.primary.backgroundColor.background).toBe(
|
|
588
|
+
completeSettings.brandColor.background
|
|
589
|
+
);
|
|
590
|
+
expect(result.buttons.primary.backgroundColor.hover).toBe(
|
|
591
|
+
completeSettings.brandColor.autoHover
|
|
592
|
+
);
|
|
593
|
+
expect(result.buttons.primary.backgroundColor.active).toBe(
|
|
594
|
+
completeSettings.brandColor.autoActive
|
|
595
|
+
);
|
|
596
|
+
});
|
|
597
|
+
it("should resolve primary button border.color from brandColor when set to Auto", () => {
|
|
598
|
+
const result = convertSettings(completeSettings);
|
|
599
|
+
expect(result.buttons.primary.border.color.color).toBe(
|
|
600
|
+
completeSettings.brandColor.background
|
|
601
|
+
);
|
|
602
|
+
expect(result.buttons.primary.border.color.hover).toBe(
|
|
603
|
+
completeSettings.brandColor.autoHover
|
|
604
|
+
);
|
|
605
|
+
expect(result.buttons.primary.border.color.active).toBe(
|
|
606
|
+
completeSettings.brandColor.autoActive
|
|
607
|
+
);
|
|
608
|
+
});
|
|
609
|
+
});
|
|
610
|
+
describe("secondary button Auto values", () => {
|
|
611
|
+
it("should resolve secondary button textColor from brandColor.background when set to Auto", () => {
|
|
612
|
+
const result = convertSettings(completeSettings);
|
|
613
|
+
expect(result.buttons.secondary.textColor.color).toBe(
|
|
614
|
+
completeSettings.brandColor.background
|
|
615
|
+
);
|
|
616
|
+
expect(result.buttons.secondary.textColor.hover).toBe(
|
|
617
|
+
completeSettings.brandColor.background
|
|
618
|
+
);
|
|
619
|
+
expect(result.buttons.secondary.textColor.active).toBe(
|
|
620
|
+
completeSettings.brandColor.background
|
|
621
|
+
);
|
|
622
|
+
});
|
|
623
|
+
it("should resolve secondary button backgroundColor from mainColor when set to Auto", () => {
|
|
624
|
+
const result = convertSettings(completeSettings);
|
|
625
|
+
expect(result.buttons.secondary.backgroundColor.background).toBe(
|
|
626
|
+
completeSettings.mainColor.background
|
|
627
|
+
);
|
|
628
|
+
expect(result.buttons.secondary.backgroundColor.hover).toBe(
|
|
629
|
+
completeSettings.mainColor.autoHover
|
|
630
|
+
);
|
|
631
|
+
expect(result.buttons.secondary.backgroundColor.active).toBe(
|
|
632
|
+
completeSettings.mainColor.autoActive
|
|
633
|
+
);
|
|
634
|
+
});
|
|
635
|
+
it("should resolve secondary button border.color from brandColor.background when set to Auto", () => {
|
|
636
|
+
const result = convertSettings(completeSettings);
|
|
637
|
+
expect(result.buttons.secondary.border.color.color).toBe(
|
|
638
|
+
completeSettings.brandColor.background
|
|
639
|
+
);
|
|
640
|
+
expect(result.buttons.secondary.border.color.hover).toBe(
|
|
641
|
+
completeSettings.brandColor.background
|
|
642
|
+
);
|
|
643
|
+
expect(result.buttons.secondary.border.color.active).toBe(
|
|
644
|
+
completeSettings.brandColor.background
|
|
645
|
+
);
|
|
646
|
+
});
|
|
647
|
+
});
|
|
648
|
+
describe("font Auto values", () => {
|
|
649
|
+
it("should resolve font.linkColor from brandColor.background when set to Auto", () => {
|
|
650
|
+
const result = convertSettings(completeSettings);
|
|
651
|
+
expect(result.font.linkColor).toBe(completeSettings.brandColor.background);
|
|
652
|
+
});
|
|
653
|
+
});
|
|
654
|
+
describe("xbutton Auto values", () => {
|
|
655
|
+
it("should resolve xbutton.color from mainColor.color when set to Auto", () => {
|
|
656
|
+
const result = convertSettings(completeSettings);
|
|
657
|
+
expect(result.xbutton.color).toBe(completeSettings.mainColor.color);
|
|
658
|
+
});
|
|
659
|
+
});
|
|
660
|
+
describe("progress Auto values", () => {
|
|
661
|
+
it("should resolve progress.color from brandColor.background when set to Auto", () => {
|
|
662
|
+
const result = convertSettings(completeSettings);
|
|
663
|
+
expect(result.progress.color).toBe(completeSettings.brandColor.background);
|
|
664
|
+
});
|
|
665
|
+
});
|
|
666
|
+
describe("launcherBeacon Auto values", () => {
|
|
667
|
+
it("should resolve launcherBeacon.color from brandColor.background when set to Auto", () => {
|
|
668
|
+
const settings = {
|
|
669
|
+
...completeSettings,
|
|
670
|
+
launcherBeacon: {
|
|
671
|
+
...completeSettings.launcherBeacon,
|
|
672
|
+
color: "Auto"
|
|
673
|
+
}
|
|
674
|
+
};
|
|
675
|
+
const result = convertSettings(settings);
|
|
676
|
+
expect(result.launcherBeacon.color).toBe(completeSettings.brandColor.background);
|
|
677
|
+
});
|
|
678
|
+
});
|
|
679
|
+
describe("launcherIcon Auto values", () => {
|
|
680
|
+
it("should resolve launcherIcon.color values from brandColor when set to Auto", () => {
|
|
681
|
+
const result = convertSettings(completeSettings);
|
|
682
|
+
expect(result.launcherIcon.color.color).toBe(completeSettings.brandColor.background);
|
|
683
|
+
expect(result.launcherIcon.color.hover).toBe(completeSettings.brandColor.autoHover);
|
|
684
|
+
expect(result.launcherIcon.color.active).toBe(completeSettings.brandColor.autoActive);
|
|
685
|
+
});
|
|
686
|
+
});
|
|
687
|
+
describe("checklistLauncher Auto values", () => {
|
|
688
|
+
it("should resolve checklistLauncher.color values from brandColor when set to Auto", () => {
|
|
689
|
+
const result = convertSettings(completeSettings);
|
|
690
|
+
expect(result.checklistLauncher.color.color).toBe(completeSettings.brandColor.color);
|
|
691
|
+
expect(result.checklistLauncher.color.background).toBe(
|
|
692
|
+
completeSettings.brandColor.background
|
|
693
|
+
);
|
|
694
|
+
expect(result.checklistLauncher.color.hover).toBe(completeSettings.brandColor.autoHover);
|
|
695
|
+
expect(result.checklistLauncher.color.active).toBe(completeSettings.brandColor.autoActive);
|
|
696
|
+
});
|
|
697
|
+
it("should resolve checklistLauncher.counter values from brandColor when set to Auto", () => {
|
|
698
|
+
const result = convertSettings(completeSettings);
|
|
699
|
+
expect(result.checklistLauncher.counter.color).toBe(completeSettings.brandColor.background);
|
|
700
|
+
expect(result.checklistLauncher.counter.background).toBe(completeSettings.brandColor.color);
|
|
701
|
+
});
|
|
702
|
+
});
|
|
703
|
+
describe("survey Auto values", () => {
|
|
704
|
+
it("should resolve survey.color from brandColor.background when set to Auto", () => {
|
|
705
|
+
const result = convertSettings(completeSettings);
|
|
706
|
+
expect(result.survey.color).toBe(completeSettings.brandColor.background);
|
|
707
|
+
});
|
|
708
|
+
});
|
|
709
|
+
describe("font family handling", () => {
|
|
710
|
+
it("should convert System font to full font family string", () => {
|
|
711
|
+
const result = convertSettings(completeSettings);
|
|
712
|
+
expect(result.font.fontFamily).toContain("apple-system");
|
|
713
|
+
expect(result.font.fontFamily).toContain("Segoe UI");
|
|
714
|
+
});
|
|
715
|
+
it("should append sans-serif to custom font family", () => {
|
|
716
|
+
const settings = {
|
|
717
|
+
...completeSettings,
|
|
718
|
+
font: {
|
|
719
|
+
...completeSettings.font,
|
|
720
|
+
fontFamily: "CustomFont"
|
|
721
|
+
}
|
|
722
|
+
};
|
|
723
|
+
const result = convertSettings(settings);
|
|
724
|
+
expect(result.font.fontFamily).toContain("CustomFont");
|
|
725
|
+
expect(result.font.fontFamily).toContain("sans-serif");
|
|
726
|
+
});
|
|
727
|
+
});
|
|
728
|
+
});
|
|
729
|
+
describe("convertSettings - Missing data fallback (defaultSettings layer)", () => {
|
|
730
|
+
it("should handle empty settings object with defaultSettings fallback", () => {
|
|
731
|
+
const result = convertSettings({});
|
|
732
|
+
expect(result.mainColor).toBeDefined();
|
|
733
|
+
expect(result.brandColor).toBeDefined();
|
|
734
|
+
expect(result.buttons).toBeDefined();
|
|
735
|
+
expect(result.font).toBeDefined();
|
|
736
|
+
expect(result.border).toBeDefined();
|
|
737
|
+
});
|
|
738
|
+
it("should handle missing mainColor with defaultSettings fallback", () => {
|
|
739
|
+
const settings = { brandColor: completeSettings.brandColor };
|
|
740
|
+
const result = convertSettings(settings);
|
|
741
|
+
expect(result.mainColor.background).toBe(import_types2.defaultSettings.mainColor.background);
|
|
742
|
+
});
|
|
743
|
+
it("should handle missing buttons with defaultSettings fallback", () => {
|
|
744
|
+
const settings = {
|
|
745
|
+
mainColor: completeSettings.mainColor,
|
|
746
|
+
brandColor: completeSettings.brandColor
|
|
747
|
+
};
|
|
748
|
+
const result = convertSettings(settings);
|
|
749
|
+
expect(result.buttons.height).toBe(import_types2.defaultSettings.buttons.height);
|
|
750
|
+
expect(result.buttons.primary).toBeDefined();
|
|
751
|
+
expect(result.buttons.secondary).toBeDefined();
|
|
752
|
+
});
|
|
753
|
+
it("should handle missing nested properties with defaultSettings fallback", () => {
|
|
754
|
+
const settings = {
|
|
755
|
+
buttons: {
|
|
756
|
+
height: 40
|
|
757
|
+
// missing primary and secondary
|
|
758
|
+
}
|
|
759
|
+
};
|
|
760
|
+
const result = convertSettings(settings);
|
|
761
|
+
expect(result.buttons.height).toBe(40);
|
|
762
|
+
expect(result.buttons.primary).toBeDefined();
|
|
763
|
+
expect(result.buttons.secondary).toBeDefined();
|
|
764
|
+
});
|
|
765
|
+
it("should handle missing progress with defaultSettings fallback", () => {
|
|
766
|
+
const settings = {
|
|
767
|
+
mainColor: completeSettings.mainColor,
|
|
768
|
+
brandColor: completeSettings.brandColor
|
|
769
|
+
};
|
|
770
|
+
const result = convertSettings(settings);
|
|
771
|
+
expect(result.progress).toBeDefined();
|
|
772
|
+
expect(result.progress.height).toBe(import_types2.defaultSettings.progress.height);
|
|
773
|
+
});
|
|
774
|
+
it("should handle missing checklistLauncher with defaultSettings fallback", () => {
|
|
775
|
+
const settings = {
|
|
776
|
+
mainColor: completeSettings.mainColor,
|
|
777
|
+
brandColor: completeSettings.brandColor
|
|
778
|
+
};
|
|
779
|
+
const result = convertSettings(settings);
|
|
780
|
+
expect(result.checklistLauncher).toBeDefined();
|
|
781
|
+
expect(result.checklistLauncher.borderRadius).toBe(
|
|
782
|
+
import_types2.defaultSettings.checklistLauncher.borderRadius
|
|
783
|
+
);
|
|
784
|
+
});
|
|
785
|
+
it("should handle missing launcherIcon with defaultSettings fallback", () => {
|
|
786
|
+
const settings = {
|
|
787
|
+
mainColor: completeSettings.mainColor,
|
|
788
|
+
brandColor: completeSettings.brandColor
|
|
789
|
+
};
|
|
790
|
+
const result = convertSettings(settings);
|
|
791
|
+
expect(result.launcherIcon).toBeDefined();
|
|
792
|
+
expect(result.launcherIcon.size).toBe(import_types2.defaultSettings.launcherIcon.size);
|
|
793
|
+
});
|
|
794
|
+
});
|
|
795
|
+
describe("convertSettings - Combined fallback (missing data + Auto resolution)", () => {
|
|
796
|
+
it("should apply both defaultSettings fallback and Auto resolution for empty input", () => {
|
|
797
|
+
const result = convertSettings({});
|
|
798
|
+
expect(result.mainColor.background).toBe(import_types2.defaultSettings.mainColor.background);
|
|
799
|
+
expect(result.mainColor.hover).toBe(import_types2.defaultSettings.mainColor.autoHover);
|
|
800
|
+
expect(result.mainColor.active).toBe(import_types2.defaultSettings.mainColor.autoActive);
|
|
801
|
+
expect(result.brandColor.hover).toBe(import_types2.defaultSettings.brandColor.autoHover);
|
|
802
|
+
expect(result.brandColor.active).toBe(import_types2.defaultSettings.brandColor.autoActive);
|
|
803
|
+
});
|
|
804
|
+
it("should resolve Auto values using defaultSettings when source settings are missing", () => {
|
|
805
|
+
const result = convertSettings({});
|
|
806
|
+
expect(result.border.borderColor).toBe(import_types2.defaultSettings.mainColor.color);
|
|
807
|
+
expect(result.xbutton.color).toBe(import_types2.defaultSettings.mainColor.color);
|
|
808
|
+
expect(result.font.linkColor).toBe(import_types2.defaultSettings.brandColor.background);
|
|
809
|
+
expect(result.progress.color).toBe(import_types2.defaultSettings.brandColor.background);
|
|
810
|
+
});
|
|
811
|
+
it("should resolve button Auto values using defaultSettings when settings are missing", () => {
|
|
812
|
+
const result = convertSettings({});
|
|
813
|
+
expect(result.buttons.primary.textColor.color).toBe(import_types2.defaultSettings.brandColor.color);
|
|
814
|
+
expect(result.buttons.primary.backgroundColor.background).toBe(
|
|
815
|
+
import_types2.defaultSettings.brandColor.background
|
|
816
|
+
);
|
|
817
|
+
expect(result.buttons.primary.backgroundColor.hover).toBe(
|
|
818
|
+
import_types2.defaultSettings.brandColor.autoHover
|
|
819
|
+
);
|
|
820
|
+
expect(result.buttons.secondary.textColor.color).toBe(import_types2.defaultSettings.brandColor.background);
|
|
821
|
+
expect(result.buttons.secondary.backgroundColor.background).toBe(
|
|
822
|
+
import_types2.defaultSettings.mainColor.background
|
|
823
|
+
);
|
|
824
|
+
});
|
|
825
|
+
it("should handle partial settings with correct fallback chain", () => {
|
|
826
|
+
const partialSettings = {
|
|
827
|
+
mainColor: {
|
|
828
|
+
background: "#FF0000",
|
|
829
|
+
color: "#00FF00",
|
|
830
|
+
hover: "Auto",
|
|
831
|
+
active: "Auto",
|
|
832
|
+
autoHover: "#FF5555",
|
|
833
|
+
autoActive: "#FF9999"
|
|
834
|
+
}
|
|
835
|
+
};
|
|
836
|
+
const result = convertSettings(partialSettings);
|
|
837
|
+
expect(result.mainColor.background).toBe("#FF0000");
|
|
838
|
+
expect(result.mainColor.hover).toBe("#FF5555");
|
|
839
|
+
expect(result.mainColor.active).toBe("#FF9999");
|
|
840
|
+
expect(result.brandColor.background).toBe(import_types2.defaultSettings.brandColor.background);
|
|
841
|
+
expect(result.border.borderColor).not.toBe("Auto");
|
|
842
|
+
expect(result.border.borderColor).toMatch(/^#[0-9a-fA-F]{6}$/);
|
|
843
|
+
});
|
|
844
|
+
});
|
|
845
|
+
describe("convertToCssVars", () => {
|
|
846
|
+
it("should generate CSS variables string for complete settings", () => {
|
|
847
|
+
const convertedSettings = convertSettings(completeSettings);
|
|
848
|
+
const css = convertToCssVars(convertedSettings);
|
|
849
|
+
expect(css).toContain("--usertour-background:");
|
|
850
|
+
expect(css).toContain("--usertour-foreground:");
|
|
851
|
+
expect(css).toContain("--usertour-primary:");
|
|
852
|
+
expect(css).toContain("--usertour-secondary:");
|
|
853
|
+
expect(css).toContain("--usertour-font-family:");
|
|
854
|
+
});
|
|
855
|
+
it("should include button CSS variables", () => {
|
|
856
|
+
const convertedSettings = convertSettings(completeSettings);
|
|
857
|
+
const css = convertToCssVars(convertedSettings);
|
|
858
|
+
expect(css).toContain("--usertour-primary-hover:");
|
|
859
|
+
expect(css).toContain("--usertour-primary-active:");
|
|
860
|
+
expect(css).toContain("--usertour-primary-foreground:");
|
|
861
|
+
expect(css).toContain("--usertour-secondary-hover:");
|
|
862
|
+
expect(css).toContain("--usertour-secondary-active:");
|
|
863
|
+
expect(css).toContain("--usertour-secondary-foreground:");
|
|
864
|
+
});
|
|
865
|
+
it("should include backdrop CSS variables", () => {
|
|
866
|
+
const convertedSettings = convertSettings(completeSettings);
|
|
867
|
+
const css = convertToCssVars(convertedSettings);
|
|
868
|
+
expect(css).toContain("--usertour-backdrop-color-rgb:");
|
|
869
|
+
expect(css).toContain("--usertour-backdrop-opacity:");
|
|
870
|
+
expect(css).toContain("--usertour-backdrop-highlight-opacity:");
|
|
871
|
+
});
|
|
872
|
+
it("should include progress bar CSS variables", () => {
|
|
873
|
+
const convertedSettings = convertSettings(completeSettings);
|
|
874
|
+
const css = convertToCssVars(convertedSettings);
|
|
875
|
+
expect(css).toContain("--usertour-progress-bar-color:");
|
|
876
|
+
expect(css).toContain("--usertour-progress-bar-height:");
|
|
877
|
+
});
|
|
878
|
+
it("should include checklist launcher CSS variables", () => {
|
|
879
|
+
const convertedSettings = convertSettings(completeSettings);
|
|
880
|
+
const css = convertToCssVars(convertedSettings);
|
|
881
|
+
expect(css).toContain("--usertour-checklist-trigger-background-color:");
|
|
882
|
+
expect(css).toContain("--usertour-checklist-trigger-font-color:");
|
|
883
|
+
expect(css).toContain("--usertour-checklist-trigger-counter-background-color:");
|
|
884
|
+
});
|
|
885
|
+
it("should include launcher icon CSS variables", () => {
|
|
886
|
+
const convertedSettings = convertSettings(completeSettings);
|
|
887
|
+
const css = convertToCssVars(convertedSettings);
|
|
888
|
+
expect(css).toContain("--usertour-widget-launcher-icon-color:");
|
|
889
|
+
expect(css).toContain("--usertour-widget-launcher-icon-hover-color:");
|
|
890
|
+
expect(css).toContain("--usertour-widget-beacon-color:");
|
|
891
|
+
});
|
|
892
|
+
it("should add modal padding for modal type", () => {
|
|
893
|
+
const convertedSettings = convertSettings(completeSettings);
|
|
894
|
+
const css = convertToCssVars(convertedSettings, "modal");
|
|
895
|
+
expect(css).toContain("--usertour-widget-popper-padding:");
|
|
896
|
+
expect(css).toContain("40px");
|
|
897
|
+
});
|
|
898
|
+
it("should not add modal padding for tooltip type", () => {
|
|
899
|
+
const convertedSettings = convertSettings(completeSettings);
|
|
900
|
+
const css = convertToCssVars(convertedSettings, "tooltip");
|
|
901
|
+
const modalPaddingMatch = css.match(/--usertour-widget-popper-padding:[^;]+;/);
|
|
902
|
+
expect(modalPaddingMatch).toBeNull();
|
|
903
|
+
});
|
|
904
|
+
it("should add backdrop inset for inside highlight type", () => {
|
|
905
|
+
const settings = {
|
|
906
|
+
...completeSettings,
|
|
907
|
+
backdrop: {
|
|
908
|
+
...completeSettings.backdrop,
|
|
909
|
+
highlight: {
|
|
910
|
+
...completeSettings.backdrop.highlight,
|
|
911
|
+
type: "inside"
|
|
912
|
+
}
|
|
913
|
+
}
|
|
914
|
+
};
|
|
915
|
+
const convertedSettings = convertSettings(settings);
|
|
916
|
+
const css = convertToCssVars(convertedSettings);
|
|
917
|
+
expect(css).toContain("--usertour-backdrop-highlight-inset:inset");
|
|
918
|
+
});
|
|
919
|
+
it("should work correctly with defaultSettings fallback for empty input", () => {
|
|
920
|
+
const convertedSettings = convertSettings({});
|
|
921
|
+
const css = convertToCssVars(convertedSettings);
|
|
922
|
+
expect(css).toContain("--usertour-background:");
|
|
923
|
+
expect(css).toContain("--usertour-primary:");
|
|
924
|
+
expect(css.length).toBeGreaterThan(0);
|
|
925
|
+
});
|
|
926
|
+
});
|
|
927
|
+
describe("Edge cases and error handling", () => {
|
|
928
|
+
it("should handle undefined values in nested objects gracefully", () => {
|
|
929
|
+
const settings = {
|
|
930
|
+
mainColor: {
|
|
931
|
+
background: "#FFFFFF",
|
|
932
|
+
color: "#000000"
|
|
933
|
+
// hover, active, autoHover, autoActive are undefined
|
|
934
|
+
},
|
|
935
|
+
brandColor: {
|
|
936
|
+
background: "#2563eb",
|
|
937
|
+
color: "#ffffff"
|
|
938
|
+
}
|
|
939
|
+
};
|
|
940
|
+
expect(() => convertSettings(settings)).not.toThrow();
|
|
941
|
+
const result = convertSettings(settings);
|
|
942
|
+
expect(result.mainColor).toBeDefined();
|
|
943
|
+
});
|
|
944
|
+
it("should handle partial settings without throwing", () => {
|
|
945
|
+
const settings = {
|
|
946
|
+
mainColor: completeSettings.mainColor,
|
|
947
|
+
brandColor: completeSettings.brandColor
|
|
948
|
+
// progress is missing, not null
|
|
949
|
+
};
|
|
950
|
+
expect(() => convertSettings(settings)).not.toThrow();
|
|
951
|
+
const result = convertSettings(settings);
|
|
952
|
+
expect(result.progress).toBeDefined();
|
|
953
|
+
expect(result.progress.color).toBe(completeSettings.brandColor.background);
|
|
954
|
+
});
|
|
955
|
+
it("should preserve non-Auto values throughout the conversion", () => {
|
|
956
|
+
const settings = {
|
|
957
|
+
...completeSettings,
|
|
958
|
+
mainColor: {
|
|
959
|
+
...completeSettings.mainColor,
|
|
960
|
+
hover: "#custom-hover",
|
|
961
|
+
active: "#custom-active"
|
|
962
|
+
},
|
|
963
|
+
buttons: {
|
|
964
|
+
...completeSettings.buttons,
|
|
965
|
+
primary: {
|
|
966
|
+
...completeSettings.buttons.primary,
|
|
967
|
+
textColor: {
|
|
968
|
+
...completeSettings.buttons.primary.textColor,
|
|
969
|
+
color: "#custom-text"
|
|
970
|
+
}
|
|
971
|
+
}
|
|
972
|
+
}
|
|
973
|
+
};
|
|
974
|
+
const result = convertSettings(settings);
|
|
975
|
+
expect(result.mainColor.hover).toBe("#custom-hover");
|
|
976
|
+
expect(result.mainColor.active).toBe("#custom-active");
|
|
977
|
+
expect(result.buttons.primary.textColor.color).toBe("#custom-text");
|
|
978
|
+
});
|
|
979
|
+
it("should handle deeply nested missing properties", () => {
|
|
980
|
+
const settings = {
|
|
981
|
+
brandColor: completeSettings.brandColor,
|
|
982
|
+
buttons: {
|
|
983
|
+
primary: {
|
|
984
|
+
textColor: {
|
|
985
|
+
// only color is provided as non-Auto value
|
|
986
|
+
color: "#FF0000",
|
|
987
|
+
hover: "Auto",
|
|
988
|
+
active: "Auto",
|
|
989
|
+
background: "#FFFFFF"
|
|
990
|
+
}
|
|
991
|
+
}
|
|
992
|
+
}
|
|
993
|
+
};
|
|
994
|
+
const result = convertSettings(settings);
|
|
995
|
+
expect(result.buttons.primary.textColor.color).toBe("#FF0000");
|
|
996
|
+
expect(result.buttons.primary.textColor.hover).toBe(completeSettings.brandColor.color);
|
|
997
|
+
expect(result.buttons.primary.backgroundColor).toBeDefined();
|
|
998
|
+
});
|
|
999
|
+
it("should fallback to defaultSettings when values are explicitly null", () => {
|
|
1000
|
+
const settings = {
|
|
1001
|
+
mainColor: {
|
|
1002
|
+
background: null,
|
|
1003
|
+
color: "#00FF00",
|
|
1004
|
+
hover: "Auto",
|
|
1005
|
+
active: "Auto",
|
|
1006
|
+
autoHover: null,
|
|
1007
|
+
autoActive: "#FF9999"
|
|
1008
|
+
},
|
|
1009
|
+
font: {
|
|
1010
|
+
fontSize: null,
|
|
1011
|
+
linkColor: "Auto"
|
|
1012
|
+
}
|
|
1013
|
+
};
|
|
1014
|
+
const result = convertSettings(settings);
|
|
1015
|
+
expect(result.mainColor.background).toBe(import_types2.defaultSettings.mainColor.background);
|
|
1016
|
+
expect(result.mainColor.autoHover).toBe(import_types2.defaultSettings.mainColor.autoHover);
|
|
1017
|
+
expect(result.font.fontSize).toBe(import_types2.defaultSettings.font.fontSize);
|
|
1018
|
+
expect(result.mainColor.color).toBe("#00FF00");
|
|
1019
|
+
expect(result.mainColor.autoActive).toBe("#FF9999");
|
|
1020
|
+
});
|
|
1021
|
+
it("should fallback to defaultSettings when values are explicitly undefined", () => {
|
|
1022
|
+
const settings = {
|
|
1023
|
+
mainColor: {
|
|
1024
|
+
background: void 0,
|
|
1025
|
+
color: "#00FF00",
|
|
1026
|
+
hover: "Auto",
|
|
1027
|
+
active: "Auto"
|
|
1028
|
+
},
|
|
1029
|
+
buttons: {
|
|
1030
|
+
height: void 0,
|
|
1031
|
+
borderRadius: 16
|
|
1032
|
+
}
|
|
1033
|
+
};
|
|
1034
|
+
const result = convertSettings(settings);
|
|
1035
|
+
expect(result.mainColor.background).toBe(import_types2.defaultSettings.mainColor.background);
|
|
1036
|
+
expect(result.buttons.height).toBe(import_types2.defaultSettings.buttons.height);
|
|
1037
|
+
expect(result.mainColor.color).toBe("#00FF00");
|
|
1038
|
+
expect(result.buttons.borderRadius).toBe(16);
|
|
1039
|
+
});
|
|
1040
|
+
it("should handle mixed null, undefined, and valid values correctly", () => {
|
|
1041
|
+
const settings = {
|
|
1042
|
+
mainColor: {
|
|
1043
|
+
background: null,
|
|
1044
|
+
color: void 0,
|
|
1045
|
+
hover: "Auto",
|
|
1046
|
+
active: "#custom-active",
|
|
1047
|
+
autoHover: "#custom-auto-hover",
|
|
1048
|
+
autoActive: null
|
|
1049
|
+
},
|
|
1050
|
+
progress: {
|
|
1051
|
+
enabled: true,
|
|
1052
|
+
color: null,
|
|
1053
|
+
height: void 0
|
|
1054
|
+
}
|
|
1055
|
+
};
|
|
1056
|
+
const result = convertSettings(settings);
|
|
1057
|
+
expect(result.mainColor.background).toBe(import_types2.defaultSettings.mainColor.background);
|
|
1058
|
+
expect(result.mainColor.color).toBe(import_types2.defaultSettings.mainColor.color);
|
|
1059
|
+
expect(result.mainColor.autoActive).toBe(import_types2.defaultSettings.mainColor.autoActive);
|
|
1060
|
+
expect(result.progress.height).toBe(import_types2.defaultSettings.progress.height);
|
|
1061
|
+
expect(result.mainColor.active).toBe("#custom-active");
|
|
1062
|
+
expect(result.mainColor.autoHover).toBe("#custom-auto-hover");
|
|
1063
|
+
expect(result.progress.enabled).toBe(true);
|
|
1064
|
+
expect(result.mainColor.hover).toBe("#custom-auto-hover");
|
|
1065
|
+
expect(result.progress.color).toBe(import_types2.defaultSettings.brandColor.background);
|
|
1066
|
+
});
|
|
1067
|
+
it("should NOT mutate defaultSettings when converting settings", () => {
|
|
1068
|
+
convertSettings({});
|
|
1069
|
+
convertSettings({});
|
|
1070
|
+
convertSettings({});
|
|
1071
|
+
expect(import_types2.defaultSettings.mainColor.hover).toBe(originalDefaultMainColorHover);
|
|
1072
|
+
expect(import_types2.defaultSettings.brandColor.hover).toBe(originalDefaultBrandColorHover);
|
|
1073
|
+
expect(import_types2.defaultSettings.mainColor.hover).toBe("Auto");
|
|
1074
|
+
expect(import_types2.defaultSettings.brandColor.hover).toBe("Auto");
|
|
1075
|
+
});
|
|
1076
|
+
it("should return independent objects on each call", () => {
|
|
1077
|
+
const result1 = convertSettings({});
|
|
1078
|
+
const result2 = convertSettings({});
|
|
1079
|
+
expect(result1).not.toBe(result2);
|
|
1080
|
+
expect(result1.mainColor).not.toBe(result2.mainColor);
|
|
1081
|
+
expect(result1.brandColor).not.toBe(result2.brandColor);
|
|
1082
|
+
result1.mainColor.color = "#MODIFIED";
|
|
1083
|
+
expect(result2.mainColor.color).not.toBe("#MODIFIED");
|
|
1084
|
+
});
|
|
1085
|
+
});
|
|
1086
|
+
});
|