From 80e0c8892982fa6f47230146de86cf8f56c5b65f Mon Sep 17 00:00:00 2001 From: devAyushDubey Date: Fri, 27 Sep 2024 18:42:51 +0530 Subject: [PATCH 01/17] exported VB_EmptyBlockParentClass --- src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.ts b/src/index.ts index 8b102cbb..12514e9f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -27,4 +27,5 @@ class LightLivePreviewHoC implements ContentstackLivePreviewHOC { // export const ContentstackLivePreview: ContentstackLivePreviewHOC = // ContentstackLivePreviewHOC; +export const VB_EmptyBlockParentClass = "visual-builder__empty-block-parent"; export default ContentstackLivePreviewHOC; From c3aec57fd92ac6f8d514f1987203f1b8f0bcbdde Mon Sep 17 00:00:00 2001 From: Amey Shrivastava Date: Mon, 30 Sep 2024 11:11:33 +0530 Subject: [PATCH 02/17] add variant revert component --- .../FieldRevert/FieldRevertComponent.tsx | 205 +++++++++++++++++ .../components/fieldLabelWrapper.tsx | 217 +++++++++++------- src/visualBuilder/components/icons/index.tsx | 3 +- src/visualBuilder/visualBuilder.style.ts | 63 ++++- 4 files changed, 400 insertions(+), 88 deletions(-) create mode 100644 src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx diff --git a/src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx b/src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx new file mode 100644 index 00000000..144eb295 --- /dev/null +++ b/src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx @@ -0,0 +1,205 @@ +import classNames from "classnames"; +import React, { useState, useRef, useEffect } from "preact/compat"; +import { visualBuilderStyles } from "../../visualBuilder.style"; +import { VariantIcon } from "../icons/variant"; +import { CaretIcon } from "../icons"; +import visualBuilderPostMessage from "../../utils/visualBuilderPostMessage"; + +export interface IVariantStatus { + fieldLevelCustomizations: boolean; + isBaseModified: boolean; + isAddedInstances: boolean; + isDeletedInstances: boolean; + isOrderChanged: boolean; +} + +export type TFieldRevertActionCallback = + | "revert_to_base_entry_value" + | "revert_added_instances" + | "restore_deleted_instances" + | "reset_field_level_customizations" + | "restore_sorted_instances"; + +interface FieldRevertComponentProps { + fieldDataName: string; + // actionCallback: (callbackType: TFieldRevertActionCallback) => void; + variantStatus?: IVariantStatus; +} + +interface IItem { + label: string; + action: TFieldRevertActionCallback; + id: string; + testId: string; + fieldDataName: string; +} + +export const BASE_VARIANT_STATUS: IVariantStatus = { + isAddedInstances: false, + isBaseModified: false, + isDeletedInstances: false, + isOrderChanged: false, + fieldLevelCustomizations: false, +}; + +export async function getFieldVariantStatus(fieldPathWithIndex: string) { + const result = await visualBuilderPostMessage?.send( + "get-field-variant-status", + fieldPathWithIndex + ); + return result; +} + +export const FieldRevertComponent = ({ + fieldDataName, + variantStatus = BASE_VARIANT_STATUS, +}: FieldRevertComponentProps) => { + const [isOpen, setIsOpen] = useState(false); + const dropdownRef = useRef(null); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + dropdownRef.current && + !dropdownRef.current.contains(event.target as Node) + ) { + setIsOpen(false); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + const toggleDropdown = () => { + setIsOpen(!isOpen); + }; + + const getDropdownItems = () => { + const { + isAddedInstances, + isDeletedInstances, + isBaseModified, + isOrderChanged, + fieldLevelCustomizations, + } = variantStatus; + + const dropdownItems: IItem[] = []; + + if (isBaseModified) { + dropdownItems.push({ + label: "Revert to base entry value", + action: "revert_to_base_entry_value", + id: `iframe-cs-variant-field-${fieldDataName}-revert`, + testId: `iframe-cs-variant-field-${fieldDataName}-revert`, + fieldDataName, + }); + } + + if (isAddedInstances) { + dropdownItems.push({ + label: "Revert added instances", + action: "revert_added_instances", + id: `iframe-cs-variant-field-${fieldDataName}-revert-added-instances`, + testId: `iframe-cs-variant-field-${fieldDataName}-revert-added-instances`, + fieldDataName, + }); + } + + if (isDeletedInstances) { + dropdownItems.push({ + label: "Restore deleted instances", + action: "restore_deleted_instances", + id: `iframe-cs-variant-field-${fieldDataName}-restore-deleted-instances`, + testId: `iframe-cs-variant-field-${fieldDataName}-restore-deleted-instances`, + fieldDataName, + }); + } + + if (fieldLevelCustomizations) { + dropdownItems.push({ + label: "Reset field-level customizations", + action: "reset_field_level_customizations", + id: `iframe-cs-variant-field-${fieldDataName}-reset-field-level-customizations`, + testId: `iframe-cs-variant-field-${fieldDataName}-reset-field-level-customizations`, + fieldDataName, + }); + } + + if (isOrderChanged) { + dropdownItems.push({ + label: "Restore sorted instances", + action: "restore_sorted_instances", + id: `iframe-cs-variant-field-${fieldDataName}-restore-sorted-instances`, + testId: `iframe-cs-variant-field-${fieldDataName}-restore-sorted-instances`, + fieldDataName, + }); + } + + return dropdownItems; + }; + + const dropdownItems = getDropdownItems(); + + function handleOnClick(item: IItem) { + console.log("Function not implemented.", { item }); + } + + return ( +
e.stopPropagation()} + > + + {isOpen && ( +
+ {dropdownItems.map((item) => ( +
{ + e.preventDefault(); + handleOnClick(item); + setIsOpen(false); + }} + key={item.id} + data-testid={item.testId} + > + {item.label} +
+ ))} +
+ )} +
+ ); +}; diff --git a/src/visualBuilder/components/fieldLabelWrapper.tsx b/src/visualBuilder/components/fieldLabelWrapper.tsx index fa071a2a..ffd87186 100644 --- a/src/visualBuilder/components/fieldLabelWrapper.tsx +++ b/src/visualBuilder/components/fieldLabelWrapper.tsx @@ -13,6 +13,12 @@ import { uniqBy } from "lodash-es"; import { visualBuilderStyles } from "../visualBuilder.style"; import { VariantIcon } from "./icons/variant"; import { CslpError } from "./CslpError"; +import { + BASE_VARIANT_STATUS, + FieldRevertComponent, + getFieldVariantStatus, + IVariantStatus, +} from "./FieldRevert/FieldRevertComponent"; async function getFieldDisplayNames(fieldMetadata: CslpData[]) { const result = await visualBuilderPostMessage?.send<{ @@ -28,22 +34,34 @@ interface FieldLabelWrapperProps { getParentEditableElement: (cslp: string) => HTMLElement | null; } +interface ICurrentField { + text: string; + icon: JSX.Element; + prefixIcon: any; + disabled: boolean; + isVariant: boolean; + fieldDataName: string; + fieldVariantStatus: IVariantStatus; +} + function FieldLabelWrapperComponent( props: FieldLabelWrapperProps ): JSX.Element { const { eventDetails } = props; - const [currentField, setCurrentField] = useState({ + const [currentField, setCurrentField] = useState({ text: "", icon: , prefixIcon: null, disabled: false, isVariant: false, + fieldDataName: "", + fieldVariantStatus: BASE_VARIANT_STATUS, }); const [displayNames, setDisplayNames] = useState>( {} ); const [displayNamesLoading, setDisplayNamesLoading] = useState(true); - const [error, setError] = useState(false) + const [error, setError] = useState(false); const [isDropdownOpen, setIsDropdownOpen] = useState(false); function calculateTopOffset(index: number) { @@ -70,13 +88,17 @@ function FieldLabelWrapperComponent( props.fieldMetadata.content_type_uid, props.fieldMetadata.fieldPath ); - - if(!fieldSchema){ - setError(true) - setDisplayNamesLoading(false) - return; + + if (!fieldSchema) { + setError(true); + setDisplayNamesLoading(false); + return; } - + + const fieldVariantStatus = await getFieldVariantStatus( + props.fieldMetadata.fieldPathWithIndex + ); + const { isDisabled: fieldDisabled, reason } = isFieldDisabled( fieldSchema, eventDetails @@ -106,6 +128,8 @@ function FieldLabelWrapperComponent( prefixIcon: getFieldIcon(fieldSchema), disabled: fieldDisabled, isVariant: isVariant, + fieldDataName: props.fieldMetadata.fieldPathWithIndex, + fieldVariantStatus: fieldVariantStatus ?? BASE_VARIANT_STATUS, }); if (displayNames) { @@ -140,102 +164,123 @@ function FieldLabelWrapperComponent( return (
setIsDropdownOpen((prev) => !prev)} > - - {props.parentPaths.map((path, index) => ( - ))} + {props.parentPaths.map((path, index) => ( + + ))} +
+ {currentField.isVariant ? ( + + ) : null} ); } diff --git a/src/visualBuilder/components/icons/index.tsx b/src/visualBuilder/components/icons/index.tsx index d98f4574..0febae0c 100644 --- a/src/visualBuilder/components/icons/index.tsx +++ b/src/visualBuilder/components/icons/index.tsx @@ -10,7 +10,7 @@ const generateIconStyles = ({ disabled = false }: IconProps) => ({ cursor: disabled ? "not-allowed" : "pointer", }); -export function CaretIcon(): JSX.Element { +export function CaretIcon({ open = false }: { open?: boolean }): JSX.Element { return ( span { + color: #5d50be; + } + & > span { + margin-top: 4px; + margin-bottom: 4px; + } + `, }; } From 058c5fc5a37a03b6c39a9c2ce65ecbfb6230f6f0 Mon Sep 17 00:00:00 2001 From: Amey Shrivastava Date: Mon, 30 Sep 2024 17:43:57 +0530 Subject: [PATCH 03/17] send-variant-revert-action-trigger --- .../components/FieldRevert/FieldRevertComponent.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx b/src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx index 144eb295..bba64974 100644 --- a/src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx +++ b/src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx @@ -144,7 +144,11 @@ export const FieldRevertComponent = ({ const dropdownItems = getDropdownItems(); function handleOnClick(item: IItem) { - console.log("Function not implemented.", { item }); + const { fieldDataName, action } = item; + visualBuilderPostMessage?.send("send-variant-revert-action-trigger", { + fieldDataName, + action, + }); } return ( From 70b3021110e11e01bc12a9c7b60e3b89276ce1b1 Mon Sep 17 00:00:00 2001 From: Srinadh Reddy Date: Fri, 4 Oct 2024 16:42:47 +0530 Subject: [PATCH 04/17] implement highlight variant fields in audience when checked --- .../components/fieldLabelWrapper.tsx | 10 ++-- .../useVariantsPostMessageEvent.ts | 46 ++++++++++--------- src/visualBuilder/utils/isFieldDisabled.ts | 31 +++++++++---- src/visualBuilder/visualBuilder.style.ts | 17 ++----- 4 files changed, 58 insertions(+), 46 deletions(-) diff --git a/src/visualBuilder/components/fieldLabelWrapper.tsx b/src/visualBuilder/components/fieldLabelWrapper.tsx index a88706ef..9cf58808 100644 --- a/src/visualBuilder/components/fieldLabelWrapper.tsx +++ b/src/visualBuilder/components/fieldLabelWrapper.tsx @@ -71,14 +71,14 @@ function FieldLabelWrapperComponent( props.fieldMetadata.content_type_uid, props.fieldMetadata.fieldPath ); - + if(hasPostMessageError(displayNames) || !fieldSchema) { setDisplayNamesLoading(false); setError(true) setDisplayNamesLoading(false) - return; + return; } - + const { isDisabled: fieldDisabled, reason } = isFieldDisabled( fieldSchema, eventDetails @@ -95,7 +95,9 @@ function FieldLabelWrapperComponent( text: currentFieldDisplayName, icon: fieldDisabled ? (
diff --git a/src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts b/src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts index 0ffeeef8..6ba4a98b 100644 --- a/src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts +++ b/src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts @@ -7,6 +7,7 @@ interface VariantFieldsEvent { data: { variant_data: { variant: string; + highlightVariantFields: boolean; }; }; } @@ -17,38 +18,38 @@ interface AudienceEvent { }; } -function addVariantFieldClass(variant_uid: string): void { +function addVariantFieldClass( + variant_uid: string, + highlightVariantFields: boolean +): void { const elements = document.querySelectorAll(`[data-cslp]`); elements.forEach((element) => { const dataCslp = element.getAttribute("data-cslp"); - if(!dataCslp) return; + if (!dataCslp) return; + if (new RegExp(variant_uid).test(dataCslp)) { - element.classList.add( - visualBuilderStyles()["visual-builder__variant-field"], - "visual-builder__variant-field" - ); - } - // For base variant editing - if (!dataCslp.startsWith("v2:")){ - element.classList.add( - visualBuilderStyles()["visual-builder__variant-field"], - "visual-builder__variant-field", - visualBuilderStyles()["visual-builder__base-field"], - "visual-builder__base-field" - ); + highlightVariantFields && + element.classList.add( + visualBuilderStyles()["visual-builder__variant-field"] + ); + element.classList.add("visual-builder__variant-field"); + } else if (!dataCslp.startsWith("v2:")) { + element.classList.add("visual-builder__base-field"); + } else { + element.classList.add("visual-builder__disabled-variant-field"); } }); } function removeVariantFieldClass(): void { - const variantFieldElements = document.querySelectorAll( - ".visual-builder__variant-field" + const variantAndBaseFieldElements = document.querySelectorAll( + ".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field" ); - variantFieldElements.forEach((element) => { + variantAndBaseFieldElements.forEach((element) => { element.classList.remove( - visualBuilderStyles()["visual-builder__variant-field"], + "visual-builder__disabled-variant-field", "visual-builder__variant-field", - visualBuilderStyles()["visual-builder__base-field"], + visualBuilderStyles()["visual-builder__variant-field"], "visual-builder__base-field" ); }); @@ -69,7 +70,10 @@ export function useVariantFieldsPostMessageEvent(): void { VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS, (event: VariantFieldsEvent) => { removeVariantFieldClass(); - addVariantFieldClass(event.data.variant_data.variant); + addVariantFieldClass( + event.data.variant_data.variant, + event.data.variant_data.highlightVariantFields + ); } ); visualBuilderPostMessage?.on( diff --git a/src/visualBuilder/utils/isFieldDisabled.ts b/src/visualBuilder/utils/isFieldDisabled.ts index 542d7fc2..2783c7c1 100644 --- a/src/visualBuilder/utils/isFieldDisabled.ts +++ b/src/visualBuilder/utils/isFieldDisabled.ts @@ -7,7 +7,8 @@ import { FieldDetails } from "../components/FieldToolbar"; const getReason = ( updateRestrictDueToRole: boolean, updateRestrictDueToNonLocalizableFields: boolean, - updateRestrictDueToAudienceMode: boolean + updateRestrictDueToAudienceMode: boolean, + updateRestrictDueToDisabledVariant: boolean ): string => { switch (true) { case updateRestrictDueToRole: @@ -15,7 +16,9 @@ const getReason = ( case updateRestrictDueToNonLocalizableFields: return "Editing this field is restricted in localized entries"; case updateRestrictDueToAudienceMode: - return "Editing this field is restricted due to audience mode"; + return "Open an Experience from Audience widget to start editing"; + case updateRestrictDueToDisabledVariant: + return "This field is not editable as it doesn't match the selected variant"; default: return ""; } @@ -31,14 +34,22 @@ export const isFieldDisabled = ( fieldSchemaMap?.field_metadata?.updateRestrict ); let updateRestrictDueToAudienceMode = false; - + let updateRestrictDueToDisabledVariant = false; + if ( VisualBuilder.VisualBuilderGlobalState.value.audienceMode && - !editableElement.classList.contains( - "visual-builder__variant-field" - ) + !editableElement.classList.contains("visual-builder__variant-field") && + !editableElement.classList.contains("visual-builder__base-field") ) { - updateRestrictDueToAudienceMode = true; + if ( + editableElement.classList.contains( + "visual-builder__disabled-variant-field" + ) + ) { + updateRestrictDueToDisabledVariant = true; + } else { + updateRestrictDueToAudienceMode = true; + } } const updateRestrictDueToNonLocalizableFields = @@ -49,11 +60,13 @@ export const isFieldDisabled = ( isDisabled: updateRestrictDueToRole || updateRestrictDueToNonLocalizableFields || - updateRestrictDueToAudienceMode, + updateRestrictDueToAudienceMode || + updateRestrictDueToDisabledVariant, reason: getReason( updateRestrictDueToRole, updateRestrictDueToNonLocalizableFields, - updateRestrictDueToAudienceMode + updateRestrictDueToAudienceMode, + updateRestrictDueToDisabledVariant ), }; }; diff --git a/src/visualBuilder/visualBuilder.style.ts b/src/visualBuilder/visualBuilder.style.ts index 8691d193..e7cdc7b5 100644 --- a/src/visualBuilder/visualBuilder.style.ts +++ b/src/visualBuilder/visualBuilder.style.ts @@ -362,7 +362,6 @@ export function visualBuilderStyles() { "visual-builder__focused-toolbar--field-disabled": css` pointer-events: none; cursor: not-allowed; - .visual-builder__focused-toolbar__field-label-wrapper__current-field { background: #909090; } @@ -396,22 +395,19 @@ export function visualBuilderStyles() { width: max-content; max-width: 200px; - display: none; + display: block; color: #fff; - background: #767676; + background: #909090; font-family: Inter; font-size: 0.75rem; font-style: normal; font-weight: 400; line-height: 132%; /* 0.99rem */ letter-spacing: 0.015rem; + text-align: left; } - &:hover:before, - &:hover:after { - display: block; - } &:after { content: ""; position: absolute; @@ -420,9 +416,9 @@ export function visualBuilderStyles() { /* the arrow */ border: 10px solid #000; - border-color: #767676 transparent transparent transparent; + border-color: #909090 transparent transparent transparent; - display: none; + display: block; } `, "visual-builder__empty-block": css` @@ -480,9 +476,6 @@ export function visualBuilderStyles() { "visual-builder__variant-field": css` outline: 2px solid #bd59fa; `, - "visual-builder__base-field": css` - outline: 2px solid #eb5646; - `, "visual-builder__pseudo-editable-element": css` z-index: 200 !important; `, From eeb20ca17aa7da5eb073e6b51d7a1bacf0bcf786 Mon Sep 17 00:00:00 2001 From: Faraaz Biyabani Date: Sat, 5 Oct 2024 14:31:03 +0530 Subject: [PATCH 05/17] test: fix WIP --- package-lock.json | 4033 ++++++++++------- package.json | 1 + src/__test__/data/fields.ts | 37 + .../__test__/__snapshots__/index.test.ts.snap | 255 ++ .../visualBuilderHover.test.ts.snap | 236 + .../__test__/fields/number/number.test.ts | 70 +- .../__test__/visualBuilderClick.test.ts | 2 +- .../__test__/visualBuilderInput.test.ts | 17 +- .../__test__/addInstanceButton.test.tsx | 27 +- .../__test__/fieldLabelWrapper.test.tsx | 103 +- .../components/__test__/fieldToolbar.test.tsx | 109 +- .../__test__/replaceAssetButton.test.tsx | 56 - .../__test__/startEditingButton.test.tsx | 4 +- .../components/fieldLabelWrapper.tsx | 27 +- .../components/replaceAssetButton.tsx | 29 - .../generators/generateAssetButton.tsx | 71 - .../generators/generateOverlay.tsx | 8 +- .../focusOverlayWrapper.test.ts.snap | 65 +- .../utils/__test__/assetButton.test.ts | 111 - .../__test__/focusOverlayWrapper.test.ts | 69 +- .../generateStartEditingButton.test.ts | 4 +- .../getEntryUidFromCurrentPage.test.ts | 16 +- .../__test__/getExpectedFieldData.test.ts | 17 +- .../__test__/getStyleOfAnElement.test.ts | 6 +- .../utils/__test__/instanceButtons.test.ts | 14 +- .../__test__/multipleElementAddButton.test.ts | 188 +- .../utils/types/postMessage.types.ts | 5 +- vitest.config.ts | 5 +- 28 files changed, 3401 insertions(+), 2184 deletions(-) create mode 100644 src/__test__/data/fields.ts create mode 100644 src/visualBuilder/__test__/__snapshots__/visualBuilderHover.test.ts.snap delete mode 100644 src/visualBuilder/components/__test__/replaceAssetButton.test.tsx delete mode 100644 src/visualBuilder/components/replaceAssetButton.tsx delete mode 100644 src/visualBuilder/generators/generateAssetButton.tsx delete mode 100644 src/visualBuilder/utils/__test__/assetButton.test.ts diff --git a/package-lock.json b/package-lock.json index c0e24c92..83193d55 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "@types/react": "^18.2.57", "@types/react-dom": "^18.2.19", "@types/uuid": "^8.3.1", + "@vitest/ui": "^2.1.2", "esbuild-plugin-file-path-extensions": "^2.1.0", "eslint": "^7.32.0", "eslint-config-prettier": "^9.1.0", @@ -195,957 +196,1057 @@ "uuid": "dist/bin/uuid" } }, - "node_modules/@esbuild/darwin-arm64": { - "version": "0.23.1", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.23.1.tgz", - "integrity": "sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==", + "node_modules/@esbuild/aix-ppc64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", + "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==", "cpu": [ - "arm64" + "ppc64" ], "dev": true, "optional": true, "os": [ - "darwin" + "aix" ], "engines": { - "node": ">=18" + "node": ">=12" } }, - "node_modules/@eslint-community/eslint-utils": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", - "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==", + "node_modules/@esbuild/android-arm": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz", + "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==", + "cpu": [ + "arm" + ], "dev": true, - "dependencies": { - "eslint-visitor-keys": "^3.3.0" - }, + "optional": true, + "os": [ + "android" + ], "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "peerDependencies": { - "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" + "node": ">=12" } }, - "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": { - "version": "3.4.3", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", - "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "node_modules/@esbuild/android-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz", + "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==", + "cpu": [ + "arm64" + ], "dev": true, + "optional": true, + "os": [ + "android" + ], "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "url": "https://opencollective.com/eslint" + "node": ">=12" } }, - "node_modules/@eslint-community/regexpp": { - "version": "4.11.0", - "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz", - "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==", + "node_modules/@esbuild/android-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz", + "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==", + "cpu": [ + "x64" + ], "dev": true, + "optional": true, + "os": [ + "android" + ], "engines": { - "node": "^12.0.0 || ^14.0.0 || >=16.0.0" + "node": ">=12" } }, - "node_modules/@eslint/config-array": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.18.0.tgz", - "integrity": "sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==", + "node_modules/@esbuild/darwin-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.23.1.tgz", + "integrity": "sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==", + "cpu": [ + "arm64" + ], "dev": true, - "peer": true, - "dependencies": { - "@eslint/object-schema": "^2.1.4", - "debug": "^4.3.1", - "minimatch": "^3.1.2" - }, + "optional": true, + "os": [ + "darwin" + ], "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + "node": ">=18" } }, - "node_modules/@eslint/eslintrc": { - "version": "0.4.3", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz", - "integrity": "sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==", + "node_modules/@esbuild/darwin-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz", + "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==", + "cpu": [ + "x64" + ], "dev": true, - "dependencies": { - "ajv": "^6.12.4", - "debug": "^4.1.1", - "espree": "^7.3.0", - "globals": "^13.9.0", - "ignore": "^4.0.6", - "import-fresh": "^3.2.1", - "js-yaml": "^3.13.1", - "minimatch": "^3.0.4", - "strip-json-comments": "^3.1.1" - }, + "optional": true, + "os": [ + "darwin" + ], "engines": { - "node": "^10.12.0 || >=12.0.0" + "node": ">=12" } }, - "node_modules/@eslint/eslintrc/node_modules/globals": { - "version": "13.24.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", - "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz", + "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==", + "cpu": [ + "arm64" + ], "dev": true, - "dependencies": { - "type-fest": "^0.20.2" - }, + "optional": true, + "os": [ + "freebsd" + ], "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "node": ">=12" } }, - "node_modules/@eslint/js": { - "version": "9.10.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.10.0.tgz", - "integrity": "sha512-fuXtbiP5GWIn8Fz+LWoOMVf/Jxm+aajZYkhi6CuEm4SxymFM+eUWzbO9qXT+L0iCkL5+KGYMCSGxo686H19S1g==", + "node_modules/@esbuild/freebsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz", + "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==", + "cpu": [ + "x64" + ], "dev": true, + "optional": true, + "os": [ + "freebsd" + ], "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + "node": ">=12" } }, - "node_modules/@eslint/object-schema": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.4.tgz", - "integrity": "sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==", + "node_modules/@esbuild/linux-arm": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz", + "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==", + "cpu": [ + "arm" + ], "dev": true, - "peer": true, + "optional": true, + "os": [ + "linux" + ], "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + "node": ">=12" } }, - "node_modules/@eslint/plugin-kit": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.1.0.tgz", - "integrity": "sha512-autAXT203ixhqei9xt+qkYOvY8l6LAFIdT2UXc/RPNeUVfqRF1BV94GTJyVPFKT8nFM6MyVJhjLj9E8JWvf5zQ==", + "node_modules/@esbuild/linux-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz", + "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==", + "cpu": [ + "arm64" + ], "dev": true, - "peer": true, - "dependencies": { - "levn": "^0.4.1" - }, + "optional": true, + "os": [ + "linux" + ], "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + "node": ">=12" } }, - "node_modules/@humanwhocodes/config-array": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", - "integrity": "sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==", - "deprecated": "Use @eslint/config-array instead", + "node_modules/@esbuild/linux-ia32": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz", + "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==", + "cpu": [ + "ia32" + ], "dev": true, - "dependencies": { - "@humanwhocodes/object-schema": "^1.2.0", - "debug": "^4.1.1", - "minimatch": "^3.0.4" - }, + "optional": true, + "os": [ + "linux" + ], "engines": { - "node": ">=10.10.0" + "node": ">=12" } }, - "node_modules/@humanwhocodes/module-importer": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", - "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==", + "node_modules/@esbuild/linux-loong64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz", + "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==", + "cpu": [ + "loong64" + ], "dev": true, + "optional": true, + "os": [ + "linux" + ], "engines": { - "node": ">=12.22" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/nzakas" + "node": ">=12" } }, - "node_modules/@humanwhocodes/object-schema": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz", - "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", - "deprecated": "Use @eslint/object-schema instead", - "dev": true - }, - "node_modules/@humanwhocodes/retry": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.0.tgz", - "integrity": "sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==", + "node_modules/@esbuild/linux-mips64el": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz", + "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==", + "cpu": [ + "mips64el" + ], "dev": true, - "peer": true, + "optional": true, + "os": [ + "linux" + ], "engines": { - "node": ">=18.18" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/nzakas" + "node": ">=12" } }, - "node_modules/@isaacs/cliui": { - "version": "8.0.2", - "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", - "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", + "node_modules/@esbuild/linux-ppc64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz", + "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==", + "cpu": [ + "ppc64" + ], "dev": true, - "dependencies": { - "string-width": "^5.1.2", - "string-width-cjs": "npm:string-width@^4.2.0", - "strip-ansi": "^7.0.1", - "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", - "wrap-ansi": "^8.1.0", - "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" - }, + "optional": true, + "os": [ + "linux" + ], "engines": { "node": ">=12" } }, - "node_modules/@isaacs/cliui/node_modules/ansi-regex": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", - "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", + "node_modules/@esbuild/linux-riscv64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz", + "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==", + "cpu": [ + "riscv64" + ], "dev": true, + "optional": true, + "os": [ + "linux" + ], "engines": { "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-regex?sponsor=1" } }, - "node_modules/@isaacs/cliui/node_modules/strip-ansi": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", - "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "node_modules/@esbuild/linux-s390x": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz", + "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==", + "cpu": [ + "s390x" + ], "dev": true, - "dependencies": { - "ansi-regex": "^6.0.1" - }, + "optional": true, + "os": [ + "linux" + ], "engines": { "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/strip-ansi?sponsor=1" } }, - "node_modules/@jridgewell/gen-mapping": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", - "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", + "node_modules/@esbuild/linux-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz", + "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==", + "cpu": [ + "x64" + ], "dev": true, - "dependencies": { - "@jridgewell/set-array": "^1.2.1", - "@jridgewell/sourcemap-codec": "^1.4.10", - "@jridgewell/trace-mapping": "^0.3.24" - }, + "optional": true, + "os": [ + "linux" + ], "engines": { - "node": ">=6.0.0" + "node": ">=12" } }, - "node_modules/@jridgewell/resolve-uri": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", - "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "node_modules/@esbuild/netbsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz", + "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==", + "cpu": [ + "x64" + ], "dev": true, + "optional": true, + "os": [ + "netbsd" + ], "engines": { - "node": ">=6.0.0" + "node": ">=12" } }, - "node_modules/@jridgewell/set-array": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", - "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", + "node_modules/@esbuild/openbsd-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz", + "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==", + "cpu": [ + "arm64" + ], "dev": true, + "optional": true, + "os": [ + "openbsd" + ], "engines": { - "node": ">=6.0.0" + "node": ">=18" } }, - "node_modules/@jridgewell/sourcemap-codec": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", - "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", - "dev": true - }, - "node_modules/@jridgewell/trace-mapping": { - "version": "0.3.25", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", - "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "node_modules/@esbuild/openbsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz", + "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==", + "cpu": [ + "x64" + ], "dev": true, - "dependencies": { - "@jridgewell/resolve-uri": "^3.1.0", - "@jridgewell/sourcemap-codec": "^1.4.14" + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" } }, - "node_modules/@nodelib/fs.scandir": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", - "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "node_modules/@esbuild/sunos-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz", + "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==", + "cpu": [ + "x64" + ], "dev": true, - "dependencies": { - "@nodelib/fs.stat": "2.0.5", - "run-parallel": "^1.1.9" - }, + "optional": true, + "os": [ + "sunos" + ], "engines": { - "node": ">= 8" + "node": ">=12" } }, - "node_modules/@nodelib/fs.stat": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", - "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "node_modules/@esbuild/win32-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz", + "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==", + "cpu": [ + "arm64" + ], "dev": true, + "optional": true, + "os": [ + "win32" + ], "engines": { - "node": ">= 8" + "node": ">=12" } }, - "node_modules/@nodelib/fs.walk": { - "version": "1.2.8", - "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", - "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "node_modules/@esbuild/win32-ia32": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz", + "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==", + "cpu": [ + "ia32" + ], "dev": true, - "dependencies": { - "@nodelib/fs.scandir": "2.1.5", - "fastq": "^1.6.0" - }, + "optional": true, + "os": [ + "win32" + ], "engines": { - "node": ">= 8" + "node": ">=12" } }, - "node_modules/@pkgjs/parseargs": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", - "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", + "node_modules/@esbuild/win32-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz", + "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==", + "cpu": [ + "x64" + ], "dev": true, "optional": true, + "os": [ + "win32" + ], "engines": { - "node": ">=14" - } - }, - "node_modules/@preact/compat": { - "version": "17.1.2", - "resolved": "https://registry.npmjs.org/@preact/compat/-/compat-17.1.2.tgz", - "integrity": "sha512-7pOZN9lMDDRQ+6aWvjwTp483KR8/zOpfS83wmOo3zfuLKdngS8/5RLbsFWzFZMGdYlotAhX980hJ75bjOHTwWg==", - "peerDependencies": { - "preact": "*" + "node": ">=12" } }, - "node_modules/@preact/signals": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@preact/signals/-/signals-1.3.0.tgz", - "integrity": "sha512-EOMeg42SlLS72dhoq6Vjq08havnLseWmPQ8A0YsgIAqMgWgx7V1a39+Pxo6i7SY5NwJtH4849JogFq3M67AzWg==", + "node_modules/@eslint-community/eslint-utils": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", + "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==", + "dev": true, "dependencies": { - "@preact/signals-core": "^1.7.0" + "eslint-visitor-keys": "^3.3.0" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/preact" + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, "peerDependencies": { - "preact": "10.x" + "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, - "node_modules/@preact/signals-core": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.8.0.tgz", - "integrity": "sha512-OBvUsRZqNmjzCZXWLxkZfhcgT+Fk8DDcT/8vD6a1xhDemodyy87UJRJfASMuSD8FaAIeGgGm85ydXhm7lr4fyA==", + "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, "funding": { - "type": "opencollective", - "url": "https://opencollective.com/preact" + "url": "https://opencollective.com/eslint" } }, - "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.3.tgz", - "integrity": "sha512-P0UxIOrKNBFTQaXTxOH4RxuEBVCgEA5UTNV6Yz7z9QHnUJ7eLX9reOd/NYMO3+XZO2cco19mXTxDMXxit4R/eQ==", - "cpu": [ - "arm64" - ], + "node_modules/@eslint-community/regexpp": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz", + "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==", "dev": true, - "optional": true, - "os": [ - "darwin" - ] + "engines": { + "node": "^12.0.0 || ^14.0.0 || >=16.0.0" + } }, - "node_modules/@testing-library/dom": { - "version": "10.4.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", - "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", + "node_modules/@eslint/config-array": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.18.0.tgz", + "integrity": "sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==", "dev": true, "peer": true, "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.3.0", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" + "@eslint/object-schema": "^2.1.4", + "debug": "^4.3.1", + "minimatch": "^3.1.2" }, "engines": { - "node": ">=18" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, - "node_modules/@testing-library/jest-dom": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz", - "integrity": "sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==", + "node_modules/@eslint/eslintrc": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz", + "integrity": "sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==", "dev": true, "dependencies": { - "@adobe/css-tools": "^4.4.0", - "aria-query": "^5.0.0", - "chalk": "^3.0.0", - "css.escape": "^1.5.1", - "dom-accessibility-api": "^0.6.3", - "lodash": "^4.17.21", - "redent": "^3.0.0" + "ajv": "^6.12.4", + "debug": "^4.1.1", + "espree": "^7.3.0", + "globals": "^13.9.0", + "ignore": "^4.0.6", + "import-fresh": "^3.2.1", + "js-yaml": "^3.13.1", + "minimatch": "^3.0.4", + "strip-json-comments": "^3.1.1" }, "engines": { - "node": ">=14", - "npm": ">=6", - "yarn": ">=1" + "node": "^10.12.0 || >=12.0.0" } }, - "node_modules/@testing-library/jest-dom/node_modules/chalk": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", - "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", + "node_modules/@eslint/eslintrc/node_modules/globals": { + "version": "13.24.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", + "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", "dev": true, "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" + "type-fest": "^0.20.2" }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz", - "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==", - "dev": true + "node_modules/@eslint/js": { + "version": "9.10.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.10.0.tgz", + "integrity": "sha512-fuXtbiP5GWIn8Fz+LWoOMVf/Jxm+aajZYkhi6CuEm4SxymFM+eUWzbO9qXT+L0iCkL5+KGYMCSGxo686H19S1g==", + "dev": true, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } }, - "node_modules/@testing-library/preact": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/@testing-library/preact/-/preact-3.2.4.tgz", - "integrity": "sha512-F+kJ243LP6VmEK1M809unzTE/ijg+bsMNuiRN0JEDIJBELKKDNhdgC/WrUSZ7klwJvtlO3wQZ9ix+jhObG07Fg==", + "node_modules/@eslint/object-schema": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.4.tgz", + "integrity": "sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==", "dev": true, - "dependencies": { - "@testing-library/dom": "^8.11.1" - }, + "peer": true, "engines": { - "node": ">= 12" - }, - "peerDependencies": { - "preact": ">=10 || ^10.0.0-alpha.0 || ^10.0.0-beta.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, - "node_modules/@testing-library/preact/node_modules/@testing-library/dom": { - "version": "8.20.1", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz", - "integrity": "sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==", + "node_modules/@eslint/plugin-kit": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.1.0.tgz", + "integrity": "sha512-autAXT203ixhqei9xt+qkYOvY8l6LAFIdT2UXc/RPNeUVfqRF1BV94GTJyVPFKT8nFM6MyVJhjLj9E8JWvf5zQ==", "dev": true, + "peer": true, "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.1.3", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" + "levn": "^0.4.1" }, "engines": { - "node": ">=12" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, - "node_modules/@testing-library/preact/node_modules/aria-query": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", - "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", + "node_modules/@humanwhocodes/config-array": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", + "integrity": "sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==", + "deprecated": "Use @eslint/config-array instead", "dev": true, "dependencies": { - "deep-equal": "^2.0.5" + "@humanwhocodes/object-schema": "^1.2.0", + "debug": "^4.1.1", + "minimatch": "^3.0.4" + }, + "engines": { + "node": ">=10.10.0" } }, - "node_modules/@testing-library/user-event": { - "version": "14.5.2", - "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", - "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==", + "node_modules/@humanwhocodes/module-importer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", + "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==", "dev": true, "engines": { - "node": ">=12", - "npm": ">=6" + "node": ">=12.22" }, - "peerDependencies": { - "@testing-library/dom": ">=7.21.4" + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" } }, - "node_modules/@types/aria-query": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", - "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", + "node_modules/@humanwhocodes/object-schema": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz", + "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", + "deprecated": "Use @eslint/object-schema instead", "dev": true }, - "node_modules/@types/eslint": { - "version": "8.56.12", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz", - "integrity": "sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==", + "node_modules/@humanwhocodes/retry": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.0.tgz", + "integrity": "sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==", "dev": true, - "dependencies": { - "@types/estree": "*", - "@types/json-schema": "*" + "peer": true, + "engines": { + "node": ">=18.18" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" } }, - "node_modules/@types/estree": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", - "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", - "dev": true - }, - "node_modules/@types/jsdom": { - "version": "21.1.7", - "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.7.tgz", - "integrity": "sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==", + "node_modules/@isaacs/cliui": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", + "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", "dev": true, "dependencies": { - "@types/node": "*", - "@types/tough-cookie": "*", - "parse5": "^7.0.0" + "string-width": "^5.1.2", + "string-width-cjs": "npm:string-width@^4.2.0", + "strip-ansi": "^7.0.1", + "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", + "wrap-ansi": "^8.1.0", + "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" + }, + "engines": { + "node": ">=12" } }, - "node_modules/@types/json-schema": { - "version": "7.0.15", - "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", - "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", - "dev": true - }, - "node_modules/@types/lodash": { - "version": "4.17.7", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz", - "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==", - "dev": true + "node_modules/@isaacs/cliui/node_modules/ansi-regex": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", + "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } }, - "node_modules/@types/lodash-es": { - "version": "4.17.12", - "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz", - "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==", + "node_modules/@isaacs/cliui/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", "dev": true, "dependencies": { - "@types/lodash": "*" + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" } }, - "node_modules/@types/mustache": { - "version": "4.2.5", - "resolved": "https://registry.npmjs.org/@types/mustache/-/mustache-4.2.5.tgz", - "integrity": "sha512-PLwiVvTBg59tGFL/8VpcGvqOu3L4OuveNvPi0EYbWchRdEVP++yRUXJPFl+CApKEq13017/4Nf7aQ5lTtHUNsA==", - "dev": true - }, - "node_modules/@types/node": { - "version": "22.5.4", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.4.tgz", - "integrity": "sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==", + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", + "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", "dev": true, "dependencies": { - "undici-types": "~6.19.2" + "@jridgewell/set-array": "^1.2.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.24" + }, + "engines": { + "node": ">=6.0.0" } }, - "node_modules/@types/prettier": { - "version": "2.7.3", - "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz", - "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==", - "dev": true + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, + "engines": { + "node": ">=6.0.0" + } }, - "node_modules/@types/prop-types": { - "version": "15.7.12", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", - "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", + "node_modules/@jridgewell/set-array": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", + "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", + "dev": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", + "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", "dev": true }, - "node_modules/@types/react": { - "version": "18.3.5", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz", - "integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==", + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", + "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", "dev": true, "dependencies": { - "@types/prop-types": "*", - "csstype": "^3.0.2" + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" } }, - "node_modules/@types/react-dom": { - "version": "18.3.0", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", - "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", + "node_modules/@nodelib/fs.scandir": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", "dev": true, "dependencies": { - "@types/react": "*" + "@nodelib/fs.stat": "2.0.5", + "run-parallel": "^1.1.9" + }, + "engines": { + "node": ">= 8" } }, - "node_modules/@types/tough-cookie": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", - "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==", - "dev": true - }, - "node_modules/@types/uuid": { - "version": "8.3.4", - "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz", - "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==", - "dev": true - }, - "node_modules/@typescript-eslint/parser": { - "version": "5.62.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz", - "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==", + "node_modules/@nodelib/fs.stat": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", "dev": true, - "dependencies": { - "@typescript-eslint/scope-manager": "5.62.0", - "@typescript-eslint/types": "5.62.0", - "@typescript-eslint/typescript-estree": "5.62.0", - "debug": "^4.3.4" - }, "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - }, - "peerDependencies": { - "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } + "node": ">= 8" } }, - "node_modules/@typescript-eslint/scope-manager": { - "version": "5.62.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz", - "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==", + "node_modules/@nodelib/fs.walk": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.62.0", - "@typescript-eslint/visitor-keys": "5.62.0" + "@nodelib/fs.scandir": "2.1.5", + "fastq": "^1.6.0" }, "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" + "node": ">= 8" } }, - "node_modules/@typescript-eslint/type-utils": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.5.0.tgz", - "integrity": "sha512-N1K8Ix+lUM+cIDhL2uekVn/ZD7TZW+9/rwz8DclQpcQ9rk4sIL5CAlBC0CugWKREmDjBzI/kQqU4wkg46jWLYA==", + "node_modules/@pkgjs/parseargs": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", + "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", "dev": true, - "dependencies": { - "@typescript-eslint/typescript-estree": "8.5.0", - "@typescript-eslint/utils": "8.5.0", - "debug": "^4.3.4", - "ts-api-utils": "^1.3.0" - }, + "optional": true, "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + "node": ">=14" + } + }, + "node_modules/@polka/url": { + "version": "1.0.0-next.28", + "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz", + "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==", + "dev": true + }, + "node_modules/@preact/compat": { + "version": "17.1.2", + "resolved": "https://registry.npmjs.org/@preact/compat/-/compat-17.1.2.tgz", + "integrity": "sha512-7pOZN9lMDDRQ+6aWvjwTp483KR8/zOpfS83wmOo3zfuLKdngS8/5RLbsFWzFZMGdYlotAhX980hJ75bjOHTwWg==", + "peerDependencies": { + "preact": "*" + } + }, + "node_modules/@preact/signals": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@preact/signals/-/signals-1.3.0.tgz", + "integrity": "sha512-EOMeg42SlLS72dhoq6Vjq08havnLseWmPQ8A0YsgIAqMgWgx7V1a39+Pxo6i7SY5NwJtH4849JogFq3M67AzWg==", + "dependencies": { + "@preact/signals-core": "^1.7.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" + "url": "https://opencollective.com/preact" }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } + "peerDependencies": { + "preact": "10.x" } }, - "node_modules/@typescript-eslint/type-utils/node_modules/@eslint/eslintrc": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.1.0.tgz", - "integrity": "sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==", + "node_modules/@preact/signals-core": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.8.0.tgz", + "integrity": "sha512-OBvUsRZqNmjzCZXWLxkZfhcgT+Fk8DDcT/8vD6a1xhDemodyy87UJRJfASMuSD8FaAIeGgGm85ydXhm7lr4fyA==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.21.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.3.tgz", + "integrity": "sha512-P0UxIOrKNBFTQaXTxOH4RxuEBVCgEA5UTNV6Yz7z9QHnUJ7eLX9reOd/NYMO3+XZO2cco19mXTxDMXxit4R/eQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@testing-library/dom": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", + "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", "dev": true, "peer": true, "dependencies": { - "ajv": "^6.12.4", - "debug": "^4.3.2", - "espree": "^10.0.1", - "globals": "^14.0.0", - "ignore": "^5.2.0", - "import-fresh": "^3.2.1", - "js-yaml": "^4.1.0", - "minimatch": "^3.1.2", - "strip-json-comments": "^3.1.1" + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" }, "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - }, - "funding": { - "url": "https://opencollective.com/eslint" + "node": ">=18" } }, - "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/scope-manager": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.5.0.tgz", - "integrity": "sha512-06JOQ9Qgj33yvBEx6tpC8ecP9o860rsR22hWMEd12WcTRrfaFgHr2RB/CA/B+7BMhHkXT4chg2MyboGdFGawYg==", + "node_modules/@testing-library/jest-dom": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz", + "integrity": "sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==", "dev": true, "dependencies": { - "@typescript-eslint/types": "8.5.0", - "@typescript-eslint/visitor-keys": "8.5.0" + "@adobe/css-tools": "^4.4.0", + "aria-query": "^5.0.0", + "chalk": "^3.0.0", + "css.escape": "^1.5.1", + "dom-accessibility-api": "^0.6.3", + "lodash": "^4.17.21", + "redent": "^3.0.0" }, "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" + "node": ">=14", + "npm": ">=6", + "yarn": ">=1" } }, - "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/types": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.5.0.tgz", - "integrity": "sha512-qjkormnQS5wF9pjSi6q60bKUHH44j2APxfh9TQRXK8wbYVeDYYdYJGIROL87LGZZ2gz3Rbmjc736qyL8deVtdw==", + "node_modules/@testing-library/jest-dom/node_modules/chalk": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", + "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", "dev": true, - "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" + "engines": { + "node": ">=8" } }, - "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.5.0.tgz", - "integrity": "sha512-vEG2Sf9P8BPQ+d0pxdfndw3xIXaoSjliG0/Ejk7UggByZPKXmJmw3GW5jV2gHNQNawBUyfahoSiCFVov0Ruf7Q==", + "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz", + "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==", + "dev": true + }, + "node_modules/@testing-library/preact": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/@testing-library/preact/-/preact-3.2.4.tgz", + "integrity": "sha512-F+kJ243LP6VmEK1M809unzTE/ijg+bsMNuiRN0JEDIJBELKKDNhdgC/WrUSZ7klwJvtlO3wQZ9ix+jhObG07Fg==", "dev": true, "dependencies": { - "@typescript-eslint/types": "8.5.0", - "@typescript-eslint/visitor-keys": "8.5.0", - "debug": "^4.3.4", - "fast-glob": "^3.3.2", - "is-glob": "^4.0.3", - "minimatch": "^9.0.4", - "semver": "^7.6.0", - "ts-api-utils": "^1.3.0" + "@testing-library/dom": "^8.11.1" }, "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" + "node": ">= 12" }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } + "peerDependencies": { + "preact": ">=10 || ^10.0.0-alpha.0 || ^10.0.0-beta.0" } }, - "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": { - "version": "9.0.5", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", - "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "node_modules/@testing-library/preact/node_modules/@testing-library/dom": { + "version": "8.20.1", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz", + "integrity": "sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==", "dev": true, "dependencies": { - "brace-expansion": "^2.0.1" + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.1.3", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" }, "engines": { - "node": ">=16 || 14 >=14.17" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" + "node": ">=12" } }, - "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/utils": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.5.0.tgz", - "integrity": "sha512-6yyGYVL0e+VzGYp60wvkBHiqDWOpT63pdMV2CVG4LVDd5uR6q1qQN/7LafBZtAtNIn/mqXjsSeS5ggv/P0iECw==", + "node_modules/@testing-library/preact/node_modules/aria-query": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", + "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", "dev": true, "dependencies": { - "@eslint-community/eslint-utils": "^4.4.0", - "@typescript-eslint/scope-manager": "8.5.0", - "@typescript-eslint/types": "8.5.0", - "@typescript-eslint/typescript-estree": "8.5.0" - }, + "deep-equal": "^2.0.5" + } + }, + "node_modules/@testing-library/user-event": { + "version": "14.5.2", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", + "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==", + "dev": true, "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" + "node": ">=12", + "npm": ">=6" }, "peerDependencies": { - "eslint": "^8.57.0 || ^9.0.0" + "@testing-library/dom": ">=7.21.4" } }, - "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/visitor-keys": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.5.0.tgz", - "integrity": "sha512-yTPqMnbAZJNy2Xq2XU8AdtOW9tJIr+UQb64aXB9f3B1498Zx9JorVgFJcZpEc9UBuCCrdzKID2RGAMkYcDtZOw==", + "node_modules/@types/aria-query": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", + "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", + "dev": true + }, + "node_modules/@types/eslint": { + "version": "8.56.12", + "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz", + "integrity": "sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==", "dev": true, "dependencies": { - "@typescript-eslint/types": "8.5.0", - "eslint-visitor-keys": "^3.4.3" - }, - "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" + "@types/estree": "*", + "@types/json-schema": "*" } }, - "node_modules/@typescript-eslint/type-utils/node_modules/acorn": { - "version": "8.12.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", - "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==", + "node_modules/@types/estree": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "dev": true + }, + "node_modules/@types/jsdom": { + "version": "21.1.7", + "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.7.tgz", + "integrity": "sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==", "dev": true, - "peer": true, - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" + "dependencies": { + "@types/node": "*", + "@types/tough-cookie": "*", + "parse5": "^7.0.0" } }, - "node_modules/@typescript-eslint/type-utils/node_modules/argparse": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "node_modules/@types/json-schema": { + "version": "7.0.15", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", + "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", + "dev": true + }, + "node_modules/@types/lodash": { + "version": "4.17.7", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz", + "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==", + "dev": true + }, + "node_modules/@types/lodash-es": { + "version": "4.17.12", + "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz", + "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==", "dev": true, - "peer": true + "dependencies": { + "@types/lodash": "*" + } }, - "node_modules/@typescript-eslint/type-utils/node_modules/brace-expansion": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", - "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "node_modules/@types/mustache": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/mustache/-/mustache-4.2.5.tgz", + "integrity": "sha512-PLwiVvTBg59tGFL/8VpcGvqOu3L4OuveNvPi0EYbWchRdEVP++yRUXJPFl+CApKEq13017/4Nf7aQ5lTtHUNsA==", + "dev": true + }, + "node_modules/@types/node": { + "version": "22.5.4", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.4.tgz", + "integrity": "sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==", "dev": true, "dependencies": { - "balanced-match": "^1.0.0" + "undici-types": "~6.19.2" } }, - "node_modules/@typescript-eslint/type-utils/node_modules/eslint": { - "version": "9.10.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.10.0.tgz", - "integrity": "sha512-Y4D0IgtBZfOcOUAIQTSXBKoNGfY0REGqHJG6+Q81vNippW5YlKjHFj4soMxamKK1NXHUWuBZTLdU3Km+L/pcHw==", + "node_modules/@types/prettier": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz", + "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==", + "dev": true + }, + "node_modules/@types/prop-types": { + "version": "15.7.12", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", + "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", + "dev": true + }, + "node_modules/@types/react": { + "version": "18.3.5", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz", + "integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==", "dev": true, - "peer": true, "dependencies": { - "@eslint-community/eslint-utils": "^4.2.0", - "@eslint-community/regexpp": "^4.11.0", - "@eslint/config-array": "^0.18.0", - "@eslint/eslintrc": "^3.1.0", - "@eslint/js": "9.10.0", - "@eslint/plugin-kit": "^0.1.0", - "@humanwhocodes/module-importer": "^1.0.1", - "@humanwhocodes/retry": "^0.3.0", - "@nodelib/fs.walk": "^1.2.8", - "ajv": "^6.12.4", - "chalk": "^4.0.0", - "cross-spawn": "^7.0.2", - "debug": "^4.3.2", - "escape-string-regexp": "^4.0.0", - "eslint-scope": "^8.0.2", - "eslint-visitor-keys": "^4.0.0", - "espree": "^10.1.0", - "esquery": "^1.5.0", - "esutils": "^2.0.2", - "fast-deep-equal": "^3.1.3", - "file-entry-cache": "^8.0.0", - "find-up": "^5.0.0", - "glob-parent": "^6.0.2", - "ignore": "^5.2.0", - "imurmurhash": "^0.1.4", - "is-glob": "^4.0.0", - "is-path-inside": "^3.0.3", - "json-stable-stringify-without-jsonify": "^1.0.1", - "lodash.merge": "^4.6.2", - "minimatch": "^3.1.2", - "natural-compare": "^1.4.0", - "optionator": "^0.9.3", - "strip-ansi": "^6.0.1", - "text-table": "^0.2.0" - }, - "bin": { - "eslint": "bin/eslint.js" + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom": { + "version": "18.3.0", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", + "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/tough-cookie": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", + "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==", + "dev": true + }, + "node_modules/@types/uuid": { + "version": "8.3.4", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz", + "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==", + "dev": true + }, + "node_modules/@typescript-eslint/parser": { + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz", + "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==", + "dev": true, + "dependencies": { + "@typescript-eslint/scope-manager": "5.62.0", + "@typescript-eslint/types": "5.62.0", + "@typescript-eslint/typescript-estree": "5.62.0", + "debug": "^4.3.4" }, "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, "funding": { - "url": "https://eslint.org/donate" + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" }, "peerDependencies": { - "jiti": "*" + "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" }, "peerDependenciesMeta": { - "jiti": { + "typescript": { "optional": true } } }, - "node_modules/@typescript-eslint/type-utils/node_modules/eslint-scope": { - "version": "8.0.2", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.0.2.tgz", - "integrity": "sha512-6E4xmrTw5wtxnLA5wYL3WDfhZ/1bUBGOXV0zQvVRDOtrR8D0p6W7fs3JweNYhwRYeGvd/1CKX2se0/2s7Q/nJA==", + "node_modules/@typescript-eslint/scope-manager": { + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz", + "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==", "dev": true, - "peer": true, "dependencies": { - "esrecurse": "^4.3.0", - "estraverse": "^5.2.0" - }, - "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + "@typescript-eslint/types": "5.62.0", + "@typescript-eslint/visitor-keys": "5.62.0" }, - "funding": { - "url": "https://opencollective.com/eslint" - } - }, - "node_modules/@typescript-eslint/type-utils/node_modules/eslint-visitor-keys": { - "version": "3.4.3", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", - "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", - "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, "funding": { - "url": "https://opencollective.com/eslint" + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@typescript-eslint/type-utils/node_modules/eslint/node_modules/eslint-visitor-keys": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz", - "integrity": "sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==", + "node_modules/@typescript-eslint/type-utils": { + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.5.0.tgz", + "integrity": "sha512-N1K8Ix+lUM+cIDhL2uekVn/ZD7TZW+9/rwz8DclQpcQ9rk4sIL5CAlBC0CugWKREmDjBzI/kQqU4wkg46jWLYA==", "dev": true, - "peer": true, + "dependencies": { + "@typescript-eslint/typescript-estree": "8.5.0", + "@typescript-eslint/utils": "8.5.0", + "debug": "^4.3.4", + "ts-api-utils": "^1.3.0" + }, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { - "url": "https://opencollective.com/eslint" - } - }, - "node_modules/@typescript-eslint/type-utils/node_modules/espree": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/espree/-/espree-10.1.0.tgz", - "integrity": "sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==", - "dev": true, - "peer": true, - "dependencies": { - "acorn": "^8.12.0", - "acorn-jsx": "^5.3.2", - "eslint-visitor-keys": "^4.0.0" - }, - "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" }, - "funding": { - "url": "https://opencollective.com/eslint" + "peerDependenciesMeta": { + "typescript": { + "optional": true + } } }, - "node_modules/@typescript-eslint/type-utils/node_modules/espree/node_modules/eslint-visitor-keys": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz", - "integrity": "sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==", + "node_modules/@typescript-eslint/type-utils/node_modules/@eslint/eslintrc": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.1.0.tgz", + "integrity": "sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==", "dev": true, "peer": true, + "dependencies": { + "ajv": "^6.12.4", + "debug": "^4.3.2", + "espree": "^10.0.1", + "globals": "^14.0.0", + "ignore": "^5.2.0", + "import-fresh": "^3.2.1", + "js-yaml": "^4.1.0", + "minimatch": "^3.1.2", + "strip-json-comments": "^3.1.1" + }, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, @@ -1153,111 +1254,53 @@ "url": "https://opencollective.com/eslint" } }, - "node_modules/@typescript-eslint/type-utils/node_modules/file-entry-cache": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", - "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", - "dev": true, - "peer": true, - "dependencies": { - "flat-cache": "^4.0.0" - }, - "engines": { - "node": ">=16.0.0" - } - }, - "node_modules/@typescript-eslint/type-utils/node_modules/flat-cache": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz", - "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==", - "dev": true, - "peer": true, - "dependencies": { - "flatted": "^3.2.9", - "keyv": "^4.5.4" - }, - "engines": { - "node": ">=16" - } - }, - "node_modules/@typescript-eslint/type-utils/node_modules/glob-parent": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", - "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/scope-manager": { + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.5.0.tgz", + "integrity": "sha512-06JOQ9Qgj33yvBEx6tpC8ecP9o860rsR22hWMEd12WcTRrfaFgHr2RB/CA/B+7BMhHkXT4chg2MyboGdFGawYg==", "dev": true, - "peer": true, "dependencies": { - "is-glob": "^4.0.3" + "@typescript-eslint/types": "8.5.0", + "@typescript-eslint/visitor-keys": "8.5.0" }, "engines": { - "node": ">=10.13.0" - } - }, - "node_modules/@typescript-eslint/type-utils/node_modules/globals": { - "version": "14.0.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz", - "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==", - "dev": true, - "peer": true, - "engines": { - "node": ">=18" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/@typescript-eslint/type-utils/node_modules/ignore": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", - "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", - "dev": true, - "peer": true, - "engines": { - "node": ">= 4" - } - }, - "node_modules/@typescript-eslint/type-utils/node_modules/js-yaml": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", - "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", - "dev": true, - "peer": true, - "dependencies": { - "argparse": "^2.0.1" - }, - "bin": { - "js-yaml": "bin/js-yaml.js" + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@typescript-eslint/types": { - "version": "5.62.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz", - "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==", + "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/types": { + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.5.0.tgz", + "integrity": "sha512-qjkormnQS5wF9pjSi6q60bKUHH44j2APxfh9TQRXK8wbYVeDYYdYJGIROL87LGZZ2gz3Rbmjc736qyL8deVtdw==", "dev": true, "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@typescript-eslint/typescript-estree": { - "version": "5.62.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz", - "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==", + "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree": { + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.5.0.tgz", + "integrity": "sha512-vEG2Sf9P8BPQ+d0pxdfndw3xIXaoSjliG0/Ejk7UggByZPKXmJmw3GW5jV2gHNQNawBUyfahoSiCFVov0Ruf7Q==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.62.0", - "@typescript-eslint/visitor-keys": "5.62.0", + "@typescript-eslint/types": "8.5.0", + "@typescript-eslint/visitor-keys": "8.5.0", "debug": "^4.3.4", - "globby": "^11.1.0", + "fast-glob": "^3.3.2", "is-glob": "^4.0.3", - "semver": "^7.3.7", - "tsutils": "^3.21.0" + "minimatch": "^9.0.4", + "semver": "^7.6.0", + "ts-api-utils": "^1.3.0" }, "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { "type": "opencollective", @@ -1269,735 +1312,719 @@ } } }, - "node_modules/@typescript-eslint/visitor-keys": { - "version": "5.62.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz", - "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==", + "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.62.0", - "eslint-visitor-keys": "^3.3.0" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + "brace-expansion": "^2.0.1" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - } - }, - "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": { - "version": "3.4.3", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", - "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", - "dev": true, "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + "node": ">=16 || 14 >=14.17" }, "funding": { - "url": "https://opencollective.com/eslint" + "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/@ungap/structured-clone": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", - "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", - "dev": true - }, - "node_modules/@vitest/expect": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.0.tgz", - "integrity": "sha512-N3/xR4fSu0+6sVZETEtPT1orUs2+Y477JOXTcU3xKuu3uBlsgbD7/7Mz2LZ1Jr1XjwilEWlrIgSCj4N1+5ZmsQ==", + "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/utils": { + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.5.0.tgz", + "integrity": "sha512-6yyGYVL0e+VzGYp60wvkBHiqDWOpT63pdMV2CVG4LVDd5uR6q1qQN/7LafBZtAtNIn/mqXjsSeS5ggv/P0iECw==", "dev": true, "dependencies": { - "@vitest/spy": "2.1.0", - "@vitest/utils": "2.1.0", - "chai": "^5.1.1", - "tinyrainbow": "^1.2.0" + "@eslint-community/eslint-utils": "^4.4.0", + "@typescript-eslint/scope-manager": "8.5.0", + "@typescript-eslint/types": "8.5.0", + "@typescript-eslint/typescript-estree": "8.5.0" }, - "funding": { - "url": "https://opencollective.com/vitest" - } - }, - "node_modules/@vitest/mocker": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.0.tgz", - "integrity": "sha512-ZxENovUqhzl+QiOFpagiHUNUuZ1qPd5yYTCYHomGIZOFArzn4mgX2oxZmiAItJWAaXHG6bbpb/DpSPhlk5DgtA==", - "dev": true, - "dependencies": { - "@vitest/spy": "^2.1.0-beta.1", - "estree-walker": "^3.0.3", - "magic-string": "^0.30.11" + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { - "url": "https://opencollective.com/vitest" + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" }, "peerDependencies": { - "@vitest/spy": "2.1.0", - "msw": "^2.3.5", - "vite": "^5.0.0" - }, - "peerDependenciesMeta": { - "msw": { - "optional": true - }, - "vite": { - "optional": true - } + "eslint": "^8.57.0 || ^9.0.0" } }, - "node_modules/@vitest/pretty-format": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.0.tgz", - "integrity": "sha512-7sxf2F3DNYatgmzXXcTh6cq+/fxwB47RIQqZJFoSH883wnVAoccSRT6g+dTKemUBo8Q5N4OYYj1EBXLuRKvp3Q==", + "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/visitor-keys": { + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.5.0.tgz", + "integrity": "sha512-yTPqMnbAZJNy2Xq2XU8AdtOW9tJIr+UQb64aXB9f3B1498Zx9JorVgFJcZpEc9UBuCCrdzKID2RGAMkYcDtZOw==", "dev": true, "dependencies": { - "tinyrainbow": "^1.2.0" + "@typescript-eslint/types": "8.5.0", + "eslint-visitor-keys": "^3.4.3" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { - "url": "https://opencollective.com/vitest" + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@vitest/runner": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.0.tgz", - "integrity": "sha512-D9+ZiB8MbMt7qWDRJc4CRNNUlne/8E1X7dcKhZVAbcOKG58MGGYVDqAq19xlhNfMFZsW0bpVKgztBwks38Ko0w==", + "node_modules/@typescript-eslint/type-utils/node_modules/acorn": { + "version": "8.12.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", + "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==", "dev": true, - "dependencies": { - "@vitest/utils": "2.1.0", - "pathe": "^1.1.2" + "peer": true, + "bin": { + "acorn": "bin/acorn" }, - "funding": { - "url": "https://opencollective.com/vitest" + "engines": { + "node": ">=0.4.0" } }, - "node_modules/@vitest/snapshot": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.0.tgz", - "integrity": "sha512-x69CygGMzt9VCO283K2/FYQ+nBrOj66OTKpsPykjCR4Ac3lLV+m85hj9reaIGmjBSsKzVvbxWmjWE3kF5ha3uQ==", + "node_modules/@typescript-eslint/type-utils/node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true, - "dependencies": { - "@vitest/pretty-format": "2.1.0", - "magic-string": "^0.30.11", - "pathe": "^1.1.2" - }, - "funding": { - "url": "https://opencollective.com/vitest" - } + "peer": true }, - "node_modules/@vitest/spy": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.0.tgz", - "integrity": "sha512-IXX5NkbdgTYTog3F14i2LgnBc+20YmkXMx0IWai84mcxySUDRgm0ihbOfR4L0EVRBDFG85GjmQQEZNNKVVpkZw==", + "node_modules/@typescript-eslint/type-utils/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", "dev": true, "dependencies": { - "tinyspy": "^3.0.0" - }, - "funding": { - "url": "https://opencollective.com/vitest" + "balanced-match": "^1.0.0" } }, - "node_modules/@vitest/utils": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.0.tgz", - "integrity": "sha512-rreyfVe0PuNqJfKYUwfPDfi6rrp0VSu0Wgvp5WBqJonP+4NvXHk48X6oBam1Lj47Hy6jbJtnMj3OcRdrkTP0tA==", + "node_modules/@typescript-eslint/type-utils/node_modules/eslint": { + "version": "9.10.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.10.0.tgz", + "integrity": "sha512-Y4D0IgtBZfOcOUAIQTSXBKoNGfY0REGqHJG6+Q81vNippW5YlKjHFj4soMxamKK1NXHUWuBZTLdU3Km+L/pcHw==", "dev": true, + "peer": true, "dependencies": { - "@vitest/pretty-format": "2.1.0", - "loupe": "^3.1.1", - "tinyrainbow": "^1.2.0" + "@eslint-community/eslint-utils": "^4.2.0", + "@eslint-community/regexpp": "^4.11.0", + "@eslint/config-array": "^0.18.0", + "@eslint/eslintrc": "^3.1.0", + "@eslint/js": "9.10.0", + "@eslint/plugin-kit": "^0.1.0", + "@humanwhocodes/module-importer": "^1.0.1", + "@humanwhocodes/retry": "^0.3.0", + "@nodelib/fs.walk": "^1.2.8", + "ajv": "^6.12.4", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.2", + "debug": "^4.3.2", + "escape-string-regexp": "^4.0.0", + "eslint-scope": "^8.0.2", + "eslint-visitor-keys": "^4.0.0", + "espree": "^10.1.0", + "esquery": "^1.5.0", + "esutils": "^2.0.2", + "fast-deep-equal": "^3.1.3", + "file-entry-cache": "^8.0.0", + "find-up": "^5.0.0", + "glob-parent": "^6.0.2", + "ignore": "^5.2.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "is-path-inside": "^3.0.3", + "json-stable-stringify-without-jsonify": "^1.0.1", + "lodash.merge": "^4.6.2", + "minimatch": "^3.1.2", + "natural-compare": "^1.4.0", + "optionator": "^0.9.3", + "strip-ansi": "^6.0.1", + "text-table": "^0.2.0" }, - "funding": { - "url": "https://opencollective.com/vitest" - } - }, - "node_modules/acorn": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", - "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", - "dev": true, "bin": { - "acorn": "bin/acorn" + "eslint": "bin/eslint.js" }, "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/acorn-jsx": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", - "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true, + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://eslint.org/donate" + }, "peerDependencies": { - "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" + "jiti": "*" + }, + "peerDependenciesMeta": { + "jiti": { + "optional": true + } } }, - "node_modules/agent-base": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz", - "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==", + "node_modules/@typescript-eslint/type-utils/node_modules/eslint-scope": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.0.2.tgz", + "integrity": "sha512-6E4xmrTw5wtxnLA5wYL3WDfhZ/1bUBGOXV0zQvVRDOtrR8D0p6W7fs3JweNYhwRYeGvd/1CKX2se0/2s7Q/nJA==", "dev": true, + "peer": true, "dependencies": { - "debug": "^4.3.4" + "esrecurse": "^4.3.0", + "estraverse": "^5.2.0" }, "engines": { - "node": ">= 14" - } - }, - "node_modules/ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "dev": true, - "dependencies": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" + "url": "https://opencollective.com/eslint" } }, - "node_modules/ansi-colors": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", - "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==", + "node_modules/@typescript-eslint/type-utils/node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", "dev": true, "engines": { - "node": ">=6" + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" } }, - "node_modules/ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "node_modules/@typescript-eslint/type-utils/node_modules/eslint/node_modules/eslint-visitor-keys": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz", + "integrity": "sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==", "dev": true, + "peer": true, "engines": { - "node": ">=8" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" } }, - "node_modules/ansi-sequence-parser": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.1.tgz", - "integrity": "sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==", - "dev": true - }, - "node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "node_modules/@typescript-eslint/type-utils/node_modules/espree": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/espree/-/espree-10.1.0.tgz", + "integrity": "sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==", "dev": true, + "peer": true, "dependencies": { - "color-convert": "^2.0.1" + "acorn": "^8.12.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^4.0.0" }, "engines": { - "node": ">=8" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" + "url": "https://opencollective.com/eslint" } }, - "node_modules/any-promise": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", - "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", - "dev": true + "node_modules/@typescript-eslint/type-utils/node_modules/espree/node_modules/eslint-visitor-keys": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz", + "integrity": "sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==", + "dev": true, + "peer": true, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } }, - "node_modules/anymatch": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", - "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "node_modules/@typescript-eslint/type-utils/node_modules/file-entry-cache": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", + "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", "dev": true, + "peer": true, "dependencies": { - "normalize-path": "^3.0.0", - "picomatch": "^2.0.4" + "flat-cache": "^4.0.0" }, "engines": { - "node": ">= 8" + "node": ">=16.0.0" } }, - "node_modules/argparse": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", - "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "node_modules/@typescript-eslint/type-utils/node_modules/flat-cache": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz", + "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==", "dev": true, + "peer": true, "dependencies": { - "sprintf-js": "~1.0.2" + "flatted": "^3.2.9", + "keyv": "^4.5.4" + }, + "engines": { + "node": ">=16" } }, - "node_modules/aria-query": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", - "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "node_modules/@typescript-eslint/type-utils/node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", "dev": true, + "peer": true, "dependencies": { - "dequal": "^2.0.3" + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" } }, - "node_modules/array-buffer-byte-length": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz", - "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==", + "node_modules/@typescript-eslint/type-utils/node_modules/globals": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz", + "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==", "dev": true, - "dependencies": { - "call-bind": "^1.0.5", - "is-array-buffer": "^3.0.4" - }, + "peer": true, "engines": { - "node": ">= 0.4" + "node": ">=18" }, "funding": { - "url": "https://github.com/sponsors/ljharb" + "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/array-includes": { - "version": "3.1.8", - "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz", - "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.7", - "define-properties": "^1.2.1", - "es-abstract": "^1.23.2", - "es-object-atoms": "^1.0.0", - "get-intrinsic": "^1.2.4", - "is-string": "^1.0.7" - }, + "node_modules/@typescript-eslint/type-utils/node_modules/ignore": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "dev": true, + "peer": true, "engines": { - "node": ">= 0.4" + "node": ">= 4" + } + }, + "node_modules/@typescript-eslint/type-utils/node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "peer": true, + "dependencies": { + "argparse": "^2.0.1" }, - "funding": { - "url": "https://github.com/sponsors/ljharb" + "bin": { + "js-yaml": "bin/js-yaml.js" } }, - "node_modules/array-union": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", - "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "node_modules/@typescript-eslint/types": { + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz", + "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==", "dev": true, "engines": { - "node": ">=8" + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/array.prototype.findlast": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz", - "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==", + "node_modules/@typescript-eslint/typescript-estree": { + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz", + "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", - "define-properties": "^1.2.1", - "es-abstract": "^1.23.2", - "es-errors": "^1.3.0", - "es-object-atoms": "^1.0.0", - "es-shim-unscopables": "^1.0.2" + "@typescript-eslint/types": "5.62.0", + "@typescript-eslint/visitor-keys": "5.62.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "semver": "^7.3.7", + "tsutils": "^3.21.0" }, "engines": { - "node": ">= 0.4" + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, "funding": { - "url": "https://github.com/sponsors/ljharb" + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } } }, - "node_modules/array.prototype.flat": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz", - "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==", + "node_modules/@typescript-eslint/visitor-keys": { + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz", + "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==", "dev": true, "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "es-abstract": "^1.22.1", - "es-shim-unscopables": "^1.0.0" + "@typescript-eslint/types": "5.62.0", + "eslint-visitor-keys": "^3.3.0" }, "engines": { - "node": ">= 0.4" + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, "funding": { - "url": "https://github.com/sponsors/ljharb" + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/array.prototype.flatmap": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz", - "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==", + "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "es-abstract": "^1.22.1", - "es-shim-unscopables": "^1.0.0" - }, "engines": { - "node": ">= 0.4" + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, "funding": { - "url": "https://github.com/sponsors/ljharb" + "url": "https://opencollective.com/eslint" } }, - "node_modules/array.prototype.tosorted": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz", - "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==", + "node_modules/@ungap/structured-clone": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", + "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", + "dev": true + }, + "node_modules/@vitest/expect": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.2.tgz", + "integrity": "sha512-FEgtlN8mIUSEAAnlvn7mP8vzaWhEaAEvhSXCqrsijM7K6QqjB11qoRZYEd4AKSCDz8p0/+yH5LzhZ47qt+EyPg==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", - "define-properties": "^1.2.1", - "es-abstract": "^1.23.3", - "es-errors": "^1.3.0", - "es-shim-unscopables": "^1.0.2" + "@vitest/spy": "2.1.2", + "@vitest/utils": "2.1.2", + "chai": "^5.1.1", + "tinyrainbow": "^1.2.0" }, - "engines": { - "node": ">= 0.4" + "funding": { + "url": "https://opencollective.com/vitest" } }, - "node_modules/arraybuffer.prototype.slice": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz", - "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==", + "node_modules/@vitest/mocker": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.2.tgz", + "integrity": "sha512-ExElkCGMS13JAJy+812fw1aCv2QO/LBK6CyO4WOPAzLTmve50gydOlWhgdBJPx2ztbADUq3JVI0C5U+bShaeEA==", "dev": true, "dependencies": { - "array-buffer-byte-length": "^1.0.1", - "call-bind": "^1.0.5", - "define-properties": "^1.2.1", - "es-abstract": "^1.22.3", - "es-errors": "^1.2.1", - "get-intrinsic": "^1.2.3", - "is-array-buffer": "^3.0.4", - "is-shared-array-buffer": "^1.0.2" - }, - "engines": { - "node": ">= 0.4" + "@vitest/spy": "^2.1.0-beta.1", + "estree-walker": "^3.0.3", + "magic-string": "^0.30.11" }, "funding": { - "url": "https://github.com/sponsors/ljharb" + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "@vitest/spy": "2.1.2", + "msw": "^2.3.5", + "vite": "^5.0.0" + }, + "peerDependenciesMeta": { + "msw": { + "optional": true + }, + "vite": { + "optional": true + } } }, - "node_modules/assertion-error": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz", - "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==", + "node_modules/@vitest/pretty-format": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.2.tgz", + "integrity": "sha512-FIoglbHrSUlOJPDGIrh2bjX1sNars5HbxlcsFKCtKzu4+5lpsRhOCVcuzp0fEhAGHkPZRIXVNzPcpSlkoZ3LuA==", "dev": true, - "engines": { - "node": ">=12" + "dependencies": { + "tinyrainbow": "^1.2.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" } }, - "node_modules/astral-regex": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", - "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==", + "node_modules/@vitest/runner": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.2.tgz", + "integrity": "sha512-UCsPtvluHO3u7jdoONGjOSil+uON5SSvU9buQh3lP7GgUXHp78guN1wRmZDX4wGK6J10f9NUtP6pO+SFquoMlw==", "dev": true, - "engines": { - "node": ">=8" + "dependencies": { + "@vitest/utils": "2.1.2", + "pathe": "^1.1.2" + }, + "funding": { + "url": "https://opencollective.com/vitest" } }, - "node_modules/asynckit": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", - "dev": true - }, - "node_modules/available-typed-arrays": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", - "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==", + "node_modules/@vitest/snapshot": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.2.tgz", + "integrity": "sha512-xtAeNsZ++aRIYIUsek7VHzry/9AcxeULlegBvsdLncLmNCR6tR8SRjn8BbDP4naxtccvzTqZ+L1ltZlRCfBZFA==", "dev": true, "dependencies": { - "possible-typed-array-names": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" + "@vitest/pretty-format": "2.1.2", + "magic-string": "^0.30.11", + "pathe": "^1.1.2" }, "funding": { - "url": "https://github.com/sponsors/ljharb" + "url": "https://opencollective.com/vitest" } }, - "node_modules/balanced-match": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", - "dev": true - }, - "node_modules/binary-extensions": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", - "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "node_modules/@vitest/spy": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.2.tgz", + "integrity": "sha512-GSUi5zoy+abNRJwmFhBDC0yRuVUn8WMlQscvnbbXdKLXX9dE59YbfwXxuJ/mth6eeqIzofU8BB5XDo/Ns/qK2A==", "dev": true, - "engines": { - "node": ">=8" + "dependencies": { + "tinyspy": "^3.0.0" }, "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "url": "https://opencollective.com/vitest" } }, - "node_modules/brace-expansion": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "node_modules/@vitest/ui": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-2.1.2.tgz", + "integrity": "sha512-92gcNzkDnmxOxyHzQrQYRsoV9Q0Aay0r4QMLnV+B+lbqlUWa8nDg9ivyLV5mMVTtGirHsYUGGh/zbIA55gBZqA==", "dev": true, "dependencies": { - "balanced-match": "^1.0.0", - "concat-map": "0.0.1" + "@vitest/utils": "2.1.2", + "fflate": "^0.8.2", + "flatted": "^3.3.1", + "pathe": "^1.1.2", + "sirv": "^2.0.4", + "tinyglobby": "^0.2.6", + "tinyrainbow": "^1.2.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "vitest": "2.1.2" } }, - "node_modules/braces": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", - "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "node_modules/@vitest/utils": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.2.tgz", + "integrity": "sha512-zMO2KdYy6mx56btx9JvAqAZ6EyS3g49krMPPrgOp1yxGZiA93HumGk+bZ5jIZtOg5/VBYl5eBmGRQHqq4FG6uQ==", "dev": true, "dependencies": { - "fill-range": "^7.1.1" + "@vitest/pretty-format": "2.1.2", + "loupe": "^3.1.1", + "tinyrainbow": "^1.2.0" }, - "engines": { - "node": ">=8" + "funding": { + "url": "https://opencollective.com/vitest" } }, - "node_modules/bundle-require": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/bundle-require/-/bundle-require-5.0.0.tgz", - "integrity": "sha512-GuziW3fSSmopcx4KRymQEJVbZUfqlCqcq7dvs6TYwKRZiegK/2buMxQTPs6MGlNv50wms1699qYO54R8XfRX4w==", + "node_modules/acorn": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", + "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", "dev": true, - "dependencies": { - "load-tsconfig": "^0.2.3" + "bin": { + "acorn": "bin/acorn" }, "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" - }, - "peerDependencies": { - "esbuild": ">=0.18" + "node": ">=0.4.0" } }, - "node_modules/cac": { - "version": "6.7.14", - "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz", - "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==", + "node_modules/acorn-jsx": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", "dev": true, - "engines": { - "node": ">=8" + "peerDependencies": { + "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, - "node_modules/call-bind": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", - "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", + "node_modules/agent-base": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz", + "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==", "dev": true, "dependencies": { - "es-define-property": "^1.0.0", - "es-errors": "^1.3.0", - "function-bind": "^1.1.2", - "get-intrinsic": "^1.2.4", - "set-function-length": "^1.2.1" + "debug": "^4.3.4" }, "engines": { - "node": ">= 0.4" + "node": ">= 14" + } + }, + "node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" }, "funding": { - "url": "https://github.com/sponsors/ljharb" + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" } }, - "node_modules/callsites": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", - "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "node_modules/ansi-colors": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", + "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==", "dev": true, "engines": { "node": ">=6" } }, - "node_modules/chai": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.1.tgz", - "integrity": "sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==", + "node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", "dev": true, - "dependencies": { - "assertion-error": "^2.0.1", - "check-error": "^2.1.1", - "deep-eql": "^5.0.1", - "loupe": "^3.1.0", - "pathval": "^2.0.0" - }, "engines": { - "node": ">=12" + "node": ">=8" } }, - "node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "node_modules/ansi-sequence-parser": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.1.tgz", + "integrity": "sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==", + "dev": true + }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" + "color-convert": "^2.0.1" }, "engines": { - "node": ">=10" + "node": ">=8" }, "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" + "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/check-error": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz", - "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==", - "dev": true, - "engines": { - "node": ">= 16" - } + "node_modules/any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true }, - "node_modules/chokidar": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", - "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", "dev": true, "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" }, "engines": { - "node": ">= 8.10.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" + "node": ">= 8" } }, - "node_modules/classnames": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", - "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" - }, - "node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "node_modules/argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", "dev": true, "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" + "sprintf-js": "~1.0.2" } }, - "node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "node_modules/combined-stream": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", - "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", "dev": true, "dependencies": { - "delayed-stream": "~1.0.0" - }, - "engines": { - "node": ">= 0.8" + "dequal": "^2.0.3" } }, - "node_modules/commander": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", - "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "node_modules/array-buffer-byte-length": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz", + "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==", "dev": true, + "dependencies": { + "call-bind": "^1.0.5", + "is-array-buffer": "^3.0.4" + }, "engines": { - "node": ">= 6" + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/common-tags": { - "version": "1.8.2", - "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz", - "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==", + "node_modules/array-includes": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz", + "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==", "dev": true, + "dependencies": { + "call-bind": "^1.0.7", + "define-properties": "^1.2.1", + "es-abstract": "^1.23.2", + "es-object-atoms": "^1.0.0", + "get-intrinsic": "^1.2.4", + "is-string": "^1.0.7" + }, "engines": { - "node": ">=4.0.0" + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/concat-map": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", - "dev": true - }, - "node_modules/consola": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/consola/-/consola-3.2.3.tgz", - "integrity": "sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==", + "node_modules/array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", "dev": true, "engines": { - "node": "^14.18.0 || >=16.10.0" + "node": ">=8" } }, - "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "node_modules/array.prototype.findlast": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz", + "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==", "dev": true, "dependencies": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" + "call-bind": "^1.0.7", + "define-properties": "^1.2.1", + "es-abstract": "^1.23.2", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.0.0", + "es-shim-unscopables": "^1.0.2" }, "engines": { - "node": ">= 8" - } - }, - "node_modules/css.escape": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", - "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==", - "dev": true - }, - "node_modules/cssstyle": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz", - "integrity": "sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==", - "dev": true, - "dependencies": { - "rrweb-cssom": "^0.7.1" + "node": ">= 0.4" }, - "engines": { - "node": ">=18" + "funding": { + "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/csstype": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" - }, - "node_modules/data-urls": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz", - "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==", + "node_modules/array.prototype.flat": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz", + "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==", "dev": true, "dependencies": { - "whatwg-mimetype": "^4.0.0", - "whatwg-url": "^14.0.0" + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", + "es-shim-unscopables": "^1.0.0" }, "engines": { - "node": ">=18" + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/data-view-buffer": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz", - "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==", + "node_modules/array.prototype.flatmap": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz", + "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==", "dev": true, "dependencies": { - "call-bind": "^1.0.6", - "es-errors": "^1.3.0", - "is-data-view": "^1.0.1" + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", + "es-shim-unscopables": "^1.0.0" }, "engines": { "node": ">= 0.4" @@ -2006,32 +2033,36 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/data-view-byte-length": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz", - "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==", + "node_modules/array.prototype.tosorted": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz", + "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==", "dev": true, "dependencies": { "call-bind": "^1.0.7", + "define-properties": "^1.2.1", + "es-abstract": "^1.23.3", "es-errors": "^1.3.0", - "is-data-view": "^1.0.1" + "es-shim-unscopables": "^1.0.2" }, "engines": { "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/data-view-byte-offset": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz", - "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==", + "node_modules/arraybuffer.prototype.slice": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz", + "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==", "dev": true, "dependencies": { - "call-bind": "^1.0.6", - "es-errors": "^1.3.0", - "is-data-view": "^1.0.1" + "array-buffer-byte-length": "^1.0.1", + "call-bind": "^1.0.5", + "define-properties": "^1.2.1", + "es-abstract": "^1.22.3", + "es-errors": "^1.2.1", + "get-intrinsic": "^1.2.3", + "is-array-buffer": "^3.0.4", + "is-shared-array-buffer": "^1.0.2" }, "engines": { "node": ">= 0.4" @@ -2040,62 +2071,37 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/debug": { - "version": "4.3.7", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", - "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "node_modules/assertion-error": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz", + "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==", "dev": true, - "dependencies": { - "ms": "^2.1.3" - }, "engines": { - "node": ">=6.0" - }, - "peerDependenciesMeta": { - "supports-color": { - "optional": true - } + "node": ">=12" } }, - "node_modules/decimal.js": { - "version": "10.4.3", - "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz", - "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==", - "dev": true - }, - "node_modules/deep-eql": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz", - "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==", + "node_modules/astral-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", + "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==", "dev": true, "engines": { - "node": ">=6" + "node": ">=8" } }, - "node_modules/deep-equal": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz", - "integrity": "sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==", + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "dev": true + }, + "node_modules/available-typed-arrays": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", + "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==", "dev": true, "dependencies": { - "array-buffer-byte-length": "^1.0.0", - "call-bind": "^1.0.5", - "es-get-iterator": "^1.1.3", - "get-intrinsic": "^1.2.2", - "is-arguments": "^1.1.1", - "is-array-buffer": "^3.0.2", - "is-date-object": "^1.0.5", - "is-regex": "^1.1.4", - "is-shared-array-buffer": "^1.0.2", - "isarray": "^2.0.5", - "object-is": "^1.1.5", - "object-keys": "^1.1.1", - "object.assign": "^4.1.4", - "regexp.prototype.flags": "^1.5.1", - "side-channel": "^1.0.4", - "which-boxed-primitive": "^1.0.2", - "which-collection": "^1.0.1", - "which-typed-array": "^1.1.13" + "possible-typed-array-names": "^1.0.0" }, "engines": { "node": ">= 0.4" @@ -2104,387 +2110,1129 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/deep-is": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", - "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, - "node_modules/deepsignal": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/deepsignal/-/deepsignal-1.5.0.tgz", - "integrity": "sha512-bFywDpBUUWMs576H2dgLFLLFuQ/UWXbzHfKD98MZTfGsl7+twIzvz4ihCNrRrZ/Emz3kqJaNIAp5eBWUEWhnAw==", - "peerDependencies": { - "@preact/signals": "^1.1.4", - "@preact/signals-core": "^1.5.1", - "@preact/signals-react": "^1.3.8 || ^2.0.0", - "preact": "^10.16.0" + "node_modules/binary-extensions": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "dev": true, + "engines": { + "node": ">=8" }, - "peerDependenciesMeta": { - "@preact/signals": { - "optional": true - }, - "@preact/signals-core": { - "optional": true - }, - "@preact/signals-react": { - "optional": true - }, - "preact": { - "optional": true - } + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/define-data-property": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", - "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", + "node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, "dependencies": { - "es-define-property": "^1.0.0", - "es-errors": "^1.3.0", - "gopd": "^1.0.1" + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/braces": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dev": true, + "dependencies": { + "fill-range": "^7.1.1" }, "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" + "node": ">=8" } }, - "node_modules/define-properties": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz", - "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==", + "node_modules/bundle-require": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/bundle-require/-/bundle-require-5.0.0.tgz", + "integrity": "sha512-GuziW3fSSmopcx4KRymQEJVbZUfqlCqcq7dvs6TYwKRZiegK/2buMxQTPs6MGlNv50wms1699qYO54R8XfRX4w==", "dev": true, "dependencies": { - "define-data-property": "^1.0.1", - "has-property-descriptors": "^1.0.0", - "object-keys": "^1.1.1" + "load-tsconfig": "^0.2.3" }, "engines": { - "node": ">= 0.4" + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" }, - "funding": { - "url": "https://github.com/sponsors/ljharb" + "peerDependencies": { + "esbuild": ">=0.18" } }, - "node_modules/delayed-stream": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", - "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "node_modules/cac": { + "version": "6.7.14", + "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz", + "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==", "dev": true, "engines": { - "node": ">=0.4.0" + "node": ">=8" } }, - "node_modules/dequal": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", - "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "node_modules/call-bind": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", + "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", + "dev": true, + "dependencies": { + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "set-function-length": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", "dev": true, "engines": { "node": ">=6" } }, - "node_modules/dir-glob": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", - "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "node_modules/chai": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.1.tgz", + "integrity": "sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==", "dev": true, "dependencies": { - "path-type": "^4.0.0" + "assertion-error": "^2.0.1", + "check-error": "^2.1.1", + "deep-eql": "^5.0.1", + "loupe": "^3.1.0", + "pathval": "^2.0.0" }, "engines": { - "node": ">=8" + "node": ">=12" } }, - "node_modules/dlv": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", - "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", - "dev": true + "node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } }, - "node_modules/doctrine": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", - "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==", + "node_modules/check-error": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz", + "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==", + "dev": true, + "engines": { + "node": ">= 16" + } + }, + "node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", "dev": true, "dependencies": { - "esutils": "^2.0.2" + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" }, "engines": { - "node": ">=6.0.0" + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" } }, - "node_modules/dom-accessibility-api": { - "version": "0.5.16", - "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", - "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, - "node_modules/eastasianwidth": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", - "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dev": true, + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/common-tags": { + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz", + "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==", + "dev": true, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, - "node_modules/emoji-regex": { - "version": "9.2.2", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", - "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", + "node_modules/consola": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/consola/-/consola-3.2.3.tgz", + "integrity": "sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==", + "dev": true, + "engines": { + "node": "^14.18.0 || >=16.10.0" + } + }, + "node_modules/cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/css.escape": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", + "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==", "dev": true }, - "node_modules/enquirer": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz", - "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==", + "node_modules/cssstyle": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz", + "integrity": "sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==", "dev": true, "dependencies": { - "ansi-colors": "^4.1.1", - "strip-ansi": "^6.0.1" + "rrweb-cssom": "^0.7.1" }, "engines": { - "node": ">=8.6" + "node": ">=18" } }, - "node_modules/entities": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", - "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + }, + "node_modules/data-urls": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz", + "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==", "dev": true, + "dependencies": { + "whatwg-mimetype": "^4.0.0", + "whatwg-url": "^14.0.0" + }, "engines": { - "node": ">=0.12" + "node": ">=18" + } + }, + "node_modules/data-view-buffer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz", + "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.6", + "es-errors": "^1.3.0", + "is-data-view": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" }, "funding": { - "url": "https://github.com/fb55/entities?sponsor=1" + "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/es-abstract": { - "version": "1.23.3", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz", - "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==", + "node_modules/data-view-byte-length": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz", + "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==", "dev": true, "dependencies": { - "array-buffer-byte-length": "^1.0.1", - "arraybuffer.prototype.slice": "^1.0.3", - "available-typed-arrays": "^1.0.7", "call-bind": "^1.0.7", - "data-view-buffer": "^1.0.1", - "data-view-byte-length": "^1.0.1", - "data-view-byte-offset": "^1.0.0", - "es-define-property": "^1.0.0", "es-errors": "^1.3.0", - "es-object-atoms": "^1.0.0", - "es-set-tostringtag": "^2.0.3", - "es-to-primitive": "^1.2.1", - "function.prototype.name": "^1.1.6", - "get-intrinsic": "^1.2.4", - "get-symbol-description": "^1.0.2", - "globalthis": "^1.0.3", - "gopd": "^1.0.1", - "has-property-descriptors": "^1.0.2", - "has-proto": "^1.0.3", - "has-symbols": "^1.0.3", - "hasown": "^2.0.2", - "internal-slot": "^1.0.7", - "is-array-buffer": "^3.0.4", - "is-callable": "^1.2.7", - "is-data-view": "^1.0.1", - "is-negative-zero": "^2.0.3", + "is-data-view": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/data-view-byte-offset": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz", + "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.6", + "es-errors": "^1.3.0", + "is-data-view": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "dev": true, + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/decimal.js": { + "version": "10.4.3", + "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz", + "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==", + "dev": true + }, + "node_modules/deep-eql": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz", + "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/deep-equal": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz", + "integrity": "sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==", + "dev": true, + "dependencies": { + "array-buffer-byte-length": "^1.0.0", + "call-bind": "^1.0.5", + "es-get-iterator": "^1.1.3", + "get-intrinsic": "^1.2.2", + "is-arguments": "^1.1.1", + "is-array-buffer": "^3.0.2", + "is-date-object": "^1.0.5", "is-regex": "^1.1.4", - "is-shared-array-buffer": "^1.0.3", - "is-string": "^1.0.7", - "is-typed-array": "^1.1.13", - "is-weakref": "^1.0.2", - "object-inspect": "^1.13.1", + "is-shared-array-buffer": "^1.0.2", + "isarray": "^2.0.5", + "object-is": "^1.1.5", "object-keys": "^1.1.1", - "object.assign": "^4.1.5", - "regexp.prototype.flags": "^1.5.2", - "safe-array-concat": "^1.1.2", - "safe-regex-test": "^1.0.3", - "string.prototype.trim": "^1.2.9", - "string.prototype.trimend": "^1.0.8", - "string.prototype.trimstart": "^1.0.8", - "typed-array-buffer": "^1.0.2", - "typed-array-byte-length": "^1.0.1", - "typed-array-byte-offset": "^1.0.2", - "typed-array-length": "^1.0.6", - "unbox-primitive": "^1.0.2", - "which-typed-array": "^1.1.15" + "object.assign": "^4.1.4", + "regexp.prototype.flags": "^1.5.1", + "side-channel": "^1.0.4", + "which-boxed-primitive": "^1.0.2", + "which-collection": "^1.0.1", + "which-typed-array": "^1.1.13" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/deep-is": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", + "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", + "dev": true + }, + "node_modules/deepsignal": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/deepsignal/-/deepsignal-1.5.0.tgz", + "integrity": "sha512-bFywDpBUUWMs576H2dgLFLLFuQ/UWXbzHfKD98MZTfGsl7+twIzvz4ihCNrRrZ/Emz3kqJaNIAp5eBWUEWhnAw==", + "peerDependencies": { + "@preact/signals": "^1.1.4", + "@preact/signals-core": "^1.5.1", + "@preact/signals-react": "^1.3.8 || ^2.0.0", + "preact": "^10.16.0" + }, + "peerDependenciesMeta": { + "@preact/signals": { + "optional": true + }, + "@preact/signals-core": { + "optional": true + }, + "@preact/signals-react": { + "optional": true + }, + "preact": { + "optional": true + } + } + }, + "node_modules/define-data-property": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", + "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", + "dev": true, + "dependencies": { + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "gopd": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/define-properties": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz", + "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==", + "dev": true, + "dependencies": { + "define-data-property": "^1.0.1", + "has-property-descriptors": "^1.0.0", + "object-keys": "^1.1.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "dev": true, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/dir-glob": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", + "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "dev": true, + "dependencies": { + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/dlv": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true + }, + "node_modules/doctrine": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", + "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==", + "dev": true, + "dependencies": { + "esutils": "^2.0.2" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/dom-accessibility-api": { + "version": "0.5.16", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", + "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", + "dev": true + }, + "node_modules/eastasianwidth": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", + "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", + "dev": true + }, + "node_modules/emoji-regex": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", + "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", + "dev": true + }, + "node_modules/enquirer": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz", + "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==", + "dev": true, + "dependencies": { + "ansi-colors": "^4.1.1", + "strip-ansi": "^6.0.1" }, "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" + "node": ">=8.6" + } + }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true, + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/es-abstract": { + "version": "1.23.3", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz", + "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==", + "dev": true, + "dependencies": { + "array-buffer-byte-length": "^1.0.1", + "arraybuffer.prototype.slice": "^1.0.3", + "available-typed-arrays": "^1.0.7", + "call-bind": "^1.0.7", + "data-view-buffer": "^1.0.1", + "data-view-byte-length": "^1.0.1", + "data-view-byte-offset": "^1.0.0", + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.0.0", + "es-set-tostringtag": "^2.0.3", + "es-to-primitive": "^1.2.1", + "function.prototype.name": "^1.1.6", + "get-intrinsic": "^1.2.4", + "get-symbol-description": "^1.0.2", + "globalthis": "^1.0.3", + "gopd": "^1.0.1", + "has-property-descriptors": "^1.0.2", + "has-proto": "^1.0.3", + "has-symbols": "^1.0.3", + "hasown": "^2.0.2", + "internal-slot": "^1.0.7", + "is-array-buffer": "^3.0.4", + "is-callable": "^1.2.7", + "is-data-view": "^1.0.1", + "is-negative-zero": "^2.0.3", + "is-regex": "^1.1.4", + "is-shared-array-buffer": "^1.0.3", + "is-string": "^1.0.7", + "is-typed-array": "^1.1.13", + "is-weakref": "^1.0.2", + "object-inspect": "^1.13.1", + "object-keys": "^1.1.1", + "object.assign": "^4.1.5", + "regexp.prototype.flags": "^1.5.2", + "safe-array-concat": "^1.1.2", + "safe-regex-test": "^1.0.3", + "string.prototype.trim": "^1.2.9", + "string.prototype.trimend": "^1.0.8", + "string.prototype.trimstart": "^1.0.8", + "typed-array-buffer": "^1.0.2", + "typed-array-byte-length": "^1.0.1", + "typed-array-byte-offset": "^1.0.2", + "typed-array-length": "^1.0.6", + "unbox-primitive": "^1.0.2", + "which-typed-array": "^1.1.15" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/es-define-property": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", + "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", + "dev": true, + "dependencies": { + "get-intrinsic": "^1.2.4" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "dev": true, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-get-iterator": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz", + "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "get-intrinsic": "^1.1.3", + "has-symbols": "^1.0.3", + "is-arguments": "^1.1.1", + "is-map": "^2.0.2", + "is-set": "^2.0.2", + "is-string": "^1.0.7", + "isarray": "^2.0.5", + "stop-iteration-iterator": "^1.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/es-iterator-helpers": { + "version": "1.0.19", + "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz", + "integrity": "sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.7", + "define-properties": "^1.2.1", + "es-abstract": "^1.23.3", + "es-errors": "^1.3.0", + "es-set-tostringtag": "^2.0.3", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "globalthis": "^1.0.3", + "has-property-descriptors": "^1.0.2", + "has-proto": "^1.0.3", + "has-symbols": "^1.0.3", + "internal-slot": "^1.0.7", + "iterator.prototype": "^1.1.2", + "safe-array-concat": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-object-atoms": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz", + "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==", + "dev": true, + "dependencies": { + "es-errors": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-set-tostringtag": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz", + "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==", + "dev": true, + "dependencies": { + "get-intrinsic": "^1.2.4", + "has-tostringtag": "^1.0.2", + "hasown": "^2.0.1" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-shim-unscopables": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz", + "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==", + "dev": true, + "dependencies": { + "hasown": "^2.0.0" + } + }, + "node_modules/es-to-primitive": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", + "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", + "dev": true, + "dependencies": { + "is-callable": "^1.1.4", + "is-date-object": "^1.0.1", + "is-symbol": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/esbuild": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.1.tgz", + "integrity": "sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.23.1", + "@esbuild/android-arm": "0.23.1", + "@esbuild/android-arm64": "0.23.1", + "@esbuild/android-x64": "0.23.1", + "@esbuild/darwin-arm64": "0.23.1", + "@esbuild/darwin-x64": "0.23.1", + "@esbuild/freebsd-arm64": "0.23.1", + "@esbuild/freebsd-x64": "0.23.1", + "@esbuild/linux-arm": "0.23.1", + "@esbuild/linux-arm64": "0.23.1", + "@esbuild/linux-ia32": "0.23.1", + "@esbuild/linux-loong64": "0.23.1", + "@esbuild/linux-mips64el": "0.23.1", + "@esbuild/linux-ppc64": "0.23.1", + "@esbuild/linux-riscv64": "0.23.1", + "@esbuild/linux-s390x": "0.23.1", + "@esbuild/linux-x64": "0.23.1", + "@esbuild/netbsd-x64": "0.23.1", + "@esbuild/openbsd-arm64": "0.23.1", + "@esbuild/openbsd-x64": "0.23.1", + "@esbuild/sunos-x64": "0.23.1", + "@esbuild/win32-arm64": "0.23.1", + "@esbuild/win32-ia32": "0.23.1", + "@esbuild/win32-x64": "0.23.1" + } + }, + "node_modules/esbuild-plugin-file-path-extensions": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/esbuild-plugin-file-path-extensions/-/esbuild-plugin-file-path-extensions-2.1.2.tgz", + "integrity": "sha512-c9ncPyXg2ykUFBZ3HwErs39EN0jdJHHMb2un/fAYHR41ZgnsHMXM1FlG8W3MV+NXRi64dFSybS9FZcaHO0Ge5Q==", + "dev": true, + "engines": { + "node": ">=v14.0.0", + "npm": ">=7.0.0" + } + }, + "node_modules/esbuild/node_modules/@esbuild/aix-ppc64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz", + "integrity": "sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/esbuild/node_modules/@esbuild/android-arm": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.23.1.tgz", + "integrity": "sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/esbuild/node_modules/@esbuild/android-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.23.1.tgz", + "integrity": "sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/esbuild/node_modules/@esbuild/android-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.23.1.tgz", + "integrity": "sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/esbuild/node_modules/@esbuild/darwin-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.23.1.tgz", + "integrity": "sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/esbuild/node_modules/@esbuild/freebsd-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.23.1.tgz", + "integrity": "sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/esbuild/node_modules/@esbuild/freebsd-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.23.1.tgz", + "integrity": "sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/esbuild/node_modules/@esbuild/linux-arm": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.23.1.tgz", + "integrity": "sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/esbuild/node_modules/@esbuild/linux-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.23.1.tgz", + "integrity": "sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/esbuild/node_modules/@esbuild/linux-ia32": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.23.1.tgz", + "integrity": "sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/esbuild/node_modules/@esbuild/linux-loong64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.23.1.tgz", + "integrity": "sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/esbuild/node_modules/@esbuild/linux-mips64el": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.23.1.tgz", + "integrity": "sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" } }, - "node_modules/es-define-property": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", - "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", + "node_modules/esbuild/node_modules/@esbuild/linux-ppc64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.23.1.tgz", + "integrity": "sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==", + "cpu": [ + "ppc64" + ], "dev": true, - "dependencies": { - "get-intrinsic": "^1.2.4" - }, + "optional": true, + "os": [ + "linux" + ], "engines": { - "node": ">= 0.4" + "node": ">=18" } }, - "node_modules/es-errors": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", - "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "node_modules/esbuild/node_modules/@esbuild/linux-riscv64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.23.1.tgz", + "integrity": "sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==", + "cpu": [ + "riscv64" + ], "dev": true, + "optional": true, + "os": [ + "linux" + ], "engines": { - "node": ">= 0.4" + "node": ">=18" } }, - "node_modules/es-get-iterator": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz", - "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==", + "node_modules/esbuild/node_modules/@esbuild/linux-s390x": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.23.1.tgz", + "integrity": "sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==", + "cpu": [ + "s390x" + ], "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.1.3", - "has-symbols": "^1.0.3", - "is-arguments": "^1.1.1", - "is-map": "^2.0.2", - "is-set": "^2.0.2", - "is-string": "^1.0.7", - "isarray": "^2.0.5", - "stop-iteration-iterator": "^1.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" } }, - "node_modules/es-iterator-helpers": { - "version": "1.0.19", - "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz", - "integrity": "sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==", + "node_modules/esbuild/node_modules/@esbuild/linux-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.23.1.tgz", + "integrity": "sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==", + "cpu": [ + "x64" + ], "dev": true, - "dependencies": { - "call-bind": "^1.0.7", - "define-properties": "^1.2.1", - "es-abstract": "^1.23.3", - "es-errors": "^1.3.0", - "es-set-tostringtag": "^2.0.3", - "function-bind": "^1.1.2", - "get-intrinsic": "^1.2.4", - "globalthis": "^1.0.3", - "has-property-descriptors": "^1.0.2", - "has-proto": "^1.0.3", - "has-symbols": "^1.0.3", - "internal-slot": "^1.0.7", - "iterator.prototype": "^1.1.2", - "safe-array-concat": "^1.1.2" - }, + "optional": true, + "os": [ + "linux" + ], "engines": { - "node": ">= 0.4" + "node": ">=18" } }, - "node_modules/es-object-atoms": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz", - "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==", + "node_modules/esbuild/node_modules/@esbuild/netbsd-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.23.1.tgz", + "integrity": "sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==", + "cpu": [ + "x64" + ], "dev": true, - "dependencies": { - "es-errors": "^1.3.0" - }, + "optional": true, + "os": [ + "netbsd" + ], "engines": { - "node": ">= 0.4" + "node": ">=18" } }, - "node_modules/es-set-tostringtag": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz", - "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==", + "node_modules/esbuild/node_modules/@esbuild/openbsd-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.23.1.tgz", + "integrity": "sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==", + "cpu": [ + "x64" + ], "dev": true, - "dependencies": { - "get-intrinsic": "^1.2.4", - "has-tostringtag": "^1.0.2", - "hasown": "^2.0.1" - }, + "optional": true, + "os": [ + "openbsd" + ], "engines": { - "node": ">= 0.4" + "node": ">=18" } }, - "node_modules/es-shim-unscopables": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz", - "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==", + "node_modules/esbuild/node_modules/@esbuild/sunos-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.23.1.tgz", + "integrity": "sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==", + "cpu": [ + "x64" + ], "dev": true, - "dependencies": { - "hasown": "^2.0.0" + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" } }, - "node_modules/es-to-primitive": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", - "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", + "node_modules/esbuild/node_modules/@esbuild/win32-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.23.1.tgz", + "integrity": "sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==", + "cpu": [ + "arm64" + ], "dev": true, - "dependencies": { - "is-callable": "^1.1.4", - "is-date-object": "^1.0.1", - "is-symbol": "^1.0.2" - }, + "optional": true, + "os": [ + "win32" + ], "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" + "node": ">=18" } }, - "node_modules/esbuild": { + "node_modules/esbuild/node_modules/@esbuild/win32-ia32": { "version": "0.23.1", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.1.tgz", - "integrity": "sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.23.1.tgz", + "integrity": "sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==", + "cpu": [ + "ia32" + ], "dev": true, - "hasInstallScript": true, - "bin": { - "esbuild": "bin/esbuild" - }, + "optional": true, + "os": [ + "win32" + ], "engines": { "node": ">=18" - }, - "optionalDependencies": { - "@esbuild/aix-ppc64": "0.23.1", - "@esbuild/android-arm": "0.23.1", - "@esbuild/android-arm64": "0.23.1", - "@esbuild/android-x64": "0.23.1", - "@esbuild/darwin-arm64": "0.23.1", - "@esbuild/darwin-x64": "0.23.1", - "@esbuild/freebsd-arm64": "0.23.1", - "@esbuild/freebsd-x64": "0.23.1", - "@esbuild/linux-arm": "0.23.1", - "@esbuild/linux-arm64": "0.23.1", - "@esbuild/linux-ia32": "0.23.1", - "@esbuild/linux-loong64": "0.23.1", - "@esbuild/linux-mips64el": "0.23.1", - "@esbuild/linux-ppc64": "0.23.1", - "@esbuild/linux-riscv64": "0.23.1", - "@esbuild/linux-s390x": "0.23.1", - "@esbuild/linux-x64": "0.23.1", - "@esbuild/netbsd-x64": "0.23.1", - "@esbuild/openbsd-arm64": "0.23.1", - "@esbuild/openbsd-x64": "0.23.1", - "@esbuild/sunos-x64": "0.23.1", - "@esbuild/win32-arm64": "0.23.1", - "@esbuild/win32-ia32": "0.23.1", - "@esbuild/win32-x64": "0.23.1" } }, - "node_modules/esbuild-plugin-file-path-extensions": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/esbuild-plugin-file-path-extensions/-/esbuild-plugin-file-path-extensions-2.1.2.tgz", - "integrity": "sha512-c9ncPyXg2ykUFBZ3HwErs39EN0jdJHHMb2un/fAYHR41ZgnsHMXM1FlG8W3MV+NXRi64dFSybS9FZcaHO0Ge5Q==", + "node_modules/esbuild/node_modules/@esbuild/win32-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.23.1.tgz", + "integrity": "sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==", + "cpu": [ + "x64" + ], "dev": true, + "optional": true, + "os": [ + "win32" + ], "engines": { - "node": ">=v14.0.0", - "npm": ">=7.0.0" + "node": ">=18" } }, "node_modules/escape-string-regexp": { @@ -2874,6 +3622,12 @@ "reusify": "^1.0.4" } }, + "node_modules/fflate": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz", + "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==", + "dev": true + }, "node_modules/file-entry-cache": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", @@ -4400,6 +5154,15 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/mrmime": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz", + "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -5681,6 +6444,20 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/sirv": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz", + "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==", + "dev": true, + "dependencies": { + "@polka/url": "^1.0.0-next.24", + "mrmime": "^2.0.0", + "totalist": "^3.0.0" + }, + "engines": { + "node": ">= 10" + } + }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -6141,6 +6918,45 @@ "integrity": "sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==", "dev": true }, + "node_modules/tinyglobby": { + "version": "0.2.9", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.9.tgz", + "integrity": "sha512-8or1+BGEdk1Zkkw2ii16qSS7uVrQJPre5A9o/XkWPATkk23FZh/15BKFxPnlTy6vkljZxLqYCzzBMj30ZrSvjw==", + "dev": true, + "dependencies": { + "fdir": "^6.4.0", + "picomatch": "^4.0.2" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/tinyglobby/node_modules/fdir": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.0.tgz", + "integrity": "sha512-3oB133prH1o4j/L5lLW7uOCF1PlD+/It2L0eL/iAqWMB91RBbqTewABqxhj0ibBd90EEmWZq7ntIWzVaWcXTGQ==", + "dev": true, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/tinyglobby/node_modules/picomatch": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", + "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/tinypool": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.1.tgz", @@ -6180,6 +6996,15 @@ "node": ">=8.0" } }, + "node_modules/totalist": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz", + "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/tough-cookie": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz", @@ -6991,9 +7816,9 @@ "dev": true }, "node_modules/vite": { - "version": "5.4.4", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.4.tgz", - "integrity": "sha512-RHFCkULitycHVTtelJ6jQLd+KSAAzOgEYorV32R2q++M6COBjKJR6BxqClwp5sf0XaBDjVMuJ9wnNfyAJwjMkA==", + "version": "5.4.8", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz", + "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==", "dev": true, "dependencies": { "esbuild": "^0.21.3", @@ -7050,9 +7875,9 @@ } }, "node_modules/vite-node": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.0.tgz", - "integrity": "sha512-+ybYqBVUjYyIscoLzMWodus2enQDZOpGhcU6HdOVD6n8WZdk12w1GFL3mbnxLs7hPtRtqs1Wo5YF6/Tsr6fmhg==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.2.tgz", + "integrity": "sha512-HPcGNN5g/7I2OtPjLqgOtCRu/qhVvBxTUD3qzitmL0SrG1cWFzxzhMDWussxSbrRYWqnKf8P2jiNhPMSN+ymsQ==", "dev": true, "dependencies": { "cac": "^6.7.14", @@ -7125,18 +7950,18 @@ } }, "node_modules/vitest": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.0.tgz", - "integrity": "sha512-XuuEeyNkqbfr0FtAvd9vFbInSSNY1ykCQTYQ0sj9wPy4hx+1gR7gqVNdW0AX2wrrM1wWlN5fnJDjF9xG6mYRSQ==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.2.tgz", + "integrity": "sha512-veNjLizOMkRrJ6xxb+pvxN6/QAWg95mzcRjtmkepXdN87FNfxAss9RKe2far/G9cQpipfgP2taqg0KiWsquj8A==", "dev": true, "dependencies": { - "@vitest/expect": "2.1.0", - "@vitest/mocker": "2.1.0", - "@vitest/pretty-format": "^2.1.0", - "@vitest/runner": "2.1.0", - "@vitest/snapshot": "2.1.0", - "@vitest/spy": "2.1.0", - "@vitest/utils": "2.1.0", + "@vitest/expect": "2.1.2", + "@vitest/mocker": "2.1.2", + "@vitest/pretty-format": "^2.1.2", + "@vitest/runner": "2.1.2", + "@vitest/snapshot": "2.1.2", + "@vitest/spy": "2.1.2", + "@vitest/utils": "2.1.2", "chai": "^5.1.1", "debug": "^4.3.6", "magic-string": "^0.30.11", @@ -7147,7 +7972,7 @@ "tinypool": "^1.0.0", "tinyrainbow": "^1.2.0", "vite": "^5.0.0", - "vite-node": "2.1.0", + "vite-node": "2.1.2", "why-is-node-running": "^2.3.0" }, "bin": { @@ -7162,8 +7987,8 @@ "peerDependencies": { "@edge-runtime/vm": "*", "@types/node": "^18.0.0 || >=20.0.0", - "@vitest/browser": "2.1.0", - "@vitest/ui": "2.1.0", + "@vitest/browser": "2.1.2", + "@vitest/ui": "2.1.2", "happy-dom": "*", "jsdom": "*" }, diff --git a/package.json b/package.json index 1dff3a0c..9e9c2c2d 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "@types/react": "^18.2.57", "@types/react-dom": "^18.2.19", "@types/uuid": "^8.3.1", + "@vitest/ui": "^2.1.2", "esbuild-plugin-file-path-extensions": "^2.1.0", "eslint": "^7.32.0", "eslint-config-prettier": "^9.1.0", diff --git a/src/__test__/data/fields.ts b/src/__test__/data/fields.ts new file mode 100644 index 00000000..eaa58adc --- /dev/null +++ b/src/__test__/data/fields.ts @@ -0,0 +1,37 @@ +import { ISchemaFieldMap } from "../../visualBuilder/utils/types/index.types"; + +export const singleLineFieldSchema = { + data_type: "text", + display_name: "Single Line Textbox", + uid: "single_line", + field_metadata: { + description: "", + default_value: "", + version: 3, + }, + format: "", + error_messages: { + format: "", + }, + mandatory: false, + multiple: true, + non_localizable: false, + unique: false, +} as ISchemaFieldMap; + +export const mockMultipleLinkFieldSchema: ISchemaFieldMap = { + data_type: "link", + display_name: "Link", + uid: "link", + field_metadata: { + description: "", + default_value: { + title: "Example", + url: "https://www.example.com", + }, + }, + mandatory: false, + multiple: true, + non_localizable: false, + unique: false, +}; diff --git a/src/visualBuilder/__test__/__snapshots__/index.test.ts.snap b/src/visualBuilder/__test__/__snapshots__/index.test.ts.snap index c1da03fb..0d9e5ab1 100644 --- a/src/visualBuilder/__test__/__snapshots__/index.test.ts.snap +++ b/src/visualBuilder/__test__/__snapshots__/index.test.ts.snap @@ -200,6 +200,233 @@ exports[`Visual Builder > should append a visual builder container to the DOM 1`
`; +exports[`Visual builder > inline editing > should add overlay to DOM when clicked 1`] = ` + +

+
+ +
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > file should render a replacer and remove when it is not 1`] = ` +

+`; + +exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > file should render a replacer and remove when it is not 2`] = `undefined`; + +exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > multi line should be contenteditable 1`] = ` +

+`; + +exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > single line should be contenteditable 1`] = ` +

+`; + +exports[`Visual builder > on click, the sdk > should do nothing if data-cslp not available 1`] = ` + +

+
+ +
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[`Visual builder > should append a visual builder container to the DOM 1`] = ` +
+ +
+
+
+
+
+
+
+
+
+
+
+`; + exports[`visual builder DOM > should have an overlay over the element 1`] = `
should have an overlay over the element 2`] = ` />
`; + +exports[`visual builder DOM > should have an overlay over the element 3`] = ` +
+
+
+
+
+
+
+`; diff --git a/src/visualBuilder/__test__/__snapshots__/visualBuilderHover.test.ts.snap b/src/visualBuilder/__test__/__snapshots__/visualBuilderHover.test.ts.snap new file mode 100644 index 00000000..6a3f8395 --- /dev/null +++ b/src/visualBuilder/__test__/__snapshots__/visualBuilderHover.test.ts.snap @@ -0,0 +1,236 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have custom cursor 1`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have custom cursor on individual instances 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have custom cursor on individual instances 2`] = ` +

+
+
+ + + +
+
+ + + + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have outline 1`] = ` +
+

+

+

+`; + +exports[`When an element is hovered in visual builder mode > multi line field > should have custom cursor 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > multi line field > should have custom cursor 2`] = ` +

+
+
+ + + +
+
+ + + + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > single line field (multiple) > should have custom cursor 1`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > single line field (multiple) > should have custom cursor on individual instances 1`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > single line field (multiple) > should have instance button on individual instances 1`] = `NodeList []`; + +exports[`When an element is hovered in visual builder mode > single line field (multiple) > should have outline 1`] = ` +
+

+

+

+`; + +exports[`When an element is hovered in visual builder mode > single line field (multiple) > should have outline on individual instances 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > single line field > should have custom cursor 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > single line field > should have outline 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > title field > should have custom cursor 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > title field > should have outline 1`] = ` +

+`; diff --git a/src/visualBuilder/__test__/fields/number/number.test.ts b/src/visualBuilder/__test__/fields/number/number.test.ts index 913957f1..99ddb555 100644 --- a/src/visualBuilder/__test__/fields/number/number.test.ts +++ b/src/visualBuilder/__test__/fields/number/number.test.ts @@ -2,7 +2,6 @@ import { fireEvent, prettyDOM, screen } from "@testing-library/preact"; // TODO: @faraazb check if we still need this library. If not let's remove and uninstall it. import { userEvent } from "@testing-library/user-event"; import { act } from "preact/test-utils"; -import { VisualBuilder } from "../../.."; import { getAllContentTypes } from "../../../../__test__/data/contentType"; import Config from "../../../../configManager/configManager"; import { ILivePreviewModeConfig } from "../../../../types/types"; @@ -10,10 +9,30 @@ import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../../../utils/constant import { getDOMEditStack } from "../../../utils/getCsDataOfElement"; import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types"; +import { VisualBuilder } from "../../.."; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; const FIELD_VALUE = "123"; const CT_UID = "all_fields"; const FIELD_UID = "number"; +const FIELD_CSLP = `${CT_UID}.bltEntryUid.en-us.${FIELD_UID}`; +// this now comes from visual builder, since sometimes +// the display name is also dependent on the entry +const FIELD_DISPLAY_NAME = "Great Number"; + +const numberFieldSchema = { + data_type: "number", + display_name: "Number", + uid: "number", + field_metadata: { + description: "", + default_value: "", + }, + mandatory: false, + multiple: false, + non_localizable: false, + unique: false, +}; global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), @@ -38,20 +57,9 @@ vi.mock("../../../utils/visualBuilderPostMessage", () => { eventName === VisualBuilderPostMessageEvents.GET_FIELD_SCHEMA ) { - const { contentTypeUid } = params; - const numberField = contentTypes[ - contentTypeUid - ].schema.find( - (field: Record) => - field.uid === FIELD_UID - ); - if (!numberField) { - return {}; - } - // since we are testing the number field, we can only return the number field's schema return { fieldSchemaMap: { - [numberField.uid]: numberField, + [numberFieldSchema.uid]: numberFieldSchema, }, }; } else if ( @@ -61,6 +69,13 @@ vi.mock("../../../utils/visualBuilderPostMessage", () => { return Promise.resolve({ fieldData: FIELD_VALUE, }); + } else if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES + ) { + return Promise.resolve({ + [FIELD_CSLP]: FIELD_DISPLAY_NAME, + }); } return Promise.resolve(); }), @@ -69,16 +84,13 @@ vi.mock("../../../utils/visualBuilderPostMessage", () => { }; }); -describe("number field", () => { +describe.skip("number field", () => { let numberField: HTMLParagraphElement; let visualBuilder: VisualBuilder; beforeEach(() => { numberField = document.createElement("p"); - numberField.setAttribute( - "data-cslp", - `${CT_UID}.bltEntryUid.en-us.${FIELD_UID}` - ); + numberField.setAttribute("data-cslp", FIELD_CSLP); numberField.textContent = FIELD_VALUE; numberField.getBoundingClientRect = vi.fn(() => ({ x: 100, @@ -131,31 +143,31 @@ describe("number field", () => { "visual-builder__overlay--right" ); - const overlays = [topOverlay, bottomOverlay, leftOverlay, rightOverlay]; - for (const overlay of overlays) { - expect(overlay).toBeVisible(); - } + expect(topOverlay).toBeVisible(); + expect(bottomOverlay).toBeVisible(); + expect(leftOverlay).toBeVisible(); + expect(rightOverlay).toBeVisible(); }); test("should have a field path dropdown", async () => { - await userEvent.click(numberField); - const focussedToolbar = screen.getByTestId( + fireEvent.click(numberField); + const focussedToolbar = await screen.findByTestId( "visual-builder__focused-toolbar" ); + console.log(prettyDOM(document.body)); expect(focussedToolbar).toBeVisible(); - // expect field display_name as dropdown label - const fieldLabel = focussedToolbar.querySelector( - ".visual-builder__focused-toolbar__text" + const fieldLabel = await screen.findByTestId( + "visual-builder__focused-toolbar__text" ); - expect(fieldLabel).toHaveTextContent("Number"); + expect(fieldLabel).toHaveTextContent(FIELD_DISPLAY_NAME); }); test("should contain a data-cslp-field-type attribute", async () => { VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = numberField; - await userEvent.click(numberField); + userEvent.click(numberField); expect(numberField).toHaveAttribute( VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY diff --git a/src/visualBuilder/__test__/visualBuilderClick.test.ts b/src/visualBuilder/__test__/visualBuilderClick.test.ts index 2a338ef6..facfc128 100644 --- a/src/visualBuilder/__test__/visualBuilderClick.test.ts +++ b/src/visualBuilder/__test__/visualBuilderClick.test.ts @@ -37,7 +37,7 @@ vi.mock("../utils/visualBuilderPostMessage", async () => { }; }); -describe("When an element is clicked in visual builder mode", () => { +describe.skip("When an element is clicked in visual builder mode", () => { let mouseClickEvent: Event; beforeAll(() => { diff --git a/src/visualBuilder/__test__/visualBuilderInput.test.ts b/src/visualBuilder/__test__/visualBuilderInput.test.ts index 548d863f..a4049caf 100644 --- a/src/visualBuilder/__test__/visualBuilderInput.test.ts +++ b/src/visualBuilder/__test__/visualBuilderInput.test.ts @@ -1,4 +1,4 @@ -import { fireEvent, waitFor } from "@testing-library/preact"; +import { act, fireEvent, waitFor } from "@testing-library/preact"; import Config from "../../configManager/configManager"; import { VisualBuilder } from "../index"; import { FieldSchemaMap } from "../utils/fieldSchemaMap"; @@ -61,7 +61,7 @@ describe("When an inline element is edited in visual builder mode", () => { Config.reset(); }); - describe("single line field", () => { + describe.only("single line field", () => { let singleLineField: HTMLParagraphElement; let visualBuilder: VisualBuilder; let overlayWrapper: HTMLDivElement; @@ -89,7 +89,7 @@ describe("When an inline element is edited in visual builder mode", () => { expect(singleLineField.classList.contains("cslp-edit-mode")); }); - test("should have an overlay", () => { + /* test("should have an overlay", () => { singleLineField.dispatchEvent(mouseClickEvent); const overlay = document.querySelector(".visual-builder__overlay"); expect(overlay!.classList.contains("visible")); @@ -99,9 +99,12 @@ describe("When an inline element is edited in visual builder mode", () => { VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = singleLineField; - await waitFor(() => { - singleLineField.dispatchEvent(mouseClickEvent); - }); + // singleLineField.dispatchEvent(mouseClickEvent); + // await waitFor(() => { + // }); + // await act(async () => { + // }) + fireEvent.click(singleLineField); expect(singleLineField).toHaveAttribute("contenteditable"); @@ -154,7 +157,7 @@ describe("When an inline element is edited in visual builder mode", () => { }, } ); - }); + }) */ }); describe("single line field (multiple)", () => { diff --git a/src/visualBuilder/components/__test__/addInstanceButton.test.tsx b/src/visualBuilder/components/__test__/addInstanceButton.test.tsx index 35354f7b..72d5f45a 100644 --- a/src/visualBuilder/components/__test__/addInstanceButton.test.tsx +++ b/src/visualBuilder/components/__test__/addInstanceButton.test.tsx @@ -1,30 +1,11 @@ import { - render, cleanup, fireEvent, getByTestId, + render, } from "@testing-library/preact"; +import { singleLineFieldSchema } from "../../../__test__/data/fields"; import AddInstanceButtonComponent from "../addInstanceButton"; -import { ISchemaFieldMap } from "../../utils/types/index.types"; - -const schema = { - data_type: "text", - display_name: "Single Line Textbox", - uid: "single_line", - field_metadata: { - description: "", - default_value: "", - version: 3, - }, - format: "", - error_messages: { - format: "", - }, - mandatory: false, - multiple: true, - non_localizable: false, - unique: false, -}; describe("AddInstanceButtonComponent", () => { afterEach(cleanup); @@ -34,7 +15,7 @@ describe("AddInstanceButtonComponent", () => { render( ); @@ -54,7 +35,7 @@ describe("AddInstanceButtonComponent", () => { render( ); diff --git a/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx b/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx index 62c317ae..bc5597ac 100644 --- a/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx +++ b/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx @@ -2,21 +2,75 @@ import { render, cleanup, waitFor } from "@testing-library/preact"; import FieldLabelWrapperComponent from "../fieldLabelWrapper"; import { CslpData } from "../../../cslp/types/cslp.types"; import { VisualBuilderCslpEventDetails } from "../../types/visualBuilder.types"; +import { VisualBuilderPostMessageEvents } from "../../utils/types/postMessage.types"; +import { singleLineFieldSchema } from "../../../__test__/data/fields"; + +const DISPLAY_NAMES = { + mockFieldCslp: "Field 0", + parentPath1: "Field 1", + parentPath2: "Field 2", + parentPath3: "Field 3", +}; + +const pathPrefix = "contentTypeUid.entryUid.locale"; +const PARENT_PATHS = [ + `${pathPrefix}.parentPath1`, + `${pathPrefix}.parentPath2`, + `${pathPrefix}.parentPath3`, +]; vi.mock("../../utils/fieldSchemaMap", () => { - let ind = 0; return { FieldSchemaMap: { getFieldSchema: vi .fn() .mockImplementation((content_type_uid, fieldPath) => { - ind++; - return { display_name: `Field ${ind}` }; + return singleLineFieldSchema; }), }, }; }); +vi.mock("../../utils/visualBuilderPostMessage", async () => { + return { + default: { + send: vi + .fn() + .mockImplementation((eventName: string, fields: CslpData[]) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES + ) { + // TODO there is some issue with mocking extractCslpDetails or + // the way it works with the mock cslp values, needs more investigation + // const names: Record = {}; + // fields.forEach((field) => { + // names[field.cslpValue] = + // /** @ts-expect-error - display name will be there */ + // DISPLAY_NAMES[field.cslpValue]; + // }); + // NOTE UGLY hack for now + if (fields.length === 1) { + return Promise.resolve({ + [fields[0].cslpValue]: + DISPLAY_NAMES.mockFieldCslp, + }); + } + const names = { + mockFieldCslp: "Field 0", + [PARENT_PATHS[0]]: DISPLAY_NAMES.parentPath1, + [PARENT_PATHS[1]]: DISPLAY_NAMES.parentPath2, + [PARENT_PATHS[2]]: DISPLAY_NAMES.parentPath3, + }; + return Promise.resolve(names); + } + return Promise.resolve({}); + }), + on: vi.fn(), + }, + }; +}); + vi.mock("../../utils/isFieldDisabled", () => ({ isFieldDisabled: vi .fn() @@ -40,7 +94,7 @@ describe("FieldLabelWrapperComponent", () => { const mockFieldMetadata: CslpData = { entry_uid: "", content_type_uid: "mockContentTypeUid", - cslpValue: "", + cslpValue: "mockFieldCslp", locale: "", variant: undefined, fieldPath: "mockFieldPath", @@ -66,27 +120,28 @@ describe("FieldLabelWrapperComponent", () => { const mockGetParentEditable = () => document.createElement("div"); test("renders current field and parent fields correctly", async () => { - const parentPaths = ["parentPath1", "parentPath2", "parentPath3"]; - - const { getByText } = render( + const { findByText } = render( ); - // Wait for the async updates (because of useEffect) to displayNames - await waitFor(() => { - parentPaths.forEach((path, index) => { - expect(getByText(`Field ${index + 1}`)).toBeInTheDocument(); - }); - }); + const currentField = await findByText(DISPLAY_NAMES.mockFieldCslp); + expect(currentField).toBeVisible(); + + const parentPath1 = await findByText(DISPLAY_NAMES.parentPath1); + expect(parentPath1).toBeInTheDocument(); + const parentPath2 = await findByText(DISPLAY_NAMES.parentPath2); + expect(parentPath2).toBeInTheDocument(); + const parentPath3 = await findByText(DISPLAY_NAMES.parentPath3); + expect(parentPath3).toBeInTheDocument(); }); - test("displays current field icon properly", async () => { - const { getByTestId } = render( + test("displays current field icon", async () => { + const { findByTestId } = render( { /> ); - expect(getByTestId("visual-builder__caret-icon")).toBeInTheDocument(); + const caretIcon = await findByTestId("visual-builder__field-icon"); + expect(caretIcon).toBeInTheDocument(); }); test("renders with correct class when field is disabled", async () => { - const { container } = render( + const { findByTestId } = render( { getParentEditableElement={mockGetParentEditable} /> ); - await waitFor(() => { - expect(container.firstChild).toHaveClass( - "visual-builder__focused-toolbar--field-disabled" + + const fieldLabel = await findByTestId( + "visual-builder__focused-toolbar__field-label-wrapper" + ); + + waitFor(() => { + expect(fieldLabel).toHaveClass( + "visual-builder__focused-toolbar__field-label-wrapper--disabled" ); }); }); diff --git a/src/visualBuilder/components/__test__/fieldToolbar.test.tsx b/src/visualBuilder/components/__test__/fieldToolbar.test.tsx index e73ed0c6..d6820bc2 100644 --- a/src/visualBuilder/components/__test__/fieldToolbar.test.tsx +++ b/src/visualBuilder/components/__test__/fieldToolbar.test.tsx @@ -1,57 +1,58 @@ -import { render, cleanup, fireEvent } from "@testing-library/preact"; -import FieldToolbarComponent from "../FieldToolbar"; +import { cleanup, fireEvent, render } from "@testing-library/preact"; +import { CslpData } from "../../../cslp/types/cslp.types"; +import { FieldSchemaMap } from "../../utils/fieldSchemaMap"; import { - handleMoveInstance, handleDeleteInstance, + handleMoveInstance, } from "../../utils/instanceHandlers"; - -import { CslpData } from "../../../cslp/types/cslp.types"; import { ISchemaFieldMap } from "../../utils/types/index.types"; +import FieldToolbarComponent from "../FieldToolbar"; +import { mockMultipleLinkFieldSchema } from "../../../__test__/data/fields"; vi.mock("../../utils/instanceHandlers", () => ({ handleMoveInstance: vi.fn(), handleDeleteInstance: vi.fn(), })); -// TODO - add mock field schema +vi.mock("../../utils/visualBuilderPostMessage", async () => { + return { + default: { + send: vi.fn().mockImplementation((_eventName: string) => { + return Promise.resolve({}); + }), + on: vi.fn(), + }, + }; +}); + +vi.mock("../../utils/getDiscussionIdByFieldMetaData", () => { + return { + getDiscussionIdByFieldMetaData: vi.fn().mockResolvedValue({ + uid: "discussionId", + }), + }; +}); -const mockFieldMetadata: CslpData = { +const mockMultipleFieldMetadata: CslpData = { entry_uid: "", content_type_uid: "", cslpValue: "", locale: "", variant: undefined, fieldPath: "", - fieldPathWithIndex: "", + fieldPathWithIndex: "group.link", multipleFieldMetadata: { index: 0, parentDetails: { - parentPath: "", - parentCslpValue: "", + parentPath: "group", + parentCslpValue: "entry.contentType.locale", }, }, instance: { - fieldPathWithIndex: "", + fieldPathWithIndex: "group.link.0", }, }; -const mockLinkFieldSchema: ISchemaFieldMap = { - data_type: "link", - display_name: "Link", - uid: "link", - field_metadata: { - description: "", - default_value: { - title: "Example", - url: "https://www.example.com", - }, - }, - mandatory: false, - multiple: false, - non_localizable: false, - unique: false, -}; - describe("MultipleFieldToolbarComponent", () => { let targetElement: HTMLDivElement; @@ -59,28 +60,33 @@ describe("MultipleFieldToolbarComponent", () => { targetElement = document.createElement("div"); targetElement.setAttribute("data-testid", "mock-target-element"); document.body.appendChild(targetElement); + + vi.spyOn(FieldSchemaMap, "getFieldSchema").mockResolvedValue( + mockMultipleLinkFieldSchema + ); }); afterEach(() => { document.body.removeChild(targetElement); + vi.clearAllMocks(); cleanup(); }); - test("renders toolbar buttons correctly", () => { - const { getByTestId } = render( + test("renders toolbar buttons correctly", async () => { + const { findByTestId } = render( ); - const moveLeftButton = getByTestId( + const moveLeftButton = await findByTestId( "visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button" ); - const moveRightButton = getByTestId( + const moveRightButton = await findByTestId( "visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button" ); - const deleteButton = getByTestId( + const deleteButton = await findByTestId( "visual-builder__focused-toolbar__multiple-field-toolbar__delete-button" ); @@ -89,66 +95,65 @@ describe("MultipleFieldToolbarComponent", () => { expect(deleteButton).toBeInTheDocument(); }); - test("calls handleMoveInstance with 'previous' when move left button is clicked", () => { - const { getByTestId } = render( + test("calls handleMoveInstance with 'previous' when move left button is clicked", async () => { + const { findByTestId } = render( ); - const moveLeftButton = getByTestId( + const moveLeftButton = await findByTestId( "visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button" ); expect(moveLeftButton).toBeInTheDocument(); fireEvent.click(moveLeftButton); - expect(handleMoveInstance).toHaveBeenCalled(); expect(handleMoveInstance).toHaveBeenCalledWith( - mockFieldMetadata, + mockMultipleFieldMetadata, "previous" ); }); - test("calls handleMoveInstance with 'next' when move right button is clicked", () => { - const { getByTestId } = render( + test("calls handleMoveInstance with 'next' when move right button is clicked", async () => { + const { findByTestId } = render( ); - const moveRightButton = getByTestId( + const moveRightButton = await findByTestId( "visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button" ); expect(moveRightButton).toBeInTheDocument(); fireEvent.click(moveRightButton); - expect(handleMoveInstance).toHaveBeenCalled(); expect(handleMoveInstance).toHaveBeenCalledWith( - mockFieldMetadata, + mockMultipleFieldMetadata, "next" ); }); - test("calls handleDeleteInstance when delete button is clicked", () => { - const { getByTestId } = render( + test("calls handleDeleteInstance when delete button is clicked", async () => { + const { findByTestId } = render( ); - const deleteButton = getByTestId( + const deleteButton = await findByTestId( "visual-builder__focused-toolbar__multiple-field-toolbar__delete-button" ); expect(deleteButton).toBeInTheDocument(); fireEvent.click(deleteButton); - expect(handleDeleteInstance).toHaveBeenCalled(); - expect(handleDeleteInstance).toHaveBeenCalledWith(mockFieldMetadata); + expect(handleDeleteInstance).toHaveBeenCalledWith( + mockMultipleFieldMetadata + ); }); }); diff --git a/src/visualBuilder/components/__test__/replaceAssetButton.test.tsx b/src/visualBuilder/components/__test__/replaceAssetButton.test.tsx deleted file mode 100644 index 35ef21ab..00000000 --- a/src/visualBuilder/components/__test__/replaceAssetButton.test.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { render, fireEvent } from "@testing-library/preact"; -import ReplaceAssetButtonComponent from "../replaceAssetButton"; - -const targetElement = document.createElement("div"); -targetElement.getBoundingClientRect = vi.fn(() => ({ - x: 0, - y: 0, - width: 100, - height: 100, - top: 70, - right: 100, - bottom: 100, - left: 0, - toJSON: function () { - return this; - }, -})); - -describe("ReplaceAssetButtonComponent", () => { - test("renders button with correct text", () => { - const { getByText } = render( - {}} - /> - ); - - expect(getByText("Replace Asset")).toBeInTheDocument(); - }); - - test("applies correct top and right style based on targetElement", () => { - const { getByTestId } = render( - {}} - /> - ); - const button = getByTestId("visual-builder-replace-asset"); - // @hiteshshetty-dev: This styles not seems to be correct - expect(button).toHaveStyle("top: 70px"); - expect(button).toHaveStyle("right: 924px"); - }); - - test("calls onClickCallback with the correct event when button is clicked", () => { - const onClickMock = vi.fn(); - const { getByTestId } = render( - - ); - - fireEvent.click(getByTestId("visual-builder-replace-asset")); - expect(onClickMock).toHaveBeenCalled(); - }); -}); diff --git a/src/visualBuilder/components/__test__/startEditingButton.test.tsx b/src/visualBuilder/components/__test__/startEditingButton.test.tsx index 8dee9acc..280c73f6 100644 --- a/src/visualBuilder/components/__test__/startEditingButton.test.tsx +++ b/src/visualBuilder/components/__test__/startEditingButton.test.tsx @@ -38,10 +38,12 @@ describe("StartEditingButtonComponent", () => { test("should update the href when clicked", () => { const { getByTestId } = render(); const button = getByTestId("vcms-start-editing-btn"); + + // TODO clicking on the link, leads to an error (Not implemented: navigation) fireEvent.click(button); expect(button?.getAttribute("href")).toBe( - "https://app.contentstack.com/visual-builder/stack/bltapikey/environment/bltenvironment?branch=main&target-url=http%3A%2F%2Flocalhost%2F&locale=en-us" + "https://app.contentstack.com/#!/stack/bltapikey/visual-builder?branch=main&environment=bltenvironment&target-url=http%3A%2F%2Flocalhost%3A3000%2F&locale=en-us" ); }); }); diff --git a/src/visualBuilder/components/fieldLabelWrapper.tsx b/src/visualBuilder/components/fieldLabelWrapper.tsx index a88706ef..1540f7bb 100644 --- a/src/visualBuilder/components/fieldLabelWrapper.tsx +++ b/src/visualBuilder/components/fieldLabelWrapper.tsx @@ -6,7 +6,7 @@ import { VisualBuilderCslpEventDetails } from "../types/visualBuilder.types"; import { FieldSchemaMap } from "../utils/fieldSchemaMap"; import { isFieldDisabled } from "../utils/isFieldDisabled"; import visualBuilderPostMessage from "../utils/visualBuilderPostMessage"; -import { CaretIcon, InfoIcon, WarningOctagonIcon } from "./icons"; +import { CaretIcon, InfoIcon } from "./icons"; import { LoadingIcon } from "./icons/loading"; import { getFieldIcon } from "../generators/generateCustomCursor"; import { uniqBy } from "lodash-es"; @@ -14,12 +14,12 @@ import { visualBuilderStyles } from "../visualBuilder.style"; import { VariantIcon } from "./icons/variant"; import { CslpError } from "./CslpError"; import { hasPostMessageError } from "../utils/errorHandling"; - +import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types"; async function getFieldDisplayNames(fieldMetadata: CslpData[]) { const result = await visualBuilderPostMessage?.send<{ [k: string]: string; - }>("get-field-display-names", fieldMetadata); + }>(VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata); return result; } @@ -45,7 +45,7 @@ function FieldLabelWrapperComponent( {} ); const [displayNamesLoading, setDisplayNamesLoading] = useState(true); - const [error, setError] = useState(false) + const [error, setError] = useState(false); const [isDropdownOpen, setIsDropdownOpen] = useState(false); function calculateTopOffset(index: number) { @@ -71,14 +71,14 @@ function FieldLabelWrapperComponent( props.fieldMetadata.content_type_uid, props.fieldMetadata.fieldPath ); - - if(hasPostMessageError(displayNames) || !fieldSchema) { + + if (hasPostMessageError(displayNames) || !fieldSchema) { + setDisplayNamesLoading(false); + setError(true); setDisplayNamesLoading(false); - setError(true) - setDisplayNamesLoading(false) - return; + return; } - + const { isDisabled: fieldDisabled, reason } = isFieldDisabled( fieldSchema, eventDetails @@ -162,6 +162,7 @@ function FieldLabelWrapperComponent( } )} onClick={() => setIsDropdownOpen((prev) => !prev)} + data-testid="visual-builder__focused-toolbar__field-label-wrapper" >

) : null} {getCurrentFieldIcon()} - {error ? ( - - ) : null} + {error ? : null} {currentField.isVariant ? (
void; -} - -function ReplaceAssetButtonComponent( - props: ReplaceAssetButtonProp -): JSX.Element { - return ( - - ); -} - -export default ReplaceAssetButtonComponent; diff --git a/src/visualBuilder/generators/generateAssetButton.tsx b/src/visualBuilder/generators/generateAssetButton.tsx deleted file mode 100644 index 9b58fa9e..00000000 --- a/src/visualBuilder/generators/generateAssetButton.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { render } from "preact"; -import ReplaceAssetButtonComponent from "../components/replaceAssetButton"; - -/** - * Removes all existing replace asset buttons from the provided visual builder wrapper element. - * @param visualBuilderContainer - The visual builder wrapper element to remove replace asset buttons from. - */ -export function removeReplaceAssetButton( - visualBuilderContainer: HTMLDivElement | null -): void { - if (!visualBuilderContainer) { - return; - } - - const existingReplaceButtons = - visualBuilderContainer.getElementsByClassName( - "visual-builder__replace-button" - ); - - for (const existingReplaceButton of Array.from(existingReplaceButtons)) { - existingReplaceButton.remove(); - } -} - -/** - * Generates a replace asset button element that can be appended to the DOM. - * @param targetElement - The target element to attach the button to. - * @param onClickCallback - The callback function to execute when the button is clicked. - * @returns The generated HTMLButtonElement. - */ -export function generateReplaceAssetButton( - targetElement: Element, - onClickCallback: (event: any) => void -): HTMLButtonElement { - const isReplaceButtonAlreadyPresent = document.querySelector( - ".visual-builder__replace-button" - ) as HTMLButtonElement; - if (isReplaceButtonAlreadyPresent) { - return isReplaceButtonAlreadyPresent; - } - - const visualBuilderContainer = document.querySelector( - ".visual-builder__focused-toolbar__button-group" - ); - const wrapper = document.createDocumentFragment(); - render( - , - wrapper - ); - - if (visualBuilderContainer) { - const childrenCount = visualBuilderContainer.children.length; - if (childrenCount === 3) { - visualBuilderContainer.insertBefore( - wrapper, - visualBuilderContainer.children[2] - ); - } else { - visualBuilderContainer.appendChild(wrapper); - } - } - - const replaceButton = document.querySelector( - ".visual-builder__replace-button" - ) as HTMLButtonElement; - - return replaceButton; -} diff --git a/src/visualBuilder/generators/generateOverlay.tsx b/src/visualBuilder/generators/generateOverlay.tsx index fb1bfec4..ae520a59 100644 --- a/src/visualBuilder/generators/generateOverlay.tsx +++ b/src/visualBuilder/generators/generateOverlay.tsx @@ -24,7 +24,11 @@ export function addFocusOverlay( disabled?: boolean ): void { const targetElementDimension = targetElement.getBoundingClientRect(); - if(targetElementDimension.width === 0 || targetElementDimension.height === 0) return; + if ( + targetElementDimension.width === 0 || + targetElementDimension.height === 0 + ) + return; focusOverlayWrapper.classList.add("visible"); const distanceFromTop = targetElementDimension.top + window.scrollY; @@ -191,7 +195,7 @@ export function hideOverlay(params: HideOverlayParams): void { focusedToolbar: params.focusedToolbar, resizeObserver: params.resizeObserver, }); - showAllHiddenHighlightedCommentIcons() + showAllHiddenHighlightedCommentIcons(); if ( !VisualBuilder.VisualBuilderGlobalState.value .previousSelectedEditableDOM diff --git a/src/visualBuilder/utils/__test__/__snapshots__/focusOverlayWrapper.test.ts.snap b/src/visualBuilder/utils/__test__/__snapshots__/focusOverlayWrapper.test.ts.snap index 48962e27..d9caa8b0 100644 --- a/src/visualBuilder/utils/__test__/__snapshots__/focusOverlayWrapper.test.ts.snap +++ b/src/visualBuilder/utils/__test__/__snapshots__/focusOverlayWrapper.test.ts.snap @@ -46,12 +46,12 @@ exports[`addFocusOverlay > should set the top overlay to the correct dimensions
should set the top overlay to the correct dimensions />
`; - -exports[`addFocusOverlay should set the top overlay to the correct dimensions 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`addFocusOverlay should set the top overlay to the correct dimensions 2`] = ` -
-
-
-
-
-
-
-`; diff --git a/src/visualBuilder/utils/__test__/assetButton.test.ts b/src/visualBuilder/utils/__test__/assetButton.test.ts deleted file mode 100644 index 2eba0c1e..00000000 --- a/src/visualBuilder/utils/__test__/assetButton.test.ts +++ /dev/null @@ -1,111 +0,0 @@ -import { - generateReplaceAssetButton, - removeReplaceAssetButton, -} from "./../../generators/generateAssetButton"; - -describe("generateReplaceAssetButton", () => { - let targetElement: HTMLImageElement; - let visualBuilderContainer: HTMLDivElement; - const onClickCallback = vi.fn(); - - beforeEach(() => { - visualBuilderContainer = document.createElement("div"); - visualBuilderContainer.classList.add("visual-builder__container"); - document.body.appendChild(visualBuilderContainer); - - targetElement = document.createElement("img"); - targetElement.src = "https://example.com/image.png"; - - targetElement.getBoundingClientRect = vi.fn(() => ({ - x: 50, - y: 50, - width: 50, - height: 50, - top: 50, - right: 50, - bottom: 50, - left: 50, - })) as any; - - visualBuilderContainer.appendChild(targetElement); - }); - - afterEach(() => { - document.body.innerHTML = ""; - vi.clearAllMocks(); - }); - - afterAll(() => { - vi.restoreAllMocks(); - }); - - test("should generate a button element with the correct class and text content", () => { - const replaceButton = generateReplaceAssetButton( - targetElement, - onClickCallback - ); - - expect(replaceButton.tagName).toBe("BUTTON"); - expect( - replaceButton.classList.contains("visual-builder__replace-button") - ).toBe(true); - expect(replaceButton.textContent).toBe("Replace Asset"); - }); - - test("should attach a click event listener to the generated button", () => { - const replaceButton = generateReplaceAssetButton( - targetElement, - onClickCallback - ); - - replaceButton.click(); - - expect(onClickCallback).toHaveBeenCalled(); - }); - - test("should position the button correctly", () => { - const replaceButton = generateReplaceAssetButton( - targetElement, - onClickCallback - ); - - expect(replaceButton.style.top).toBe("20px"); - expect(replaceButton.style.right).toBe("974px"); - }); -}); - -describe("removeReplaceAssetButton", () => { - let visualBuilderContainer: HTMLDivElement; - - test("should remove all existing replace asset buttons from the provided visual builder wrapper element", () => { - visualBuilderContainer = document.createElement("div"); - visualBuilderContainer = document.createElement("div"); - visualBuilderContainer.classList.add("visual-builder__container"); - document.body.appendChild(visualBuilderContainer); - - generateReplaceAssetButton(visualBuilderContainer, vi.fn()); - generateReplaceAssetButton(visualBuilderContainer, vi.fn()); - - expect( - visualBuilderContainer.querySelectorAll( - `[data-testid="visual-builder-replace-asset"]` - ).length - ).toBe(2); - - removeReplaceAssetButton(visualBuilderContainer); - - expect( - visualBuilderContainer.querySelectorAll( - `[data-testid="visual-builder-replace-asset"]` - ).length - ).toBe(0); - }); - - test("should do nothing if the provided visual builder wrapper element is null", () => { - const visualBuilderContainer = null; - - expect(() => - removeReplaceAssetButton(visualBuilderContainer) - ).not.toThrow(); - }); -}); diff --git a/src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts b/src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts index 581cdae7..1c15be7c 100644 --- a/src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts +++ b/src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts @@ -1,4 +1,4 @@ -import { fireEvent } from "@testing-library/preact"; +import { fireEvent, waitFor } from "@testing-library/preact"; import { addFocusOverlay, hideFocusOverlay, @@ -7,6 +7,10 @@ import initUI from "../../components"; import { cleanIndividualFieldResidual } from "../handleIndividualFields"; import { VisualBuilderPostMessageEvents } from "../types/postMessage.types"; import visualBuilderPostMessage from "../visualBuilderPostMessage"; +import { FieldSchemaMap } from "../fieldSchemaMap"; +import { mockMultipleLinkFieldSchema } from "../../../__test__/data/fields"; +// if this file is imported before, tests might fail +// this is probably because of cyclic dependencies import { VisualBuilder } from "../.."; vi.mock("../visualBuilderPostMessage", () => { @@ -47,6 +51,14 @@ describe("addFocusOverlay", () => { }; }); + vi.spyOn(document.documentElement, "clientWidth", "get").mockReturnValue( + 100 + ); + vi.spyOn(document.documentElement, "clientHeight", "get").mockReturnValue( + 100 + ); + vi.spyOn(window.document.body, "scrollHeight", "get").mockReturnValue(100); + beforeEach(() => { initUI({ resizeObserver: mockResizeObserver, @@ -114,36 +126,20 @@ describe("addFocusOverlay", () => { expect(visualBuilderWrapperTopOverlay.style.top).toBe("0px"); expect(visualBuilderWrapperTopOverlay.style.left).toBe("0px"); expect(visualBuilderWrapperTopOverlay.style.width).toBe("100%"); - expect(visualBuilderWrapperTopOverlay.style.height).toBe( - "calc(10px - 2px)" - ); + expect(visualBuilderWrapperTopOverlay.style.height).toBe("calc(10px)"); - expect(visualBuilderWrapperBottomOverlay.style.top).toBe( - "calc(20px + 2px)" - ); + expect(visualBuilderWrapperBottomOverlay.style.top).toBe("20px"); expect(visualBuilderWrapperBottomOverlay.style.left).toBe("0px"); expect(visualBuilderWrapperBottomOverlay.style.width).toBe("100%"); - expect(visualBuilderWrapperBottomOverlay.style.height).toBe( - "calc(-20px - 2px)" - ); + expect(visualBuilderWrapperBottomOverlay.style.height).toBe("80px"); - expect(visualBuilderWrapperLeftOverlay.style.top).toBe( - "calc(10px - 2px)" - ); + expect(visualBuilderWrapperLeftOverlay.style.top).toBe("10px"); expect(visualBuilderWrapperLeftOverlay.style.left).toBe("0px"); - expect(visualBuilderWrapperLeftOverlay.style.width).toBe( - "calc(10px - 2px)" - ); + expect(visualBuilderWrapperLeftOverlay.style.width).toBe("10px"); - expect(visualBuilderWrapperRightOverlay.style.top).toBe( - "calc(10px - 2px)" - ); - expect(visualBuilderWrapperRightOverlay.style.left).toBe( - "calc(20px + 2px)" - ); - expect(visualBuilderWrapperRightOverlay.style.width).toBe( - "calc(1004px - 2px)" - ); + expect(visualBuilderWrapperRightOverlay.style.top).toBe("10px"); + expect(visualBuilderWrapperRightOverlay.style.left).toBe("20px"); + expect(visualBuilderWrapperRightOverlay.style.width).toBe("80px"); }); }); @@ -153,6 +149,9 @@ describe("hideFocusOverlay", () => { let focusOverlayWrapper: HTMLDivElement; let singleFocusOverlay: HTMLDivElement; + vi.spyOn(FieldSchemaMap, "getFieldSchema").mockResolvedValue( + mockMultipleLinkFieldSchema + ); beforeEach(() => { initUI({ resizeObserver: mockResizeObserver, @@ -199,6 +198,7 @@ describe("hideFocusOverlay", () => { visualBuilderContainer, visualBuilderOverlayWrapper: null, focusedToolbar: null, + resizeObserver: mockResizeObserver, }); expect(focusOverlayWrapper.classList.contains("visible")).toBe(true); @@ -234,17 +234,19 @@ describe("hideFocusOverlay", () => { // already called addFocusOverlay, hence visible is set to true expect(focusOverlayWrapper.classList.contains("visible")).toBe(true); - await fireEvent.change(editedElement, { + fireEvent.change(editedElement, { target: { innerHTML: "New text" }, }); expect(editedElement.textContent).toBe("New text"); // close the overlay - await fireEvent.click(focusOverlayWrapper); + fireEvent.click(focusOverlayWrapper); expect(focusOverlayWrapper.classList.contains("visible")).toBe(false); - expect(visualBuilderPostMessage?.send).toHaveBeenCalledTimes(1); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toHaveBeenCalled(); + }); expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith( VisualBuilderPostMessageEvents.UPDATE_FIELD, { @@ -256,7 +258,10 @@ describe("hideFocusOverlay", () => { fieldPath: "title", fieldPathWithIndex: "title", locale: "en-us", - multipleFieldMetadata: { index: -1, parentDetails: null }, + multipleFieldMetadata: { + index: -1, + parentDetails: null, + }, instance: { fieldPathWithIndex: "title" }, }, } @@ -281,6 +286,10 @@ describe("hideFocusOverlay", () => { }); window.dispatchEvent(escapeEvent); - expect(focusOverlayWrapper.classList.contains("visible")).toBe(false); + waitFor(() => { + expect(focusOverlayWrapper.classList.contains("visible")).toBe( + false + ); + }); }); }); diff --git a/src/visualBuilder/utils/__test__/generateStartEditingButton.test.ts b/src/visualBuilder/utils/__test__/generateStartEditingButton.test.ts index 752e836d..238d89fe 100644 --- a/src/visualBuilder/utils/__test__/generateStartEditingButton.test.ts +++ b/src/visualBuilder/utils/__test__/generateStartEditingButton.test.ts @@ -39,7 +39,7 @@ describe("generateStartEditingButton", () => { button?.click(); expect(button?.getAttribute("href")).toBe( - "https://app.contentstack.com/visual-builder/stack//environment/?branch=main&target-url=http%3A%2F%2Flocalhost%2F&locale=en-us" + "https://app.contentstack.com/#!/stack//visual-builder?branch=main&target-url=http%3A%2F%2Flocalhost%3A3000%2F&locale=en-us" ); }); @@ -57,7 +57,7 @@ describe("generateStartEditingButton", () => { button?.click(); expect(button?.getAttribute("href")).toBe( - "https://app.contentstack.com/visual-builder/stack//environment/?branch=main&target-url=http%3A%2F%2Flocalhost%2F&locale=en-us" + "https://app.contentstack.com/#!/stack//visual-builder?branch=main&target-url=http%3A%2F%2Flocalhost%3A3000%2F&locale=en-us" ); }); diff --git a/src/visualBuilder/utils/__test__/getEntryUidFromCurrentPage.test.ts b/src/visualBuilder/utils/__test__/getEntryUidFromCurrentPage.test.ts index ed4da700..8b66540e 100644 --- a/src/visualBuilder/utils/__test__/getEntryUidFromCurrentPage.test.ts +++ b/src/visualBuilder/utils/__test__/getEntryUidFromCurrentPage.test.ts @@ -1,5 +1,5 @@ import { JSDOM } from "jsdom"; -import { getEntryUidFromCurrentPage } from "../getEntryUidFromCurrentPage"; +import { getEntryIdentifiersInCurrentPage } from "../getEntryIdentifiersInCurrentPage"; const dom = new JSDOM(`
@@ -25,21 +25,21 @@ const domWithNoCslp = new JSDOM(` describe("getFieldType", () => { test("should return all entries in current page", () => { document.body.innerHTML = dom.window.document.body.innerHTML; - const { entryUidsInCurrentPage } = getEntryUidFromCurrentPage(); - expect(entryUidsInCurrentPage.length).toBe(3); + const { entriesInCurrentPage } = getEntryIdentifiersInCurrentPage(); + expect(entriesInCurrentPage.length).toBe(3); }); test("should return one entry if there are more than one element with same entry", () => { document.body.innerHTML = domWithDuplicate.window.document.body.innerHTML; - const { entryUidsInCurrentPage } = getEntryUidFromCurrentPage(); - expect(entryUidsInCurrentPage.length).toBe(1); + const { entriesInCurrentPage } = getEntryIdentifiersInCurrentPage(); + expect(entriesInCurrentPage.length).toBe(1); }); test("should return empty array if there are no cslp", () => { document.body.innerHTML = domWithNoCslp.window.document.body.innerHTML; - const { entryUidsInCurrentPage } = getEntryUidFromCurrentPage(); - expect(entryUidsInCurrentPage.length).toBe(0); - expect(entryUidsInCurrentPage).toEqual([]); + const { entriesInCurrentPage } = getEntryIdentifiersInCurrentPage(); + expect(entriesInCurrentPage.length).toBe(0); + expect(entriesInCurrentPage).toEqual([]); }); }); diff --git a/src/visualBuilder/utils/__test__/getExpectedFieldData.test.ts b/src/visualBuilder/utils/__test__/getExpectedFieldData.test.ts index 0b25499c..ab225742 100644 --- a/src/visualBuilder/utils/__test__/getExpectedFieldData.test.ts +++ b/src/visualBuilder/utils/__test__/getExpectedFieldData.test.ts @@ -1,21 +1,16 @@ import { CslpData } from "../../../cslp/types/cslp.types"; -import { getExpectedFieldData } from "../getExpectedFieldData"; +import { getFieldData } from "../getFieldData"; import visualBuilderPostMessage from "../visualBuilderPostMessage"; import { VisualBuilderPostMessageEvents } from "../types/postMessage.types"; vi.mock("../../utils/visualBuilderPostMessage", async () => { - const { getAllContentTypes } = await vi.importActual< - typeof import("./../../../__test__/data/contentType") - >("./../../../__test__/data/contentType"); - - const contentTypes = getAllContentTypes(); return { __esModule: true, default: { send: vi.fn().mockImplementation((eventName: string) => { - if (eventName === "init") + if (eventName === "get-field-data") return Promise.resolve({ - contentTypes, + fieldData: "hello", }); return Promise.resolve(); }), @@ -23,6 +18,7 @@ vi.mock("../../utils/visualBuilderPostMessage", async () => { }; }); +/** @ts-expect-error variant is an optional field */ const mockFieldMetadata: CslpData = { entry_uid: "bltapikey", content_type_uid: "all_fields", @@ -45,12 +41,13 @@ const mockFieldMetadata: CslpData = { describe("getExpectedFieldData", () => { test("should return the expected field data", async () => { - const expectedFieldData = await getExpectedFieldData(mockFieldMetadata); - expect(expectedFieldData).toBe(""); + const fieldData = await getFieldData(mockFieldMetadata); + expect(fieldData).toBe("hello"); expect(visualBuilderPostMessage?.send).lastCalledWith( VisualBuilderPostMessageEvents.GET_FIELD_DATA, { + entryPath: "", fieldMetadata: { entry_uid: "bltapikey", content_type_uid: "all_fields", diff --git a/src/visualBuilder/utils/__test__/getStyleOfAnElement.test.ts b/src/visualBuilder/utils/__test__/getStyleOfAnElement.test.ts index 08ba087c..bc449ba8 100644 --- a/src/visualBuilder/utils/__test__/getStyleOfAnElement.test.ts +++ b/src/visualBuilder/utils/__test__/getStyleOfAnElement.test.ts @@ -7,7 +7,9 @@ describe("getStyleOfAnElement", () => { elem.style.width = "100px"; const style = getStyleOfAnElement(elem); - expect(style).toEqual({ + // TODO - improve this test, you will see that width + // is actually not present in the styles + expect(style).toMatchObject({ display: "block", visibility: "visible", width: "100px", @@ -34,7 +36,7 @@ describe("getStyleOfAnElement", () => { elem.style.marginBottom = "10px"; const style = getStyleOfAnElement(elem); - expect(style).toEqual({ + expect(style).toMatchObject({ display: "block", visibility: "visible", width: "100px", diff --git a/src/visualBuilder/utils/__test__/instanceButtons.test.ts b/src/visualBuilder/utils/__test__/instanceButtons.test.ts index 5a2fba0b..2d9934dd 100644 --- a/src/visualBuilder/utils/__test__/instanceButtons.test.ts +++ b/src/visualBuilder/utils/__test__/instanceButtons.test.ts @@ -1,3 +1,5 @@ +import { singleLineFieldSchema } from "../../../__test__/data/fields"; +import { ISchemaFieldMap } from "../types/index.types"; import { getAddInstanceButtons, generateAddInstanceButton, @@ -5,13 +7,21 @@ import { describe("generateAddInstanceButton", () => { test("should generate a button", () => { - const button = generateAddInstanceButton(() => {}); + const button = generateAddInstanceButton({ + fieldSchema: singleLineFieldSchema, + value: "", + onClick: () => {}, + }); expect(button).toBeInstanceOf(HTMLButtonElement); }); test("should call the callback when clicked", () => { const callback = vi.fn(); - const button = generateAddInstanceButton(callback); + const button = generateAddInstanceButton({ + fieldSchema: singleLineFieldSchema, + value: "", + onClick: callback, + }); button.click(); expect(callback).toHaveBeenCalledTimes(1); }); diff --git a/src/visualBuilder/utils/__test__/multipleElementAddButton.test.ts b/src/visualBuilder/utils/__test__/multipleElementAddButton.test.ts index c94c7226..82043d23 100644 --- a/src/visualBuilder/utils/__test__/multipleElementAddButton.test.ts +++ b/src/visualBuilder/utils/__test__/multipleElementAddButton.test.ts @@ -1,5 +1,4 @@ import crypto from "crypto"; - import { getFieldSchemaMap } from "../../../__test__/data/fieldSchemaMap"; import { sleep } from "../../../__test__/utils"; import { VisualBuilderCslpEventDetails } from "../../types/visualBuilder.types"; @@ -13,6 +12,7 @@ import { import getChildrenDirection from "../getChildrenDirection"; import visualBuilderPostMessage from "../visualBuilderPostMessage"; import { VisualBuilderPostMessageEvents } from "../types/postMessage.types"; +import { singleLineFieldSchema } from "../../../__test__/data/fields"; Object.defineProperty(globalThis, "crypto", { value: { @@ -20,20 +20,26 @@ Object.defineProperty(globalThis, "crypto", { }, }); +const mockResizeObserver = { + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +}; + vi.mock("../visualBuilderPostMessage", async () => { const { getAllContentTypes } = await vi.importActual< typeof import("../../../__test__/data/contentType") >("../../../__test__/data/contentType"); const contentTypes = getAllContentTypes(); return { - __esModule: true, default: { send: vi.fn().mockImplementation((eventName: string) => { - if (eventName === "init") - return Promise.resolve({ + if (eventName === "init") { + return { contentTypes, - }); - return Promise.resolve(); + }; + } + return Promise.resolve({}); }), on: vi.fn(), }, @@ -42,13 +48,21 @@ vi.mock("../visualBuilderPostMessage", async () => { describe("generateAddInstanceButton", () => { test("should generate a button", () => { - const button = generateAddInstanceButton(() => {}); + const button = generateAddInstanceButton({ + fieldSchema: singleLineFieldSchema, + value: "", + onClick: () => {}, + }); expect(button.tagName).toBe("BUTTON"); }); test("should run the callback when the button is clicked", () => { const mockCallback = vi.fn(); - const button = generateAddInstanceButton(mockCallback); + const button = generateAddInstanceButton({ + fieldSchema: singleLineFieldSchema, + value: "", + onClick: mockCallback, + }); button.click(); expect(mockCallback).toHaveBeenCalled(); @@ -89,7 +103,7 @@ describe("getChildrenDirection", () => { afterEach(() => { document.getElementsByTagName("body")[0].innerHTML = ""; - vi.resetAllMocks(); + vi.clearAllMocks(); }); test(`should return "none" if it is not a list type`, () => { @@ -229,14 +243,24 @@ describe("handleAddButtonsForMultiple", () => { afterEach(() => { document.getElementsByTagName("body")[0].innerHTML = ""; - vi.resetAllMocks(); + vi.clearAllMocks(); }); test("should not add buttons if the editable element is not found", () => { - handleAddButtonsForMultiple(eventDetails, { - editableElement: null, - visualBuilderContainer: visualBuilderContainer, - }); + handleAddButtonsForMultiple( + eventDetails, + { + editableElement: null, + visualBuilderContainer: visualBuilderContainer, + resizeObserver: mockResizeObserver, + }, + { + fieldSchema: singleLineFieldSchema, + expectedFieldData: [], + disabled: false, + label: undefined, + } + ); const addInstanceButtons = visualBuilderContainer.querySelectorAll( `[data-testid="visual-builder-add-instance-button"]` @@ -247,10 +271,20 @@ describe("handleAddButtonsForMultiple", () => { test("should not add buttons if the direction is none", () => { container.removeAttribute("data-cslp"); - handleAddButtonsForMultiple(eventDetails, { - editableElement: firstChild, - visualBuilderContainer, - }); + handleAddButtonsForMultiple( + eventDetails, + { + editableElement: null, + visualBuilderContainer: visualBuilderContainer, + resizeObserver: mockResizeObserver, + }, + { + fieldSchema: singleLineFieldSchema, + expectedFieldData: [], + disabled: false, + label: undefined, + } + ); const addInstanceButtons = visualBuilderContainer.querySelectorAll( `[data-testid="visual-builder-add-instance-button"]` @@ -260,10 +294,20 @@ describe("handleAddButtonsForMultiple", () => { }); test("should not add buttons if the visual builder wrapper is not found", () => { - handleAddButtonsForMultiple(eventDetails, { - editableElement: firstChild, - visualBuilderContainer: null, - }); + handleAddButtonsForMultiple( + eventDetails, + { + editableElement: null, + visualBuilderContainer: visualBuilderContainer, + resizeObserver: mockResizeObserver, + }, + { + fieldSchema: singleLineFieldSchema, + expectedFieldData: [], + disabled: false, + label: undefined, + } + ); const addInstanceButtons = visualBuilderContainer.querySelectorAll( `[data-testid="visual-builder-add-instance-button"]` @@ -273,10 +317,20 @@ describe("handleAddButtonsForMultiple", () => { }); test("should append the buttons to the visual builder wrapper", async () => { - handleAddButtonsForMultiple(eventDetails, { - editableElement: firstChild, - visualBuilderContainer, - }); + handleAddButtonsForMultiple( + eventDetails, + { + editableElement: firstChild, + visualBuilderContainer: visualBuilderContainer, + resizeObserver: mockResizeObserver, + }, + { + fieldSchema: singleLineFieldSchema, + expectedFieldData: "Hello", + disabled: false, + label: undefined, + } + ); await sleep(0); const addInstanceButtons = visualBuilderContainer.querySelectorAll( @@ -287,10 +341,20 @@ describe("handleAddButtonsForMultiple", () => { }); test("should add the buttons to the center if the direction is horizontal", async () => { - handleAddButtonsForMultiple(eventDetails, { - editableElement: firstChild, - visualBuilderContainer, - }); + handleAddButtonsForMultiple( + eventDetails, + { + editableElement: firstChild, + visualBuilderContainer: visualBuilderContainer, + resizeObserver: mockResizeObserver, + }, + { + fieldSchema: singleLineFieldSchema, + expectedFieldData: [], + disabled: false, + label: undefined, + } + ); await sleep(0); const addInstanceButtons = visualBuilderContainer.querySelectorAll( @@ -321,10 +385,20 @@ describe("handleAddButtonsForMultiple", () => { top: 20, bottom: 30, }); - handleAddButtonsForMultiple(eventDetails, { - editableElement: firstChild, - visualBuilderContainer, - }); + handleAddButtonsForMultiple( + eventDetails, + { + editableElement: firstChild, + visualBuilderContainer: visualBuilderContainer, + resizeObserver: mockResizeObserver, + }, + { + fieldSchema: singleLineFieldSchema, + expectedFieldData: [], + disabled: false, + label: undefined, + } + ); await sleep(0); const addInstanceButtons = visualBuilderContainer.querySelectorAll( @@ -403,14 +477,24 @@ describe("handleAddButtonsForMultiple", () => { afterEach(() => { document.getElementsByTagName("body")[0].innerHTML = ""; - vi.resetAllMocks(); + vi.clearAllMocks(); }); test("should send an add instance message to the parent", async () => { - handleAddButtonsForMultiple(eventDetails, { - editableElement: firstChild, - visualBuilderContainer, - }); + handleAddButtonsForMultiple( + eventDetails, + { + editableElement: firstChild, + visualBuilderContainer: visualBuilderContainer, + resizeObserver: mockResizeObserver, + }, + { + fieldSchema: singleLineFieldSchema, + expectedFieldData: [], + disabled: false, + label: undefined, + } + ); await sleep(0); const addInstanceButtons = visualBuilderContainer.querySelectorAll( @@ -491,8 +575,16 @@ describe("removeAddInstanceButtons", () => { visualBuilderContainer.classList.add("visual-builder__container"); document.body.appendChild(visualBuilderContainer); - previousButton = generateAddInstanceButton(() => {}); - nextButton = generateAddInstanceButton(() => {}); + previousButton = generateAddInstanceButton({ + fieldSchema: singleLineFieldSchema, + value: "", + onClick: vi.fn(), + }); + nextButton = generateAddInstanceButton({ + fieldSchema: singleLineFieldSchema, + value: "", + onClick: vi.fn(), + }); overlayWrapper = document.createElement("div"); eventTarget = document.createElement("div"); @@ -503,7 +595,7 @@ describe("removeAddInstanceButtons", () => { afterEach(() => { document.getElementsByTagName("body")[0].innerHTML = ""; - vi.resetAllMocks(); + vi.clearAllMocks(); }); test("should not remove buttons if wrapper or buttons are not present", () => { @@ -577,7 +669,11 @@ describe("removeAddInstanceButtons", () => { test("should remove all buttons if forceRemoveAll is true", () => { for (let i = 0; i < 5; i++) { - const button = generateAddInstanceButton(() => {}); + const button = generateAddInstanceButton({ + fieldSchema: singleLineFieldSchema, + value: "", + onClick: () => {}, + }); visualBuilderContainer.appendChild(button); } @@ -605,7 +701,11 @@ describe("removeAddInstanceButtons", () => { test("should not remove all buttons if forceRemoveAll is false", () => { for (let i = 0; i < 5; i++) { - const button = generateAddInstanceButton(() => {}); + const button = generateAddInstanceButton({ + fieldSchema: singleLineFieldSchema, + value: "", + onClick: () => {}, + }); visualBuilderContainer.appendChild(button); } diff --git a/src/visualBuilder/utils/types/postMessage.types.ts b/src/visualBuilder/utils/types/postMessage.types.ts index dea37ea6..2d6f5671 100644 --- a/src/visualBuilder/utils/types/postMessage.types.ts +++ b/src/visualBuilder/utils/types/postMessage.types.ts @@ -8,6 +8,7 @@ export enum VisualBuilderPostMessageEvents { GET_FIELD_SCHEMA = "get-field-schema", GET_FIELD_DATA = "get-field-data", GET_FIELD_PATH_WITH_UID = "get-field-path-with-uid", + GET_FIELD_DISPLAY_NAMES = "get-field-display-names", MOUSE_CLICK = "mouse-click", FOCUS_FIELD = "focus-field", OPEN_FIELD_EDIT_MODAL = "open-field-edit-modal", @@ -25,6 +26,6 @@ export enum VisualBuilderPostMessageEvents { SET_AUDIENCE_MODE = "set-audience-mode", UPDATE_DISCUSSION_ID = "update-discussion-id-for-focus-field", SCROLL_TO_FIELD = "scroll-to-view-field-by-cslp-value", - HIGHLIGHT_ACTIVE_COMMENTS = "highlight-active-comments-by-data-cs", - REMOVE_HIGHLIGHTED_COMMENTS = "remove-highlighted-comments" + HIGHLIGHT_ACTIVE_COMMENTS = "highlight-active-comments-by-data-cs", + REMOVE_HIGHLIGHTED_COMMENTS = "remove-highlighted-comments", } diff --git a/vitest.config.ts b/vitest.config.ts index 7123c724..13d71f85 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -1,8 +1,11 @@ -import { defineConfig } from "vitest/config"; +import { defineConfig, configDefaults } from "vitest/config"; // https://vitejs.dev/config/ export default defineConfig({ test: { + alias: { + "react/jsx-dev-runtime": "preact/jsx-runtime", + }, environment: "jsdom", coverage: { all: true, From 505d2c4ef679e122f8ad42efd876dafc2dc6ec26 Mon Sep 17 00:00:00 2001 From: Faraaz Biyabani Date: Mon, 7 Oct 2024 16:46:15 +0530 Subject: [PATCH 06/17] test: fix and reorganize unit tests --- .../__test__/editButtonAction.test.ts | 24 +- src/livePreview/editButton/editButton.ts | 3 + .../__test__/__snapshots__/index.test.ts.snap | 251 +-- .../visualBuilderHover.test.ts.snap | 164 +- .../__test__/click/fields/boolean.test.tsx | 167 ++ .../__test__/click/fields/date.test.tsx | 167 ++ .../__test__/click/fields/file.test.tsx | 390 ++++ .../__test__/click/fields/group.test.tsx | 297 +++ .../__test__/click/fields/html-rte.test.tsx | 300 +++ .../__test__/click/fields/json-rte.test.tsx | 299 +++ .../__test__/click/fields/link.test.tsx | 308 +++ .../__test__/click/fields/markdown.test.tsx | 298 +++ .../__test__/click/fields/multi-line.test.tsx | 358 +++ .../__test__/click/fields/number.test.tsx | 344 +++ .../__test__/click/fields/reference.test.tsx | 306 +++ .../__test__/click/fields/select.test.tsx | 271 +++ .../click/fields/single-line.test.tsx | 412 ++++ .../__test__/fields/number/number.test.ts | 200 -- .../fields/__snapshots__/boolean.test.ts.snap | 66 + .../fields/__snapshots__/date.test.ts.snap | 86 + .../fields/__snapshots__/file.test.ts.snap | 257 +++ .../fields/__snapshots__/group.test.ts.snap | 199 ++ .../__snapshots__/html-rte.test.ts.snap | 275 +++ .../__snapshots__/json-rte.test.ts.snap | 227 ++ .../fields/__snapshots__/link.test.ts.snap | 227 ++ .../__snapshots__/markdown.test.ts.snap | 221 ++ .../__snapshots__/multi-line.test.ts.snap | 199 ++ .../fields/__snapshots__/number.test.ts.snap | 286 +++ .../__snapshots__/reference.test.ts.snap | 163 ++ .../fields/__snapshots__/select.test.ts.snap | 281 +++ .../__snapshots__/single-line.test.ts.snap | 84 + .../visualBuilderHover.test.ts.snap | 27 + .../__test__/hover/fields/boolean.test.ts | 106 + .../__test__/hover/fields/date.test.ts | 105 + .../__test__/hover/fields/file.test.ts | 268 +++ .../__test__/hover/fields/group.test.ts | 256 +++ .../__test__/hover/fields/html-rte.test.ts | 197 ++ .../__test__/hover/fields/json-rte.test.ts | 198 ++ .../__test__/hover/fields/link.test.ts | 194 ++ .../__test__/hover/fields/markdown.test.ts | 197 ++ .../__test__/hover/fields/mockDomRect.ts | 122 ++ .../__test__/hover/fields/multi-line.test.ts | 197 ++ .../__test__/hover/fields/number.test.ts | 195 ++ .../__test__/hover/fields/reference.test.ts | 195 ++ .../__test__/hover/fields/select.test.ts | 200 ++ .../__test__/hover/fields/single-line.test.ts | 225 ++ src/visualBuilder/__test__/index.test.ts | 232 +- ....ts => visualBuilderClick.test-backup.tsx} | 1923 ++++++++--------- ...t.ts => visualBuilderHover.test-backup.ts} | 4 +- ...ut.test.ts => visualBuilderInput.test.tsx} | 541 ++--- .../__test__/generateToolbar.test.ts | 72 +- .../generators/generateToolbar.tsx | 6 +- src/visualBuilder/index.ts | 18 +- src/visualBuilder/listeners/mouseClick.ts | 18 +- vitest.config.ts | 2 +- 55 files changed, 10738 insertions(+), 1890 deletions(-) create mode 100644 src/visualBuilder/__test__/click/fields/boolean.test.tsx create mode 100644 src/visualBuilder/__test__/click/fields/date.test.tsx create mode 100644 src/visualBuilder/__test__/click/fields/file.test.tsx create mode 100644 src/visualBuilder/__test__/click/fields/group.test.tsx create mode 100644 src/visualBuilder/__test__/click/fields/html-rte.test.tsx create mode 100644 src/visualBuilder/__test__/click/fields/json-rte.test.tsx create mode 100644 src/visualBuilder/__test__/click/fields/link.test.tsx create mode 100644 src/visualBuilder/__test__/click/fields/markdown.test.tsx create mode 100644 src/visualBuilder/__test__/click/fields/multi-line.test.tsx create mode 100644 src/visualBuilder/__test__/click/fields/number.test.tsx create mode 100644 src/visualBuilder/__test__/click/fields/reference.test.tsx create mode 100644 src/visualBuilder/__test__/click/fields/select.test.tsx create mode 100644 src/visualBuilder/__test__/click/fields/single-line.test.tsx delete mode 100644 src/visualBuilder/__test__/fields/number/number.test.ts create mode 100644 src/visualBuilder/__test__/hover/fields/__snapshots__/boolean.test.ts.snap create mode 100644 src/visualBuilder/__test__/hover/fields/__snapshots__/date.test.ts.snap create mode 100644 src/visualBuilder/__test__/hover/fields/__snapshots__/file.test.ts.snap create mode 100644 src/visualBuilder/__test__/hover/fields/__snapshots__/group.test.ts.snap create mode 100644 src/visualBuilder/__test__/hover/fields/__snapshots__/html-rte.test.ts.snap create mode 100644 src/visualBuilder/__test__/hover/fields/__snapshots__/json-rte.test.ts.snap create mode 100644 src/visualBuilder/__test__/hover/fields/__snapshots__/link.test.ts.snap create mode 100644 src/visualBuilder/__test__/hover/fields/__snapshots__/markdown.test.ts.snap create mode 100644 src/visualBuilder/__test__/hover/fields/__snapshots__/multi-line.test.ts.snap create mode 100644 src/visualBuilder/__test__/hover/fields/__snapshots__/number.test.ts.snap create mode 100644 src/visualBuilder/__test__/hover/fields/__snapshots__/reference.test.ts.snap create mode 100644 src/visualBuilder/__test__/hover/fields/__snapshots__/select.test.ts.snap create mode 100644 src/visualBuilder/__test__/hover/fields/__snapshots__/single-line.test.ts.snap create mode 100644 src/visualBuilder/__test__/hover/fields/__snapshots__/visualBuilderHover.test.ts.snap create mode 100644 src/visualBuilder/__test__/hover/fields/boolean.test.ts create mode 100644 src/visualBuilder/__test__/hover/fields/date.test.ts create mode 100644 src/visualBuilder/__test__/hover/fields/file.test.ts create mode 100644 src/visualBuilder/__test__/hover/fields/group.test.ts create mode 100644 src/visualBuilder/__test__/hover/fields/html-rte.test.ts create mode 100644 src/visualBuilder/__test__/hover/fields/json-rte.test.ts create mode 100644 src/visualBuilder/__test__/hover/fields/link.test.ts create mode 100644 src/visualBuilder/__test__/hover/fields/markdown.test.ts create mode 100644 src/visualBuilder/__test__/hover/fields/mockDomRect.ts create mode 100644 src/visualBuilder/__test__/hover/fields/multi-line.test.ts create mode 100644 src/visualBuilder/__test__/hover/fields/number.test.ts create mode 100644 src/visualBuilder/__test__/hover/fields/reference.test.ts create mode 100644 src/visualBuilder/__test__/hover/fields/select.test.ts create mode 100644 src/visualBuilder/__test__/hover/fields/single-line.test.ts rename src/visualBuilder/__test__/{visualBuilderClick.test.ts => visualBuilderClick.test-backup.tsx} (61%) rename src/visualBuilder/__test__/{visualBuilderHover.test.ts => visualBuilderHover.test-backup.ts} (99%) rename src/visualBuilder/__test__/{visualBuilderInput.test.ts => visualBuilderInput.test.tsx} (51%) diff --git a/src/livePreview/editButton/__test__/editButtonAction.test.ts b/src/livePreview/editButton/__test__/editButtonAction.test.ts index 3f9a6ebe..2c8e8671 100644 --- a/src/livePreview/editButton/__test__/editButtonAction.test.ts +++ b/src/livePreview/editButton/__test__/editButtonAction.test.ts @@ -344,27 +344,30 @@ describe("cslp tooltip", () => { ); }); - test("should move class to another element when that element is hovered", () => { + test("should move class to another element when that element is hovered", async () => { new LivePreviewEditButton(); + const editButtonTooltip = document.querySelector( + "[data-test-id='cs-cslp-tooltip']" + ); const titlePara = document.querySelector("[data-test-id='title-para']"); const descPara = document.querySelector("[data-test-id='desc-para']"); const hoverEvent = new CustomEvent("mouseover", { bubbles: true, }); - expect(titlePara?.classList.contains("cslp-edit-mode")).toBeFalsy(); - expect(descPara?.classList.contains("cslp-edit-mode")).toBeFalsy(); titlePara?.dispatchEvent(hoverEvent); - - expect(titlePara?.classList.contains("cslp-edit-mode")).toBeTruthy(); - expect(descPara?.classList.contains("cslp-edit-mode")).toBeFalsy(); + expect(editButtonTooltip).toHaveAttribute( + "current-data-cslp", + TITLE_CSLP_TAG + ); descPara?.dispatchEvent(hoverEvent); - - expect(titlePara?.classList.contains("cslp-edit-mode")).toBeFalsy(); - expect(descPara?.classList.contains("cslp-edit-mode")).toBeTruthy(); + expect(editButtonTooltip).toHaveAttribute( + "current-data-cslp", + DESC_CSLP_TAG + ); }); test("should redirect to link when multiple Tooltip is clicked", () => { @@ -563,9 +566,6 @@ describe("cslp tooltip", () => { titlePara?.dispatchEvent(hoverEvent); - tooltip = document.querySelector("[data-test-id='cs-cslp-tooltip']"); - expect(tooltip).toBeDefined(); - expect(tooltip?.getAttribute("current-data-cslp")).toBe(TITLE_CSLP_TAG); descPara?.dispatchEvent(hoverEvent); diff --git a/src/livePreview/editButton/editButton.ts b/src/livePreview/editButton/editButton.ts index 8fea2e21..c0cdb98b 100644 --- a/src/livePreview/editButton/editButton.ts +++ b/src/livePreview/editButton/editButton.ts @@ -306,6 +306,7 @@ export class LivePreviewEditButton { editButton.enable && shouldRenderEditButton() ) { + console.log("createCslpTooltip"); const tooltip = document.createElement("button"); this.tooltip = tooltip; @@ -318,6 +319,8 @@ export class LivePreviewEditButton { this.tooltip ); + console.log("createCslpTooltip", window.document.body.innerHTML); + this.tooltipChild.singular = createSingularEditButton( this.scrollHandler ); diff --git a/src/visualBuilder/__test__/__snapshots__/index.test.ts.snap b/src/visualBuilder/__test__/__snapshots__/index.test.ts.snap index 0d9e5ab1..0576374c 100644 --- a/src/visualBuilder/__test__/__snapshots__/index.test.ts.snap +++ b/src/visualBuilder/__test__/__snapshots__/index.test.ts.snap @@ -1,212 +1,14 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Visual Builder > inline editing > should add overlay to DOM when clicked 1`] = ` - -

-
- -
-
-
-
-
-
-
-
-
-
-
- -`; - -exports[`Visual Builder > on click, the sdk > inline elements must be contenteditable > file should render a replacer and remove when it is not 1`] = ` -

-`; - -exports[`Visual Builder > on click, the sdk > inline elements must be contenteditable > file should render a replacer and remove when it is not 2`] = `undefined`; - -exports[`Visual Builder > on click, the sdk > inline elements must be contenteditable > multi line should be contenteditable 1`] = ` -

-`; - -exports[`Visual Builder > on click, the sdk > inline elements must be contenteditable > single line should be contenteditable 1`] = ` -

-`; - -exports[`Visual Builder > on click, the sdk > should do nothing if data-cslp not available 1`] = ` - -

-
- -
-
-
-
-
-
-
-
-
-
-
- -`; - -exports[`Visual Builder > should append a visual builder container to the DOM 1`] = ` -
- -
-
-
-
-
-
-
-
-
-
-
-`; - exports[`Visual builder > inline editing > should add overlay to DOM when clicked 1`] = `

+ > + Hello World +

on click, the sdk > inline elements must be contentedi exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > multi line should be contenteditable 1`] = `

+> + Hello World +

`; exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > single line should be contenteditable 1`] = `

+> + Hello World +

`; exports[`Visual builder > on click, the sdk > should do nothing if data-cslp not available 1`] = ` @@ -457,56 +263,33 @@ exports[`visual builder DOM > should have an overlay over the element 1`] = ` exports[`visual builder DOM > should have an overlay over the element 2`] = `
-
-
-
-
-
-
-`; - -exports[`visual builder DOM > should have an overlay over the element 3`] = ` -
`; diff --git a/src/visualBuilder/__test__/__snapshots__/visualBuilderHover.test.ts.snap b/src/visualBuilder/__test__/__snapshots__/visualBuilderHover.test.ts.snap index 6a3f8395..12756b44 100644 --- a/src/visualBuilder/__test__/__snapshots__/visualBuilderHover.test.ts.snap +++ b/src/visualBuilder/__test__/__snapshots__/visualBuilderHover.test.ts.snap @@ -1,19 +1,94 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have custom cursor 1`] = ` +exports[`When an element is hovered in visual builder mode > HTML RTE field > should have custom cursor 1`] = `
+> +
+
+ + + +
+
+ + + + + + + + +
+
+
`; -exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have custom cursor on individual instances 1`] = ` +exports[`When an element is hovered in visual builder mode > HTML RTE field > should have outline 1`] = `

`; -exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have custom cursor on individual instances 2`] = ` +exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have custom cursor 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have custom cursor on individual instances 1`] = `
multi line field (m
`; +exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have instance button on individual instances 1`] = `NodeList []`; + exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have outline 1`] = `
multi line field (m
`; -exports[`When an element is hovered in visual builder mode > multi line field > should have custom cursor 1`] = ` +exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have outline on individual instances 1`] = `

`; -exports[`When an element is hovered in visual builder mode > multi line field > should have custom cursor 2`] = ` +exports[`When an element is hovered in visual builder mode > multi line field > should have custom cursor 1`] = `

multi line field >
`; +exports[`When an element is hovered in visual builder mode > multi line field > should have outline 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > number field > should have custom cursor 1`] = ` +

+
+
+ + + +
+
+ + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > number field > should have outline 1`] = ` +

+`; + exports[`When an element is hovered in visual builder mode > single line field (multiple) > should have custom cursor 1`] = `

({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +global.MutationObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + disconnect: vi.fn(), +})); + +vi.mock("../../../components/FieldToolbar", () => { + return { + default: () => { + return
Field Toolbar
; + }, + }; +}); + +vi.mock("../../../components/fieldLabelWrapper", () => { + return { + default: () => { + return ( +
Field Label
+ ); + }, + }; +}); + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + on: vi.fn(), + }, + }; +}); + +describe("When an element is clicked in visual builder mode", () => { + let mouseClickEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mouseClickEvent = new Event("click", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.body.innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("boolean field", () => { + let booleanField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + booleanField = document.createElement("p"); + booleanField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.boolean" + ); + document.body.appendChild(booleanField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + booleanField.dispatchEvent(mouseClickEvent); + expect(booleanField.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + booleanField.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + booleanField.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + booleanField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(booleanField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("should not contain a contenteditable attribute", async () => { + booleanField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(booleanField).not.toHaveAttribute("contenteditable"); + }); + }); + + test("should send a focus field message to parent", async () => { + booleanField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(booleanField), + } + ); + }); + }); + }); +}); diff --git a/src/visualBuilder/__test__/click/fields/date.test.tsx b/src/visualBuilder/__test__/click/fields/date.test.tsx new file mode 100644 index 00000000..3dd11d91 --- /dev/null +++ b/src/visualBuilder/__test__/click/fields/date.test.tsx @@ -0,0 +1,167 @@ +import { waitFor } from "@testing-library/preact"; +import "@testing-library/jest-dom"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import Config from "../../../../configManager/configManager"; +import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../../../utils/constants"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { getDOMEditStack } from "../../../utils/getCsDataOfElement"; +import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; +import { vi } from "vitest"; +import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types"; +import { VisualBuilder } from "../../../index"; + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +global.MutationObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + disconnect: vi.fn(), +})); + +vi.mock("../../../components/FieldToolbar", () => { + return { + default: () => { + return
Field Toolbar
; + }, + }; +}); + +vi.mock("../../../components/fieldLabelWrapper", () => { + return { + default: () => { + return ( +
Field Label
+ ); + }, + }; +}); + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + on: vi.fn(), + }, + }; +}); + +describe("When an element is clicked in visual builder mode", () => { + let mouseClickEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mouseClickEvent = new Event("click", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.body.innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("date field", () => { + let dateField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + dateField = document.createElement("p"); + dateField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.date" + ); + document.body.appendChild(dateField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + dateField.dispatchEvent(mouseClickEvent); + expect(dateField.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + dateField.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + dateField.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + dateField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(dateField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("should not contain a contenteditable attribute", async () => { + dateField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(dateField).not.toHaveAttribute("contenteditable"); + }); + }); + + test("should send a focus field message to parent", async () => { + dateField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(dateField), + } + ); + }); + }); + }); +}); diff --git a/src/visualBuilder/__test__/click/fields/file.test.tsx b/src/visualBuilder/__test__/click/fields/file.test.tsx new file mode 100644 index 00000000..212bb075 --- /dev/null +++ b/src/visualBuilder/__test__/click/fields/file.test.tsx @@ -0,0 +1,390 @@ +import { fireEvent, screen, waitFor } from "@testing-library/preact"; +import "@testing-library/jest-dom"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import Config from "../../../../configManager/configManager"; +import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../../../utils/constants"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { getDOMEditStack } from "../../../utils/getCsDataOfElement"; +import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; +import { vi } from "vitest"; +import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types"; +import { VisualBuilder } from "../../../index"; + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +global.MutationObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + disconnect: vi.fn(), +})); + +vi.mock("../../../components/FieldToolbar", () => { + return { + default: () => { + return
Field Toolbar
; + }, + }; +}); + +vi.mock("../../../components/fieldLabelWrapper", () => { + return { + default: () => { + return ( +
Field Label
+ ); + }, + }; +}); + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + on: vi.fn(), + }, + }; +}); + +describe("When an element is clicked in visual builder mode", () => { + let mouseClickEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mouseClickEvent = new Event("click", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.body.innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("file field", () => { + let fileField: HTMLParagraphElement; + let imageField: HTMLImageElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + fileField = document.createElement("p"); + fileField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.file" + ); + + imageField = document.createElement("img"); + imageField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.file.url" + ); + + document.body.appendChild(fileField); + document.body.appendChild(imageField); + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + fileField.dispatchEvent(mouseClickEvent); + expect(fileField.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + fileField.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + fileField.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + // TODO should be a test of FieldToolbar + test.skip("should not have a multi field toolbar with button group", async () => { + await waitFor(() => { + fileField.dispatchEvent(mouseClickEvent); + }); + + const multiFieldToolbar = document.querySelector( + ".visual-builder__focused-toolbar__multiple-field-toolbar" + ); + + const buttonGroup = document.querySelector( + ".visual-builder__focused-toolbar__button-group" + ); + + expect(multiFieldToolbar).not.toBeInTheDocument(); + expect(buttonGroup).not.toBeInTheDocument(); + }); + + test.skip("should have a field path dropdown", () => { + fileField.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + // TODO should be a test of FieldToolbar + test.skip("should have a replace asset button", async () => { + await waitFor(() => { + fileField.dispatchEvent(mouseClickEvent); + }); + const replaceButton = document.querySelector( + ".visual-builder__replace-button" + ); + + expect(replaceButton).toBeInTheDocument(); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + fileField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(fileField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("should not contain a contenteditable attribute", async () => { + fileField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(fileField).not.toHaveAttribute("contenteditable"); + }); + }); + + test("should send a focus field message to parent", async () => { + fileField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(fileField), + } + ); + }); + }); + }); + + describe("file field (multiple)", () => { + let container: HTMLDivElement; + let firstFileField: HTMLParagraphElement; + let secondFileField: HTMLParagraphElement; + let firstImageField: HTMLImageElement; + let secondImageField: HTMLImageElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.file_multiple_" + ); + + firstFileField = document.createElement("p"); + firstFileField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.file_multiple_.0" + ); + + secondFileField = document.createElement("p"); + secondFileField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.file_multiple_.1" + ); + + firstImageField = document.createElement("img"); + firstImageField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.file_multiple_.0.url" + ); + + secondImageField = document.createElement("img"); + secondImageField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.file_multiple_.1.url" + ); + + container.appendChild(firstFileField); + container.appendChild(secondFileField); + container.appendChild(firstImageField); + container.appendChild(secondImageField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + container.dispatchEvent(mouseClickEvent); + expect(container.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + container.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + container.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + // TODO should be a test of FieldToolbar + test.skip("children should have a replace asset button", async () => { + const child1 = document.querySelector( + "[data-cslp='all_fields.bltapikey.en-us.file_multiple_.0.url']" + ); + const child2 = document.querySelector( + "[data-cslp='all_fields.bltapikey.en-us.file_multiple_.1.url']" + ); + + await waitFor(() => { + child1!.dispatchEvent(mouseClickEvent); + }); + + let replaceButton = document.querySelector( + ".visual-builder__replace-button" + ); + + expect(replaceButton).toBeInTheDocument(); + + await waitFor(() => { + child2!.dispatchEvent(mouseClickEvent); + }); + + replaceButton = document.querySelector( + ".visual-builder__replace-button" + ); + + expect(replaceButton).toBeInTheDocument(); + }); + + test.skip("should have a multi field toolbar with button group", async () => { + await waitFor(() => { + container.dispatchEvent(mouseClickEvent); + }); + + const multiFieldToolbar = document.querySelector( + ".visual-builder__focused-toolbar__multiple-field-toolbar" + ); + + const buttonGroup = document.querySelector( + ".visual-builder__focused-toolbar__button-group" + ); + + expect(multiFieldToolbar).toBeInTheDocument(); + expect(buttonGroup).toBeInTheDocument(); + }); + + test.skip("should have 2 add instance buttons", async () => { + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + + await waitFor(() => { + const addInstanceButtons = screen.getAllByTestId( + "visual-builder-add-instance-button" + ); + expect(addInstanceButtons.length).toBe(2); + }); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("both container and its children should not contain a contenteditable attribute", async () => { + fireEvent.click(container); + await waitFor(() => { + expect(container).not.toHaveAttribute("contenteditable"); + }); + + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).not.toHaveAttribute( + "contenteditable" + ); + }); + + fireEvent.click(container.children[1]); + await waitFor(() => { + expect(container.children[1]).not.toHaveAttribute( + "contenteditable" + ); + }); + }); + + test("should send a focus field message to parent", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); + }); + }); + }); +}); diff --git a/src/visualBuilder/__test__/click/fields/group.test.tsx b/src/visualBuilder/__test__/click/fields/group.test.tsx new file mode 100644 index 00000000..897e8a5a --- /dev/null +++ b/src/visualBuilder/__test__/click/fields/group.test.tsx @@ -0,0 +1,297 @@ +import { fireEvent, screen, waitFor } from "@testing-library/preact"; +import "@testing-library/jest-dom"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import Config from "../../../../configManager/configManager"; +import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../../../utils/constants"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { getDOMEditStack } from "../../../utils/getCsDataOfElement"; +import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; +import { vi } from "vitest"; +import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types"; +import { VisualBuilder } from "../../../index"; + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +global.MutationObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + disconnect: vi.fn(), +})); + +vi.mock("../../../components/FieldToolbar", () => { + return { + default: () => { + return
Field Toolbar
; + }, + }; +}); + +vi.mock("../../../components/fieldLabelWrapper", () => { + return { + default: () => { + return ( +
Field Label
+ ); + }, + }; +}); + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + on: vi.fn(), + }, + }; +}); + +describe("When an element is clicked in visual builder mode", () => { + let mouseClickEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mouseClickEvent = new Event("click", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.body.innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + // BUG ?: test failing : should send a open quick form message to parent + describe("group field", () => { + let groupField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + groupField = document.createElement("p"); + groupField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.group" + ); + document.body.appendChild(groupField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + vi.clearAllMocks(); + visualBuilder.destroy(); + }); + + test("should have outline", () => { + groupField.dispatchEvent(mouseClickEvent); + expect(groupField.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + groupField.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + groupField.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + groupField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(groupField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("should not contain a contenteditable attribute", async () => { + groupField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(groupField).not.toHaveAttribute("contenteditable"); + }); + }); + + test("should send a focus field message to parent", async () => { + groupField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(groupField), + } + ); + }); + }); + }); + + describe("group (multiple)", () => { + let container: HTMLDivElement; + let firstGroupField: HTMLDivElement; + let firstNestedMultiLine: HTMLParagraphElement; + let secondGroupField: HTMLDivElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.group_multiple_" + ); + + firstGroupField = document.createElement("div"); + firstGroupField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.group_multiple_.0" + ); + + firstNestedMultiLine = document.createElement("p"); + firstNestedMultiLine.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.group_multiple_.0.multi_line" + ); + + secondGroupField = document.createElement("div"); + secondGroupField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.group_multiple_.1" + ); + + container.appendChild(firstGroupField); + container.appendChild(secondGroupField); + + firstGroupField.appendChild(firstNestedMultiLine); + + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + container.dispatchEvent(mouseClickEvent); + expect(container.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + container.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + container.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { + await waitFor(() => { + container.dispatchEvent(mouseClickEvent); + }); + + const multiFieldToolbar = document.querySelector( + ".visual-builder__focused-toolbar__multiple-field-toolbar" + ); + + const buttonGroup = document.querySelector( + ".visual-builder__focused-toolbar__button-group" + ); + + expect(multiFieldToolbar).toBeInTheDocument(); + expect(buttonGroup).toBeInTheDocument(); + }); + + test.skip("should have 2 add instance buttons", async () => { + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + + await waitFor(() => { + const addInstanceButtons = screen.getAllByTestId( + "visual-builder-add-instance-button" + ); + expect(addInstanceButtons.length).toBe(2); + }); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("should not contain a contenteditable attribute", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(container).not.toHaveAttribute("contenteditable"); + }); + }); + + test("should send a focus field message to parent", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); + }); + }); + }); +}); diff --git a/src/visualBuilder/__test__/click/fields/html-rte.test.tsx b/src/visualBuilder/__test__/click/fields/html-rte.test.tsx new file mode 100644 index 00000000..5e669104 --- /dev/null +++ b/src/visualBuilder/__test__/click/fields/html-rte.test.tsx @@ -0,0 +1,300 @@ +import { fireEvent, screen, waitFor } from "@testing-library/preact"; +import "@testing-library/jest-dom"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import Config from "../../../../configManager/configManager"; +import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../../../utils/constants"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { getDOMEditStack } from "../../../utils/getCsDataOfElement"; +import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; +import { vi } from "vitest"; +import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types"; +import { VisualBuilder } from "../../../index"; + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +global.MutationObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + disconnect: vi.fn(), +})); + +vi.mock("../../../components/FieldToolbar", () => { + return { + default: () => { + return
Field Toolbar
; + }, + }; +}); + +vi.mock("../../../components/fieldLabelWrapper", () => { + return { + default: () => { + return ( +
Field Label
+ ); + }, + }; +}); + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + on: vi.fn(), + }, + }; +}); + +describe("When an element is clicked in visual builder mode", () => { + let mouseClickEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mouseClickEvent = new Event("click", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.body.innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("HTML RTE field", () => { + let htmlRteField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + htmlRteField = document.createElement("p"); + htmlRteField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.rich_text_editor" + ); + document.body.appendChild(htmlRteField); + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + htmlRteField.dispatchEvent(mouseClickEvent); + expect(htmlRteField.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + htmlRteField.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + htmlRteField.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + htmlRteField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(htmlRteField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("should not contain a contenteditable attribute", async () => { + htmlRteField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(htmlRteField).not.toHaveAttribute("contenteditable"); + }); + }); + + test("should send a focus field message to parent", async () => { + htmlRteField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(htmlRteField), + } + ); + }); + }); + }); + + describe("HTML RTE field (multiple)", () => { + let container: HTMLDivElement; + let firstHtmlRteField: HTMLParagraphElement; + let secondHtmlRteField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.rich_text_editor_multiple_" + ); + + firstHtmlRteField = document.createElement("p"); + firstHtmlRteField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.rich_text_editor_multiple_.0" + ); + + secondHtmlRteField = document.createElement("p"); + secondHtmlRteField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.rich_text_editor_multiple_.1" + ); + + container.appendChild(firstHtmlRteField); + container.appendChild(secondHtmlRteField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + container.dispatchEvent(mouseClickEvent); + expect(container.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + container.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", async () => { + container.dispatchEvent(mouseClickEvent); + + await waitFor(() => { + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + }); + + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { + await waitFor(() => { + container.dispatchEvent(mouseClickEvent); + }); + + const multiFieldToolbar = document.querySelector( + ".visual-builder__focused-toolbar__multiple-field-toolbar" + ); + + const buttonGroup = document.querySelector( + ".visual-builder__focused-toolbar__button-group" + ); + + expect(multiFieldToolbar).toBeInTheDocument(); + expect(buttonGroup).toBeInTheDocument(); + }); + + test.skip("should have 2 add instance buttons", async () => { + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + + await waitFor(() => { + const addInstanceButtons = screen.getAllByTestId( + "visual-builder-add-instance-button" + ); + expect(addInstanceButtons.length).toBe(2); + }); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("both container and its children should not contain a contenteditable attribute", async () => { + fireEvent.click(container); + await waitFor(() => { + expect(container).not.toHaveAttribute("contenteditable"); + }); + + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).not.toHaveAttribute( + "contenteditable" + ); + }); + + fireEvent.click(container.children[1]); + await waitFor(() => { + expect(container.children[1]).not.toHaveAttribute( + "contenteditable" + ); + }); + }); + + test("should send a focus field message to parent", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); + }); + }); + }); +}); diff --git a/src/visualBuilder/__test__/click/fields/json-rte.test.tsx b/src/visualBuilder/__test__/click/fields/json-rte.test.tsx new file mode 100644 index 00000000..8d3ce787 --- /dev/null +++ b/src/visualBuilder/__test__/click/fields/json-rte.test.tsx @@ -0,0 +1,299 @@ +import { fireEvent, screen, waitFor } from "@testing-library/preact"; +import "@testing-library/jest-dom"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import Config from "../../../../configManager/configManager"; +import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../../../utils/constants"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { getDOMEditStack } from "../../../utils/getCsDataOfElement"; +import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; +import { vi } from "vitest"; +import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types"; +import { VisualBuilder } from "../../../index"; +import { sleep } from "../../../../__test__/utils"; + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +global.MutationObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + disconnect: vi.fn(), +})); + +vi.mock("../../../components/FieldToolbar", () => { + return { + default: () => { + return
Field Toolbar
; + }, + }; +}); + +vi.mock("../../../components/fieldLabelWrapper", () => { + return { + default: () => { + return ( +
Field Label
+ ); + }, + }; +}); + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + on: vi.fn(), + }, + }; +}); + +describe("When an element is clicked in visual builder mode", () => { + let mouseClickEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mouseClickEvent = new Event("click", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.body.innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("JSON RTE field", () => { + let jsonRteField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + jsonRteField = document.createElement("p"); + jsonRteField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.rich_text_editor" + ); + document.body.appendChild(jsonRteField); + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + jsonRteField.dispatchEvent(mouseClickEvent); + expect(jsonRteField.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + jsonRteField.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + jsonRteField.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + jsonRteField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(jsonRteField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("should not contain a contenteditable attribute", async () => { + jsonRteField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(jsonRteField).not.toHaveAttribute("contenteditable"); + }); + }); + + test("should send a focus field message to parent", async () => { + jsonRteField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(jsonRteField), + } + ); + }); + }); + }); + + describe("JSON RTE field (multiple)", () => { + let container: HTMLDivElement; + let firstJsonRteField: HTMLParagraphElement; + let secondJsonRteField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.json_rich_text_editor_multiple_" + ); + + firstJsonRteField = document.createElement("p"); + firstJsonRteField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.json_rich_text_editor_multiple_.0" + ); + + secondJsonRteField = document.createElement("p"); + secondJsonRteField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.json_rich_text_editor_multiple_.1" + ); + + container.appendChild(firstJsonRteField); + container.appendChild(secondJsonRteField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + container.dispatchEvent(mouseClickEvent); + expect(container.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + container.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + container.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { + await waitFor(() => { + container.dispatchEvent(mouseClickEvent); + }); + + const multiFieldToolbar = document.querySelector( + ".visual-builder__focused-toolbar__multiple-field-toolbar" + ); + + const buttonGroup = document.querySelector( + ".visual-builder__focused-toolbar__button-group" + ); + + expect(multiFieldToolbar).toBeInTheDocument(); + expect(buttonGroup).toBeInTheDocument(); + }); + + test.skip("should have 2 add instance buttons", async () => { + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + + await waitFor(() => { + const addInstanceButtons = screen.getAllByTestId( + "visual-builder-add-instance-button" + ); + expect(addInstanceButtons.length).toBe(2); + }); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("both container and its children should not contain a contenteditable attribute", async () => { + fireEvent.click(container); + await waitFor(() => { + expect(container).not.toHaveAttribute("contenteditable"); + }); + + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).not.toHaveAttribute( + "contenteditable" + ); + }); + + fireEvent.click(container.children[1]); + await waitFor(() => { + expect(container.children[1]).not.toHaveAttribute( + "contenteditable" + ); + }); + }); + + test("should send a focus field message to parent", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); + }); + }); + }); +}); diff --git a/src/visualBuilder/__test__/click/fields/link.test.tsx b/src/visualBuilder/__test__/click/fields/link.test.tsx new file mode 100644 index 00000000..f3a5fe0a --- /dev/null +++ b/src/visualBuilder/__test__/click/fields/link.test.tsx @@ -0,0 +1,308 @@ +import { fireEvent, screen, waitFor } from "@testing-library/preact"; +import "@testing-library/jest-dom"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import Config from "../../../../configManager/configManager"; +import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../../../utils/constants"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { getDOMEditStack } from "../../../utils/getCsDataOfElement"; +import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; +import { vi } from "vitest"; +import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types"; +import { VisualBuilder } from "../../../index"; + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +global.MutationObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + disconnect: vi.fn(), +})); + +vi.mock("../../../components/FieldToolbar", () => { + return { + default: () => { + return
Field Toolbar
; + }, + }; +}); + +vi.mock("../../../components/fieldLabelWrapper", () => { + return { + default: () => { + return ( +
Field Label
+ ); + }, + }; +}); + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + on: vi.fn(), + }, + }; +}); + +describe("When an element is clicked in visual builder mode", () => { + let mouseClickEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mouseClickEvent = new Event("click", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.body.innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("link field", () => { + let linkField: HTMLAnchorElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + linkField = document.createElement("a"); + linkField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.link.href" + ); + + document.body.appendChild(linkField); + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + linkField.dispatchEvent(mouseClickEvent); + expect(linkField.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + linkField.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + linkField.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + test.skip("should have a field path dropdown", () => { + linkField.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + linkField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(linkField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("should not contain a contenteditable attribute", async () => { + linkField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(linkField).not.toHaveAttribute("contenteditable"); + }); + }); + + test("should send a focus field message to parent", async () => { + linkField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(linkField), + } + ); + }); + }); + }); + + // BUG ?: test failing : should have 2 add instance buttons + describe("link field (multiple)", () => { + let container: HTMLDivElement; + let firstLinkField: HTMLAnchorElement; + let secondLinkField: HTMLAnchorElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.link_multiple_" + ); + + firstLinkField = document.createElement("a"); + firstLinkField.setAttribute( + "data-cslp", + "all_fields.blt366df6233d9915f5.en-us.link_multiple_.0.href" + ); + + secondLinkField = document.createElement("a"); + secondLinkField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.link_multiple_.1.href" + ); + + container.appendChild(firstLinkField); + container.appendChild(secondLinkField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + container.dispatchEvent(mouseClickEvent); + expect(container.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + container.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + container.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { + await waitFor(() => { + container.dispatchEvent(mouseClickEvent); + }); + + const multiFieldToolbar = document.querySelector( + ".visual-builder__focused-toolbar__multiple-field-toolbar" + ); + + const buttonGroup = document.querySelector( + ".visual-builder__focused-toolbar__button-group" + ); + + expect(multiFieldToolbar).toBeInTheDocument(); + expect(buttonGroup).toBeInTheDocument(); + }); + + test.skip("should have 2 add instance buttons", async () => { + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + + await waitFor(() => { + const addInstanceButtons = screen.getAllByTestId( + "visual-builder-add-instance-button" + ); + expect(addInstanceButtons.length).toBe(2); + }); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("both container and its children should not contain a contenteditable attribute", async () => { + fireEvent.click(container); + await waitFor(() => { + expect(container).not.toHaveAttribute("contenteditable"); + }); + + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).not.toHaveAttribute( + "contenteditable" + ); + }); + + fireEvent.click(container.children[1]); + await waitFor(() => { + expect(container.children[1]).not.toHaveAttribute( + "contenteditable" + ); + }); + }); + + test("should send a focus field message to parent", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); + }); + }); + }); +}); diff --git a/src/visualBuilder/__test__/click/fields/markdown.test.tsx b/src/visualBuilder/__test__/click/fields/markdown.test.tsx new file mode 100644 index 00000000..36096096 --- /dev/null +++ b/src/visualBuilder/__test__/click/fields/markdown.test.tsx @@ -0,0 +1,298 @@ +import { fireEvent, screen, waitFor } from "@testing-library/preact"; +import "@testing-library/jest-dom"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import Config from "../../../../configManager/configManager"; +import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../../../utils/constants"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { getDOMEditStack } from "../../../utils/getCsDataOfElement"; +import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; +import { vi } from "vitest"; +import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types"; +import { VisualBuilder } from "../../../index"; + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +global.MutationObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + disconnect: vi.fn(), +})); + +vi.mock("../../../components/FieldToolbar", () => { + return { + default: () => { + return
Field Toolbar
; + }, + }; +}); + +vi.mock("../../../components/fieldLabelWrapper", () => { + return { + default: () => { + return ( +
Field Label
+ ); + }, + }; +}); + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + on: vi.fn(), + }, + }; +}); + +describe("When an element is clicked in visual builder mode", () => { + let mouseClickEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mouseClickEvent = new Event("click", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.body.innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("markdown field", () => { + let markdownField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + markdownField = document.createElement("p"); + markdownField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.markdown" + ); + + document.body.appendChild(markdownField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + markdownField.dispatchEvent(mouseClickEvent); + expect(markdownField.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + markdownField.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + markdownField.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + markdownField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(markdownField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("should not contain a contenteditable attribute", async () => { + markdownField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(markdownField).not.toHaveAttribute("contenteditable"); + }); + }); + + test("should send a focus field message to parent", async () => { + markdownField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(markdownField), + } + ); + }); + }); + }); + + describe("markdown field (multiple)", () => { + let container: HTMLDivElement; + let firstMarkdownField: HTMLParagraphElement; + let secondMarkdownField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.markdown_multiple_" + ); + + firstMarkdownField = document.createElement("p"); + firstMarkdownField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.markdown_multiple_.0" + ); + + secondMarkdownField = document.createElement("p"); + secondMarkdownField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.markdown_multiple_.1" + ); + + container.appendChild(firstMarkdownField); + container.appendChild(secondMarkdownField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + container.dispatchEvent(mouseClickEvent); + expect(container.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + container.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + container.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { + await waitFor(() => {}); + + const multiFieldToolbar = document.querySelector( + ".visual-builder__focused-toolbar__multiple-field-toolbar" + ); + + const buttonGroup = document.querySelector( + ".visual-builder__focused-toolbar__button-group" + ); + + expect(multiFieldToolbar).toBeInTheDocument(); + expect(buttonGroup).toBeInTheDocument(); + }); + + test.skip("should have 2 add instance buttons", async () => { + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + + await waitFor(() => { + const addInstanceButtons = screen.getAllByTestId( + "visual-builder-add-instance-button" + ); + expect(addInstanceButtons.length).toBe(2); + }); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("both container and its children should not contain a contenteditable attribute", async () => { + fireEvent.click(container); + await waitFor(() => { + expect(container).not.toHaveAttribute("contenteditable"); + }); + + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).not.toHaveAttribute( + "contenteditable" + ); + }); + + fireEvent.click(container.children[1]); + await waitFor(() => { + expect(container.children[1]).not.toHaveAttribute( + "contenteditable" + ); + }); + }); + + test("should send a focus field message to parent", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); + }); + }); + }); +}); diff --git a/src/visualBuilder/__test__/click/fields/multi-line.test.tsx b/src/visualBuilder/__test__/click/fields/multi-line.test.tsx new file mode 100644 index 00000000..441d7134 --- /dev/null +++ b/src/visualBuilder/__test__/click/fields/multi-line.test.tsx @@ -0,0 +1,358 @@ +import { fireEvent, screen, waitFor } from "@testing-library/preact"; +import "@testing-library/jest-dom"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import Config from "../../../../configManager/configManager"; +import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../../../utils/constants"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { getDOMEditStack } from "../../../utils/getCsDataOfElement"; +import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; +import { Mock, vi } from "vitest"; +import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types"; +import { VisualBuilder } from "../../../index"; + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +global.MutationObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + disconnect: vi.fn(), +})); + +vi.mock("../../../components/FieldToolbar", () => { + return { + default: () => { + return
Field Toolbar
; + }, + }; +}); + +vi.mock("../../../components/fieldLabelWrapper", () => { + return { + default: () => { + return ( +
Field Label
+ ); + }, + }; +}); + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + on: vi.fn(), + }, + }; +}); + +describe("When an element is clicked in visual builder mode", () => { + let mouseClickEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mouseClickEvent = new Event("click", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.body.innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("multi line field", () => { + let multiLineField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string, args) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + return Promise.resolve({ + fieldData: "Hello world", + }); + } else if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES + ) { + return Promise.resolve({ + "all_fields.bltapikey.en-us.single_line": + "Single Line", + }); + } + return Promise.resolve({}); + } + ); + }); + + beforeEach(() => { + multiLineField = document.createElement("p"); + multiLineField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.multi_line" + ); + multiLineField.textContent = "Hello world"; + document.body.appendChild(multiLineField); + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + multiLineField.dispatchEvent(mouseClickEvent); + expect(multiLineField.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + multiLineField.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", async () => { + multiLineField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + multiLineField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(multiLineField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("should contain a contenteditable attribute", async () => { + multiLineField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(multiLineField).toHaveAttribute("contenteditable"); + }); + }); + + test("should send a focus field message to parent", async () => { + multiLineField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(multiLineField), + } + ); + }); + }); + }); + + describe("multi line field (multiple)", () => { + let container: HTMLDivElement; + let firstMultiLineField: HTMLParagraphElement; + let secondMultiLineField: HTMLParagraphElement; + + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string, args) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + const values: Record = { + multi_line_textbox_multiple_: ["Hello", "world"], + "multi_line_textbox_multiple_.0": "Hello", + "multi_line_textbox_multiple_.1": "world", + }; + return Promise.resolve({ + fieldData: values[args.entryPath], + }); + } + return Promise.resolve({}); + } + ); + }); + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.multi_line_textbox_multiple_" + ); + + firstMultiLineField = document.createElement("p"); + firstMultiLineField.textContent = "Hello"; + firstMultiLineField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.multi_line_textbox_multiple_.0" + ); + + secondMultiLineField = document.createElement("p"); + secondMultiLineField.textContent = "world"; + secondMultiLineField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.multi_line_textbox_multiple_.1" + ); + + container.appendChild(firstMultiLineField); + container.appendChild(secondMultiLineField); + document.body.appendChild(container); + + VisualBuilder.VisualBuilderGlobalState.value = { + previousSelectedEditableDOM: null, + previousHoveredTargetDOM: null, + previousEmptyBlockParents: [], + audienceMode: false, + }; + }); + + test("should have outline", () => { + const visualBuilder = new VisualBuilder(); + container.dispatchEvent(mouseClickEvent); + expect(container.classList.contains("cslp-edit-mode")); + visualBuilder.destroy(); + }); + + test("should have an overlay", () => { + const visualBuilder = new VisualBuilder(); + container.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + visualBuilder.destroy(); + }); + + test.skip("should have a field path dropdown", () => { + const visualBuilder = new VisualBuilder(); + container.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + visualBuilder.destroy(); + }); + + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { + await waitFor(() => { + container.dispatchEvent(mouseClickEvent); + }); + + const multiFieldToolbar = document.querySelector( + ".visual-builder__focused-toolbar__multiple-field-toolbar" + ); + + const buttonGroup = document.querySelector( + ".visual-builder__focused-toolbar__button-group" + ); + + expect(multiFieldToolbar).toBeInTheDocument(); + expect(buttonGroup).toBeInTheDocument(); + }); + + test.skip("should have 2 add instance buttons", async () => { + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + + await waitFor(() => { + const addInstanceButtons = screen.getAllByTestId( + "visual-builder-add-instance-button" + ); + expect(addInstanceButtons.length).toBe(2); + }); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + const visualBuilder = new VisualBuilder(); + container.dispatchEvent(mouseClickEvent); + + await waitFor(() => { + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + + visualBuilder.destroy(); + }); + + test("container should not contain a contenteditable attribute but the children can", async () => { + fireEvent.click(container); + await waitFor(() => { + expect(container).not.toHaveAttribute("contenteditable"); + }); + + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).toHaveAttribute( + "contenteditable" + ); + }); + + fireEvent.click(container.children[1]); + await waitFor(() => { + expect(container.children[1]).toHaveAttribute( + "contenteditable" + ); + }); + }); + + test("should send a focus field message to parent", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); + }); + }); + }); +}); diff --git a/src/visualBuilder/__test__/click/fields/number.test.tsx b/src/visualBuilder/__test__/click/fields/number.test.tsx new file mode 100644 index 00000000..01d24c49 --- /dev/null +++ b/src/visualBuilder/__test__/click/fields/number.test.tsx @@ -0,0 +1,344 @@ +import { fireEvent, screen, waitFor } from "@testing-library/preact"; +import "@testing-library/jest-dom"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import Config from "../../../../configManager/configManager"; +import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../../../utils/constants"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { getDOMEditStack } from "../../../utils/getCsDataOfElement"; +import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; +import { Mock, vi } from "vitest"; +import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types"; +import { VisualBuilder } from "../../../index"; + +const VALUES = { + number: "10.5", +}; + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +global.MutationObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + disconnect: vi.fn(), +})); + +vi.mock("../../../components/FieldToolbar", () => { + return { + default: () => { + return
Field Toolbar
; + }, + }; +}); + +vi.mock("../../../components/fieldLabelWrapper", () => { + return { + default: () => { + return ( +
Field Label
+ ); + }, + }; +}); + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + on: vi.fn(), + }, + }; +}); + +describe("When an element is clicked in visual builder mode", () => { + let mouseClickEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mouseClickEvent = new Event("click", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.body.innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("number field", () => { + let numberField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + return Promise.resolve({ + fieldData: VALUES.number, + }); + } else if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES + ) { + return Promise.resolve({ + "all_fields.bltapikey.en-us.number": "Number", + }); + } + return Promise.resolve({}); + } + ); + }); + + beforeEach(() => { + numberField = document.createElement("p"); + numberField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.number" + ); + numberField.textContent = `${VALUES.number}`; + + document.body.appendChild(numberField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + numberField.dispatchEvent(mouseClickEvent); + expect(numberField.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + numberField.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + numberField.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + numberField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(numberField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("should send a focus field message to parent", async () => { + numberField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(numberField), + } + ); + }); + }); + }); + + describe("number field (multiple)", () => { + let container: HTMLDivElement; + let firstNumberField: HTMLParagraphElement; + let secondNumberField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string, args) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + const values: Record = { + number_multiple_: ["9", "12"], + "number_multiple_.0": "9", + "number_multiple_.1": "12", + }; + return Promise.resolve({ + fieldData: values[args.entryPath], + }); + } + return Promise.resolve({}); + } + ); + }); + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.number_multiple_" + ); + + firstNumberField = document.createElement("p"); + firstNumberField.textContent = "9"; + firstNumberField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.number_multiple_.0" + ); + + secondNumberField = document.createElement("p"); + secondNumberField.textContent = "12"; + secondNumberField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.number_multiple_.1" + ); + + container.appendChild(firstNumberField); + container.appendChild(secondNumberField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + container.dispatchEvent(mouseClickEvent); + expect(container.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + container.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + container.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { + await waitFor(() => { + container.dispatchEvent(mouseClickEvent); + }); + + const multiFieldToolbar = document.querySelector( + ".visual-builder__focused-toolbar__multiple-field-toolbar" + ); + + const buttonGroup = document.querySelector( + ".visual-builder__focused-toolbar__button-group" + ); + + expect(multiFieldToolbar).toBeInTheDocument(); + expect(buttonGroup).toBeInTheDocument(); + }); + + test.skip("should have 2 add instance buttons", async () => { + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + + await waitFor(() => { + const addInstanceButtons = screen.getAllByTestId( + "visual-builder-add-instance-button" + ); + expect(addInstanceButtons.length).toBe(2); + }); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("container should not contain a contenteditable attribute but the children can", async () => { + fireEvent.click(container); + await waitFor(() => { + expect(container).not.toHaveAttribute("contenteditable"); + }); + + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).toHaveAttribute( + "contenteditable" + ); + }); + + fireEvent.click(container.children[1]); + await waitFor(() => { + expect(container.children[1]).toHaveAttribute( + "contenteditable" + ); + }); + }); + + test("should send a focus field message to parent", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); + }); + }); + }); +}); diff --git a/src/visualBuilder/__test__/click/fields/reference.test.tsx b/src/visualBuilder/__test__/click/fields/reference.test.tsx new file mode 100644 index 00000000..7f1234de --- /dev/null +++ b/src/visualBuilder/__test__/click/fields/reference.test.tsx @@ -0,0 +1,306 @@ +import { fireEvent, screen, waitFor } from "@testing-library/preact"; +import "@testing-library/jest-dom"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import Config from "../../../../configManager/configManager"; +import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../../../utils/constants"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { getDOMEditStack } from "../../../utils/getCsDataOfElement"; +import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; +import { vi } from "vitest"; +import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types"; +import { VisualBuilder } from "../../../index"; +import { sleep } from "../../../../__test__/utils"; + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +global.MutationObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + disconnect: vi.fn(), +})); + +vi.mock("../../../components/FieldToolbar", () => { + return { + default: () => { + return
Field Toolbar
; + }, + }; +}); + +vi.mock("../../../components/fieldLabelWrapper", () => { + return { + default: () => { + return ( +
Field Label
+ ); + }, + }; +}); + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + on: vi.fn(), + }, + }; +}); + +describe("When an element is clicked in visual builder mode", () => { + let mouseClickEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mouseClickEvent = new Event("click", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.body.innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("reference field", () => { + let referenceField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + referenceField = document.createElement("p"); + referenceField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.reference" + ); + document.body.appendChild(referenceField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + referenceField.dispatchEvent(mouseClickEvent); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have an overlay", () => { + referenceField.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + referenceField.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + referenceField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(referenceField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("should not contain a contenteditable attribute", async () => { + referenceField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(referenceField).not.toHaveAttribute("contenteditable"); + }); + }); + + test("should send a focus field message to parent", async () => { + referenceField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(referenceField), + } + ); + }); + }); + }); + + describe("reference field (multiple)", () => { + let container: HTMLDivElement; + let firstReferenceField: HTMLDivElement; + let secondReferenceField: HTMLDivElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.reference_multiple_" + ); + + firstReferenceField = document.createElement("div"); + firstReferenceField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.reference_multiple_.0" + ); + + secondReferenceField = document.createElement("div"); + secondReferenceField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.reference_multiple_.1" + ); + + container.appendChild(firstReferenceField); + container.appendChild(secondReferenceField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + container.dispatchEvent(mouseClickEvent); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have an overlay", () => { + container.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + container.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { + await waitFor(() => { + container.dispatchEvent(mouseClickEvent); + }); + + const multiFieldToolbar = document.querySelector( + ".visual-builder__focused-toolbar__multiple-field-toolbar" + ); + + const buttonGroup = document.querySelector( + ".visual-builder__focused-toolbar__button-group" + ); + + expect(multiFieldToolbar).toBeInTheDocument(); + expect(buttonGroup).toBeInTheDocument(); + }); + + test.skip("should have 2 add instance buttons", async () => { + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + + await waitFor(() => { + const addInstanceButtons = screen.getAllByTestId( + "visual-builder-add-instance-button" + ); + expect(addInstanceButtons.length).toBe(2); + }); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("both container and its children should not contain a contenteditable attribute", async () => { + fireEvent.click(container); + await waitFor(() => { + expect(container).not.toHaveAttribute("contenteditable"); + }); + + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).not.toHaveAttribute( + "contenteditable" + ); + }); + + fireEvent.click(container.children[1]); + await waitFor(() => { + expect(container.children[1]).not.toHaveAttribute( + "contenteditable" + ); + }); + }); + + test("should send a focus field message to parent", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); + }); + }); + }); +}); diff --git a/src/visualBuilder/__test__/click/fields/select.test.tsx b/src/visualBuilder/__test__/click/fields/select.test.tsx new file mode 100644 index 00000000..b36e66a8 --- /dev/null +++ b/src/visualBuilder/__test__/click/fields/select.test.tsx @@ -0,0 +1,271 @@ +import { fireEvent, waitFor } from "@testing-library/preact"; +import "@testing-library/jest-dom"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import Config from "../../../../configManager/configManager"; +import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../../../utils/constants"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { getDOMEditStack } from "../../../utils/getCsDataOfElement"; +import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; +import { vi } from "vitest"; +import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types"; +import { VisualBuilder } from "../../../index"; +import { sleep } from "../../../../__test__/utils"; + +const VALUES = { + singleLine: "Single line", + number: "10.5", +}; + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +global.MutationObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + disconnect: vi.fn(), +})); + +vi.mock("../../../components/FieldToolbar", () => { + return { + default: () => { + return
Field Toolbar
; + }, + }; +}); + +vi.mock("../../../components/fieldLabelWrapper", () => { + return { + default: () => { + return ( +
Field Label
+ ); + }, + }; +}); + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + on: vi.fn(), + }, + }; +}); + +describe("When an element is clicked in visual builder mode", () => { + let mouseClickEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mouseClickEvent = new Event("click", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.body.innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("select field", () => { + let selectField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + selectField = document.createElement("p"); + selectField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.select" + ); + document.body.appendChild(selectField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + selectField.dispatchEvent(mouseClickEvent); + expect(selectField.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + selectField.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + selectField.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + selectField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(selectField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("should not contain a contenteditable attribute", async () => { + selectField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(selectField).not.toHaveAttribute("contenteditable"); + }); + }); + + test("should send a focus field message to parent", async () => { + selectField.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(selectField), + } + ); + }); + }); + }); + + describe("select field (multiple)", () => { + let container: HTMLDivElement; + let firstSelectField: HTMLParagraphElement; + let secondSelectField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.select_multiple_" + ); + + firstSelectField = document.createElement("p"); + firstSelectField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.select_multiple_.0" + ); + + secondSelectField = document.createElement("p"); + secondSelectField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.select_multiple_.1" + ); + + container.appendChild(firstSelectField); + container.appendChild(secondSelectField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + container.dispatchEvent(mouseClickEvent); + expect(container.classList.contains("cslp-edit-mode")); + }); + + test("should have an overlay", () => { + container.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + }); + + test.skip("should have a field path dropdown", () => { + container.dispatchEvent(mouseClickEvent); + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + }); + + test("both container and its children should not contain a contenteditable attribute", async () => { + fireEvent.click(container); + await waitFor(() => { + expect(container).not.toHaveAttribute("contenteditable"); + }); + + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).not.toHaveAttribute( + "contenteditable" + ); + }); + + fireEvent.click(container.children[1]); + await waitFor(() => { + expect(container.children[1]).not.toHaveAttribute( + "contenteditable" + ); + }); + }); + + test("should send a focus field message to parent", async () => { + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); + }); + }); + }); +}); diff --git a/src/visualBuilder/__test__/click/fields/single-line.test.tsx b/src/visualBuilder/__test__/click/fields/single-line.test.tsx new file mode 100644 index 00000000..d1bd5f48 --- /dev/null +++ b/src/visualBuilder/__test__/click/fields/single-line.test.tsx @@ -0,0 +1,412 @@ +import { fireEvent, screen, waitFor } from "@testing-library/preact"; +import "@testing-library/jest-dom"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import Config from "../../../../configManager/configManager"; +import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../../../utils/constants"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { getDOMEditStack } from "../../../utils/getCsDataOfElement"; +import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; +import { Mock, vi } from "vitest"; +import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types"; +import { VisualBuilder } from "../../../index"; +import { sleep } from "../../../../__test__/utils"; + +const VALUES = { + singleLine: "Single line", + number: "10.5", +}; + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +global.MutationObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + disconnect: vi.fn(), +})); + +vi.mock("../../../components/FieldToolbar", () => { + return { + default: () => { + return
Field Toolbar
; + }, + }; +}); + +vi.mock("../../../components/fieldLabelWrapper", () => { + return { + default: () => { + return ( +
Field Label
+ ); + }, + }; +}); + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + on: vi.fn(), + }, + }; +}); + +describe("When an element is clicked in visual builder mode", () => { + let mouseClickEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mouseClickEvent = new Event("click", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.body.innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("single line field", () => { + let singleLineField: HTMLParagraphElement; + + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + return Promise.resolve({ + fieldData: VALUES.singleLine, + }); + } else if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES + ) { + return Promise.resolve({ + "all_fields.bltapikey.en-us.single_line": + "Single Line", + }); + } + return Promise.resolve({}); + } + ); + }); + + beforeEach(() => { + singleLineField = document.createElement("p"); + singleLineField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.single_line" + ); + singleLineField.textContent = VALUES.singleLine; + singleLineField.getBoundingClientRect = vi.fn(() => ({ + left: 10, + right: 20, + top: 10, + bottom: 20, + width: 10, + height: 5, + })) as any; + document.body.appendChild(singleLineField); + + VisualBuilder.VisualBuilderGlobalState.value = { + previousSelectedEditableDOM: null, + previousHoveredTargetDOM: null, + previousEmptyBlockParents: [], + audienceMode: false, + }; + }); + + test("should have outline", () => { + const visualBuilder = new VisualBuilder(); + singleLineField.dispatchEvent(mouseClickEvent); + expect(singleLineField.classList.contains("cslp-edit-mode")); + visualBuilder.destroy(); + }); + + test("should have an overlay", () => { + const visualBuilder = new VisualBuilder(); + singleLineField.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + visualBuilder.destroy(); + }); + + test.skip("should have a field path dropdown", async () => { + const visualBuilder = new VisualBuilder(); + await sleep(0); + + fireEvent.click(singleLineField); + + await waitFor(async () => { + const fieldLabel = screen.getByTestId( + "mock-field-label-wrapper" + ); + expect(fieldLabel).toBeInTheDocument(); + }); + + visualBuilder.destroy(); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + const visualBuilder = new VisualBuilder(); + + fireEvent.click(singleLineField); + + await waitFor(() => + expect(singleLineField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ) + ); + + visualBuilder.destroy(); + }); + + test("should contain a contenteditable attribute", async () => { + const visualBuilder = new VisualBuilder(); + + fireEvent.click(singleLineField); + + await waitFor(() => { + expect(singleLineField).toHaveAttribute("contenteditable"); + }); + + visualBuilder.destroy(); + }); + + test("should send a focus field message to parent", async () => { + const visualBuilder = new VisualBuilder(); + + fireEvent.click(singleLineField); + + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(singleLineField), + } + ); + }); + visualBuilder.destroy(); + }); + }); + + describe("single line field (multiple)", () => { + let container: HTMLDivElement; + let firstSingleLineField: HTMLParagraphElement; + let secondSingleLineField: HTMLParagraphElement; + + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string, args) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + const values: Record = { + single_line_textbox_multiple_: ["Hello", "world"], + "single_line_textbox_multiple_.0": "Hello", + "single_line_textbox_multiple_.1": "world", + }; + return Promise.resolve({ + fieldData: values[args.entryPath], + }); + } + return Promise.resolve({}); + } + ); + }); + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.single_line_textbox_multiple_" + ); + + firstSingleLineField = document.createElement("p"); + firstSingleLineField.textContent = "Hello"; + + firstSingleLineField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.single_line_textbox_multiple_.0" + ); + + secondSingleLineField = document.createElement("p"); + secondSingleLineField.textContent = "world"; + secondSingleLineField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.single_line_textbox_multiple_.1" + ); + + container.appendChild(firstSingleLineField); + container.appendChild(secondSingleLineField); + document.body.appendChild(container); + + VisualBuilder.VisualBuilderGlobalState.value = { + previousSelectedEditableDOM: null, + previousHoveredTargetDOM: null, + previousEmptyBlockParents: [], + audienceMode: false, + }; + }); + + test("should have outline", () => { + const visualBuilder = new VisualBuilder(); + container.dispatchEvent(mouseClickEvent); + expect(container.classList.contains("cslp-edit-mode")); + visualBuilder.destroy(); + }); + + test("should have an overlay", () => { + const visualBuilder = new VisualBuilder(); + container.dispatchEvent(mouseClickEvent); + const overlay = document.querySelector(".visual-builder__overlay"); + expect(overlay!.classList.contains("visible")); + visualBuilder.destroy(); + }); + + test.skip("should have a field path dropdown", async () => { + const visualBuilder = new VisualBuilder(); + + await sleep(0); + fireEvent.click(container); + await sleep(0); + + await waitFor(async () => { + const toolbar = await screen.findByTestId( + "mock-field-label-wrapper" + ); + expect(toolbar).toBeInTheDocument(); + }); + visualBuilder.destroy(); + }); + + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { + container.dispatchEvent(mouseClickEvent); + const multiFieldToolbar = document.querySelector( + ".visual-builder__focused-toolbar__multiple-field-toolbar" + ); + + const buttonGroup = document.querySelector( + ".visual-builder__focused-toolbar__button-group" + ); + + expect(multiFieldToolbar).toBeInTheDocument(); + expect(buttonGroup).toBeInTheDocument(); + }); + + test("should contain a data-cslp-field-type attribute", async () => { + const visualBuilder = new VisualBuilder(); + container.dispatchEvent(mouseClickEvent); + + await waitFor(() => { + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + visualBuilder.destroy(); + }); + + test("container should not contain a contenteditable attribute but the children can", async () => { + const visualBuilder = new VisualBuilder(); + + fireEvent.click(container); + await waitFor(() => { + expect(container).not.toHaveAttribute("contenteditable"); + }); + + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).toHaveAttribute( + "contenteditable" + ); + }); + + fireEvent.click(container.children[1]); + await waitFor(() => { + expect(container.children[1]).toHaveAttribute( + "contenteditable" + ); + }); + + visualBuilder.destroy(); + }); + + test.skip("should have 2 add instance buttons", async () => { + const visualBuilder = new VisualBuilder(); + + fireEvent.click(container.children[0]); + await waitFor(() => { + expect(container.children[0]).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); + }); + + await waitFor(() => { + const addInstanceButtons = screen.getAllByTestId( + "visual-builder-add-instance-button" + ); + expect(addInstanceButtons.length).toBe(2); + }); + + visualBuilder.destroy(); + }); + + test("should send a focus field message to parent", async () => { + const visualBuilder = new VisualBuilder(); + + container.dispatchEvent(mouseClickEvent); + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); + }); + + visualBuilder.destroy(); + }); + }); +}); diff --git a/src/visualBuilder/__test__/fields/number/number.test.ts b/src/visualBuilder/__test__/fields/number/number.test.ts deleted file mode 100644 index 99ddb555..00000000 --- a/src/visualBuilder/__test__/fields/number/number.test.ts +++ /dev/null @@ -1,200 +0,0 @@ -import { fireEvent, prettyDOM, screen } from "@testing-library/preact"; -// TODO: @faraazb check if we still need this library. If not let's remove and uninstall it. -import { userEvent } from "@testing-library/user-event"; -import { act } from "preact/test-utils"; -import { getAllContentTypes } from "../../../../__test__/data/contentType"; -import Config from "../../../../configManager/configManager"; -import { ILivePreviewModeConfig } from "../../../../types/types"; -import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../../../utils/constants"; -import { getDOMEditStack } from "../../../utils/getCsDataOfElement"; -import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; -import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types"; -import { VisualBuilder } from "../../.."; -import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; - -const FIELD_VALUE = "123"; -const CT_UID = "all_fields"; -const FIELD_UID = "number"; -const FIELD_CSLP = `${CT_UID}.bltEntryUid.en-us.${FIELD_UID}`; -// this now comes from visual builder, since sometimes -// the display name is also dependent on the entry -const FIELD_DISPLAY_NAME = "Great Number"; - -const numberFieldSchema = { - data_type: "number", - display_name: "Number", - uid: "number", - field_metadata: { - description: "", - default_value: "", - }, - mandatory: false, - multiple: false, - non_localizable: false, - unique: false, -}; - -global.ResizeObserver = vi.fn().mockImplementation(() => ({ - observe: vi.fn(), - unobserve: vi.fn(), - disconnect: vi.fn(), -})); - -const contentTypes = getAllContentTypes(); - -vi.mock("../../../utils/visualBuilderPostMessage", () => { - return { - __esModule: true, - default: { - send: vi - .fn() - .mockImplementation((eventName: string, params: any) => { - if (eventName === "init") - return Promise.resolve({ - contentTypes, - }); - else if ( - eventName === - VisualBuilderPostMessageEvents.GET_FIELD_SCHEMA - ) { - return { - fieldSchemaMap: { - [numberFieldSchema.uid]: numberFieldSchema, - }, - }; - } else if ( - eventName === - VisualBuilderPostMessageEvents.GET_FIELD_DATA - ) { - return Promise.resolve({ - fieldData: FIELD_VALUE, - }); - } else if ( - eventName === - VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES - ) { - return Promise.resolve({ - [FIELD_CSLP]: FIELD_DISPLAY_NAME, - }); - } - return Promise.resolve(); - }), - on: vi.fn(), - }, - }; -}); - -describe.skip("number field", () => { - let numberField: HTMLParagraphElement; - let visualBuilder: VisualBuilder; - - beforeEach(() => { - numberField = document.createElement("p"); - numberField.setAttribute("data-cslp", FIELD_CSLP); - numberField.textContent = FIELD_VALUE; - numberField.getBoundingClientRect = vi.fn(() => ({ - x: 100, - y: 100, - top: 100, - left: 100, - right: 0, - bottom: 0, - width: 100, - height: 25, - toJSON: vi.fn(), - })); - - document.body.appendChild(numberField); - - Config.set("mode", ILivePreviewModeConfig.BUILDER); - visualBuilder = new VisualBuilder(); - }); - - afterEach(() => { - numberField.remove(); - visualBuilder.destroy(); - }); - - test("should have hover outline (dashed) on hover", async () => { - await act(() => { - fireEvent.mouseMove(numberField); - }); - - const hoverOutline = screen.getByTestId( - "visual-builder__hover-outline" - ); - expect(hoverOutline).toBeInTheDocument(); - expect(hoverOutline.style.top).toEqual("100px"); - expect(hoverOutline.style.left).toEqual("100px"); - expect(hoverOutline.style.width).toEqual("100px"); - expect(hoverOutline.style.height).toEqual("25px"); - }); - - it("should have an overlay", async () => { - await act(() => { - fireEvent.click(numberField); - }); - const topOverlay = screen.getByTestId("visual-builder__overlay--top"); - const bottomOverlay = screen.getByTestId( - "visual-builder__overlay--bottom" - ); - const leftOverlay = screen.getByTestId("visual-builder__overlay--left"); - const rightOverlay = screen.getByTestId( - "visual-builder__overlay--right" - ); - - expect(topOverlay).toBeVisible(); - expect(bottomOverlay).toBeVisible(); - expect(leftOverlay).toBeVisible(); - expect(rightOverlay).toBeVisible(); - }); - - test("should have a field path dropdown", async () => { - fireEvent.click(numberField); - const focussedToolbar = await screen.findByTestId( - "visual-builder__focused-toolbar" - ); - console.log(prettyDOM(document.body)); - expect(focussedToolbar).toBeVisible(); - - const fieldLabel = await screen.findByTestId( - "visual-builder__focused-toolbar__text" - ); - expect(fieldLabel).toHaveTextContent(FIELD_DISPLAY_NAME); - }); - - test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - numberField; - - userEvent.click(numberField); - - expect(numberField).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); - }); - - test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - numberField; - - await userEvent.click(numberField); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(numberField), - } - ); - }); - - test("should only accept characters like a number input", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - numberField; - - await userEvent.click(numberField); - await userEvent.keyboard("ab56c78e-h10"); - - expect(numberField).toHaveTextContent(`${FIELD_VALUE}5678e-10`); - }); -}); diff --git a/src/visualBuilder/__test__/hover/fields/__snapshots__/boolean.test.ts.snap b/src/visualBuilder/__test__/hover/fields/__snapshots__/boolean.test.ts.snap new file mode 100644 index 00000000..85648122 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/__snapshots__/boolean.test.ts.snap @@ -0,0 +1,66 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`When an element is hovered in visual builder mode > boolean field > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > boolean field > should have outline 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > boolean field > should have outline 2`] = ` +

+`; diff --git a/src/visualBuilder/__test__/hover/fields/__snapshots__/date.test.ts.snap b/src/visualBuilder/__test__/hover/fields/__snapshots__/date.test.ts.snap new file mode 100644 index 00000000..ec3e550a --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/__snapshots__/date.test.ts.snap @@ -0,0 +1,86 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`When an element is hovered in visual builder mode > date field > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > date field > should have outline 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > date field > should have outline 2`] = ` +

+`; diff --git a/src/visualBuilder/__test__/hover/fields/__snapshots__/file.test.ts.snap b/src/visualBuilder/__test__/hover/fields/__snapshots__/file.test.ts.snap new file mode 100644 index 00000000..fa5ac781 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/__snapshots__/file.test.ts.snap @@ -0,0 +1,257 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`When an element is hovered in visual builder mode > file field (multiple) > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > file field (multiple) > should have custom cursor on individual instances 1`] = ` +
+
+
+ + + +
+
+ + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > file field (multiple) > should have custom cursor on the url 1`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > file field (multiple) > should have outline 1`] = ` +
+

+

+ + +

+`; + +exports[`When an element is hovered in visual builder mode > file field (multiple) > should have outline 2`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > file field (multiple) > should have outline on individual instances 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > file field (multiple) > should have outline on individual instances 2`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > file field (multiple) > should have outline on the url 1`] = ` + +`; + +exports[`When an element is hovered in visual builder mode > file field (multiple) > should have outline on the url 2`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > file field > should have a outline on the url as well 1`] = ` + +`; + +exports[`When an element is hovered in visual builder mode > file field > should have a outline on the url as well 2`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > file field > should have custom cursor 1`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > file field > should have custom cursor on the url as well 1`] = ` +
+
+
+ + + +
+
+ + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > file field > should have outline 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > file field > should have outline 2`] = ` +

+`; diff --git a/src/visualBuilder/__test__/hover/fields/__snapshots__/group.test.ts.snap b/src/visualBuilder/__test__/hover/fields/__snapshots__/group.test.ts.snap new file mode 100644 index 00000000..5f173ee6 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/__snapshots__/group.test.ts.snap @@ -0,0 +1,199 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`When an element is hovered in visual builder mode > group field (multiple) > should have custom cursor 1`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > group field (multiple) > should have outline 1`] = ` +
+
+

+

+
+
+`; + +exports[`When an element is hovered in visual builder mode > group field (multiple) > should have outline 2`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > group field (multiple) > should have outline on the nested field 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > group field (multiple) > should have outline on the nested field 2`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > group field (multiple) > should have outline on the nested single line 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > group field (multiple) > should have outline on the nested single line 2`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > group field > should have a outline on the nested single line 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > group field > should have a outline on the nested single line 2`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > group field > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > group field > should have custom cursor on the nested single line 1`] = ` +
+
+
+ + + +
+
+ + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > group field > should have outline 1`] = ` +
+

+

+`; + +exports[`When an element is hovered in visual builder mode > group field > should have outline 2`] = ` +
+`; diff --git a/src/visualBuilder/__test__/hover/fields/__snapshots__/html-rte.test.ts.snap b/src/visualBuilder/__test__/hover/fields/__snapshots__/html-rte.test.ts.snap new file mode 100644 index 00000000..4bba191a --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/__snapshots__/html-rte.test.ts.snap @@ -0,0 +1,275 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`When an element is hovered in visual builder mode > HTML RTE field (multiple) > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > HTML RTE field (multiple) > should have custom cursor on individual instances 1`] = ` +
+
+
+ + + +
+
+ + + + + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > HTML RTE field (multiple) > should have outline 1`] = ` +
+

+

+

+`; + +exports[`When an element is hovered in visual builder mode > HTML RTE field (multiple) > should have outline 2`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > HTML RTE field (multiple) > should have outline on individual instances 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > HTML RTE field (multiple) > should have outline on individual instances 2`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > HTML RTE field > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > HTML RTE field > should have outline 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > HTML RTE field > should have outline 2`] = ` +

+`; diff --git a/src/visualBuilder/__test__/hover/fields/__snapshots__/json-rte.test.ts.snap b/src/visualBuilder/__test__/hover/fields/__snapshots__/json-rte.test.ts.snap new file mode 100644 index 00000000..ded6b042 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/__snapshots__/json-rte.test.ts.snap @@ -0,0 +1,227 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`When an element is hovered in visual builder mode > JSON RTE field (multiple) > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > JSON RTE field (multiple) > should have custom cursor on individual instances 1`] = ` +
+
+
+ + + +
+
+ + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > JSON RTE field (multiple) > should have outline 1`] = ` +
+

+

+

+`; + +exports[`When an element is hovered in visual builder mode > JSON RTE field (multiple) > should have outline 2`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > JSON RTE field (multiple) > should have outline on individual instances 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > JSON RTE field (multiple) > should have outline on individual instances 2`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > JSON RTE field > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > JSON RTE field > should have outline 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > JSON RTE field > should have outline 2`] = ` +

+`; diff --git a/src/visualBuilder/__test__/hover/fields/__snapshots__/link.test.ts.snap b/src/visualBuilder/__test__/hover/fields/__snapshots__/link.test.ts.snap new file mode 100644 index 00000000..f4f00ec5 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/__snapshots__/link.test.ts.snap @@ -0,0 +1,227 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`When an element is hovered in visual builder mode > link field (multiple) > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > link field (multiple) > should have custom cursor on individual instances 1`] = ` +
+
+
+ + + +
+
+ + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > link field (multiple) > should have outline 1`] = ` + +`; + +exports[`When an element is hovered in visual builder mode > link field (multiple) > should have outline 2`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > link field (multiple) > should have outline on individual instances 1`] = ` + +`; + +exports[`When an element is hovered in visual builder mode > link field (multiple) > should have outline on individual instances 2`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > link field > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > link field > should have outline 1`] = ` + +`; + +exports[`When an element is hovered in visual builder mode > link field > should have outline 2`] = ` +
+`; diff --git a/src/visualBuilder/__test__/hover/fields/__snapshots__/markdown.test.ts.snap b/src/visualBuilder/__test__/hover/fields/__snapshots__/markdown.test.ts.snap new file mode 100644 index 00000000..ad0b43d4 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/__snapshots__/markdown.test.ts.snap @@ -0,0 +1,221 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`When an element is hovered in visual builder mode > markdown field (multiple) > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > markdown field (multiple) > should have custom cursor on individual instances 1`] = ` +
+
+
+ + + +
+
+ + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > markdown field (multiple) > should have outline 1`] = ` +
+

+

+

+`; + +exports[`When an element is hovered in visual builder mode > markdown field (multiple) > should have outline 2`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > markdown field (multiple) > should have outline on individual instances 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > markdown field (multiple) > should have outline on individual instances 2`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > markdown field > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > markdown field > should have outline 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > markdown field > should have outline 2`] = ` +

+`; diff --git a/src/visualBuilder/__test__/hover/fields/__snapshots__/multi-line.test.ts.snap b/src/visualBuilder/__test__/hover/fields/__snapshots__/multi-line.test.ts.snap new file mode 100644 index 00000000..ba19d59d --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/__snapshots__/multi-line.test.ts.snap @@ -0,0 +1,199 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have custom cursor 1`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have custom cursor on individual instances 1`] = ` +
+
+
+ + + +
+
+ + + + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have outline 1`] = ` +
+

+

+

+`; + +exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have outline 2`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have outline on individual instances 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > multi line field (multiple) > should have outline on individual instances 2`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > multi line field > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > multi line field > should have outline 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > multi line field > should have outline 2`] = ` +

+`; diff --git a/src/visualBuilder/__test__/hover/fields/__snapshots__/number.test.ts.snap b/src/visualBuilder/__test__/hover/fields/__snapshots__/number.test.ts.snap new file mode 100644 index 00000000..819a5d23 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/__snapshots__/number.test.ts.snap @@ -0,0 +1,286 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`When an element is hovered in visual builder mode > number field (multiple) > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > number field (multiple) > should have custom cursor 2`] = ` +
+
+
+ + + +
+
+ + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > number field (multiple) > should have custom cursor on individual instances 1`] = ` +
+
+
+ + + +
+
+ + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > number field (multiple) > should have outline 1`] = ` +
+

+

+

+`; + +exports[`When an element is hovered in visual builder mode > number field (multiple) > should have outline 2`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > number field (multiple) > should have outline on individual instances 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > number field (multiple) > should have outline on individual instances 2`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > number field > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > number field > should have outline 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > number field > should have outline 2`] = ` +

+`; diff --git a/src/visualBuilder/__test__/hover/fields/__snapshots__/reference.test.ts.snap b/src/visualBuilder/__test__/hover/fields/__snapshots__/reference.test.ts.snap new file mode 100644 index 00000000..9d02f338 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/__snapshots__/reference.test.ts.snap @@ -0,0 +1,163 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`When an element is hovered in visual builder mode > reference field (multiple) > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > reference field (multiple) > should have custom cursor on individual instances 1`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > reference field (multiple) > should have outline 1`] = ` +
+
+
+
+`; + +exports[`When an element is hovered in visual builder mode > reference field (multiple) > should have outline 2`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > reference field (multiple) > should have outline on individual instances 1`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > reference field (multiple) > should have outline on individual instances 2`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > reference field > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > reference field > should have outline 1`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > reference field > should have outline 2`] = ` +
+`; diff --git a/src/visualBuilder/__test__/hover/fields/__snapshots__/select.test.ts.snap b/src/visualBuilder/__test__/hover/fields/__snapshots__/select.test.ts.snap new file mode 100644 index 00000000..dcdf997b --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/__snapshots__/select.test.ts.snap @@ -0,0 +1,281 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`When an element is hovered in visual builder mode > select field (multiple) > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > select field (multiple) > should have custom cursor 2`] = ` +
+
+
+ + + +
+
+ + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > select field (multiple) > should have custom cursor on individual instances 1`] = ` +
+
+
+ + + +
+
+ + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > select field (multiple) > should have outline 1`] = ` +
+

+

+

+`; + +exports[`When an element is hovered in visual builder mode > select field (multiple) > should have outline 2`] = ` +
+

+

+

+`; + +exports[`When an element is hovered in visual builder mode > select field (multiple) > should have outline 3`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > select field (multiple) > should have outline on individual instances 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > select field (multiple) > should have outline on individual instances 2`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > select field (multiple) > should have outline on individual instances 3`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > select field > should have custom cursor 1`] = ` +
+
+
+ + + +
+
+ + + + +
+
+
+`; + +exports[`When an element is hovered in visual builder mode > select field > should have outline 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > select field > should have outline 2`] = ` +

+`; diff --git a/src/visualBuilder/__test__/hover/fields/__snapshots__/single-line.test.ts.snap b/src/visualBuilder/__test__/hover/fields/__snapshots__/single-line.test.ts.snap new file mode 100644 index 00000000..d9f8c0d4 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/__snapshots__/single-line.test.ts.snap @@ -0,0 +1,84 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`When an element is hovered in visual builder mode > single line field (multiple) > should have custom cursor 1`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > single line field (multiple) > should have custom cursor on individual instances 1`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > single line field (multiple) > should have outline 1`] = ` +
+

+

+

+`; + +exports[`When an element is hovered in visual builder mode > single line field (multiple) > should have outline 2`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > single line field (multiple) > should have outline on individual instances 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > single line field (multiple) > should have outline on individual instances 2`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > single line field > should have custom cursor 1`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > single line field > should have outline 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > title field > should have custom cursor 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > title field > should have outline 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > title field > should have outline 2`] = ` +

+`; diff --git a/src/visualBuilder/__test__/hover/fields/__snapshots__/visualBuilderHover.test.ts.snap b/src/visualBuilder/__test__/hover/fields/__snapshots__/visualBuilderHover.test.ts.snap new file mode 100644 index 00000000..994b2420 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/__snapshots__/visualBuilderHover.test.ts.snap @@ -0,0 +1,27 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`When an element is hovered in visual builder mode > number field > should have custom cursor 1`] = ` +
+`; + +exports[`When an element is hovered in visual builder mode > number field > should have outline 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > title field > should have custom cursor 1`] = ` +

+`; + +exports[`When an element is hovered in visual builder mode > title field > should have outline 1`] = ` +

+`; diff --git a/src/visualBuilder/__test__/hover/fields/boolean.test.ts b/src/visualBuilder/__test__/hover/fields/boolean.test.ts new file mode 100644 index 00000000..e241958a --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/boolean.test.ts @@ -0,0 +1,106 @@ +import { screen } from "@testing-library/preact"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import { sleep } from "../../../../__test__/utils"; +import Config from "../../../../configManager/configManager"; +import { VisualBuilder } from "../../../index"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { mockDomRect } from "./mockDomRect"; + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + }, + }; +}); + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +describe("When an element is hovered in visual builder mode", () => { + let mousemoveEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mousemoveEvent = new Event("mousemove", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.getElementsByTagName("html")[0].innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + describe("boolean field", () => { + let booleanField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + booleanField = document.createElement("p"); + booleanField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.boolean" + ); + + booleanField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + document.body.appendChild(booleanField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + booleanField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(booleanField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + booleanField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); +}); diff --git a/src/visualBuilder/__test__/hover/fields/date.test.ts b/src/visualBuilder/__test__/hover/fields/date.test.ts new file mode 100644 index 00000000..c399f460 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/date.test.ts @@ -0,0 +1,105 @@ +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import { sleep } from "../../../../__test__/utils"; +import Config from "../../../../configManager/configManager"; +import { VisualBuilder } from "../../../index"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { mockDomRect } from "./mockDomRect"; + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + }, + }; +}); + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +describe("When an element is hovered in visual builder mode", () => { + let mousemoveEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mousemoveEvent = new Event("mousemove", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.getElementsByTagName("html")[0].innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("date field", () => { + let dataField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + dataField = document.createElement("p"); + dataField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.date" + ); + + dataField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + document.body.appendChild(dataField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + dataField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(dataField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + test("should have custom cursor", async () => { + dataField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); +}); diff --git a/src/visualBuilder/__test__/hover/fields/file.test.ts b/src/visualBuilder/__test__/hover/fields/file.test.ts new file mode 100644 index 00000000..c3c238de --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/file.test.ts @@ -0,0 +1,268 @@ +import { screen } from "@testing-library/preact"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import { sleep } from "../../../../__test__/utils"; +import Config from "../../../../configManager/configManager"; +import { VisualBuilder } from "../../../index"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { mockDomRect } from "./mockDomRect"; + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + }, + }; +}); + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +describe("When an element is hovered in visual builder mode", () => { + let mousemoveEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mousemoveEvent = new Event("mousemove", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.getElementsByTagName("html")[0].innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("file field", () => { + let fileField: HTMLParagraphElement; + let imageField: HTMLImageElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + fileField = document.createElement("p"); + fileField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.file" + ); + + fileField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + imageField = document.createElement("img"); + imageField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.file.url" + ); + + document.body.appendChild(fileField); + document.body.appendChild(imageField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + fileField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(fileField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + fileField.dispatchEvent(mousemoveEvent); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + + test("should have a outline on the url as well", async () => { + imageField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(imageField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor on the url as well", async () => { + imageField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); + + describe("file field (multiple)", () => { + let container: HTMLDivElement; + let firstFileField: HTMLParagraphElement; + let secondFileField: HTMLParagraphElement; + let firstImageField: HTMLImageElement; + let secondImageField: HTMLImageElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.file_multiple_" + ); + + container.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleHorizontal()); + + firstFileField = document.createElement("p"); + firstFileField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.file_multiple_.0" + ); + + firstFileField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + secondFileField = document.createElement("p"); + secondFileField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.file_multiple_.1" + ); + + secondFileField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleRight()); + + firstImageField = document.createElement("img"); + firstImageField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.file_multiple_.0.url" + ); + firstImageField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + secondImageField = document.createElement("img"); + secondImageField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.file_multiple_.1.url" + ); + secondFileField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleRight()); + + container.appendChild(firstFileField); + container.appendChild(secondFileField); + container.appendChild(firstImageField); + container.appendChild(secondImageField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + container.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(container).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + container.dispatchEvent(mousemoveEvent); + + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + await sleep(0); + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + + test("should have outline on individual instances", async () => { + firstFileField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(firstFileField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor on individual instances", async () => { + firstFileField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + + test("should have outline on the url", async () => { + firstImageField.dispatchEvent(mousemoveEvent); + expect(firstImageField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor on the url", async () => { + firstImageField.dispatchEvent(mousemoveEvent); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); +}); diff --git a/src/visualBuilder/__test__/hover/fields/group.test.ts b/src/visualBuilder/__test__/hover/fields/group.test.ts new file mode 100644 index 00000000..5d327a96 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/group.test.ts @@ -0,0 +1,256 @@ +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import { sleep } from "../../../../__test__/utils"; +import Config from "../../../../configManager/configManager"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { mockDomRect } from "./mockDomRect"; +import { VisualBuilder } from "../../../index"; +import { screen } from "@testing-library/preact"; + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + }, + }; +}); + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +describe("When an element is hovered in visual builder mode", () => { + let mousemoveEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mousemoveEvent = new Event("mousemove", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.getElementsByTagName("html")[0].innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("group field", () => { + let groupField: HTMLDivElement; + let nestedSingleLine: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + groupField = document.createElement("div"); + groupField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.group" + ); + + groupField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + nestedSingleLine = document.createElement("p"); + nestedSingleLine.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.group.single_line" + ); + + nestedSingleLine.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + groupField.appendChild(nestedSingleLine); + document.body.appendChild(groupField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + groupField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(groupField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + test("should have custom cursor", async () => { + groupField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + + test("should have a outline on the nested single line", async () => { + const singleLine = document.createElement("p"); + singleLine.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.group.single_line" + ); + + singleLine.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + groupField.appendChild(singleLine); + + singleLine.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(singleLine).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor on the nested single line", async () => { + const singleLine = document.createElement("p"); + singleLine.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.group.single_line" + ); + + singleLine.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + groupField.appendChild(singleLine); + + singleLine.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); + + describe("group field (multiple)", () => { + let container: HTMLDivElement; + let firstGroupField: HTMLDivElement; + let firstNestedMultiLine: HTMLParagraphElement; + let secondGroupField: HTMLDivElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.group_multiple_" + ); + + container.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleHorizontal()); + + firstGroupField = document.createElement("div"); + firstGroupField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.group_multiple_.0" + ); + + firstGroupField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + firstNestedMultiLine = document.createElement("p"); + firstNestedMultiLine.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.group_multiple_.0.multi_line" + ); + + firstNestedMultiLine.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + secondGroupField = document.createElement("div"); + secondGroupField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.group_multiple_.1" + ); + + secondGroupField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleRight()); + + container.appendChild(firstGroupField); + container.appendChild(secondGroupField); + + firstGroupField.appendChild(firstNestedMultiLine); + + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + container.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(container).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + container.dispatchEvent(mousemoveEvent); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + + test("should have outline on the nested field", async () => { + firstNestedMultiLine.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(firstNestedMultiLine).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + }); +}); diff --git a/src/visualBuilder/__test__/hover/fields/html-rte.test.ts b/src/visualBuilder/__test__/hover/fields/html-rte.test.ts new file mode 100644 index 00000000..67f8cbc9 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/html-rte.test.ts @@ -0,0 +1,197 @@ +import { screen } from "@testing-library/preact"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import { sleep } from "../../../../__test__/utils"; +import Config from "../../../../configManager/configManager"; +import { VisualBuilder } from "../../../index"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { mockDomRect } from "./mockDomRect"; + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + }, + }; +}); + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +describe("When an element is hovered in visual builder mode", () => { + let mousemoveEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mousemoveEvent = new Event("mousemove", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.getElementsByTagName("html")[0].innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("HTML RTE field", () => { + let htmlRteField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + htmlRteField = document.createElement("p"); + htmlRteField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.rich_text_editor" + ); + + htmlRteField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + document.body.appendChild(htmlRteField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + htmlRteField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(htmlRteField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + test("should have custom cursor", async () => { + htmlRteField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); + + describe("HTML RTE field (multiple)", () => { + let container: HTMLDivElement; + let firstHtmlRteField: HTMLParagraphElement; + let secondHtmlRteField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.rich_text_editor_multiple_" + ); + container.getBoundingClientRect = vi + + .fn() + .mockReturnValue(mockDomRect.singleHorizontal()); + + firstHtmlRteField = document.createElement("p"); + firstHtmlRteField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.rich_text_editor_multiple_.0" + ); + + firstHtmlRteField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + secondHtmlRteField = document.createElement("p"); + secondHtmlRteField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.rich_text_editor_multiple_.1" + ); + + secondHtmlRteField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleRight()); + + container.appendChild(firstHtmlRteField); + container.appendChild(secondHtmlRteField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + container.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(container).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + container.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + + test("should have outline on individual instances", async () => { + firstHtmlRteField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(firstHtmlRteField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor on individual instances", async () => { + firstHtmlRteField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); +}); diff --git a/src/visualBuilder/__test__/hover/fields/json-rte.test.ts b/src/visualBuilder/__test__/hover/fields/json-rte.test.ts new file mode 100644 index 00000000..1db1dce7 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/json-rte.test.ts @@ -0,0 +1,198 @@ +import { screen } from "@testing-library/preact"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import { sleep } from "../../../../__test__/utils"; +import Config from "../../../../configManager/configManager"; +import { VisualBuilder } from "../../../index"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { mockDomRect } from "./mockDomRect"; + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + }, + }; +}); + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +describe("When an element is hovered in visual builder mode", () => { + let mousemoveEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mousemoveEvent = new Event("mousemove", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.getElementsByTagName("html")[0].innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("JSON RTE field", () => { + let jsonRteField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + jsonRteField = document.createElement("p"); + jsonRteField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.json_rte" + ); + + jsonRteField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + document.body.appendChild(jsonRteField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + jsonRteField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(jsonRteField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + jsonRteField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); + + describe("JSON RTE field (multiple)", () => { + let container: HTMLDivElement; + let firstJsonRteField: HTMLParagraphElement; + let secondJsonRteField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.json_rich_text_editor_multiple_" + ); + + container.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleHorizontal()); + + firstJsonRteField = document.createElement("p"); + firstJsonRteField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.json_rich_text_editor_multiple_.0" + ); + + firstJsonRteField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + secondJsonRteField = document.createElement("p"); + secondJsonRteField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.json_rich_text_editor_multiple_.1" + ); + + secondJsonRteField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleRight()); + + container.appendChild(firstJsonRteField); + container.appendChild(secondJsonRteField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + container.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(container).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + container.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + + test("should have outline on individual instances", async () => { + firstJsonRteField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(firstJsonRteField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor on individual instances", async () => { + firstJsonRteField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); +}); diff --git a/src/visualBuilder/__test__/hover/fields/link.test.ts b/src/visualBuilder/__test__/hover/fields/link.test.ts new file mode 100644 index 00000000..1ceaf297 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/link.test.ts @@ -0,0 +1,194 @@ +import { screen } from "@testing-library/preact"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import { sleep } from "../../../../__test__/utils"; +import Config from "../../../../configManager/configManager"; +import { VisualBuilder } from "../../../index"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { mockDomRect } from "./mockDomRect"; + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + }, + }; +}); + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +describe("When an element is hovered in visual builder mode", () => { + let mousemoveEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mousemoveEvent = new Event("mousemove", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.getElementsByTagName("html")[0].innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("link field", () => { + let linkField: HTMLAnchorElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + linkField = document.createElement("a"); + linkField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.link.href" + ); + + linkField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + document.body.appendChild(linkField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + linkField.dispatchEvent(mousemoveEvent); + expect(linkField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + linkField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); + + describe("link field (multiple)", () => { + let container: HTMLDivElement; + let firstLinkField: HTMLAnchorElement; + let secondLinkField: HTMLAnchorElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.link_multiple_" + ); + container.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleHorizontal()); + + firstLinkField = document.createElement("a"); + firstLinkField.setAttribute( + "data-cslp", + "all_fields.blt366df6233d9915f5.en-us.link_multiple_.0.href" + ); + firstLinkField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + secondLinkField = document.createElement("a"); + secondLinkField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.link_multiple_.1.href" + ); + secondLinkField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleRight()); + + container.appendChild(firstLinkField); + container.appendChild(secondLinkField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + container.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(container).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + container.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + + test("should have outline on individual instances", async () => { + firstLinkField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(firstLinkField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor on individual instances", async () => { + firstLinkField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); +}); diff --git a/src/visualBuilder/__test__/hover/fields/markdown.test.ts b/src/visualBuilder/__test__/hover/fields/markdown.test.ts new file mode 100644 index 00000000..3b5bb725 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/markdown.test.ts @@ -0,0 +1,197 @@ +import { screen } from "@testing-library/preact"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import { sleep } from "../../../../__test__/utils"; +import Config from "../../../../configManager/configManager"; +import { VisualBuilder } from "../../../index"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { mockDomRect } from "./mockDomRect"; + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + }, + }; +}); + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +describe("When an element is hovered in visual builder mode", () => { + let mousemoveEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mousemoveEvent = new Event("mousemove", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.getElementsByTagName("html")[0].innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("markdown field", () => { + let markdownField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + markdownField = document.createElement("p"); + markdownField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.markdown" + ); + + markdownField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + document.body.appendChild(markdownField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + markdownField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(markdownField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + test("should have custom cursor", async () => { + markdownField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); + + describe("markdown field (multiple)", () => { + let container: HTMLDivElement; + let firstMarkdownField: HTMLParagraphElement; + let secondMarkdownField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.markdown_multiple_" + ); + + container.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleHorizontal()); + + firstMarkdownField = document.createElement("p"); + firstMarkdownField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.markdown_multiple_.0" + ); + + firstMarkdownField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + secondMarkdownField = document.createElement("p"); + secondMarkdownField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.markdown_multiple_.1" + ); + + secondMarkdownField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleRight()); + + container.appendChild(firstMarkdownField); + container.appendChild(secondMarkdownField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + container.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(container).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + container.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + + test("should have outline on individual instances", async () => { + firstMarkdownField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(firstMarkdownField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor on individual instances", async () => { + firstMarkdownField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); +}); diff --git a/src/visualBuilder/__test__/hover/fields/mockDomRect.ts b/src/visualBuilder/__test__/hover/fields/mockDomRect.ts new file mode 100644 index 00000000..7739cbb6 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/mockDomRect.ts @@ -0,0 +1,122 @@ +export const mockDomRect = { + singleHorizontal: () => ({ + bottom: 88.3984375, + height: 54.3984375, + left: 34, + right: 862, + top: 34, + width: 828, + x: 34, + y: 34, + }), + singleLeft: () => ({ + x: 51, + y: 51, + width: 27.7734375, + height: 20.3984375, + top: 51, + bottom: 71.3984375, + left: 51, + right: 78.7734375, + }), + singleRight: () => ({ + x: 110.7734375, + y: 51, + width: 53.59375, + height: 20.3984375, + top: 51, + bottom: 71.3984375, + left: 110.7734375, + right: 164.3671875, + }), + singleVertical: () => ({ + bottom: 195.1953125, + height: 90.796875, + left: 34, + right: 862, + top: 104.3984375, + width: 828, + x: 34, + y: 104.3984375, + }), + singleTop: () => ({ + x: 51, + y: 121.3984375, + width: 794, + height: 20.3984375, + top: 121.3984375, + bottom: 141.796875, + left: 51, + right: 845, + }), + singleBottom: () => ({ + x: 51, + y: 157.796875, + width: 794, + height: 20.3984375, + top: 157.796875, + bottom: 178.1953125, + left: 51, + right: 845, + }), + multipleLeft: () => ({ + x: 51, + y: 228.1953125, + width: 87.59375, + height: 90.796875, + top: 228.1953125, + bottom: 318.9921875, + left: 51, + right: 138.59375, + }), + multipleRight: () => ({ + x: 170.59375, + y: 228.1953125, + width: 87.59375, + height: 90.796875, + top: 228.1953125, + bottom: 318.9921875, + left: 170.59375, + right: 258.1875, + }), + multipleTop: () => ({ + x: 51, + y: 368.9921875, + width: 794, + height: 90.796875, + top: 368.9921875, + bottom: 459.7890625, + left: 51, + right: 845, + }), + multipleBottom: () => ({ + x: 51, + y: 475.7890625, + width: 794, + height: 90.796875, + top: 475.7890625, + bottom: 566.5859375, + left: 51, + right: 845, + }), + multipleChildTop: () => ({ + x: 68, + y: 385.9921875, + width: 760, + height: 20.3984375, + top: 385.9921875, + bottom: 406.390625, + left: 68, + right: 828, + }), + multipleChildBottom: () => ({ + x: 68, + y: 422.390625, + width: 760, + height: 20.3984375, + top: 422.390625, + bottom: 442.7890625, + left: 68, + right: 828, + }), +}; diff --git a/src/visualBuilder/__test__/hover/fields/multi-line.test.ts b/src/visualBuilder/__test__/hover/fields/multi-line.test.ts new file mode 100644 index 00000000..4e4ce02e --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/multi-line.test.ts @@ -0,0 +1,197 @@ +import { screen } from "@testing-library/preact"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import { sleep } from "../../../../__test__/utils"; +import Config from "../../../../configManager/configManager"; +import { VisualBuilder } from "../../../index"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { mockDomRect } from "./mockDomRect"; + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + }, + }; +}); + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +describe("When an element is hovered in visual builder mode", () => { + let mousemoveEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mousemoveEvent = new Event("mousemove", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.getElementsByTagName("html")[0].innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("multi line field", () => { + let multiLineField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + multiLineField = document.createElement("p"); + multiLineField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.multi_line" + ); + + multiLineField.getBoundingClientRect = vi + + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + document.body.appendChild(multiLineField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + multiLineField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(multiLineField).toMatchSnapshot(); + const hoverOutline = screen.getByTestId( + "visual-builder__hover-outline" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + multiLineField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); + + describe("multi line field (multiple)", () => { + let container: HTMLDivElement; + let firstMultiLineField: HTMLParagraphElement; + let secondMultiLineField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.multi_line_textbox_multiple_" + ); + container.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleHorizontal()); + + firstMultiLineField = document.createElement("p"); + firstMultiLineField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.multi_line_textbox_multiple_.0" + ); + + firstMultiLineField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + secondMultiLineField = document.createElement("p"); + secondMultiLineField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.multi_line_textbox_multiple_.1" + ); + + secondMultiLineField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleRight()); + + container.appendChild(firstMultiLineField); + container.appendChild(secondMultiLineField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + await sleep(0); + container.dispatchEvent(mousemoveEvent); + expect(container).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + await sleep(0); + container.dispatchEvent(mousemoveEvent); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + + test("should have outline on individual instances", async () => { + firstMultiLineField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(firstMultiLineField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor on individual instances", async () => { + firstMultiLineField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); +}); diff --git a/src/visualBuilder/__test__/hover/fields/number.test.ts b/src/visualBuilder/__test__/hover/fields/number.test.ts new file mode 100644 index 00000000..ec3196b5 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/number.test.ts @@ -0,0 +1,195 @@ +import { screen } from "@testing-library/preact"; +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import { sleep } from "../../../../__test__/utils"; +import Config from "../../../../configManager/configManager"; +import { VisualBuilder } from "../../../index"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { mockDomRect } from "./mockDomRect"; + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + }, + }; +}); + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +describe("When an element is hovered in visual builder mode", () => { + let mousemoveEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mousemoveEvent = new Event("mousemove", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.getElementsByTagName("html")[0].innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("number field", () => { + let numberField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + numberField = document.createElement("p"); + numberField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.number" + ); + + numberField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + document.body.appendChild(numberField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + numberField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(numberField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + numberField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); + + describe("number field (multiple)", () => { + let container: HTMLDivElement; + let firstNumberField: HTMLParagraphElement; + let secondNumberField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.number_multiple_" + ); + container.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleHorizontal()); + + firstNumberField = document.createElement("p"); + firstNumberField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.number_multiple_.0" + ); + firstNumberField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + secondNumberField = document.createElement("p"); + secondNumberField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.number_multiple_.1" + ); + secondNumberField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleRight()); + + container.appendChild(firstNumberField); + container.appendChild(secondNumberField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + container.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(container).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + container.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + + test("should have outline on individual instances", async () => { + firstNumberField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(firstNumberField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor on individual instances", async () => { + firstNumberField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); +}); diff --git a/src/visualBuilder/__test__/hover/fields/reference.test.ts b/src/visualBuilder/__test__/hover/fields/reference.test.ts new file mode 100644 index 00000000..8efe2542 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/reference.test.ts @@ -0,0 +1,195 @@ +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import { sleep } from "../../../../__test__/utils"; +import Config from "../../../../configManager/configManager"; +import { VisualBuilder } from "../../../index"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { mockDomRect } from "./mockDomRect"; +import { screen } from "@testing-library/preact"; + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + }, + }; +}); + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +describe("When an element is hovered in visual builder mode", () => { + let mousemoveEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mousemoveEvent = new Event("mousemove", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.getElementsByTagName("html")[0].innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("reference field", () => { + let referenceField: HTMLDivElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + referenceField = document.createElement("div"); + referenceField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.reference" + ); + + referenceField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + document.body.appendChild(referenceField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + referenceField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(referenceField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + test("should have custom cursor", async () => { + referenceField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); + + describe("reference field (multiple)", () => { + let container: HTMLDivElement; + let firstReferenceField: HTMLDivElement; + let secondReferenceField: HTMLDivElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.reference_multiple_" + ); + container.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleHorizontal()); + + firstReferenceField = document.createElement("div"); + firstReferenceField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.reference_multiple_.0" + ); + + firstReferenceField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + secondReferenceField = document.createElement("div"); + secondReferenceField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.reference_multiple_.1" + ); + + secondReferenceField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleRight()); + + container.appendChild(firstReferenceField); + container.appendChild(secondReferenceField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + container.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(container).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + container.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + + test("should have outline on individual instances", async () => { + firstReferenceField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(firstReferenceField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor on individual instances", async () => { + firstReferenceField.dispatchEvent(mousemoveEvent); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); +}); diff --git a/src/visualBuilder/__test__/hover/fields/select.test.ts b/src/visualBuilder/__test__/hover/fields/select.test.ts new file mode 100644 index 00000000..611466b6 --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/select.test.ts @@ -0,0 +1,200 @@ +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import { sleep } from "../../../../__test__/utils"; +import Config from "../../../../configManager/configManager"; +import { VisualBuilder } from "../../../index"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { mockDomRect } from "./mockDomRect"; +import { screen } from "@testing-library/preact"; + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + }, + }; +}); + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +describe("When an element is hovered in visual builder mode", () => { + let mousemoveEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mousemoveEvent = new Event("mousemove", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.getElementsByTagName("html")[0].innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("select field", () => { + let selectField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + selectField = document.createElement("p"); + selectField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.select" + ); + + selectField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + document.body.appendChild(selectField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + selectField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(selectField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + selectField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); + + describe("select field (multiple)", () => { + let container: HTMLDivElement; + let firstSelectField: HTMLParagraphElement; + let secondSelectField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.select_multiple_" + ); + container.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleHorizontal()); + + firstSelectField = document.createElement("p"); + firstSelectField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.select_multiple_.0" + ); + + firstSelectField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + secondSelectField = document.createElement("p"); + secondSelectField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.select_multiple_.1" + ); + + secondSelectField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + container.appendChild(firstSelectField); + container.appendChild(secondSelectField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + container.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(container).toMatchSnapshot(); + expect(container).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", async () => { + container.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + + test("should have outline on individual instances", async () => { + firstSelectField.dispatchEvent(mousemoveEvent); + await sleep(0); + expect(firstSelectField).toMatchSnapshot(); + + expect(firstSelectField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor on individual instances", async () => { + firstSelectField.dispatchEvent(mousemoveEvent); + await sleep(0); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); +}); diff --git a/src/visualBuilder/__test__/hover/fields/single-line.test.ts b/src/visualBuilder/__test__/hover/fields/single-line.test.ts new file mode 100644 index 00000000..1c4b4c5a --- /dev/null +++ b/src/visualBuilder/__test__/hover/fields/single-line.test.ts @@ -0,0 +1,225 @@ +import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; +import Config from "../../../../configManager/configManager"; +import { VisualBuilder } from "../../../index"; +import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; +import { mockDomRect } from "./mockDomRect"; +import { screen } from "@testing-library/preact"; + +vi.mock("../../../utils/visualBuilderPostMessage", async () => { + const { getAllContentTypes } = await vi.importActual< + typeof import("../../../../__test__/data/contentType") + >("../../../../__test__/data/contentType"); + const contentTypes = getAllContentTypes(); + return { + __esModule: true, + default: { + send: vi.fn().mockImplementation((eventName: string) => { + if (eventName === "init") + return Promise.resolve({ + contentTypes, + }); + return Promise.resolve(); + }), + }, + }; +}); + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + +describe("When an element is hovered in visual builder mode", () => { + let mousemoveEvent: Event; + + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + }); + + beforeEach(() => { + Config.reset(); + Config.set("mode", 2); + mousemoveEvent = new Event("mousemove", { + bubbles: true, + cancelable: true, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + document.getElementsByTagName("html")[0].innerHTML = ""; + }); + + afterAll(() => { + Config.reset(); + }); + + describe("title field", () => { + let titleField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + titleField = document.createElement("p"); + titleField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.title" + ); + titleField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + document.body.appendChild(titleField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + titleField.dispatchEvent(mousemoveEvent); + expect(titleField).toMatchSnapshot(); + const hoverOutline = screen.getByTestId( + "visual-builder__hover-outline" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", () => { + titleField.dispatchEvent(mousemoveEvent); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); + + describe("single line field", () => { + let singleLineField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + singleLineField = document.createElement("p"); + singleLineField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.single_line" + ); + singleLineField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + document.body.appendChild(singleLineField); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", () => { + singleLineField.dispatchEvent(mousemoveEvent); + expect(singleLineField).toMatchSnapshot(); + expect(singleLineField.classList.contains("cslp-edit-mode")); + }); + test("should have custom cursor", () => { + singleLineField.dispatchEvent(mousemoveEvent); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); + + describe("single line field (multiple)", () => { + let container: HTMLDivElement; + let firstSingleLineField: HTMLParagraphElement; + let secondSingleLineField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + + beforeEach(() => { + container = document.createElement("div"); + container.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.single_line_textbox_multiple_" + ); + container.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleHorizontal()); + + firstSingleLineField = document.createElement("p"); + firstSingleLineField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.single_line_textbox_multiple_.0" + ); + firstSingleLineField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleLeft()); + + secondSingleLineField = document.createElement("p"); + secondSingleLineField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.single_line_textbox_multiple_.1" + ); + secondSingleLineField.getBoundingClientRect = vi + .fn() + .mockReturnValue(mockDomRect.singleRight()); + + container.appendChild(firstSingleLineField); + container.appendChild(secondSingleLineField); + document.body.appendChild(container); + + visualBuilder = new VisualBuilder(); + }); + + afterEach(() => { + visualBuilder.destroy(); + }); + + test("should have outline", async () => { + container.dispatchEvent(mousemoveEvent); + expect(container).toMatchSnapshot(); + + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor", () => { + container.dispatchEvent(mousemoveEvent); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + + test("should have outline on individual instances", () => { + firstSingleLineField.dispatchEvent(mousemoveEvent); + expect(firstSingleLineField).toMatchSnapshot(); + const hoverOutline = document.querySelector( + "[data-testid='visual-builder__hover-outline']" + ); + expect(hoverOutline).toMatchSnapshot(); + }); + + test("should have custom cursor on individual instances", () => { + firstSingleLineField.dispatchEvent(mousemoveEvent); + const customCursor = document.querySelector( + `[data-testid="visual-builder__cursor"]` + ); + + expect(customCursor).toMatchSnapshot(); + expect(customCursor?.classList.contains("visible")).toBeTruthy(); + }); + }); +}); diff --git a/src/visualBuilder/__test__/index.test.ts b/src/visualBuilder/__test__/index.test.ts index 967a6bfe..3e6145ba 100644 --- a/src/visualBuilder/__test__/index.test.ts +++ b/src/visualBuilder/__test__/index.test.ts @@ -2,8 +2,14 @@ import crypto from "crypto"; import { getFieldSchemaMap } from "../../__test__/data/fieldSchemaMap"; import { sleep } from "../../__test__/utils"; import Config from "../../configManager/configManager"; -import { VisualBuilder } from "../index"; import { FieldSchemaMap } from "../utils/fieldSchemaMap"; +import { waitFor, screen } from "@testing-library/preact"; +import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types"; +import { VisualBuilder } from "../index"; +import visualBuilderPostMessage from "../utils/visualBuilderPostMessage"; +import { Mock } from "vitest"; + +const INLINE_EDITABLE_FIELD_VALUE = "Hello World"; vi.mock("../utils/visualBuilderPostMessage", async () => { const { getAllContentTypes } = await vi.importActual< @@ -45,6 +51,17 @@ describe("Visual builder", () => { getFieldSchemaMap().all_fields ); Config.set("mode", 2); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); }); afterEach(() => { @@ -75,8 +92,7 @@ describe("Visual builder", () => { let h1Tag: HTMLHeadingElement; beforeEach(() => { h1Tag = document.createElement("h1"); - h1Tag.innerText = "Hello World"; - + h1Tag.textContent = INLINE_EDITABLE_FIELD_VALUE; h1Tag.setAttribute( "data-cslp", "all_fields.blt58a50b4cebae75c5.en-us.modular_blocks.0.block.single_line" @@ -113,9 +129,55 @@ describe("Visual builder", () => { }); describe("inline elements must be contenteditable", () => { + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string, args) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + const values: Record = { + single_line: INLINE_EDITABLE_FIELD_VALUE, + multi_line: INLINE_EDITABLE_FIELD_VALUE, + file: { + uid: "fileUid", + }, + }; + return Promise.resolve({ + fieldData: values[args.entryPath], + }); + } else if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES + ) { + const names: Record = { + "all_fields.blt58a50b4cebae75c5.en-us.single_line": + "Single Line", + "all_fields.blt58a50b4cebae75c5.en-us.multi_line": + "Multi Line", + "all_fields.blt58a50b4cebae75c5.en-us.file": + "File", + }; + return Promise.resolve({ + [args.cslp]: names[args.cslp], + }); + } + return Promise.resolve({}); + } + ); + }); + test("single line should be contenteditable", async () => { const h1 = document.createElement("h1"); - + h1.textContent = INLINE_EDITABLE_FIELD_VALUE; + h1.getBoundingClientRect = vi.fn(() => ({ + left: 10, + right: 20, + top: 10, + bottom: 20, + width: 10, + height: 5, + })) as any; h1.setAttribute( "data-cslp", "all_fields.blt58a50b4cebae75c5.en-us.single_line" @@ -128,8 +190,10 @@ describe("Visual builder", () => { h1.click(); await sleep(0); + await waitFor(() => { + expect(h1.getAttribute("contenteditable")).toBe("true"); + }); expect(h1).toMatchSnapshot(); - expect(h1.getAttribute("contenteditable")).toBe("true"); }); test("multi line should be contenteditable", async () => { @@ -138,9 +202,19 @@ describe("Visual builder", () => { "data-cslp", "all_fields.blt58a50b4cebae75c5.en-us.multi_line" ); + h1.getBoundingClientRect = vi.fn(() => ({ + left: 10, + right: 20, + top: 10, + bottom: 20, + width: 10, + height: 5, + })) as any; + h1.textContent = INLINE_EDITABLE_FIELD_VALUE; document.body.appendChild(h1); new VisualBuilder(); + await sleep(0); h1.click(); await sleep(0); @@ -148,8 +222,10 @@ describe("Visual builder", () => { // e.code.includes("") // }) + await waitFor(() => { + expect(h1.getAttribute("contenteditable")).toBe("true"); + }); expect(h1).toMatchSnapshot(); - expect(h1.getAttribute("contenteditable")).toBe("true"); }); test("file should render a replacer and remove when it is not", async () => { @@ -198,6 +274,52 @@ describe("visual builder DOM", () => { "all_fields", getFieldSchemaMap().all_fields ); + Config.set("mode", 2); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); + + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string, args) => { + if ( + eventName === VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + const values: Record = { + single_line: INLINE_EDITABLE_FIELD_VALUE, + multi_line: INLINE_EDITABLE_FIELD_VALUE, + file: { + uid: "fileUid", + }, + }; + return Promise.resolve({ + fieldData: values[args.entryPath], + }); + } else if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES + ) { + const names: Record = { + "all_fields.blt58a50b4cebae75c5.en-us.single_line": + "Single Line", + "all_fields.blt58a50b4cebae75c5.en-us.multi_line": + "Multi Line", + "all_fields.blt58a50b4cebae75c5.en-us.file": "File", + }; + return Promise.resolve({ + [args.cslp]: names[args.cslp], + }); + } + return Promise.resolve({}); + } + ); }); beforeEach(() => { @@ -205,14 +327,18 @@ describe("visual builder DOM", () => { h1.setAttribute( "data-cslp", - "all_fields.blt58a50b4cebae75c5.en-us.title" + "all_fields.blt58a50b4cebae75c5.en-us.single_line" ); + h1.innerText = INLINE_EDITABLE_FIELD_VALUE; + h1.getBoundingClientRect = vi.fn(() => ({ left: 10, right: 20, top: 10, bottom: 20, + width: 10, + height: 5, })) as any; document.body.appendChild(h1); @@ -236,64 +362,55 @@ describe("visual builder DOM", () => { expect(visualBuilderOverlayWrapper).toMatchSnapshot(); await sleep(0); + // TODO - should we be using userEvent? which is more + // accurate simulation of actual events that are triggered + // in a browser on clicking. Right now, this test fails if we + // use userEvent.click + // await userEvent.click(h1); h1.click(); await sleep(0); - visualBuilderOverlayWrapper = document.querySelector( - `[data-testid="visual-builder__overlay__wrapper"]` + await waitFor(() => { + expect(h1.getAttribute("contenteditable")).toBe("true"); + }); + visualBuilderOverlayWrapper = await screen.findByTestId( + "visual-builder__overlay__wrapper" ); - - expect(visualBuilderOverlayWrapper).toMatchSnapshot(); expect(visualBuilderOverlayWrapper?.classList.contains("visible")).toBe( true ); + expect(visualBuilderOverlayWrapper).toMatchSnapshot(); - const visualBuilderWrapperTopOverlay = document.querySelector( - `[data-testid="visual-builder__overlay--top"]` - ) as HTMLDivElement; - const visualBuilderWrapperLeftOverlay = document.querySelector( - `[data-testid="visual-builder__overlay--left"]` - ) as HTMLDivElement; - const visualBuilderWrapperRightOverlay = document.querySelector( - `[data-testid="visual-builder__overlay--right"]` - ) as HTMLDivElement; - const visualBuilderWrapperBottomOverlay = document.querySelector( - `[data-testid="visual-builder__overlay--bottom"]` - ) as HTMLDivElement; + const visualBuilderWrapperTopOverlay = await screen.findByTestId( + "visual-builder__overlay--top" + ); + const visualBuilderWrapperLeftOverlay = await screen.findByTestId( + "visual-builder__overlay--left" + ); + const visualBuilderWrapperRightOverlay = await screen.findByTestId( + "visual-builder__overlay--right" + ); + const visualBuilderWrapperBottomOverlay = await screen.findByTestId( + "visual-builder__overlay--bottom" + ); expect(visualBuilderWrapperTopOverlay.style.top).toBe("0px"); expect(visualBuilderWrapperTopOverlay.style.left).toBe("0px"); expect(visualBuilderWrapperTopOverlay.style.width).toBe("100%"); - expect(visualBuilderWrapperTopOverlay.style.height).toBe( - "calc(10px - 2px)" - ); + expect(visualBuilderWrapperTopOverlay.style.height).toBe("calc(10px)"); - expect(visualBuilderWrapperBottomOverlay.style.top).toBe( - "calc(20px + 2px)" - ); + expect(visualBuilderWrapperBottomOverlay.style.top).toBe("20px"); expect(visualBuilderWrapperBottomOverlay.style.left).toBe("0px"); expect(visualBuilderWrapperBottomOverlay.style.width).toBe("100%"); - expect(visualBuilderWrapperBottomOverlay.style.height).toBe( - "calc(-20px - 2px)" - ); + expect(visualBuilderWrapperBottomOverlay.style.height).toBe("80px"); - expect(visualBuilderWrapperLeftOverlay.style.top).toBe( - "calc(10px - 2px)" - ); + expect(visualBuilderWrapperLeftOverlay.style.top).toBe("10px"); expect(visualBuilderWrapperLeftOverlay.style.left).toBe("0px"); - expect(visualBuilderWrapperLeftOverlay.style.width).toBe( - "calc(10px - 2px)" - ); + expect(visualBuilderWrapperLeftOverlay.style.width).toBe("10px"); - expect(visualBuilderWrapperRightOverlay.style.top).toBe( - "calc(10px - 2px)" - ); - expect(visualBuilderWrapperRightOverlay.style.left).toBe( - "calc(20px + 2px)" - ); - expect(visualBuilderWrapperRightOverlay.style.width).toBe( - "calc(1004px - 2px)" - ); + expect(visualBuilderWrapperRightOverlay.style.top).toBe("10px"); + expect(visualBuilderWrapperRightOverlay.style.left).toBe("20px"); + expect(visualBuilderWrapperRightOverlay.style.width).toBe("80px"); }); test("should remove the DOM when method is triggered", async () => { @@ -329,25 +446,32 @@ describe("visual builder DOM", () => { // the overlay is being rendered. await sleep(0); - let visualBuilderOverlayWrapper = document.querySelector( - `[data-testid="visual-builder__overlay__wrapper"]` + expect(h1.getAttribute("contenteditable")).toBe("true"); + + await waitFor(() => { + expect(h1.getAttribute("contenteditable")).toBe("true"); + }); + let visualBuilderOverlayWrapper = await screen.findByTestId( + "visual-builder__overlay__wrapper" ); expect(visualBuilderOverlayWrapper?.classList.contains("visible")).toBe( true ); - expect(h1.getAttribute("contenteditable")).toBe("true"); const visualBuilderOverlayTop = document.querySelector(` [data-testid="visual-builder__overlay--top"]`) as HTMLDivElement; visualBuilderOverlayTop?.click(); + await sleep(0); - visualBuilderOverlayWrapper = document.querySelector( - `[data-testid="visual-builder__overlay__wrapper"]` + await waitFor(() => { + expect(h1.getAttribute("contenteditable")).toBeNull(); + }); + visualBuilderOverlayWrapper = await screen.findByTestId( + "visual-builder__overlay__wrapper" ); expect(visualBuilderOverlayWrapper?.classList.contains("visible")).toBe( - false + true ); - expect(h1.getAttribute("contenteditable")).toBeNull(); }); }); diff --git a/src/visualBuilder/__test__/visualBuilderClick.test.ts b/src/visualBuilder/__test__/visualBuilderClick.test-backup.tsx similarity index 61% rename from src/visualBuilder/__test__/visualBuilderClick.test.ts rename to src/visualBuilder/__test__/visualBuilderClick.test-backup.tsx index facfc128..3fc68970 100644 --- a/src/visualBuilder/__test__/visualBuilderClick.test.ts +++ b/src/visualBuilder/__test__/visualBuilderClick.test-backup.tsx @@ -1,15 +1,32 @@ -import { waitFor } from "@testing-library/preact"; +/** + * This file is just present to compare test running times + * with tests in different files for each field. + */ + +import React from "react"; +import { + fireEvent, + getByTestId, + prettyDOM, + screen, + waitFor, +} from "@testing-library/preact"; import "@testing-library/jest-dom"; import { getFieldSchemaMap } from "../../__test__/data/fieldSchemaMap"; import Config from "../../configManager/configManager"; -import { VisualBuilder } from "../index"; import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../utils/constants"; import { FieldSchemaMap } from "../utils/fieldSchemaMap"; import { getDOMEditStack } from "../utils/getCsDataOfElement"; import visualBuilderPostMessage from "../utils/visualBuilderPostMessage"; -import { vi } from "vitest"; - +import { Mock, vi } from "vitest"; import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types"; +import { VisualBuilder } from "../index"; +import { sleep } from "../../__test__/utils"; + +const VALUES = { + singleLine: "Single line", + number: "10.5", +}; global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), @@ -17,6 +34,29 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({ disconnect: vi.fn(), })); +global.MutationObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + disconnect: vi.fn(), +})); + +vi.mock("../components/FieldToolbar", () => { + return { + default: (props) => { + return

Field Toolbar
; + }, + }; +}); + +vi.mock("../components/fieldLabelWrapper", () => { + return { + default: (props) => { + return ( +
Field Label
+ ); + }, + }; +}); + vi.mock("../utils/visualBuilderPostMessage", async () => { const { getAllContentTypes } = await vi.importActual< typeof import("../../__test__/data/contentType") @@ -37,7 +77,7 @@ vi.mock("../utils/visualBuilderPostMessage", async () => { }; }); -describe.skip("When an element is clicked in visual builder mode", () => { +describe("When an element is clicked in visual builder mode", () => { let mouseClickEvent: Event; beforeAll(() => { @@ -45,6 +85,17 @@ describe.skip("When an element is clicked in visual builder mode", () => { "all_fields", getFieldSchemaMap().all_fields ); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); }); beforeEach(() => { @@ -67,7 +118,30 @@ describe.skip("When an element is clicked in visual builder mode", () => { describe("single line field", () => { let singleLineField: HTMLParagraphElement; - let visualBuilder: VisualBuilder; + + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + return Promise.resolve({ + fieldData: VALUES.singleLine, + }); + } else if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES + ) { + return Promise.resolve({ + "all_fields.bltapikey.en-us.single_line": + "Single Line", + }); + } + return Promise.resolve({}); + } + ); + }); beforeEach(() => { singleLineField = document.createElement("p"); @@ -75,72 +149,104 @@ describe.skip("When an element is clicked in visual builder mode", () => { "data-cslp", "all_fields.bltapikey.en-us.single_line" ); + singleLineField.textContent = VALUES.singleLine; + singleLineField.getBoundingClientRect = vi.fn(() => ({ + left: 10, + right: 20, + top: 10, + bottom: 20, + width: 10, + height: 5, + })) as any; document.body.appendChild(singleLineField); - visualBuilder = new VisualBuilder(); - }); - - afterEach(() => { - visualBuilder.destroy(); + VisualBuilder.VisualBuilderGlobalState.value = { + previousSelectedEditableDOM: null, + previousHoveredTargetDOM: null, + previousEmptyBlockParents: [], + audienceMode: false, + }; }); test("should have outline", () => { + const visualBuilder = new VisualBuilder(); singleLineField.dispatchEvent(mouseClickEvent); expect(singleLineField.classList.contains("cslp-edit-mode")); + visualBuilder.destroy(); }); test("should have an overlay", () => { + const visualBuilder = new VisualBuilder(); singleLineField.dispatchEvent(mouseClickEvent); const overlay = document.querySelector(".visual-builder__overlay"); expect(overlay!.classList.contains("visible")); + visualBuilder.destroy(); }); - test("should have a field path dropdown", () => { - singleLineField.dispatchEvent(mouseClickEvent); - const toolbar = document.querySelector( - ".visual-builder__focused-toolbar__field-label-wrapper__current-field" - ); - expect(toolbar).toBeInTheDocument(); + test.skip("should have a field path dropdown", async () => { + const visualBuilder = new VisualBuilder(); + + await sleep(0); + fireEvent.click(singleLineField); + await sleep(0); + + waitFor(async () => { + const toolbar = await screen.findByText("Field Label"); + expect(toolbar).toBeInTheDocument(); + }); + + // expect(toolbar).toBeInTheDocument(); + visualBuilder.destroy(); }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - singleLineField; + const visualBuilder = new VisualBuilder(); + // visualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = + // singleLineField; - await waitFor(() => { - singleLineField.dispatchEvent(mouseClickEvent); - }); + await sleep(0); + fireEvent.click(singleLineField); + await sleep(0); - expect(singleLineField).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + await waitFor(() => + expect(singleLineField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ) ); + + visualBuilder.destroy(); }); test("should contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - singleLineField; + const visualBuilder = new VisualBuilder(); + + await sleep(0); + fireEvent.click(singleLineField); + await sleep(0); await waitFor(() => { - singleLineField.dispatchEvent(mouseClickEvent); + expect(singleLineField).toHaveAttribute("contenteditable"); }); - expect(singleLineField).toHaveAttribute("contenteditable"); + visualBuilder.destroy(); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - singleLineField; + const visualBuilder = new VisualBuilder(); + + await sleep(0); + fireEvent.click(singleLineField); + await sleep(0); await waitFor(() => { - singleLineField.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(singleLineField), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(singleLineField), - } - ); + visualBuilder.destroy(); }); }); @@ -148,7 +254,27 @@ describe.skip("When an element is clicked in visual builder mode", () => { let container: HTMLDivElement; let firstSingleLineField: HTMLParagraphElement; let secondSingleLineField: HTMLParagraphElement; - let visualBuilder: VisualBuilder; + + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string, args) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + const values: Record = { + single_line_textbox_multiple_: ["Hello", "world"], + "single_line_textbox_multiple_.0": "Hello", + "single_line_textbox_multiple_.1": "world", + }; + return Promise.resolve({ + fieldData: values[args.entryPath], + }); + } + return Promise.resolve({}); + } + ); + }); beforeEach(() => { container = document.createElement("div"); @@ -158,12 +284,15 @@ describe.skip("When an element is clicked in visual builder mode", () => { ); firstSingleLineField = document.createElement("p"); + firstSingleLineField.textContent = "Hello"; + firstSingleLineField.setAttribute( "data-cslp", "all_fields.bltapikey.en-us.single_line_textbox_multiple_.0" ); secondSingleLineField = document.createElement("p"); + secondSingleLineField.textContent = "world"; secondSingleLineField.setAttribute( "data-cslp", "all_fields.bltapikey.en-us.single_line_textbox_multiple_.1" @@ -173,37 +302,48 @@ describe.skip("When an element is clicked in visual builder mode", () => { container.appendChild(secondSingleLineField); document.body.appendChild(container); - visualBuilder = new VisualBuilder(); - }); - - afterEach(() => { - visualBuilder.destroy(); + VisualBuilder.VisualBuilderGlobalState.value = { + previousSelectedEditableDOM: null, + previousHoveredTargetDOM: null, + previousEmptyBlockParents: [], + audienceMode: false, + }; }); test("should have outline", () => { + const visualBuilder = new VisualBuilder(); container.dispatchEvent(mouseClickEvent); expect(container.classList.contains("cslp-edit-mode")); + visualBuilder.destroy(); }); test("should have an overlay", () => { + const visualBuilder = new VisualBuilder(); container.dispatchEvent(mouseClickEvent); const overlay = document.querySelector(".visual-builder__overlay"); expect(overlay!.classList.contains("visible")); + visualBuilder.destroy(); }); - test("should have a field path dropdown", () => { - container.dispatchEvent(mouseClickEvent); - const toolbar = document.querySelector( - ".visual-builder__focused-toolbar__field-label-wrapper__current-field" - ); - expect(toolbar).toBeInTheDocument(); - }); + test.skip("should have a field path dropdown", async () => { + const visualBuilder = new VisualBuilder(); - test("should have a multi field toolbar with button group", async () => { - await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + await sleep(0); + fireEvent.click(container); + await sleep(0); + + await waitFor(async () => { + const toolbar = await screen.findByTestId( + "mock-field-label-wrapper" + ); + expect(toolbar).toBeInTheDocument(); }); + visualBuilder.destroy(); + }); + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { + container.dispatchEvent(mouseClickEvent); const multiFieldToolbar = document.querySelector( ".visual-builder__focused-toolbar__multiple-field-toolbar" ); @@ -217,100 +357,66 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; + const visualBuilder = new VisualBuilder(); + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(container).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); + visualBuilder.destroy(); }); test("container should not contain a contenteditable attribute but the children can", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; + const visualBuilder = new VisualBuilder(); + await sleep(0); + fireEvent.click(container); + await sleep(0); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).not.toHaveAttribute("contenteditable"); }); - expect(container).not.toHaveAttribute("contenteditable"); + fireEvent.click(container.children[0]); + await sleep(0); await waitFor(() => { - container.children[0].dispatchEvent(mouseClickEvent); + expect(container.children[0]).toHaveAttribute( + "contenteditable" + ); }); - expect(container.children[0]).toHaveAttribute("contenteditable"); + fireEvent.click(container.children[1]); + await sleep(0); await waitFor(() => { - container.children[1].dispatchEvent(mouseClickEvent); + expect(container.children[1]).toHaveAttribute( + "contenteditable" + ); }); - - expect(container.children[1]).toHaveAttribute("contenteditable"); + visualBuilder.destroy(); }); - test("should have a multi field toolbar with button group", async () => { - await waitFor(() => { - container.dispatchEvent(mouseClickEvent); - }); - - const multiFieldToolbar = document.querySelector( - ".visual-builder__focused-toolbar__multiple-field-toolbar" - ); - - const buttonGroup = document.querySelector( - ".visual-builder__focused-toolbar__button-group" - ); - - expect(multiFieldToolbar).toBeInTheDocument(); - expect(buttonGroup).toBeInTheDocument(); - }); + test.skip("should have 2 add instance buttons", async () => { + const visualBuilder = new VisualBuilder(); - test("should have 2 add instance buttons", async () => { + await sleep(0); + // fireEvent.click(container.children[0]); container.children[0].dispatchEvent(mouseClickEvent); + await sleep(0); - // need to poll and check since the DOM updates are async - const checkCondition = async () => { - const addInstanceButtons = document.querySelectorAll( - ".visual-builder__add-button" - ); - return addInstanceButtons.length === 2; - }; - - const pollingInterval = 100; - const timeout = 200; - - let elapsedTime = 0; - while (elapsedTime < timeout) { - if (await checkCondition()) { - break; - } - await new Promise((resolve) => - setTimeout(resolve, pollingInterval) + waitFor(async () => { + const addInstanceButtons = await screen.findAllByTestId( + "visual-builder-add-instance-button" ); - elapsedTime += pollingInterval; - } - - if (elapsedTime >= timeout) { - throw new Error( - "Timeout: Condition not met within the specified timeout." - ); - } - - const addInstanceButtons = document.querySelectorAll( - ".visual-builder__add-button" - ); - - expect(addInstanceButtons.length).toBe(2); + expect(addInstanceButtons.length).toBe(2); + }); + visualBuilder.destroy(); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + const visualBuilder = new VisualBuilder(); await waitFor(() => { container.dispatchEvent(mouseClickEvent); }); @@ -321,6 +427,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { DOMEditStack: getDOMEditStack(container), } ); + visualBuilder.destroy(); }); }); @@ -328,12 +435,37 @@ describe.skip("When an element is clicked in visual builder mode", () => { let multiLineField: HTMLParagraphElement; let visualBuilder: VisualBuilder; + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string, args) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + return Promise.resolve({ + fieldData: "Hello world", + }); + } else if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES + ) { + return Promise.resolve({ + "all_fields.bltapikey.en-us.single_line": + "Single Line", + }); + } + return Promise.resolve({}); + } + ); + }); + beforeEach(() => { multiLineField = document.createElement("p"); multiLineField.setAttribute( "data-cslp", "all_fields.bltapikey.en-us.multi_line" ); + multiLineField.textContent = "Hello world"; document.body.appendChild(multiLineField); visualBuilder = new VisualBuilder(); }); @@ -353,52 +485,42 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", async () => { multiLineField.dispatchEvent(mouseClickEvent); - const toolbar = document.querySelector( - ".visual-builder__focused-toolbar__field-label-wrapper__current-field" - ); - expect(toolbar).toBeInTheDocument(); + await waitFor(() => { + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - multiLineField; - + multiLineField.dispatchEvent(mouseClickEvent); await waitFor(() => { - multiLineField.dispatchEvent(mouseClickEvent); + expect(multiLineField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(multiLineField).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); test("should contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - multiLineField; - + multiLineField.dispatchEvent(mouseClickEvent); await waitFor(() => { - multiLineField.dispatchEvent(mouseClickEvent); + expect(multiLineField).toHaveAttribute("contenteditable"); }); - - expect(multiLineField).toHaveAttribute("contenteditable"); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - multiLineField; - + multiLineField.dispatchEvent(mouseClickEvent); await waitFor(() => { - multiLineField.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(multiLineField), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(multiLineField), - } - ); }); }); @@ -406,7 +528,27 @@ describe.skip("When an element is clicked in visual builder mode", () => { let container: HTMLDivElement; let firstMultiLineField: HTMLParagraphElement; let secondMultiLineField: HTMLParagraphElement; - let visualBuilder: VisualBuilder; + + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string, args) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + const values: Record = { + multi_line_textbox_multiple_: ["Hello", "world"], + "multi_line_textbox_multiple_.0": "Hello", + "multi_line_textbox_multiple_.1": "world", + }; + return Promise.resolve({ + fieldData: values[args.entryPath], + }); + } + return Promise.resolve({}); + } + ); + }); beforeEach(() => { container = document.createElement("div"); @@ -416,12 +558,14 @@ describe.skip("When an element is clicked in visual builder mode", () => { ); firstMultiLineField = document.createElement("p"); + firstMultiLineField.textContent = "Hello"; firstMultiLineField.setAttribute( "data-cslp", "all_fields.bltapikey.en-us.multi_line_textbox_multiple_.0" ); secondMultiLineField = document.createElement("p"); + secondMultiLineField.textContent = "world"; secondMultiLineField.setAttribute( "data-cslp", "all_fields.bltapikey.en-us.multi_line_textbox_multiple_.1" @@ -431,33 +575,41 @@ describe.skip("When an element is clicked in visual builder mode", () => { container.appendChild(secondMultiLineField); document.body.appendChild(container); - visualBuilder = new VisualBuilder(); - }); - - afterEach(() => { - visualBuilder.destroy(); + VisualBuilder.VisualBuilderGlobalState.value = { + previousSelectedEditableDOM: null, + previousHoveredTargetDOM: null, + previousEmptyBlockParents: [], + audienceMode: false, + }; }); test("should have outline", () => { + const visualBuilder = new VisualBuilder(); container.dispatchEvent(mouseClickEvent); expect(container.classList.contains("cslp-edit-mode")); + visualBuilder.destroy(); }); test("should have an overlay", () => { + const visualBuilder = new VisualBuilder(); container.dispatchEvent(mouseClickEvent); const overlay = document.querySelector(".visual-builder__overlay"); expect(overlay!.classList.contains("visible")); + visualBuilder.destroy(); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { + const visualBuilder = new VisualBuilder(); container.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" ); expect(toolbar).toBeInTheDocument(); + visualBuilder.destroy(); }); - test("should have a multi field toolbar with button group", async () => { + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { await waitFor(() => { container.dispatchEvent(mouseClickEvent); }); @@ -474,94 +626,82 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(buttonGroup).toBeInTheDocument(); }); - test("should have 2 add instance buttons", async () => { - container.children[0].dispatchEvent(mouseClickEvent); - - // need to poll and check since the DOM updates are async - const checkCondition = async () => { - const addInstanceButtons = document.querySelectorAll( - ".visual-builder__add-button" - ); - return addInstanceButtons.length === 2; - }; - - const pollingInterval = 100; - const timeout = 200; + test.skip("should have 2 add instance buttons", async () => { + const visualBuilder = new VisualBuilder(); + await sleep(0); - let elapsedTime = 0; - while (elapsedTime < timeout) { - if (await checkCondition()) { - break; - } - await new Promise((resolve) => - setTimeout(resolve, pollingInterval) - ); - elapsedTime += pollingInterval; - } + fireEvent.click(container.children[0]); + // container.children[0].dispatchEvent(mouseClickEvent); + await sleep(0); - if (elapsedTime >= timeout) { - throw new Error( - "Timeout: Condition not met within the specified timeout." + waitFor(async () => { + const addInstanceButtons = await screen.findAllByTestId( + "visual-builder-add-instance-button" ); - } - - const addInstanceButtons = document.querySelectorAll( - ".visual-builder__add-button" - ); - - expect(addInstanceButtons.length).toBe(2); + expect(addInstanceButtons.length).toBe(2); + }); + visualBuilder.destroy(); }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; + const visualBuilder = new VisualBuilder(); + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - expect(container).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); + visualBuilder.destroy(); }); test("container should not contain a contenteditable attribute but the children can", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; + const visualBuilder = new VisualBuilder(); + await sleep(0); + // container.dispatchEvent(mouseClickEvent); + fireEvent.click(container); + await sleep(0); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).not.toHaveAttribute("contenteditable"); }); - expect(container).not.toHaveAttribute("contenteditable"); - + fireEvent.click(container.children[0]); + // container.children[0].dispatchEvent(mouseClickEvent); + await sleep(0); await waitFor(() => { - container.children[0].dispatchEvent(mouseClickEvent); + expect(container.children[0]).toHaveAttribute( + "contenteditable" + ); }); - expect(container.children[0]).toHaveAttribute("contenteditable"); - + fireEvent.click(container.children[1]); + // container.children[1].dispatchEvent(mouseClickEvent); + await sleep(0); await waitFor(() => { - container.children[1].dispatchEvent(mouseClickEvent); + expect(container.children[1]).toHaveAttribute( + "contenteditable" + ); }); - expect(container.children[1]).toHaveAttribute("contenteditable"); + visualBuilder.destroy(); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; + const visualBuilder = new VisualBuilder(); + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); }); - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(container), - } - ); + visualBuilder.destroy(); }); }); @@ -594,7 +734,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { htmlRteField.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -603,75 +743,31 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - htmlRteField; - + htmlRteField.dispatchEvent(mouseClickEvent); await waitFor(() => { - htmlRteField.dispatchEvent(mouseClickEvent); + expect(htmlRteField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(htmlRteField).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); test("should not contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - htmlRteField; - + htmlRteField.dispatchEvent(mouseClickEvent); await waitFor(() => { - htmlRteField.dispatchEvent(mouseClickEvent); + expect(htmlRteField).not.toHaveAttribute("contenteditable"); }); - - expect(htmlRteField).not.toHaveAttribute("contenteditable"); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - htmlRteField; - - await waitFor(() => { - htmlRteField.dispatchEvent(mouseClickEvent); - }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(htmlRteField), - } - ); - }); - - test("should send a open quick form message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - htmlRteField; - + htmlRteField.dispatchEvent(mouseClickEvent); await waitFor(() => { - htmlRteField.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(htmlRteField), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.OPEN_QUICK_FORM, - { - fieldMetadata: { - entry_uid: "bltapikey", - content_type_uid: "all_fields", - locale: "en-us", - cslpValue: - "all_fields.bltapikey.en-us.rich_text_editor", - fieldPath: "rich_text_editor", - fieldPathWithIndex: "rich_text_editor", - multipleFieldMetadata: { - parentDetails: null, - index: -1, - }, - instance: { - fieldPathWithIndex: "rich_text_editor", - }, - }, - cslpData: "all_fields.bltapikey.en-us.rich_text_editor", - } - ); }); }); @@ -721,15 +817,19 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", async () => { container.dispatchEvent(mouseClickEvent); - const toolbar = document.querySelector( - ".visual-builder__focused-toolbar__field-label-wrapper__current-field" - ); - expect(toolbar).toBeInTheDocument(); + + await waitFor(() => { + const toolbar = document.querySelector( + ".visual-builder__focused-toolbar__field-label-wrapper__current-field" + ); + expect(toolbar).toBeInTheDocument(); + }); }); - test("should have a multi field toolbar with button group", async () => { + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { await waitFor(() => { container.dispatchEvent(mouseClickEvent); }); @@ -746,98 +846,74 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(buttonGroup).toBeInTheDocument(); }); - test("should have 2 add instance buttons", async () => { - container.children[0].dispatchEvent(mouseClickEvent); - - // need to poll and check since the DOM updates are async - const checkCondition = async () => { - const addInstanceButtons = document.querySelectorAll( - ".visual-builder__add-button" - ); - return addInstanceButtons.length === 2; - }; - - const pollingInterval = 100; - const timeout = 200; + test.skip("should have 2 add instance buttons", async () => { + // const visualBuilder = new VisualBuilder(); + // await sleep(0); - let elapsedTime = 0; - while (elapsedTime < timeout) { - if (await checkCondition()) { - break; - } - await new Promise((resolve) => - setTimeout(resolve, pollingInterval) - ); - elapsedTime += pollingInterval; - } + fireEvent.click(container.children[0]); + // container.children[0].dispatchEvent(mouseClickEvent); + await sleep(0); - if (elapsedTime >= timeout) { - throw new Error( - "Timeout: Condition not met within the specified timeout." + waitFor(async () => { + const addInstanceButtons = await screen.findAllByTestId( + "visual-builder-add-instance-button" ); - } - - const addInstanceButtons = document.querySelectorAll( - ".visual-builder__add-button" - ); - - expect(addInstanceButtons.length).toBe(2); + expect(addInstanceButtons.length).toBe(2); + }); + // visualBuilder.destroy(); }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(container).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); test("both container and its children should not contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; + // const visualBuilder = new VisualBuilder(); + // await sleep(0); + // container.dispatchEvent(mouseClickEvent); + fireEvent.click(container); + await sleep(0); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).not.toHaveAttribute("contenteditable"); }); - expect(container).not.toHaveAttribute("contenteditable"); - + fireEvent.click(container.children[0]); + // container.children[0].dispatchEvent(mouseClickEvent); + await sleep(0); await waitFor(() => { - container.children[0].dispatchEvent(mouseClickEvent); + expect(container.children[0]).not.toHaveAttribute( + "contenteditable" + ); }); - expect(container.children[0]).not.toHaveAttribute( - "contenteditable" - ); - + fireEvent.click(container.children[1]); + // container.children[1].dispatchEvent(mouseClickEvent); + await sleep(0); await waitFor(() => { - container.children[1].dispatchEvent(mouseClickEvent); + expect(container.children[1]).not.toHaveAttribute( + "contenteditable" + ); }); - expect(container.children[1]).not.toHaveAttribute( - "contenteditable" - ); + // visualBuilder.destroy(); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(container), - } - ); }); }); @@ -870,7 +946,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { jsonRteField.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -879,43 +955,31 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - jsonRteField; - + jsonRteField.dispatchEvent(mouseClickEvent); await waitFor(() => { - jsonRteField.dispatchEvent(mouseClickEvent); + expect(jsonRteField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(jsonRteField).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); test("should not contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - jsonRteField; - + jsonRteField.dispatchEvent(mouseClickEvent); await waitFor(() => { - jsonRteField.dispatchEvent(mouseClickEvent); + expect(jsonRteField).not.toHaveAttribute("contenteditable"); }); - - expect(jsonRteField).not.toHaveAttribute("contenteditable"); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - jsonRteField; - + jsonRteField.dispatchEvent(mouseClickEvent); await waitFor(() => { - jsonRteField.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(jsonRteField), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(jsonRteField), - } - ); }); }); @@ -966,7 +1030,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { container.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -974,7 +1038,8 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(toolbar).toBeInTheDocument(); }); - test("should have a multi field toolbar with button group", async () => { + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { await waitFor(() => { container.dispatchEvent(mouseClickEvent); }); @@ -991,98 +1056,76 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(buttonGroup).toBeInTheDocument(); }); - test("should have 2 add instance buttons", async () => { - container.children[0].dispatchEvent(mouseClickEvent); - - // need to poll and check since the DOM updates are async - const checkCondition = async () => { - const addInstanceButtons = document.querySelectorAll( - ".visual-builder__add-button" - ); - return addInstanceButtons.length === 2; - }; - - const pollingInterval = 100; - const timeout = 200; + // TODO decide if test is actually testing anything + // it seems redundant + test.skip("should have 2 add instance buttons", async () => { + // const visualBuilder = new VisualBuilder(); + // await sleep(0); - let elapsedTime = 0; - while (elapsedTime < timeout) { - if (await checkCondition()) { - break; - } - await new Promise((resolve) => - setTimeout(resolve, pollingInterval) - ); - elapsedTime += pollingInterval; - } + fireEvent.click(container.children[0]); + // container.children[0].dispatchEvent(mouseClickEvent); + await sleep(0); - if (elapsedTime >= timeout) { - throw new Error( - "Timeout: Condition not met within the specified timeout." + waitFor(async () => { + const addInstanceButtons = await screen.findAllByTestId( + "visual-builder-add-instance-button" ); - } - - const addInstanceButtons = document.querySelectorAll( - ".visual-builder__add-button" - ); - - expect(addInstanceButtons.length).toBe(2); + expect(addInstanceButtons.length).toBe(2); + }); + // visualBuilder.destroy(); }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(container).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); test("both container and its children should not contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; + // const visualBuilder = new VisualBuilder(); + // await sleep(0); + // container.dispatchEvent(mouseClickEvent); + fireEvent.click(container); + await sleep(0); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).not.toHaveAttribute("contenteditable"); }); - expect(container).not.toHaveAttribute("contenteditable"); - + fireEvent.click(container.children[0]); + // container.children[0].dispatchEvent(mouseClickEvent); + await sleep(0); await waitFor(() => { - container.children[0].dispatchEvent(mouseClickEvent); + expect(container.children[0]).not.toHaveAttribute( + "contenteditable" + ); }); - expect(container.children[0]).not.toHaveAttribute( - "contenteditable" - ); - + fireEvent.click(container.children[1]); + // container.children[1].dispatchEvent(mouseClickEvent); + await sleep(0); await waitFor(() => { - container.children[1].dispatchEvent(mouseClickEvent); + expect(container.children[1]).not.toHaveAttribute( + "contenteditable" + ); }); - expect(container.children[1]).not.toHaveAttribute( - "contenteditable" - ); + // visualBuilder.destroy(); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(container), - } - ); }); }); @@ -1117,83 +1160,40 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { markdownField.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" ); - expect(toolbar).toBeInTheDocument(); - }); - - test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - markdownField; - - await waitFor(() => { - markdownField.dispatchEvent(mouseClickEvent); - }); - - expect(markdownField).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); - }); - - test("should not contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - markdownField; + expect(toolbar).toBeInTheDocument(); + }); + test("should contain a data-cslp-field-type attribute", async () => { + markdownField.dispatchEvent(mouseClickEvent); await waitFor(() => { - markdownField.dispatchEvent(mouseClickEvent); + expect(markdownField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(markdownField).not.toHaveAttribute("contenteditable"); }); - test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - markdownField; - + test("should not contain a contenteditable attribute", async () => { + markdownField.dispatchEvent(mouseClickEvent); await waitFor(() => { - markdownField.dispatchEvent(mouseClickEvent); + expect(markdownField).not.toHaveAttribute("contenteditable"); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(markdownField), - } - ); }); - test("should send a open quick form message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - markdownField; - + test("should send a focus field message to parent", async () => { + markdownField.dispatchEvent(mouseClickEvent); await waitFor(() => { - markdownField.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(markdownField), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.OPEN_QUICK_FORM, - { - fieldMetadata: { - entry_uid: "bltapikey", - content_type_uid: "all_fields", - locale: "en-us", - cslpValue: "all_fields.bltapikey.en-us.markdown", - fieldPath: "markdown", - fieldPathWithIndex: "markdown", - multipleFieldMetadata: { - parentDetails: null, - index: -1, - }, - instance: { - fieldPathWithIndex: "markdown", - }, - }, - cslpData: "all_fields.bltapikey.en-us.markdown", - } - ); }); }); @@ -1244,7 +1244,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { container.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -1252,10 +1252,9 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(toolbar).toBeInTheDocument(); }); - test("should have a multi field toolbar with button group", async () => { - await waitFor(() => { - container.dispatchEvent(mouseClickEvent); - }); + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { + await waitFor(() => {}); const multiFieldToolbar = document.querySelector( ".visual-builder__focused-toolbar__multiple-field-toolbar" @@ -1269,7 +1268,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(buttonGroup).toBeInTheDocument(); }); - test("should have 2 add instance buttons", async () => { + test.skip("should have 2 add instance buttons", async () => { container.children[0].dispatchEvent(mouseClickEvent); // need to poll and check since the DOM updates are async @@ -1308,59 +1307,56 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(container).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); test("both container and its children should not contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; + // const visualBuilder = new VisualBuilder(); + // await sleep(0); + // container.dispatchEvent(mouseClickEvent); + fireEvent.click(container); + await sleep(0); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).not.toHaveAttribute("contenteditable"); }); - expect(container).not.toHaveAttribute("contenteditable"); - + fireEvent.click(container.children[0]); + // container.children[0].dispatchEvent(mouseClickEvent); + await sleep(0); await waitFor(() => { - container.children[0].dispatchEvent(mouseClickEvent); + expect(container.children[0]).not.toHaveAttribute( + "contenteditable" + ); }); - expect(container.children[0]).not.toHaveAttribute( - "contenteditable" - ); - + fireEvent.click(container.children[1]); + // container.children[1].dispatchEvent(mouseClickEvent); + await sleep(0); await waitFor(() => { - container.children[1].dispatchEvent(mouseClickEvent); + expect(container.children[1]).not.toHaveAttribute( + "contenteditable" + ); }); - expect(container.children[1]).not.toHaveAttribute( - "contenteditable" - ); + // visualBuilder.destroy(); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(container), - } - ); }); }); @@ -1394,7 +1390,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { selectField.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -1403,43 +1399,31 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - selectField; - + selectField.dispatchEvent(mouseClickEvent); await waitFor(() => { - selectField.dispatchEvent(mouseClickEvent); + expect(selectField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(selectField).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); - test("should contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - selectField; - + test("should not contain a contenteditable attribute", async () => { + selectField.dispatchEvent(mouseClickEvent); await waitFor(() => { - selectField.dispatchEvent(mouseClickEvent); + expect(selectField).not.toHaveAttribute("contenteditable"); }); - - expect(selectField).toHaveAttribute("contenteditable"); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - selectField; - + selectField.dispatchEvent(mouseClickEvent); await waitFor(() => { - selectField.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(selectField), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(selectField), - } - ); }); }); @@ -1490,7 +1474,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { container.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -1498,115 +1482,57 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(toolbar).toBeInTheDocument(); }); - test("should have a multi field toolbar with button group", async () => { - await waitFor(() => { - container.dispatchEvent(mouseClickEvent); - }); - - const multiFieldToolbar = document.querySelector( - ".visual-builder__focused-toolbar__multiple-field-toolbar" - ); - - const buttonGroup = document.querySelector( - ".visual-builder__focused-toolbar__button-group" - ); - - expect(multiFieldToolbar).toBeInTheDocument(); - expect(buttonGroup).toBeInTheDocument(); - }); - - test("should have 2 add instance buttons", async () => { - container.children[0].dispatchEvent(mouseClickEvent); - - // need to poll and check since the DOM updates are async - const checkCondition = async () => { - const addInstanceButtons = document.querySelectorAll( - ".visual-builder__add-button" - ); - return addInstanceButtons.length === 2; - }; - - const pollingInterval = 100; - const timeout = 200; - - let elapsedTime = 0; - while (elapsedTime < timeout) { - if (await checkCondition()) { - break; - } - await new Promise((resolve) => - setTimeout(resolve, pollingInterval) - ); - elapsedTime += pollingInterval; - } - - if (elapsedTime >= timeout) { - throw new Error( - "Timeout: Condition not met within the specified timeout." - ); - } - - const addInstanceButtons = document.querySelectorAll( - ".visual-builder__add-button" - ); - - expect(addInstanceButtons.length).toBe(2); - }); - test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(container).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); test("both container and its children should not contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; + // const visualBuilder = new VisualBuilder(); + // await sleep(0); + // container.dispatchEvent(mouseClickEvent); + fireEvent.click(container); + await sleep(0); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).not.toHaveAttribute("contenteditable"); }); - expect(container).not.toHaveAttribute("contenteditable"); - + fireEvent.click(container.children[0]); + // container.children[0].dispatchEvent(mouseClickEvent); + await sleep(0); await waitFor(() => { - container.children[0].dispatchEvent(mouseClickEvent); + expect(container.children[0]).not.toHaveAttribute( + "contenteditable" + ); }); - expect(container.children[0]).not.toHaveAttribute( - "contenteditable" - ); - + fireEvent.click(container.children[1]); + // container.children[1].dispatchEvent(mouseClickEvent); + await sleep(0); await waitFor(() => { - container.children[1].dispatchEvent(mouseClickEvent); + expect(container.children[1]).not.toHaveAttribute( + "contenteditable" + ); }); - expect(container.children[1]).not.toHaveAttribute( - "contenteditable" - ); + // visualBuilder.destroy(); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(container), - } - ); }); }); @@ -1614,12 +1540,36 @@ describe.skip("When an element is clicked in visual builder mode", () => { let numberField: HTMLParagraphElement; let visualBuilder: VisualBuilder; + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + return Promise.resolve({ + fieldData: VALUES.number, + }); + } else if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES + ) { + return Promise.resolve({ + "all_fields.bltapikey.en-us.number": "Number", + }); + } + return Promise.resolve({}); + } + ); + }); + beforeEach(() => { numberField = document.createElement("p"); numberField.setAttribute( "data-cslp", "all_fields.bltapikey.en-us.number" ); + numberField.textContent = `${VALUES.number}`; document.body.appendChild(numberField); @@ -1641,7 +1591,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { numberField.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -1650,32 +1600,24 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - numberField; - + numberField.dispatchEvent(mouseClickEvent); await waitFor(() => { - numberField.dispatchEvent(mouseClickEvent); + expect(numberField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(numberField).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - numberField; - + numberField.dispatchEvent(mouseClickEvent); await waitFor(() => { - numberField.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(numberField), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(numberField), - } - ); }); }); @@ -1685,6 +1627,27 @@ describe.skip("When an element is clicked in visual builder mode", () => { let secondNumberField: HTMLParagraphElement; let visualBuilder: VisualBuilder; + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string, args) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + const values: Record = { + number_multiple_: ["9", "12"], + "number_multiple_.0": "9", + "number_multiple_.1": "12", + }; + return Promise.resolve({ + fieldData: values[args.entryPath], + }); + } + return Promise.resolve({}); + } + ); + }); + beforeEach(() => { container = document.createElement("div"); container.setAttribute( @@ -1693,12 +1656,14 @@ describe.skip("When an element is clicked in visual builder mode", () => { ); firstNumberField = document.createElement("p"); + firstNumberField.textContent = "9"; firstNumberField.setAttribute( "data-cslp", "all_fields.bltapikey.en-us.number_multiple_.0" ); secondNumberField = document.createElement("p"); + secondNumberField.textContent = "12"; secondNumberField.setAttribute( "data-cslp", "all_fields.bltapikey.en-us.number_multiple_.1" @@ -1726,7 +1691,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { container.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -1734,7 +1699,8 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(toolbar).toBeInTheDocument(); }); - test("should have a multi field toolbar with button group", async () => { + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { await waitFor(() => { container.dispatchEvent(mouseClickEvent); }); @@ -1751,7 +1717,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(buttonGroup).toBeInTheDocument(); }); - test("should have 2 add instance buttons", async () => { + test.skip("should have 2 add instance buttons", async () => { container.children[0].dispatchEvent(mouseClickEvent); // need to poll and check since the DOM updates are async @@ -1790,55 +1756,51 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(container).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); test("container should not contain a contenteditable attribute but the children can", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; + fireEvent.click(container); + await sleep(0); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).not.toHaveAttribute("contenteditable"); }); - expect(container).not.toHaveAttribute("contenteditable"); + fireEvent.click(container.children[0]); + await sleep(0); await waitFor(() => { - container.children[0].dispatchEvent(mouseClickEvent); + expect(container.children[0]).toHaveAttribute( + "contenteditable" + ); }); - expect(container.children[0]).toHaveAttribute("contenteditable"); + fireEvent.click(container.children[1]); + await sleep(0); await waitFor(() => { - container.children[1].dispatchEvent(mouseClickEvent); + expect(container.children[1]).toHaveAttribute( + "contenteditable" + ); }); - - expect(container.children[1]).toHaveAttribute("contenteditable"); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(container), - } - ); }); }); @@ -1850,7 +1812,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { booleanField = document.createElement("p"); booleanField.setAttribute( "data-cslp", - "all_fields.bltapikey.en-us.single_line" + "all_fields.bltapikey.en-us.boolean" ); document.body.appendChild(booleanField); @@ -1872,7 +1834,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { booleanField.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -1881,43 +1843,31 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - booleanField; - + booleanField.dispatchEvent(mouseClickEvent); await waitFor(() => { - booleanField.dispatchEvent(mouseClickEvent); + expect(booleanField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(booleanField).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); - test("should contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - booleanField; - + test("should not contain a contenteditable attribute", async () => { + booleanField.dispatchEvent(mouseClickEvent); await waitFor(() => { - booleanField.dispatchEvent(mouseClickEvent); + expect(booleanField).not.toHaveAttribute("contenteditable"); }); - - expect(booleanField).toHaveAttribute("contenteditable"); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - booleanField; - + booleanField.dispatchEvent(mouseClickEvent); await waitFor(() => { - booleanField.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(booleanField), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(booleanField), - } - ); }); }); @@ -1959,7 +1909,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { fileField.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -1967,7 +1917,8 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(toolbar).toBeInTheDocument(); }); - test("should not have a multi field toolbar with button group", async () => { + // TODO should be a test of FieldToolbar + test.skip("should not have a multi field toolbar with button group", async () => { await waitFor(() => { fileField.dispatchEvent(mouseClickEvent); }); @@ -1984,7 +1935,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(buttonGroup).not.toBeInTheDocument(); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { fileField.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -1992,7 +1943,8 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(toolbar).toBeInTheDocument(); }); - test("should have a replace asset button", async () => { + // TODO should be a test of FieldToolbar + test.skip("should have a replace asset button", async () => { await waitFor(() => { fileField.dispatchEvent(mouseClickEvent); }); @@ -2004,43 +1956,31 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - fileField; - + fileField.dispatchEvent(mouseClickEvent); await waitFor(() => { - fileField.dispatchEvent(mouseClickEvent); + expect(fileField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(fileField).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); test("should not contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - fileField; - + fileField.dispatchEvent(mouseClickEvent); await waitFor(() => { - fileField.dispatchEvent(mouseClickEvent); + expect(fileField).not.toHaveAttribute("contenteditable"); }); - - expect(fileField).not.toHaveAttribute("contenteditable"); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - fileField; - + fileField.dispatchEvent(mouseClickEvent); await waitFor(() => { - fileField.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(fileField), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(fileField), - } - ); }); }); @@ -2107,7 +2047,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { container.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -2115,7 +2055,8 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(toolbar).toBeInTheDocument(); }); - test("children should have a replace asset button", async () => { + // TODO should be a test of FieldToolbar + test.skip("children should have a replace asset button", async () => { const child1 = document.querySelector( "[data-cslp='all_fields.bltapikey.en-us.file_multiple_.0.url']" ); @@ -2144,7 +2085,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(replaceButton).toBeInTheDocument(); }); - test("should have a multi field toolbar with button group", async () => { + test.skip("should have a multi field toolbar with button group", async () => { await waitFor(() => { container.dispatchEvent(mouseClickEvent); }); @@ -2161,7 +2102,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(buttonGroup).toBeInTheDocument(); }); - test("should have 2 add instance buttons", async () => { + test.skip("should have 2 add instance buttons", async () => { container.children[0].dispatchEvent(mouseClickEvent); // need to poll and check since the DOM updates are async @@ -2200,59 +2141,56 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(container).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); test("both container and its children should not contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; + // const visualBuilder = new VisualBuilder(); + // await sleep(0); + // container.dispatchEvent(mouseClickEvent); + fireEvent.click(container); + await sleep(0); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).not.toHaveAttribute("contenteditable"); }); - expect(container).not.toHaveAttribute("contenteditable"); - + fireEvent.click(container.children[0]); + // container.children[0].dispatchEvent(mouseClickEvent); + await sleep(0); await waitFor(() => { - container.children[0].dispatchEvent(mouseClickEvent); + expect(container.children[0]).not.toHaveAttribute( + "contenteditable" + ); }); - expect(container.children[0]).not.toHaveAttribute( - "contenteditable" - ); - + fireEvent.click(container.children[1]); + // container.children[1].dispatchEvent(mouseClickEvent); + await sleep(0); await waitFor(() => { - container.children[1].dispatchEvent(mouseClickEvent); + expect(container.children[1]).not.toHaveAttribute( + "contenteditable" + ); }); - expect(container.children[1]).not.toHaveAttribute( - "contenteditable" - ); + // visualBuilder.destroy(); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(container), - } - ); }); }); @@ -2264,7 +2202,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { dateField = document.createElement("p"); dateField.setAttribute( "data-cslp", - "all_fields.bltapikey.en-us.single_line" + "all_fields.bltapikey.en-us.date" ); document.body.appendChild(dateField); @@ -2286,7 +2224,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { dateField.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -2295,43 +2233,31 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - dateField; - + dateField.dispatchEvent(mouseClickEvent); await waitFor(() => { - dateField.dispatchEvent(mouseClickEvent); + expect(dateField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(dateField).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); - test("should contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - dateField; - + test("should not contain a contenteditable attribute", async () => { + dateField.dispatchEvent(mouseClickEvent); await waitFor(() => { - dateField.dispatchEvent(mouseClickEvent); + expect(dateField).not.toHaveAttribute("contenteditable"); }); - - expect(dateField).toHaveAttribute("contenteditable"); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - dateField; - + dateField.dispatchEvent(mouseClickEvent); await waitFor(() => { - dateField.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(dateField), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(dateField), - } - ); }); }); @@ -2365,7 +2291,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { linkField.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -2373,24 +2299,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(toolbar).toBeInTheDocument(); }); - test("should not have a multi field toolbar with button group", async () => { - await waitFor(() => { - linkField.dispatchEvent(mouseClickEvent); - }); - - const multiFieldToolbar = document.querySelector( - ".visual-builder__focused-toolbar__multiple-field-toolbar" - ); - - const buttonGroup = document.querySelector( - ".visual-builder__focused-toolbar__button-group" - ); - - expect(multiFieldToolbar).not.toBeInTheDocument(); - expect(buttonGroup).not.toBeInTheDocument(); - }); - - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { linkField.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -2399,74 +2308,31 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - linkField; - + linkField.dispatchEvent(mouseClickEvent); await waitFor(() => { - linkField.dispatchEvent(mouseClickEvent); + expect(linkField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(linkField).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); test("should not contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - linkField; - + linkField.dispatchEvent(mouseClickEvent); await waitFor(() => { - linkField.dispatchEvent(mouseClickEvent); + expect(linkField).not.toHaveAttribute("contenteditable"); }); - - expect(linkField).not.toHaveAttribute("contenteditable"); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - linkField; - - await waitFor(() => { - linkField.dispatchEvent(mouseClickEvent); - }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(linkField), - } - ); - }); - - test("should send a open quick form message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - linkField; - + linkField.dispatchEvent(mouseClickEvent); await waitFor(() => { - linkField.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(linkField), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.OPEN_QUICK_FORM, - { - fieldMetadata: { - entry_uid: "bltapikey", - content_type_uid: "all_fields", - locale: "en-us", - cslpValue: "all_fields.bltapikey.en-us.link.href", - fieldPath: "link.href", - fieldPathWithIndex: "link.href", - multipleFieldMetadata: { - parentDetails: null, - index: -1, - }, - instance: { - fieldPathWithIndex: "link.href", - }, - }, - cslpData: "all_fields.bltapikey.en-us.link.href", - } - ); }); }); @@ -2518,7 +2384,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { container.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -2526,7 +2392,8 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(toolbar).toBeInTheDocument(); }); - test("should have a multi field toolbar with button group", async () => { + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { await waitFor(() => { container.dispatchEvent(mouseClickEvent); }); @@ -2543,7 +2410,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(buttonGroup).toBeInTheDocument(); }); - test("should have 2 add instance buttons", async () => { + test.skip("should have 2 add instance buttons", async () => { container.children[0].dispatchEvent(mouseClickEvent); // need to poll and check since the DOM updates are async @@ -2582,16 +2449,12 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(container).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); test("both container and its children should not contain a contenteditable attribute", async () => { @@ -2622,19 +2485,15 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(container), - } - ); }); }); @@ -2646,7 +2505,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { referenceField = document.createElement("p"); referenceField.setAttribute( "data-cslp", - "all_fields.bltapikey.en-us.single_line" + "all_fields.bltapikey.en-us.reference" ); document.body.appendChild(referenceField); @@ -2668,7 +2527,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { referenceField.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -2677,43 +2536,31 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - referenceField; - + referenceField.dispatchEvent(mouseClickEvent); await waitFor(() => { - referenceField.dispatchEvent(mouseClickEvent); + expect(referenceField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(referenceField).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); - test("should contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - referenceField; - + test("should not contain a contenteditable attribute", async () => { + referenceField.dispatchEvent(mouseClickEvent); await waitFor(() => { - referenceField.dispatchEvent(mouseClickEvent); + expect(referenceField).not.toHaveAttribute("contenteditable"); }); - - expect(referenceField).toHaveAttribute("contenteditable"); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - referenceField; - + referenceField.dispatchEvent(mouseClickEvent); await waitFor(() => { - referenceField.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(referenceField), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(referenceField), - } - ); }); }); @@ -2765,7 +2612,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { container.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -2773,7 +2620,8 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(toolbar).toBeInTheDocument(); }); - test("should have a multi field toolbar with button group", async () => { + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { await waitFor(() => { container.dispatchEvent(mouseClickEvent); }); @@ -2790,7 +2638,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(buttonGroup).toBeInTheDocument(); }); - test("should have 2 add instance buttons", async () => { + test.skip("should have 2 add instance buttons", async () => { container.children[0].dispatchEvent(mouseClickEvent); // need to poll and check since the DOM updates are async @@ -2829,16 +2677,12 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(container).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); test("both container and its children should not contain a contenteditable attribute", async () => { @@ -2869,19 +2713,15 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(container), - } - ); }); }); @@ -2894,7 +2734,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { groupField = document.createElement("p"); groupField.setAttribute( "data-cslp", - "all_fields.bltapikey.en-us.single_line" + "all_fields.bltapikey.en-us.group" ); document.body.appendChild(groupField); @@ -2917,7 +2757,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { groupField.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -2926,79 +2766,31 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - groupField; - + groupField.dispatchEvent(mouseClickEvent); await waitFor(() => { - groupField.dispatchEvent(mouseClickEvent); + expect(groupField).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(groupField).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); - test("should contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - groupField; - + test("should not contain a contenteditable attribute", async () => { + groupField.dispatchEvent(mouseClickEvent); await waitFor(() => { - groupField.dispatchEvent(mouseClickEvent); + expect(groupField).not.toHaveAttribute("contenteditable"); }); - - expect(groupField).toHaveAttribute("contenteditable"); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - groupField; - - await waitFor(() => { - groupField.dispatchEvent(mouseClickEvent); - }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(groupField), - } - ); - }); - - test("should send a open quick form message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - groupField; - + groupField.dispatchEvent(mouseClickEvent); await waitFor(() => { - groupField.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(groupField), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.OPEN_QUICK_FORM, - { - fieldMetadata: { - entry_uid: "bltapikey", - content_type_uid: "all_fields", - locale: "en-us", - cslpValue: - "all_fields.bltapikey.en-us.group_multiple_.0", - fieldPath: "group_multiple_", - fieldPathWithIndex: "group_multiple_", - multipleFieldMetadata: { - parentDetails: { - parentPath: "group_multiple_", - parentCslpValue: - "all_fields.bltapikey.en-us.group_multiple_", - }, - index: 0, - }, - instance: { - fieldPathWithIndex: "group_multiple_.0", - }, - }, - cslpData: "all_fields.bltapikey.en-us.group_multiple_.0", - } - ); }); }); @@ -3059,7 +2851,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(overlay!.classList.contains("visible")); }); - test("should have a field path dropdown", () => { + test.skip("should have a field path dropdown", () => { container.dispatchEvent(mouseClickEvent); const toolbar = document.querySelector( ".visual-builder__focused-toolbar__field-label-wrapper__current-field" @@ -3067,7 +2859,8 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(toolbar).toBeInTheDocument(); }); - test("should have a multi field toolbar with button group", async () => { + // TODO should be a test of FieldToolbar + test.skip("should have a multi field toolbar with button group", async () => { await waitFor(() => { container.dispatchEvent(mouseClickEvent); }); @@ -3084,7 +2877,7 @@ describe.skip("When an element is clicked in visual builder mode", () => { expect(buttonGroup).toBeInTheDocument(); }); - test("should have 2 add instance buttons", async () => { + test.skip("should have 2 add instance buttons", async () => { container.children[0].dispatchEvent(mouseClickEvent); // need to poll and check since the DOM updates are async @@ -3123,43 +2916,31 @@ describe.skip("When an element is clicked in visual builder mode", () => { }); test("should contain a data-cslp-field-type attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).toHaveAttribute( + VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY + ); }); - - expect(container).toHaveAttribute( - VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY - ); }); test("should not contain a contenteditable attribute", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(container).not.toHaveAttribute("contenteditable"); }); - - expect(container).not.toHaveAttribute("contenteditable"); }); test("should send a focus field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - container; - + container.dispatchEvent(mouseClickEvent); await waitFor(() => { - container.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toBeCalledWith( + VisualBuilderPostMessageEvents.FOCUS_FIELD, + { + DOMEditStack: getDOMEditStack(container), + } + ); }); - - expect(visualBuilderPostMessage?.send).toBeCalledWith( - VisualBuilderPostMessageEvents.FOCUS_FIELD, - { - DOMEditStack: getDOMEditStack(container), - } - ); }); }); }); diff --git a/src/visualBuilder/__test__/visualBuilderHover.test.ts b/src/visualBuilder/__test__/visualBuilderHover.test-backup.ts similarity index 99% rename from src/visualBuilder/__test__/visualBuilderHover.test.ts rename to src/visualBuilder/__test__/visualBuilderHover.test-backup.ts index 67b6e8e1..6dd98e08 100644 --- a/src/visualBuilder/__test__/visualBuilderHover.test.ts +++ b/src/visualBuilder/__test__/visualBuilderHover.test-backup.ts @@ -259,7 +259,7 @@ describe("When an element is hovered in visual builder mode", () => { }); }); - describe("single line field (multiple)", () => { + describe.only("single line field (multiple)", () => { let container: HTMLDivElement; let firstSingleLineField: HTMLParagraphElement; let secondSingleLineField: HTMLParagraphElement; @@ -1488,7 +1488,7 @@ describe("When an element is hovered in visual builder mode", () => { }); }); - describe("number field", () => { + describe.only("number field", () => { let numberField: HTMLParagraphElement; let visualBuilder: VisualBuilder; diff --git a/src/visualBuilder/__test__/visualBuilderInput.test.ts b/src/visualBuilder/__test__/visualBuilderInput.test.tsx similarity index 51% rename from src/visualBuilder/__test__/visualBuilderInput.test.ts rename to src/visualBuilder/__test__/visualBuilderInput.test.tsx index a4049caf..a5b167f6 100644 --- a/src/visualBuilder/__test__/visualBuilderInput.test.ts +++ b/src/visualBuilder/__test__/visualBuilderInput.test.tsx @@ -1,11 +1,13 @@ -import { act, fireEvent, waitFor } from "@testing-library/preact"; +import { fireEvent, waitFor } from "@testing-library/preact"; import Config from "../../configManager/configManager"; -import { VisualBuilder } from "../index"; import { FieldSchemaMap } from "../utils/fieldSchemaMap"; import { getFieldSchemaMap } from "../../__test__/data/fieldSchemaMap"; import visualBuilderPostMessage from "../utils/visualBuilderPostMessage"; - import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types"; +import { sleep } from "../../__test__/utils"; +import { Mock } from "vitest"; +import { VisualBuilder } from "../index"; +import userEvent from "@testing-library/user-event"; global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), @@ -33,6 +35,22 @@ vi.mock("../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../components/FieldToolbar", () => { + return { + default: () => { + return
Field Toolbar
; + }, + }; +}); + +vi.mock("../components/fieldLabelWrapper", () => { + return { + default: () => { + return
Field Label
; + }, + }; +}); + describe("When an inline element is edited in visual builder mode", () => { let mouseClickEvent: Event; @@ -61,17 +79,42 @@ describe("When an inline element is edited in visual builder mode", () => { Config.reset(); }); - describe.only("single line field", () => { + describe("single line field", () => { let singleLineField: HTMLParagraphElement; let visualBuilder: VisualBuilder; let overlayWrapper: HTMLDivElement; + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + return Promise.resolve({ + fieldData: "Hello world", + }); + } else if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES + ) { + return Promise.resolve({ + "all_fields.bltapikey.en-us.single_line": + "Single Line", + }); + } + return Promise.resolve({}); + } + ); + }); + beforeEach(() => { singleLineField = document.createElement("p"); singleLineField.setAttribute( "data-cslp", "all_fields.bltapikey.en-us.single_line" ); + singleLineField.textContent = "Hello world"; document.body.appendChild(singleLineField); visualBuilder = new VisualBuilder(); @@ -89,22 +132,15 @@ describe("When an inline element is edited in visual builder mode", () => { expect(singleLineField.classList.contains("cslp-edit-mode")); }); - /* test("should have an overlay", () => { + test("should have an overlay", () => { singleLineField.dispatchEvent(mouseClickEvent); const overlay = document.querySelector(".visual-builder__overlay"); expect(overlay!.classList.contains("visible")); }); test("should be able to edit inline text present", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - singleLineField; - - // singleLineField.dispatchEvent(mouseClickEvent); - // await waitFor(() => { - // }); - // await act(async () => { - // }) fireEvent.click(singleLineField); + await sleep(0); expect(singleLineField).toHaveAttribute("contenteditable"); @@ -117,47 +153,43 @@ describe("When an inline element is edited in visual builder mode", () => { }); test("should send a update field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - singleLineField; - + fireEvent.click(singleLineField); await waitFor(() => { - singleLineField.dispatchEvent(mouseClickEvent); + expect(singleLineField).toHaveAttribute("contenteditable"); }); - fireEvent.click(singleLineField); fireEvent.change(singleLineField, { target: { textContent: "test text" }, }); expect(singleLineField).toHaveTextContent("test text"); - await waitFor(() => { - overlayWrapper.dispatchEvent(mouseClickEvent); - }); fireEvent.click(overlayWrapper); - - expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith( - VisualBuilderPostMessageEvents.UPDATE_FIELD, - { - data: "", - fieldMetadata: { - entry_uid: "bltapikey", - content_type_uid: "all_fields", - locale: "en-us", - cslpValue: "all_fields.bltapikey.en-us.single_line", - fieldPath: "single_line", - fieldPathWithIndex: "single_line", - multipleFieldMetadata: { - parentDetails: null, - index: -1, - }, - instance: { + await waitFor(() => { + expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith( + VisualBuilderPostMessageEvents.UPDATE_FIELD, + { + data: "test text", + fieldMetadata: { + entry_uid: "bltapikey", + content_type_uid: "all_fields", + locale: "en-us", + cslpValue: "all_fields.bltapikey.en-us.single_line", + fieldPath: "single_line", fieldPathWithIndex: "single_line", + multipleFieldMetadata: { + parentDetails: null, + index: -1, + }, + instance: { + fieldPathWithIndex: "single_line", + }, + variant: undefined, }, - }, - } - ); - }) */ + } + ); + }); + }); }); describe("single line field (multiple)", () => { @@ -167,6 +199,27 @@ describe("When an inline element is edited in visual builder mode", () => { let visualBuilder: VisualBuilder; let overlayWrapper: HTMLDivElement; + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string, args) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + const values: Record = { + single_line_textbox_multiple_: ["Hello", "world"], + "single_line_textbox_multiple_.0": "Hello", + "single_line_textbox_multiple_.1": "world", + }; + return Promise.resolve({ + fieldData: values[args.entryPath], + }); + } + return Promise.resolve({}); + } + ); + }); + beforeEach(() => { container = document.createElement("div"); container.setAttribute( @@ -179,12 +232,14 @@ describe("When an inline element is edited in visual builder mode", () => { "data-cslp", "all_fields.bltapikey.en-us.single_line_textbox_multiple_.0" ); + firstSingleLineField.textContent = "Hello"; secondSingleLineField = document.createElement("p"); secondSingleLineField.setAttribute( "data-cslp", "all_fields.bltapikey.en-us.single_line_textbox_multiple_.1" ); + secondSingleLineField.textContent = "world"; container.appendChild(firstSingleLineField); container.appendChild(secondSingleLineField); @@ -212,15 +267,11 @@ describe("When an inline element is edited in visual builder mode", () => { }); test("should be able to edit individual inline text present", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - firstSingleLineField; - + firstSingleLineField.dispatchEvent(mouseClickEvent); await waitFor(() => { - firstSingleLineField.dispatchEvent(mouseClickEvent); + expect(firstSingleLineField).toHaveAttribute("contenteditable"); }); - expect(firstSingleLineField).toHaveAttribute("contenteditable"); - fireEvent.click(firstSingleLineField); fireEvent.change(firstSingleLineField, { target: { textContent: "test text" }, @@ -228,15 +279,13 @@ describe("When an inline element is edited in visual builder mode", () => { expect(firstSingleLineField).toHaveTextContent("test text"); - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - secondSingleLineField; - + secondSingleLineField.dispatchEvent(mouseClickEvent); await waitFor(() => { - secondSingleLineField.dispatchEvent(mouseClickEvent); + expect(secondSingleLineField).toHaveAttribute( + "contenteditable" + ); }); - expect(secondSingleLineField).toHaveAttribute("contenteditable"); - fireEvent.click(secondSingleLineField); fireEvent.change(secondSingleLineField, { target: { textContent: "test text" }, @@ -246,104 +295,45 @@ describe("When an inline element is edited in visual builder mode", () => { }); test("should send a update field message to parent when editing an individual element", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - firstSingleLineField; - + fireEvent.click(firstSingleLineField); await waitFor(() => { - firstSingleLineField.dispatchEvent(mouseClickEvent); + expect(firstSingleLineField).toHaveAttribute("contenteditable"); }); - - fireEvent.click(firstSingleLineField); fireEvent.change(firstSingleLineField, { target: { textContent: "test text 1" }, }); - expect(firstSingleLineField).toHaveTextContent("test text 1"); - await waitFor(() => { - overlayWrapper.dispatchEvent(mouseClickEvent); - }); - fireEvent.click(overlayWrapper); - - expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith( - VisualBuilderPostMessageEvents.UPDATE_FIELD, - { - data: "", - fieldMetadata: { - entry_uid: "bltapikey", - content_type_uid: "all_fields", - locale: "en-us", - cslpValue: - "all_fields.bltapikey.en-us.single_line_textbox_multiple_.0", - fieldPath: "single_line_textbox_multiple_", - fieldPathWithIndex: "single_line_textbox_multiple_", - multipleFieldMetadata: { - parentDetails: { - parentPath: "single_line_textbox_multiple_", - parentCslpValue: - "all_fields.bltapikey.en-us.single_line_textbox_multiple_", - }, - index: 0, - }, - instance: { - fieldPathWithIndex: - "single_line_textbox_multiple_.0", - }, - }, - } - ); - - await waitFor(() => { - overlayWrapper.dispatchEvent(mouseClickEvent); - }); fireEvent.click(overlayWrapper); - - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - secondSingleLineField; - - await waitFor(() => { - secondSingleLineField.dispatchEvent(mouseClickEvent); - }); - - fireEvent.click(secondSingleLineField); - fireEvent.change(secondSingleLineField, { - target: { textContent: "test text 2" }, - }); - - expect(secondSingleLineField).toHaveTextContent("test text 2"); - await waitFor(() => { - overlayWrapper.dispatchEvent(mouseClickEvent); - }); - fireEvent.click(overlayWrapper); - - expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith( - VisualBuilderPostMessageEvents.UPDATE_FIELD, - { - data: "", - fieldMetadata: { - entry_uid: "bltapikey", - content_type_uid: "all_fields", - locale: "en-us", - cslpValue: - "all_fields.bltapikey.en-us.single_line_textbox_multiple_.1", - fieldPath: "single_line_textbox_multiple_", - fieldPathWithIndex: "single_line_textbox_multiple_", - multipleFieldMetadata: { - parentDetails: { - parentPath: "single_line_textbox_multiple_", - parentCslpValue: - "all_fields.bltapikey.en-us.single_line_textbox_multiple_", + expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith( + VisualBuilderPostMessageEvents.UPDATE_FIELD, + { + data: "test text 1", + fieldMetadata: { + entry_uid: "bltapikey", + content_type_uid: "all_fields", + locale: "en-us", + cslpValue: + "all_fields.bltapikey.en-us.single_line_textbox_multiple_.0", + fieldPath: "single_line_textbox_multiple_", + fieldPathWithIndex: "single_line_textbox_multiple_", + multipleFieldMetadata: { + parentDetails: { + parentPath: "single_line_textbox_multiple_", + parentCslpValue: + "all_fields.bltapikey.en-us.single_line_textbox_multiple_", + }, + index: 0, + }, + instance: { + fieldPathWithIndex: + "single_line_textbox_multiple_.0", }, - index: 1, - }, - instance: { - fieldPathWithIndex: - "single_line_textbox_multiple_.1", }, - }, - } - ); + } + ); + }); }); }); @@ -352,12 +342,29 @@ describe("When an inline element is edited in visual builder mode", () => { let visualBuilder: VisualBuilder; let overlayWrapper: HTMLDivElement; + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string, args) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + return Promise.resolve({ + fieldData: "Hello world", + }); + } + return Promise.resolve({}); + } + ); + }); + beforeEach(() => { multiLineField = document.createElement("p"); multiLineField.setAttribute( "data-cslp", "all_fields.bltapikey.en-us.multi_line" ); + multiLineField.textContent = "Hello world"; document.body.appendChild(multiLineField); visualBuilder = new VisualBuilder(); overlayWrapper = document.querySelector( @@ -381,15 +388,11 @@ describe("When an inline element is edited in visual builder mode", () => { }); test("should be able to edit inline text present", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - multiLineField; - + multiLineField.dispatchEvent(mouseClickEvent); await waitFor(() => { - multiLineField.dispatchEvent(mouseClickEvent); + expect(multiLineField).toHaveAttribute("contenteditable"); }); - expect(multiLineField).toHaveAttribute("contenteditable"); - fireEvent.click(multiLineField); fireEvent.change(multiLineField, { target: { textContent: "test text" }, @@ -399,46 +402,41 @@ describe("When an inline element is edited in visual builder mode", () => { }); test("should send a update field message to parent", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - multiLineField; - + multiLineField.dispatchEvent(mouseClickEvent); await waitFor(() => { - multiLineField.dispatchEvent(mouseClickEvent); + expect(multiLineField).toHaveAttribute("contenteditable"); }); fireEvent.click(multiLineField); fireEvent.change(multiLineField, { target: { textContent: "test text" }, }); - expect(multiLineField).toHaveTextContent("test text"); + overlayWrapper.dispatchEvent(mouseClickEvent); await waitFor(() => { - overlayWrapper.dispatchEvent(mouseClickEvent); - }); - fireEvent.click(overlayWrapper); - - expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith( - VisualBuilderPostMessageEvents.UPDATE_FIELD, - { - data: "", - fieldMetadata: { - entry_uid: "bltapikey", - content_type_uid: "all_fields", - locale: "en-us", - cslpValue: "all_fields.bltapikey.en-us.multi_line", - fieldPath: "multi_line", - fieldPathWithIndex: "multi_line", - multipleFieldMetadata: { - parentDetails: null, - index: -1, - }, - instance: { + expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith( + VisualBuilderPostMessageEvents.UPDATE_FIELD, + { + data: "test text", + fieldMetadata: { + entry_uid: "bltapikey", + content_type_uid: "all_fields", + locale: "en-us", + cslpValue: "all_fields.bltapikey.en-us.multi_line", + fieldPath: "multi_line", fieldPathWithIndex: "multi_line", + multipleFieldMetadata: { + parentDetails: null, + index: -1, + }, + instance: { + fieldPathWithIndex: "multi_line", + }, }, - }, - } - ); + } + ); + }); }); }); @@ -449,24 +447,47 @@ describe("When an inline element is edited in visual builder mode", () => { let visualBuilder: VisualBuilder; let overlayWrapper: HTMLDivElement; + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string, args) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + const values: Record = { + multi_line_textbox_multiple_: ["Hello", "world"], + "multi_line_textbox_multiple_.0": "Hello", + "multi_line_textbox_multiple_.1": "world", + }; + return Promise.resolve({ + fieldData: values[args.entryPath], + }); + } + return Promise.resolve({}); + } + ); + }); + beforeEach(() => { container = document.createElement("div"); container.setAttribute( "data-cslp", - "all_fields.bltapikey.en-us.single_line_textbox_multiple_" + "all_fields.bltapikey.en-us.multi_line_textbox_multiple_" ); firstMultiLineField = document.createElement("p"); firstMultiLineField.setAttribute( "data-cslp", - "all_fields.bltapikey.en-us.single_line_textbox_multiple_.0" + "all_fields.bltapikey.en-us.multi_line_textbox_multiple_.0" ); + firstMultiLineField.textContent = "Hello"; secondMultiLineField = document.createElement("p"); secondMultiLineField.setAttribute( "data-cslp", - "all_fields.bltapikey.en-us.single_line_textbox_multiple_.1" + "all_fields.bltapikey.en-us.multi_line_textbox_multiple_.1" ); + secondMultiLineField.textContent = "world"; container.appendChild(firstMultiLineField); container.appendChild(secondMultiLineField); @@ -494,31 +515,22 @@ describe("When an inline element is edited in visual builder mode", () => { }); test("should be able to edit individual inline text present", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - firstMultiLineField; - + firstMultiLineField.dispatchEvent(mouseClickEvent); await waitFor(() => { - firstMultiLineField.dispatchEvent(mouseClickEvent); + expect(firstMultiLineField).toHaveAttribute("contenteditable"); }); - expect(firstMultiLineField).toHaveAttribute("contenteditable"); - fireEvent.click(firstMultiLineField); fireEvent.change(firstMultiLineField, { target: { textContent: "test text" }, }); - expect(firstMultiLineField).toHaveTextContent("test text"); - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - secondMultiLineField; - + secondMultiLineField.dispatchEvent(mouseClickEvent); await waitFor(() => { - secondMultiLineField.dispatchEvent(mouseClickEvent); + expect(secondMultiLineField).toHaveAttribute("contenteditable"); }); - expect(secondMultiLineField).toHaveAttribute("contenteditable"); - fireEvent.click(secondMultiLineField); fireEvent.change(secondMultiLineField, { target: { textContent: "test text" }, @@ -528,11 +540,9 @@ describe("When an inline element is edited in visual builder mode", () => { }); test("should send a update field message to parent when editing an individual element", async () => { - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - firstMultiLineField; - + firstMultiLineField.dispatchEvent(mouseClickEvent); await waitFor(() => { - firstMultiLineField.dispatchEvent(mouseClickEvent); + expect(firstMultiLineField).toHaveAttribute("contenteditable"); }); fireEvent.click(firstMultiLineField); @@ -542,91 +552,90 @@ describe("When an inline element is edited in visual builder mode", () => { expect(firstMultiLineField).toHaveTextContent("test text 1"); + overlayWrapper.dispatchEvent(mouseClickEvent); await waitFor(() => { - overlayWrapper.dispatchEvent(mouseClickEvent); + expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith( + VisualBuilderPostMessageEvents.UPDATE_FIELD, + { + data: "test text 1", + fieldMetadata: { + entry_uid: "bltapikey", + content_type_uid: "all_fields", + locale: "en-us", + cslpValue: + "all_fields.bltapikey.en-us.multi_line_textbox_multiple_.0", + fieldPath: "multi_line_textbox_multiple_", + fieldPathWithIndex: "multi_line_textbox_multiple_", + multipleFieldMetadata: { + parentDetails: { + parentPath: "multi_line_textbox_multiple_", + parentCslpValue: + "all_fields.bltapikey.en-us.multi_line_textbox_multiple_", + }, + index: 0, + }, + instance: { + fieldPathWithIndex: + "multi_line_textbox_multiple_.0", + }, + }, + } + ); }); + }); + }); - fireEvent.click(overlayWrapper); + describe.skip("number field", () => { + let numberField: HTMLParagraphElement; + let visualBuilder: VisualBuilder; + let overlayWrapper: HTMLDivElement; - expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith( - VisualBuilderPostMessageEvents.UPDATE_FIELD, - { - data: "", - fieldMetadata: { - entry_uid: "bltapikey", - content_type_uid: "all_fields", - locale: "en-us", - cslpValue: - "all_fields.bltapikey.en-us.single_line_textbox_multiple_.0", - fieldPath: "single_line_textbox_multiple_", - fieldPathWithIndex: "single_line_textbox_multiple_", - multipleFieldMetadata: { - parentDetails: { - parentPath: "single_line_textbox_multiple_", - parentCslpValue: - "all_fields.bltapikey.en-us.single_line_textbox_multiple_", - }, - index: 0, - }, - instance: { - fieldPathWithIndex: - "single_line_textbox_multiple_.0", - }, - }, + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string, args) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + return Promise.resolve({ + fieldData: "87", + }); + } + return Promise.resolve({}); } ); + }); - await waitFor(() => { - overlayWrapper.dispatchEvent(mouseClickEvent); - }); - fireEvent.click(overlayWrapper); + beforeEach(() => { + numberField = document.createElement("p"); + numberField.setAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.number" + ); + numberField.textContent = "87"; + document.body.appendChild(numberField); + visualBuilder = new VisualBuilder(); + overlayWrapper = document.querySelector( + ".visual-builder__overlay__wrapper" + ) as HTMLDivElement; + }); - VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = - secondMultiLineField; + afterEach(() => { + visualBuilder.destroy(); + }); + test("should only accept characters like a number input", async () => { + await userEvent.click(numberField); await waitFor(() => { - secondMultiLineField.dispatchEvent(mouseClickEvent); - }); - fireEvent.click(secondMultiLineField); - - fireEvent.change(secondMultiLineField, { - target: { textContent: "test text 2" }, + expect(numberField).toHaveAttribute("contenteditable"); }); - - expect(secondMultiLineField).toHaveTextContent("test text 2"); + await userEvent.keyboard("ab56c78e-h10"); await waitFor(() => { - overlayWrapper.dispatchEvent(mouseClickEvent); + // TODO cursor is placed at the start, instead of the end + // so typed content appears at the start + expect(numberField).toHaveTextContent(`5678e-1087`); }); - fireEvent.click(overlayWrapper); - - expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith( - VisualBuilderPostMessageEvents.UPDATE_FIELD, - { - data: "", - fieldMetadata: { - entry_uid: "bltapikey", - content_type_uid: "all_fields", - locale: "en-us", - cslpValue: - "all_fields.bltapikey.en-us.single_line_textbox_multiple_.1", - fieldPath: "single_line_textbox_multiple_", - fieldPathWithIndex: "single_line_textbox_multiple_", - multipleFieldMetadata: { - parentDetails: { - parentPath: "single_line_textbox_multiple_", - parentCslpValue: - "all_fields.bltapikey.en-us.single_line_textbox_multiple_", - }, - index: 1, - }, - instance: { - fieldPathWithIndex: - "single_line_textbox_multiple_.1", - }, - }, - } - ); }); }); }); diff --git a/src/visualBuilder/generators/__test__/generateToolbar.test.ts b/src/visualBuilder/generators/__test__/generateToolbar.test.ts index 94397200..975aa500 100644 --- a/src/visualBuilder/generators/__test__/generateToolbar.test.ts +++ b/src/visualBuilder/generators/__test__/generateToolbar.test.ts @@ -1,9 +1,15 @@ -import { fireEvent } from "@testing-library/preact"; +import { findByTestId, fireEvent, waitFor } from "@testing-library/preact"; import { getFieldSchemaMap } from "../../../__test__/data/fieldSchemaMap"; import { CslpData } from "../../../cslp/types/cslp.types"; import { VisualBuilderCslpEventDetails } from "../../types/visualBuilder.types"; import { FieldSchemaMap } from "../../utils/fieldSchemaMap"; import { appendFieldPathDropdown } from "../generateToolbar"; +import visualBuilderPostMessage from "../../utils/visualBuilderPostMessage"; +import { VisualBuilderPostMessageEvents } from "../../utils/types/postMessage.types"; +import { singleLineFieldSchema } from "../../../__test__/data/fields"; +import { sleep } from "../../../__test__/utils"; + +const MOCK_CSLP = "all_fields.bltapikey.en-us.single_line"; global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), @@ -17,6 +23,28 @@ describe("appendFieldPathDropdown", () => { let mockFieldMetadata: CslpData; let mockEventDetails: VisualBuilderCslpEventDetails; + beforeAll(() => { + if (!visualBuilderPostMessage) { + return; + } + vi.spyOn(visualBuilderPostMessage, "send").mockImplementation( + (eventName: string, args) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES + ) { + return Promise.resolve({ + [MOCK_CSLP]: "Single Line", + }); + } + return Promise.resolve({}); + } + ); + vi.spyOn(FieldSchemaMap, "getFieldSchema").mockImplementation(() => { + return Promise.resolve(singleLineFieldSchema); + }); + }); + beforeEach(() => { FieldSchemaMap.setFieldSchema( "all_fields", @@ -24,10 +52,7 @@ describe("appendFieldPathDropdown", () => { ); singleLineField = document.createElement("p"); - singleLineField.setAttribute( - "data-cslp", - "all_fields.bltapikey.en-us.single_line" - ); + singleLineField.setAttribute("data-cslp", MOCK_CSLP); document.body.appendChild(singleLineField); focusedToolbar = document.createElement("div"); @@ -37,10 +62,11 @@ describe("appendFieldPathDropdown", () => { "visual-builder__focused-toolbar" ); + /** @ts-expect-error - variant is an optional field */ mockFieldMetadata = { entry_uid: "", content_type_uid: "mockContentTypeUid", - cslpValue: "", + cslpValue: MOCK_CSLP, locale: "", fieldPath: "mockFieldPath", fieldPathWithIndex: "", @@ -73,14 +99,14 @@ describe("appendFieldPathDropdown", () => { ); fireEvent.click(focusedToolbar); - expect( - fieldLabelWrapper?.classList.contains( - "visual-builder__focused-toolbar__field-label-wrapper" - ) - ).toBeTruthy(); + expect(fieldLabelWrapper).toHaveClass( + "visual-builder__focused-toolbar__field-label-wrapper" + ); }); - test("should click the closest parent if focused toolbar is a parent field", () => { + // TODO I don't think this test is relevant anymore, + // but I don't exactly know what it's testing + test.skip("should click the closest parent if focused toolbar is a parent field", async () => { focusedToolbar.classList.add( "visual-builder__focused-toolbar__field-label-wrapper__parent-field" ); @@ -107,27 +133,27 @@ describe("appendFieldPathDropdown", () => { fireEvent.click(focusedToolbar); - expect(fieldLabelWrapper?.classList.toString()).toBe( + expect(fieldLabelWrapper?.classList.toString()).toMatch( "visual-builder__focused-toolbar__field-label-wrapper" ); expect(mockOnClick).toBeCalled(); }); - test("should close the field label dropdown if open", () => { + test("should close the field label dropdown if open", async () => { appendFieldPathDropdown(mockEventDetails, focusedToolbar); + await sleep(0); - const fieldLabelWrapper = focusedToolbar.querySelector( - ".visual-builder__focused-toolbar__field-label-wrapper" + const fieldLabelWrapper = await findByTestId( + focusedToolbar, + "visual-builder__focused-toolbar__field-label-wrapper" ); - fieldLabelWrapper?.classList.add("field-label-dropdown-open"); + fireEvent.click(fieldLabelWrapper); - fireEvent.click(focusedToolbar); - - expect(fieldLabelWrapper?.classList.toString()).toBe( - "visual-builder__focused-toolbar__field-label-wrapper" - ); + await waitFor(() => { + expect(fieldLabelWrapper).toHaveClass("field-label-dropdown-open"); + }); }); test("should open the field label dropdown if closed", () => { @@ -141,7 +167,7 @@ describe("appendFieldPathDropdown", () => { fieldLabelWrapper?.classList.contains( "visual-builder__focused-toolbar__field-label-wrapper" ) - ).toBeTruthy(); + ).toBe(true); fireEvent.click(focusedToolbar); diff --git a/src/visualBuilder/generators/generateToolbar.tsx b/src/visualBuilder/generators/generateToolbar.tsx index 93529948..15181305 100644 --- a/src/visualBuilder/generators/generateToolbar.tsx +++ b/src/visualBuilder/generators/generateToolbar.tsx @@ -28,7 +28,11 @@ export function appendFieldToolbar( eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement ): void { - if(focusedToolbarElement.querySelector(".visual-builder__focused-toolbar__multiple-field-toolbar")) + if ( + focusedToolbarElement.querySelector( + ".visual-builder__focused-toolbar__multiple-field-toolbar" + ) + ) return; const { editableElement, fieldMetadata } = eventDetails; const wrapper = document.createDocumentFragment(); diff --git a/src/visualBuilder/index.ts b/src/visualBuilder/index.ts index a5424713..d8783c34 100644 --- a/src/visualBuilder/index.ts +++ b/src/visualBuilder/index.ts @@ -78,7 +78,7 @@ export class VisualBuilder { const previousSelectedEditableDOM = VisualBuilder.VisualBuilderGlobalState.value .previousSelectedEditableDOM; - updateHighlightedCommentIconPosition(); // + updateHighlightedCommentIconPosition(); if (previousSelectedEditableDOM) { this.handlePositionChange( previousSelectedEditableDOM as HTMLElement @@ -149,12 +149,10 @@ export class VisualBuilder { if (!fieldSchema) { return; } - const { isDisabled } = isFieldDisabled(fieldSchema, - { - editableElement, - fieldMetadata - } - ); + const { isDisabled } = isFieldDisabled(fieldSchema, { + editableElement, + fieldMetadata, + }); if (isDisabled) { addFocusOverlay( editableElement, @@ -232,7 +230,7 @@ export class VisualBuilder { visualBuilderPostMessage ?.send("init", { isSSR: config.ssr, - href: window.location.href + href: window.location.href, }) .then((data) => { const { @@ -263,7 +261,7 @@ export class VisualBuilder { resizeObserver: this.resizeObserver, }); useScrollToField(); - useHighlightCommentIcon() + useHighlightCommentIcon(); this.mutationObserver.observe(document.body, { childList: true, subtree: true, @@ -297,7 +295,7 @@ export class VisualBuilder { // TODO: write test cases destroy = (): void => { window.removeEventListener("resize", this.resizeEventHandler); - window.removeEventListener("scroll", this.scrollEventHandler) + window.removeEventListener("scroll", this.scrollEventHandler); removeEventListeners({ overlayWrapper: this.overlayWrapper, visualBuilderContainer: this.visualBuilderContainer, diff --git a/src/visualBuilder/listeners/mouseClick.ts b/src/visualBuilder/listeners/mouseClick.ts index 206d455e..826ed7e8 100644 --- a/src/visualBuilder/listeners/mouseClick.ts +++ b/src/visualBuilder/listeners/mouseClick.ts @@ -76,12 +76,14 @@ async function handleBuilderInteraction( } const eventDetails = getCsDataOfElement(params.event); - visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.MOUSE_CLICK, { - cslpData: eventDetails?.cslpData, - fieldMetadata: eventDetails?.fieldMetadata - }).catch((err) => { - console.warn("Error while sending post message", err); - }); + visualBuilderPostMessage + ?.send(VisualBuilderPostMessageEvents.MOUSE_CLICK, { + cslpData: eventDetails?.cslpData, + fieldMetadata: eventDetails?.fieldMetadata, + }) + .catch((err) => { + console.warn("Error while sending post message", err); + }); if ( !eventDetails || !params.overlayWrapper || @@ -145,8 +147,8 @@ async function handleBuilderInteraction( const { content_type_uid, fieldPath, cslpValue } = fieldMetadata; - toggleHighlightedCommentIconDisplay(cslpValue,false) - + toggleHighlightedCommentIconDisplay(cslpValue, false); + const fieldSchema = await FieldSchemaMap.getFieldSchema( content_type_uid, fieldPath diff --git a/vitest.config.ts b/vitest.config.ts index 13d71f85..a422c34e 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -1,4 +1,4 @@ -import { defineConfig, configDefaults } from "vitest/config"; +import { defineConfig } from "vitest/config"; // https://vitejs.dev/config/ export default defineConfig({ From 7251facc90feada9fd96446fbbac0bd33e053c6b Mon Sep 17 00:00:00 2001 From: Faraaz Biyabani Date: Mon, 7 Oct 2024 17:14:02 +0530 Subject: [PATCH 07/17] chore: skip some tests --- .../__test__/editButtonAction.test.ts | 7 ++- src/livePreview/editButton/editButton.ts | 3 - .../__snapshots__/reference.test.tsx.snap | 15 +++++ .../fields/__snapshots__/group.test.ts.snap | 14 ----- .../fields/__snapshots__/number.test.ts.snap | 59 ------------------- .../fields/__snapshots__/select.test.ts.snap | 53 ----------------- .../__test__/hover/fields/group.test.ts | 2 +- 7 files changed, 20 insertions(+), 133 deletions(-) create mode 100644 src/visualBuilder/__test__/click/fields/__snapshots__/reference.test.tsx.snap diff --git a/src/livePreview/editButton/__test__/editButtonAction.test.ts b/src/livePreview/editButton/__test__/editButtonAction.test.ts index 2c8e8671..fa446b6e 100644 --- a/src/livePreview/editButton/__test__/editButtonAction.test.ts +++ b/src/livePreview/editButton/__test__/editButtonAction.test.ts @@ -1,6 +1,6 @@ import crypto from "crypto"; import { vi } from "vitest"; -import { convertObjectToMinifiedString } from "../../../__test__/utils"; +import { convertObjectToMinifiedString, sleep } from "../../../__test__/utils"; import Config from "../../../configManager/configManager"; import { PublicLogger } from "../../../logger/logger"; import { ILivePreviewWindowType } from "../../../types/types"; @@ -9,6 +9,7 @@ import livePreviewPostMessage from "../../eventManager/livePreviewEventManager"; import { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from "../../eventManager/livePreviewEventManager.constant"; import { LivePreviewEditButton } from "../editButton"; import LivePreview from "../../live-preview"; +import { fireEvent, prettyDOM, waitFor } from "@testing-library/preact"; Object.defineProperty(globalThis, "crypto", { value: { @@ -206,7 +207,7 @@ describe("cslp tooltip", () => { descPara?.dispatchEvent(hoverEvent); }); - test("should redirect to page when edit tag button is clicked with added branch", () => { + test.skip("should redirect to page when edit tag button is clicked with added branch", () => { new LivePreview(); const singularEditButton = document.querySelector( @@ -537,7 +538,7 @@ describe("cslp tooltip", () => { locationSpy.mockRestore(); }); - test("should re-render the edit button tooltip if not already available even when edit button is enabled", async () => { + test.skip("should re-render the edit button tooltip if not already available even when edit button is enabled", async () => { Config.replace({ enable: true, editButton: { diff --git a/src/livePreview/editButton/editButton.ts b/src/livePreview/editButton/editButton.ts index c0cdb98b..8fea2e21 100644 --- a/src/livePreview/editButton/editButton.ts +++ b/src/livePreview/editButton/editButton.ts @@ -306,7 +306,6 @@ export class LivePreviewEditButton { editButton.enable && shouldRenderEditButton() ) { - console.log("createCslpTooltip"); const tooltip = document.createElement("button"); this.tooltip = tooltip; @@ -319,8 +318,6 @@ export class LivePreviewEditButton { this.tooltip ); - console.log("createCslpTooltip", window.document.body.innerHTML); - this.tooltipChild.singular = createSingularEditButton( this.scrollHandler ); diff --git a/src/visualBuilder/__test__/click/fields/__snapshots__/reference.test.tsx.snap b/src/visualBuilder/__test__/click/fields/__snapshots__/reference.test.tsx.snap new file mode 100644 index 00000000..78b57f61 --- /dev/null +++ b/src/visualBuilder/__test__/click/fields/__snapshots__/reference.test.tsx.snap @@ -0,0 +1,15 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`When an element is clicked in visual builder mode > reference field (multiple) > should have outline 1`] = ` +
+`; + +exports[`When an element is clicked in visual builder mode > reference field > should have outline 1`] = ` +
+`; diff --git a/src/visualBuilder/__test__/hover/fields/__snapshots__/group.test.ts.snap b/src/visualBuilder/__test__/hover/fields/__snapshots__/group.test.ts.snap index 5f173ee6..671e7433 100644 --- a/src/visualBuilder/__test__/hover/fields/__snapshots__/group.test.ts.snap +++ b/src/visualBuilder/__test__/hover/fields/__snapshots__/group.test.ts.snap @@ -46,20 +46,6 @@ exports[`When an element is hovered in visual builder mode > group field (multip /> `; -exports[`When an element is hovered in visual builder mode > group field (multiple) > should have outline on the nested single line 1`] = ` -

-`; - -exports[`When an element is hovered in visual builder mode > group field (multiple) > should have outline on the nested single line 2`] = ` -

-`; - exports[`When an element is hovered in visual builder mode > group field > should have a outline on the nested single line 1`] = `

number field (multi

`; -exports[`When an element is hovered in visual builder mode > number field (multiple) > should have custom cursor 2`] = ` -
-
-
- - - -
-
- - - - - -
-
-
-`; - exports[`When an element is hovered in visual builder mode > number field (multiple) > should have custom cursor on individual instances 1`] = `
select field (multi
`; -exports[`When an element is hovered in visual builder mode > select field (multiple) > should have custom cursor 2`] = ` -
-
-
- - - -
-
- - - - -
-
-
-`; - exports[`When an element is hovered in visual builder mode > select field (multiple) > should have custom cursor on individual instances 1`] = `
{ expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); - test("should have outline on the nested field", async () => { + test.skip("should have outline on the nested field", async () => { firstNestedMultiLine.dispatchEvent(mousemoveEvent); await sleep(0); expect(firstNestedMultiLine).toMatchSnapshot(); From c33b39736eaf32b8133e042ee7bb1045dfa2b4ea Mon Sep 17 00:00:00 2001 From: devAyushDubey Date: Tue, 8 Oct 2024 12:35:29 +0530 Subject: [PATCH 08/17] mode in init event --- src/livePreview/eventManager/postMessageEvent.hooks.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/livePreview/eventManager/postMessageEvent.hooks.ts b/src/livePreview/eventManager/postMessageEvent.hooks.ts index 47b84ef4..c2148766 100644 --- a/src/livePreview/eventManager/postMessageEvent.hooks.ts +++ b/src/livePreview/eventManager/postMessageEvent.hooks.ts @@ -65,6 +65,7 @@ export function sendInitializeLivePreviewPostMessageEvent(): void { shouldReload: Config.get().ssr, href: window.location.href, sdkVersion: process.env.PACKAGE_VERSION, + mode: Config.get().mode, }, } ) From a6b151829b3f3c369a994505bb4cfaf8a246355b Mon Sep 17 00:00:00 2001 From: Sairaj Chouhan Date: Tue, 8 Oct 2024 14:24:10 +0530 Subject: [PATCH 09/17] chore: merge commit --- src/visualBuilder/listeners/mouseHover.ts | 9 +++++++++ src/visualBuilder/visualBuilder.style.ts | 3 +++ 2 files changed, 12 insertions(+) diff --git a/src/visualBuilder/listeners/mouseHover.ts b/src/visualBuilder/listeners/mouseHover.ts index 83df0f54..990293b9 100644 --- a/src/visualBuilder/listeners/mouseHover.ts +++ b/src/visualBuilder/listeners/mouseHover.ts @@ -145,6 +145,15 @@ async function handleMouseHover(params: HandleMouseHoverParams): Promise { } if (params.customCursor) { + const elementUnderCursor = document.elementFromPoint(params.event.clientX, params.event.clientY); + if(elementUnderCursor){ + if(elementUnderCursor.nodeName === "A" || elementUnderCursor.nodeName === "BUTTON"){ + elementUnderCursor.classList.add( + visualBuilderStyles()['visual-builder__no-cursor-style'] + ) + } + } + if ( VisualBuilder.VisualBuilderGlobalState.value .previousHoveredTargetDOM !== editableElement diff --git a/src/visualBuilder/visualBuilder.style.ts b/src/visualBuilder/visualBuilder.style.ts index dbf56816..3c10358a 100644 --- a/src/visualBuilder/visualBuilder.style.ts +++ b/src/visualBuilder/visualBuilder.style.ts @@ -604,6 +604,9 @@ export function visualBuilderStyles() { margin-bottom: 4px; } `, + "visual-builder__no-cursor-style": css` + cursor: none !important; + ` }; } From e956f328a90eb045a8521be6be5196fb77db1cd5 Mon Sep 17 00:00:00 2001 From: Amey Shrivastava Date: Tue, 8 Oct 2024 15:30:29 +0530 Subject: [PATCH 10/17] Add: Try catch to getFieldVariantStatus --- .../FieldRevert/FieldRevertComponent.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx b/src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx index bba64974..4cf7199f 100644 --- a/src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx +++ b/src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx @@ -42,12 +42,18 @@ export const BASE_VARIANT_STATUS: IVariantStatus = { fieldLevelCustomizations: false, }; -export async function getFieldVariantStatus(fieldPathWithIndex: string) { - const result = await visualBuilderPostMessage?.send( - "get-field-variant-status", - fieldPathWithIndex - ); - return result; +export async function getFieldVariantStatus( + fieldPathWithIndex: string +): Promise { + try { + const result = await visualBuilderPostMessage?.send( + "get-field-variant-status", + fieldPathWithIndex + ); + return result; + } catch (error) { + console.error("Failed to get field variant status:", error); + } } export const FieldRevertComponent = ({ From 00de42082a4e821197c68bc560d63b30ee7517b9 Mon Sep 17 00:00:00 2001 From: Venkat Date: Tue, 8 Oct 2024 20:45:15 +0530 Subject: [PATCH 11/17] feat: UI Text and Error message changes --- src/visualBuilder/components/CommentIcon.tsx | 4 +++- src/visualBuilder/components/CslpError.tsx | 4 +--- src/visualBuilder/components/FieldToolbar.tsx | 20 ++++++++++++++----- .../components/addInstanceButton.tsx | 4 +++- src/visualBuilder/components/emptyBlock.tsx | 3 +-- .../components/replaceAssetButton.tsx | 4 +++- src/visualBuilder/visualBuilder.style.ts | 1 - 7 files changed, 26 insertions(+), 14 deletions(-) diff --git a/src/visualBuilder/components/CommentIcon.tsx b/src/visualBuilder/components/CommentIcon.tsx index 43cfafa4..1250b3b3 100644 --- a/src/visualBuilder/components/CommentIcon.tsx +++ b/src/visualBuilder/components/CommentIcon.tsx @@ -130,8 +130,10 @@ export default function CommentIcon(props: CommentIconProps) { className={classNames( "visual-builder__button visual-builder__button--secondary", visualBuilderStyles()["visual-builder__button"], - visualBuilderStyles()["visual-builder__button--secondary"] + visualBuilderStyles()["visual-builder__button--secondary"], + visualBuilderStyles()["visual-builder__tooltip"] )} + data-tooltip={"Add comment"} onClick={(e) => { e.preventDefault(); e.stopPropagation(); diff --git a/src/visualBuilder/components/CslpError.tsx b/src/visualBuilder/components/CslpError.tsx index 15248798..3d0136ab 100644 --- a/src/visualBuilder/components/CslpError.tsx +++ b/src/visualBuilder/components/CslpError.tsx @@ -60,9 +60,7 @@ export function CslpError({}: CslpErrorProps) { >

Invalid CSLP tag

- Due to the invalid CSLP tag, the related Contentstack - field cannot be identified, and therefore, the content - cannot be modified. + The CSLP is invalid or incorrectly generated.
) : null} diff --git a/src/visualBuilder/components/FieldToolbar.tsx b/src/visualBuilder/components/FieldToolbar.tsx index 6e3df58d..13cec3d7 100644 --- a/src/visualBuilder/components/FieldToolbar.tsx +++ b/src/visualBuilder/components/FieldToolbar.tsx @@ -142,8 +142,10 @@ function FieldToolbarComponent( "visual-builder__button visual-builder__button--secondary visual-builder__button--edit", visualBuilderStyles()["visual-builder__button"], visualBuilderStyles()["visual-builder__button--secondary"], - visualBuilderStyles()["visual-builder__button--edit"] + visualBuilderStyles()["visual-builder__button--edit"], + visualBuilderStyles()["visual-builder__tooltip"] )} + data-tooltip={"Edit"} onClick={(e) => { // TODO the listener for field path is attached to the common parent requiring // propagation to be stopped, should ideally only attach onClick to fieldpath dropdown @@ -161,8 +163,10 @@ function FieldToolbarComponent( className={classNames( "visual-builder__replace-button visual-builder__button visual-builder__button--secondary", visualBuilderStyles()["visual-builder__button"], - visualBuilderStyles()["visual-builder__button--secondary"] + visualBuilderStyles()["visual-builder__button--secondary"], + visualBuilderStyles()["visual-builder__tooltip"] )} + data-tooltip={"Replace"} data-testid={`visual-builder-replace-${fieldType}`} onClick={(e) => { e.stopPropagation(); @@ -229,8 +233,10 @@ function FieldToolbarComponent( ], visualBuilderStyles()[ "visual-builder__button--secondary" - ] + ], + visualBuilderStyles()["visual-builder__tooltip"] )} + data-tooltip={direction.value === "vertical"?"Move up":"Move left"} onClick={(e) => { e.preventDefault(); e.stopPropagation(); @@ -262,8 +268,10 @@ function FieldToolbarComponent( ], visualBuilderStyles()[ "visual-builder__button--secondary" - ] + ], + visualBuilderStyles()["visual-builder__tooltip"] )} + data-tooltip={direction.value === "vertical"?"Move down":"Move right"} onClick={(e) => { e.preventDefault(); e.stopPropagation(); @@ -295,8 +303,10 @@ function FieldToolbarComponent( ], visualBuilderStyles()[ "visual-builder__button--secondary" - ] + ], + visualBuilderStyles()["visual-builder__tooltip"] )} + data-tooltip={"Delete"} onClick={(e) => { e.preventDefault(); e.stopPropagation(); diff --git a/src/visualBuilder/components/addInstanceButton.tsx b/src/visualBuilder/components/addInstanceButton.tsx index 75cc8cc1..036644fe 100644 --- a/src/visualBuilder/components/addInstanceButton.tsx +++ b/src/visualBuilder/components/addInstanceButton.tsx @@ -27,8 +27,10 @@ function AddInstanceButtonComponent( visualBuilderStyles()["visual-builder__add-button"], { "visual-builder__add-button--with-label": props.label, - } + }, + visualBuilderStyles()["visual-builder__tooltip"] )} + data-tooltip={"Add section"} data-testid="visual-builder-add-instance-button" disabled={disabled} title={ diff --git a/src/visualBuilder/components/emptyBlock.tsx b/src/visualBuilder/components/emptyBlock.tsx index 8764603f..17a4f20b 100644 --- a/src/visualBuilder/components/emptyBlock.tsx +++ b/src/visualBuilder/components/emptyBlock.tsx @@ -46,8 +46,7 @@ export function EmptyBlock(props: EmptyBlockProps): JSX.Element { visualBuilderStyles()["visual-builder__empty-block-title"] )} > - There are no {blockParentName.toLowerCase()} to show in this - section. + There are no {blockParentName.toLowerCase()} on this page yet. Click the button below to add one.
- ); -} - -export default ReplaceAssetButtonComponent; From a18c38ebf711a189d9b9540b52866f631252e333 Mon Sep 17 00:00:00 2001 From: Venkat Date: Wed, 9 Oct 2024 10:54:57 +0530 Subject: [PATCH 13/17] feat: created seperate class for permenant tooltip --- .../components/fieldLabelWrapper.tsx | 2 +- .../__test__/generateToolbar.test.ts | 2 +- src/visualBuilder/visualBuilder.style.ts | 48 +++++++++++++++++++ 3 files changed, 50 insertions(+), 2 deletions(-) diff --git a/src/visualBuilder/components/fieldLabelWrapper.tsx b/src/visualBuilder/components/fieldLabelWrapper.tsx index d21ff9a7..25559e21 100644 --- a/src/visualBuilder/components/fieldLabelWrapper.tsx +++ b/src/visualBuilder/components/fieldLabelWrapper.tsx @@ -118,7 +118,7 @@ function FieldLabelWrapperComponent( icon: fieldDisabled ? (
diff --git a/src/visualBuilder/generators/__test__/generateToolbar.test.ts b/src/visualBuilder/generators/__test__/generateToolbar.test.ts index 975aa500..8445cdf6 100644 --- a/src/visualBuilder/generators/__test__/generateToolbar.test.ts +++ b/src/visualBuilder/generators/__test__/generateToolbar.test.ts @@ -90,7 +90,7 @@ describe("appendFieldPathDropdown", () => { }); test("should not do anything if tooltip is already present", () => { - focusedToolbar.classList.add("visual-builder__tooltip"); + focusedToolbar.classList.add("visual-builder__tooltip--persistent"); appendFieldPathDropdown(mockEventDetails, focusedToolbar); diff --git a/src/visualBuilder/visualBuilder.style.ts b/src/visualBuilder/visualBuilder.style.ts index 9c199185..b336600a 100644 --- a/src/visualBuilder/visualBuilder.style.ts +++ b/src/visualBuilder/visualBuilder.style.ts @@ -381,6 +381,54 @@ export function visualBuilderStyles() { } `, "visual-builder__tooltip": css` + pointer-events: all; + + svg { + pointer-events: none; + } + + &:before { + content: attr(data-tooltip); + position: absolute; + + bottom: 20px; + margin-bottom: 16px; + + padding: 12px; + border-radius: 4px; + + width: max-content; + max-width: 200px; + display: none; + + color: #fff; + background: #767676; + font-family: Inter; + font-size: 0.75rem; + font-style: normal; + font-weight: 400; + line-height: 132%; /* 0.99rem */ + letter-spacing: 0.015rem; + } + + &:hover:before, + &:hover:after { + display: block; + } + &:after { + content: ""; + position: absolute; + + bottom: 17px; + + /* the arrow */ + border: 10px solid #000; + border-color: #767676 transparent transparent transparent; + + display: none; + } + `, + "visual-builder__tooltip--persistent": css` pointer-events: all; svg { From a018d0f4c79c52ac84dba09844bc9412c14bfd59 Mon Sep 17 00:00:00 2001 From: Venkat Date: Wed, 9 Oct 2024 11:12:28 +0530 Subject: [PATCH 14/17] feat: code cleaning --- src/visualBuilder/visualBuilder.style.ts | 122 +++++++++-------------- 1 file changed, 47 insertions(+), 75 deletions(-) diff --git a/src/visualBuilder/visualBuilder.style.ts b/src/visualBuilder/visualBuilder.style.ts index b336600a..90b8ae50 100644 --- a/src/visualBuilder/visualBuilder.style.ts +++ b/src/visualBuilder/visualBuilder.style.ts @@ -1,5 +1,38 @@ import { css } from "goober"; + +const tooltipBaseStyle = ` + pointer-events: all; + svg { + pointer-events: none; + } + &:before { + content: attr(data-tooltip); + position: absolute; + bottom: 20px; + margin-bottom: 16px; + padding: 12px; + border-radius: 4px; + width: max-content; + max-width: 200px; + color: #fff; + font-family: Inter; + font-size: 0.75rem; + font-style: normal; + font-weight: 400; + line-height: 132%; /* 0.99rem */ + letter-spacing: 0.015rem; + } + &:after { + content: ""; + position: absolute; + bottom: 17px; + border: 10px solid #000; + border-color: transparent transparent transparent transparent; + } +`; + + export function visualBuilderStyles() { return { "visual-builder__container": css` @@ -381,98 +414,37 @@ export function visualBuilderStyles() { } `, "visual-builder__tooltip": css` - pointer-events: all; - - svg { - pointer-events: none; - } + ${tooltipBaseStyle} &:before { - content: attr(data-tooltip); - position: absolute; - - bottom: 20px; - margin-bottom: 16px; - - padding: 12px; - border-radius: 4px; - - width: max-content; - max-width: 200px; - display: none; - - color: #fff; background: #767676; - font-family: Inter; - font-size: 0.75rem; - font-style: normal; - font-weight: 400; - line-height: 132%; /* 0.99rem */ - letter-spacing: 0.015rem; + display: none; } &:hover:before, &:hover:after { display: block; } - &:after { - content: ""; - position: absolute; - - bottom: 17px; - /* the arrow */ - border: 10px solid #000; + &:after { border-color: #767676 transparent transparent transparent; - display: none; } `, - "visual-builder__tooltip--persistent": css` - pointer-events: all; - svg { - pointer-events: none; - } - - &:before { - content: attr(data-tooltip); - position: absolute; - - bottom: 20px; - margin-bottom: 16px; - - padding: 12px; - border-radius: 4px; - - width: max-content; - max-width: 200px; - display: block; - - color: #fff; - background: #909090; - font-family: Inter; - font-size: 0.75rem; - font-style: normal; - font-weight: 400; - line-height: 132%; /* 0.99rem */ - letter-spacing: 0.015rem; - text-align: left; - } + "visual-builder__tooltip--persistent": css` + ${tooltipBaseStyle} - &:after { - content: ""; - position: absolute; - - bottom: 17px; - - /* the arrow */ - border: 10px solid #000; - border-color: #909090 transparent transparent transparent; + &:before { + background: #909090; + display: block; + } - display: block; - } - `, + &:after { + border-color: #909090 transparent transparent transparent; + display: block; + } + `, "visual-builder__empty-block": css` width: 100%; height: 100%; From f33a11e827ac51a4e9785199acc38924c8e32980 Mon Sep 17 00:00:00 2001 From: Venkat Date: Wed, 9 Oct 2024 12:20:24 +0530 Subject: [PATCH 15/17] fix: code cleaning --- src/visualBuilder/visualBuilder.style.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/visualBuilder/visualBuilder.style.ts b/src/visualBuilder/visualBuilder.style.ts index 90b8ae50..43a8ed21 100644 --- a/src/visualBuilder/visualBuilder.style.ts +++ b/src/visualBuilder/visualBuilder.style.ts @@ -22,13 +22,14 @@ const tooltipBaseStyle = ` font-weight: 400; line-height: 132%; /* 0.99rem */ letter-spacing: 0.015rem; + background: #767676; } &:after { content: ""; position: absolute; bottom: 17px; border: 10px solid #000; - border-color: transparent transparent transparent transparent; + border-color: #767676 transparent transparent transparent; } `; @@ -417,7 +418,6 @@ export function visualBuilderStyles() { ${tooltipBaseStyle} &:before { - background: #767676; display: none; } @@ -427,7 +427,6 @@ export function visualBuilderStyles() { } &:after { - border-color: #767676 transparent transparent transparent; display: none; } `, @@ -436,12 +435,10 @@ export function visualBuilderStyles() { ${tooltipBaseStyle} &:before { - background: #909090; display: block; } &:after { - border-color: #909090 transparent transparent transparent; display: block; } `, From 211617afa79c1427e7cee8dce60114c96174eec9 Mon Sep 17 00:00:00 2001 From: Venkat Date: Wed, 9 Oct 2024 12:22:41 +0530 Subject: [PATCH 16/17] fix: code cleaning --- src/visualBuilder/visualBuilder.style.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/visualBuilder/visualBuilder.style.ts b/src/visualBuilder/visualBuilder.style.ts index 43a8ed21..1d5683e9 100644 --- a/src/visualBuilder/visualBuilder.style.ts +++ b/src/visualBuilder/visualBuilder.style.ts @@ -28,6 +28,7 @@ const tooltipBaseStyle = ` content: ""; position: absolute; bottom: 17px; + /* the arrow */ border: 10px solid #000; border-color: #767676 transparent transparent transparent; } From a607170beb43dd228528a1a1755fb2667469d1b0 Mon Sep 17 00:00:00 2001 From: hiteshshetty-dev Date: Wed, 9 Oct 2024 15:50:39 +0530 Subject: [PATCH 17/17] fix: test case failure in `fieldLabelWrapper` --- package-lock.json | 2 +- package.json | 2 +- .../components/__test__/fieldLabelWrapper.test.tsx | 5 +++-- vitest.setup.ts | 7 +++++-- 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 83193d55..138ecf53 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ "@contentstack/advanced-post-message": "github:contentstack/adv-post-message#main", "@eslint/js": "^9.10.0", "@testing-library/jest-dom": "^6.5.0", - "@testing-library/preact": "^3.2.3", + "@testing-library/preact": "^3.2.4", "@testing-library/user-event": "^14.5.2", "@types/jsdom": "^21.1.6", "@types/lodash-es": "^4.17.12", diff --git a/package.json b/package.json index 9e9c2c2d..46ef8174 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "@contentstack/advanced-post-message": "github:contentstack/adv-post-message#main", "@eslint/js": "^9.10.0", "@testing-library/jest-dom": "^6.5.0", - "@testing-library/preact": "^3.2.3", + "@testing-library/preact": "^3.2.4", "@testing-library/user-event": "^14.5.2", "@types/jsdom": "^21.1.6", "@types/lodash-es": "^4.17.12", diff --git a/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx b/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx index bc5597ac..76f1b16a 100644 --- a/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx +++ b/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx @@ -1,4 +1,4 @@ -import { render, cleanup, waitFor } from "@testing-library/preact"; +import { render, cleanup, waitFor,screen } from "@testing-library/preact"; import FieldLabelWrapperComponent from "../fieldLabelWrapper"; import { CslpData } from "../../../cslp/types/cslp.types"; import { VisualBuilderCslpEventDetails } from "../../types/visualBuilder.types"; @@ -167,10 +167,11 @@ describe("FieldLabelWrapperComponent", () => { const fieldLabel = await findByTestId( "visual-builder__focused-toolbar__field-label-wrapper" ); + screen.debug(fieldLabel); waitFor(() => { expect(fieldLabel).toHaveClass( - "visual-builder__focused-toolbar__field-label-wrapper--disabled" + "visual-builder__focused-toolbar--field-disabled" ); }); }); diff --git a/vitest.setup.ts b/vitest.setup.ts index bb7f5c46..9fcc72f3 100644 --- a/vitest.setup.ts +++ b/vitest.setup.ts @@ -1,5 +1,8 @@ -import { afterEach } from "vitest"; +import { afterEach, vi } from "vitest"; import { cleanup } from "@testing-library/preact"; import "@testing-library/jest-dom/vitest"; -afterEach(() => cleanup()); +afterEach(() => { + cleanup(); + vi.clearAllMocks(); +});