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

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

import*as e from"react/jsx-runtime";import*as t from"c15t";import*as o from"vitest";import*as a from"../consent-manager-dialog.js";import*as s from"../../../utils/test-helpers.js";import*as n from"../consent-manager-dialog.module.js";let l=[{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"}];o.vi.mock("~/hooks/use-consent-manager",()=>({useConsentManager:o.vi.fn().mockReturnValue({isPrivacyDialogOpen:!0,getDisplayedConsents:o.vi.fn().mockReturnValue([]),saveConsents:o.vi.fn(),setShowPopup:o.vi.fn(),setIsPrivacyDialogOpen:o.vi.fn(),translationConfig:{defaultLanguage:"en"}})})),o.vi.mock("~/hooks/use-translations",()=>({useTranslations:o.vi.fn().mockReturnValue(t.defaultTranslationConfig.translations.en)})),(0,o.test)("should apply string classNames from theme prop to all dialog elements",async()=>{let t=(0,e.jsx)(a.ConsentManagerDialog,{open:!0,scrollLock:!0,theme:l.reduce((e,{themeKey:t,styles:o})=>(e[t]=o,e),{})});await (0,s.default)({component:t,testCases:l.map(({testId:e,styles:t})=>({testId:e,styles:t}))})}),(0,o.test)("should apply className and style objects from theme prop to all dialog elements",async()=>{let t={backgroundColor:"#ffffff",padding:"20px",border:"1px solid #000000"},o=l.map(({testId:e,themeKey:o,styles:a})=>({testId:e,themeKey:o,className:a,style:t})),n=(0,e.jsx)(a.ConsentManagerDialog,{open:!0,scrollLock:!0,theme:o.reduce((e,{themeKey:t,className:o,style:a})=>(e[t]={className:o,style:a},e),{})});await (0,s.default)({component:n,testCases:o.map(({testId:e,className:t,style:o})=>({testId:e,styles:{className:t,style:o}}))})}),(0,o.test)("should remove default styles but keep custom classNames when top-level noStyle prop is true",async()=>{let t=(0,e.jsx)(a.ConsentManagerDialog,{scrollLock:!0,noStyle:!0,open:!0,theme:l.reduce((e,{themeKey:t,styles:o})=>(e[t]=o,e),{})});await (0,s.default)({component:t,testCases:l.map(({testId:e,styles:t})=>({testId:e,styles:t})),noStyle:!0})}),(0,o.test)("should remove default styles but keep custom classNames when theme object provides noStyle: true",async()=>{let t=l.reduce((e,{themeKey:t,styles:o})=>(e[t]={className:o,noStyle:!0},e),{}),o=(0,e.jsx)(a.ConsentManagerDialog,{scrollLock:!0,open:!0,theme:t});await (0,s.default)({component:o,testCases:l.map(({testId:e,styles:t})=>({testId:e,styles:{className:t}}))})}),(0,o.test)("should correctly apply styles when theme prop uses mixed string and object formats",async()=>{let t=(0,e.jsx)(a.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 (0,s.default)({component:t,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,o.test)("should handle empty strings and empty style objects in theme prop gracefully",async()=>{let t=(0,e.jsx)(a.ConsentManagerDialog,{scrollLock:!0,open:!0,theme:{"dialog.root":"","dialog.overlay":"","dialog.content":{className:"",style:{margin:"0",padding:"0"}}}});await (0,s.default)({component:t,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,o.test)("should override base layer styles",async()=>{let t=document.createElement("style");t.textContent=`
		.custom-dialog-background {
			background-color: rgb(255, 0, 0) !important;
		}
		.custom-dialog-text {
			color: rgb(0, 255, 0) !important;
		}
	`,document.head.appendChild(t);let n=(0,e.jsx)(a.ConsentManagerDialog,{theme:{"dialog.root":"custom-dialog-background","dialog.title":"custom-dialog-text"}});await (0,s.default)({component:n,testCases:[{testId:"consent-manager-dialog-root",styles:"custom-dialog-background"},{testId:"consent-manager-dialog-title",styles:"custom-dialog-text"}]});let l=document.querySelector('[data-testid="consent-manager-dialog-root"]'),d=document.querySelector('[data-testid="consent-manager-dialog-title"]');if(!l||!d)throw Error("Required elements not found in the document");(0,o.expect)(getComputedStyle(l).backgroundColor).toBe("rgb(255, 0, 0)"),(0,o.expect)(getComputedStyle(d).color).toBe("rgb(0, 255, 0)"),document.head.removeChild(t)}),(0,o.test)("Base layer styles are applied when no custom classes are provided",async()=>{let t=(0,e.jsx)(a.ConsentManagerDialog,{});await (0,s.default)({component:t,testCases:[]});let n=document.querySelector('[data-testid="consent-manager-dialog-root"]'),l=document.querySelector('[data-testid="consent-manager-dialog-title"]');if(!n||!l)throw Error("Required elements not found in the document");(0,o.expect)(getComputedStyle(n).backgroundColor).toBe("rgb(255, 255, 255)"),(0,o.expect)(getComputedStyle(l).color).toBe("rgb(23, 23, 23)")}),(0,o.test)("Multiple custom classes can be applied and override base layer",async()=>{let t=document.createElement("style");t.textContent=`
		.custom-padding {
			padding: 32px !important;
		}
		.custom-border {
			border: 2px solid rgb(0, 0, 255) !important;
		}
	`,document.head.appendChild(t);let n=(0,e.jsx)(a.ConsentManagerDialog,{theme:{"dialog.root":"custom-padding custom-border"}});await (0,s.default)({component:n,testCases:[{testId:"consent-manager-dialog-root",styles:"custom-padding custom-border"}]});let l=document.querySelector('[data-testid="consent-manager-dialog-root"]');if(!l)throw Error("Required elements not found in the document");(0,o.expect)(getComputedStyle(l).padding).toBe("32px"),(0,o.expect)(getComputedStyle(l).border).toBe("2px solid rgb(0, 0, 255)"),document.head.removeChild(t)}),(0,o.test)("All consent manager dialog components should have their base classes applied",async()=>{let t=(0,e.jsx)(a.ConsentManagerDialog,{open:!0}),l={root:n.default.root||"",card:n.default.card||"",header:n.default.header||"",title:n.default.title||"",description:n.default.description||"",content:n.default.content||"",footer:n.default.footer||"",overlay:n.default.overlay||""};for(let[e,a]of(await (0,s.default)({component:t,testCases:[{testId:"consent-manager-dialog-root",styles:`${n.default.card} ${n.default.card} ${n.default.card}`},{testId:"consent-manager-dialog-card",styles:l.card},{testId:"consent-manager-dialog-header",styles:l.header},{testId:"consent-manager-dialog-title",styles:l.title},{testId:"consent-manager-dialog-description",styles:l.description},{testId:"consent-manager-dialog-content",styles:l.content},{testId:"consent-manager-dialog-footer",styles:l.footer},{testId:"consent-manager-dialog-overlay",styles:l.overlay}]}),Object.entries(l)))(0,o.expect)(a,`Base class for ${e} should not be empty`).not.toBe("")});