@c15t/react/dist/components/consent-manager-dialog/__tests__/styles.spec.cjs

Developer-first CMP for React: cookie banner, consent manager, preferences centre. GDPR ready with minimal setup and rich customization

"use strict";let __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(t,{a:t}),t},__webpack_require__.d=(e,t)=>{for(var a in t)__webpack_require__.o(t,a)&&!__webpack_require__.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var __webpack_exports__={};let jsx_runtime_namespaceObject=require("react/jsx-runtime"),external_c15t_namespaceObject=require("c15t"),external_vitest_namespaceObject=require("vitest"),external_consent_manager_dialog_cjs_namespaceObject=require("../consent-manager-dialog.cjs"),test_helpers_cjs_namespaceObject=require("../../../utils/test-helpers.cjs");var test_helpers_cjs_default=__webpack_require__.n(test_helpers_cjs_namespaceObject);let external_consent_manager_dialog_module_cjs_namespaceObject=require("../consent-manager-dialog.module.cjs");var external_consent_manager_dialog_module_cjs_default=__webpack_require__.n(external_consent_manager_dialog_module_cjs_namespaceObject);let ALL_COMPONENTS=[{testId:"consent-manager-dialog-root",themeKey:"dialog.root",styles:"custom-dialog-root"},{testId:"consent-manager-dialog-overlay",themeKey:"dialog.overlay",styles:"custom-dialog-overlay"},{testId:"consent-manager-dialog-header",themeKey:"dialog.header",styles:"custom-dialog-header"},{testId:"consent-manager-dialog-title",themeKey:"dialog.title",styles:"custom-dialog-title"},{testId:"consent-manager-dialog-description",themeKey:"dialog.description",styles:"custom-dialog-description"},{testId:"consent-manager-dialog-content",themeKey:"dialog.content",styles:"custom-dialog-content"},{testId:"consent-manager-dialog-footer",themeKey:"dialog.footer",styles:"custom-dialog-footer"}];for(var __webpack_i__ in external_vitest_namespaceObject.vi.mock("~/hooks/use-consent-manager",()=>({useConsentManager:external_vitest_namespaceObject.vi.fn().mockReturnValue({isPrivacyDialogOpen:!0,getDisplayedConsents:external_vitest_namespaceObject.vi.fn().mockReturnValue([]),saveConsents:external_vitest_namespaceObject.vi.fn(),setShowPopup:external_vitest_namespaceObject.vi.fn(),setIsPrivacyDialogOpen:external_vitest_namespaceObject.vi.fn(),translationConfig:{defaultLanguage:"en"}})})),external_vitest_namespaceObject.vi.mock("~/hooks/use-translations",()=>({useTranslations:external_vitest_namespaceObject.vi.fn().mockReturnValue(external_c15t_namespaceObject.defaultTranslationConfig.translations.en)})),(0,external_vitest_namespaceObject.test)("should apply string classNames from theme prop to all dialog elements",async()=>{let e=(0,jsx_runtime_namespaceObject.jsx)(external_consent_manager_dialog_cjs_namespaceObject.ConsentManagerDialog,{open:!0,scrollLock:!0,theme:ALL_COMPONENTS.reduce((e,{themeKey:t,styles:a})=>(e[t]=a,e),{})});await test_helpers_cjs_default()({component:e,testCases:ALL_COMPONENTS.map(({testId:e,styles:t})=>({testId:e,styles:t}))})}),(0,external_vitest_namespaceObject.test)("should apply className and style objects from theme prop to all dialog elements",async()=>{let e={backgroundColor:"#ffffff",padding:"20px",border:"1px solid #000000"},t=ALL_COMPONENTS.map(({testId:t,themeKey:a,styles:s})=>({testId:t,themeKey:a,className:s,style:e})),a=(0,jsx_runtime_namespaceObject.jsx)(external_consent_manager_dialog_cjs_namespaceObject.ConsentManagerDialog,{open:!0,scrollLock:!0,theme:t.reduce((e,{themeKey:t,className:a,style:s})=>(e[t]={className:a,style:s},e),{})});await test_helpers_cjs_default()({component:a,testCases:t.map(({testId:e,className:t,style:a})=>({testId:e,styles:{className:t,style:a}}))})}),(0,external_vitest_namespaceObject.test)("should remove default styles but keep custom classNames when top-level noStyle prop is true",async()=>{let e=(0,jsx_runtime_namespaceObject.jsx)(external_consent_manager_dialog_cjs_namespaceObject.ConsentManagerDialog,{scrollLock:!0,noStyle:!0,open:!0,theme:ALL_COMPONENTS.reduce((e,{themeKey:t,styles:a})=>(e[t]=a,e),{})});await test_helpers_cjs_default()({component:e,testCases:ALL_COMPONENTS.map(({testId:e,styles:t})=>({testId:e,styles:t})),noStyle:!0})}),(0,external_vitest_namespaceObject.test)("should remove default styles but keep custom classNames when theme object provides noStyle: true",async()=>{let e=ALL_COMPONENTS.reduce((e,{themeKey:t,styles:a})=>(e[t]={className:a,noStyle:!0},e),{}),t=(0,jsx_runtime_namespaceObject.jsx)(external_consent_manager_dialog_cjs_namespaceObject.ConsentManagerDialog,{scrollLock:!0,open:!0,theme:e});await test_helpers_cjs_default()({component:t,testCases:ALL_COMPONENTS.map(({testId:e,styles:t})=>({testId:e,styles:{className:t}}))})}),(0,external_vitest_namespaceObject.test)("should correctly apply styles when theme prop uses mixed string and object formats",async()=>{let e=(0,jsx_runtime_namespaceObject.jsx)(external_consent_manager_dialog_cjs_namespaceObject.ConsentManagerDialog,{scrollLock:!0,theme:{"dialog.root":{className:"custom-dialog-root",style:{backgroundColor:"rgb(255, 255, 255)",padding:"16px"}},"dialog.overlay":"custom-dialog-overlay"},open:!0});await test_helpers_cjs_default()({component:e,testCases:[{testId:"consent-manager-dialog-root",styles:{className:"custom-dialog-root",style:{backgroundColor:"rgb(255, 255, 255)",padding:"16px"}}},{testId:"consent-manager-dialog-overlay",styles:"custom-dialog-overlay"}]})}),(0,external_vitest_namespaceObject.test)("should handle empty strings and empty style objects in theme prop gracefully",async()=>{let e=(0,jsx_runtime_namespaceObject.jsx)(external_consent_manager_dialog_cjs_namespaceObject.ConsentManagerDialog,{scrollLock:!0,open:!0,theme:{"dialog.root":"","dialog.overlay":"","dialog.content":{className:"",style:{margin:"0",padding:"0"}}}});await test_helpers_cjs_default()({component:e,testCases:[{testId:"consent-manager-dialog-root",styles:""},{testId:"consent-manager-dialog-overlay",styles:""},{testId:"consent-manager-dialog-content",styles:{className:"",style:{margin:"0",padding:"0"}}}]})}),(0,external_vitest_namespaceObject.test)("should override base layer styles",async()=>{let e=document.createElement("style");e.textContent=`
		.custom-dialog-background {
			background-color: rgb(255, 0, 0) !important;
		}
		.custom-dialog-text {
			color: rgb(0, 255, 0) !important;
		}
	`,document.head.appendChild(e);let t=(0,jsx_runtime_namespaceObject.jsx)(external_consent_manager_dialog_cjs_namespaceObject.ConsentManagerDialog,{theme:{"dialog.root":"custom-dialog-background","dialog.title":"custom-dialog-text"}});await test_helpers_cjs_default()({component:t,testCases:[{testId:"consent-manager-dialog-root",styles:"custom-dialog-background"},{testId:"consent-manager-dialog-title",styles:"custom-dialog-text"}]});let a=document.querySelector('[data-testid="consent-manager-dialog-root"]'),s=document.querySelector('[data-testid="consent-manager-dialog-title"]');if(!a||!s)throw Error("Required elements not found in the document");(0,external_vitest_namespaceObject.expect)(getComputedStyle(a).backgroundColor).toBe("rgb(255, 0, 0)"),(0,external_vitest_namespaceObject.expect)(getComputedStyle(s).color).toBe("rgb(0, 255, 0)"),document.head.removeChild(e)}),(0,external_vitest_namespaceObject.test)("Base layer styles are applied when no custom classes are provided",async()=>{let e=(0,jsx_runtime_namespaceObject.jsx)(external_consent_manager_dialog_cjs_namespaceObject.ConsentManagerDialog,{});await test_helpers_cjs_default()({component:e,testCases:[]});let t=document.querySelector('[data-testid="consent-manager-dialog-root"]'),a=document.querySelector('[data-testid="consent-manager-dialog-title"]');if(!t||!a)throw Error("Required elements not found in the document");(0,external_vitest_namespaceObject.expect)(getComputedStyle(t).backgroundColor).toBe("rgb(255, 255, 255)"),(0,external_vitest_namespaceObject.expect)(getComputedStyle(a).color).toBe("rgb(23, 23, 23)")}),(0,external_vitest_namespaceObject.test)("Multiple custom classes can be applied and override base layer",async()=>{let e=document.createElement("style");e.textContent=`
		.custom-padding {
			padding: 32px !important;
		}
		.custom-border {
			border: 2px solid rgb(0, 0, 255) !important;
		}
	`,document.head.appendChild(e);let t=(0,jsx_runtime_namespaceObject.jsx)(external_consent_manager_dialog_cjs_namespaceObject.ConsentManagerDialog,{theme:{"dialog.root":"custom-padding custom-border"}});await test_helpers_cjs_default()({component:t,testCases:[{testId:"consent-manager-dialog-root",styles:"custom-padding custom-border"}]});let a=document.querySelector('[data-testid="consent-manager-dialog-root"]');if(!a)throw Error("Required elements not found in the document");(0,external_vitest_namespaceObject.expect)(getComputedStyle(a).padding).toBe("32px"),(0,external_vitest_namespaceObject.expect)(getComputedStyle(a).border).toBe("2px solid rgb(0, 0, 255)"),document.head.removeChild(e)}),(0,external_vitest_namespaceObject.test)("All consent manager dialog components should have their base classes applied",async()=>{let e=(0,jsx_runtime_namespaceObject.jsx)(external_consent_manager_dialog_cjs_namespaceObject.ConsentManagerDialog,{open:!0}),t={root:external_consent_manager_dialog_module_cjs_default().root||"",card:external_consent_manager_dialog_module_cjs_default().card||"",header:external_consent_manager_dialog_module_cjs_default().header||"",title:external_consent_manager_dialog_module_cjs_default().title||"",description:external_consent_manager_dialog_module_cjs_default().description||"",content:external_consent_manager_dialog_module_cjs_default().content||"",footer:external_consent_manager_dialog_module_cjs_default().footer||"",overlay:external_consent_manager_dialog_module_cjs_default().overlay||""};for(let[a,s]of(await test_helpers_cjs_default()({component:e,testCases:[{testId:"consent-manager-dialog-root",styles:`${external_consent_manager_dialog_module_cjs_default().card} ${external_consent_manager_dialog_module_cjs_default().card} ${external_consent_manager_dialog_module_cjs_default().card}`},{testId:"consent-manager-dialog-card",styles:t.card},{testId:"consent-manager-dialog-header",styles:t.header},{testId:"consent-manager-dialog-title",styles:t.title},{testId:"consent-manager-dialog-description",styles:t.description},{testId:"consent-manager-dialog-content",styles:t.content},{testId:"consent-manager-dialog-footer",styles:t.footer},{testId:"consent-manager-dialog-overlay",styles:t.overlay}]}),Object.entries(t)))(0,external_vitest_namespaceObject.expect)(s,`Base class for ${a} should not be empty`).not.toBe("")}),__webpack_exports__)exports[__webpack_i__]=__webpack_exports__[__webpack_i__];Object.defineProperty(exports,"__esModule",{value:!0});