@c15t/react/dist/components/consent-manager-widget/__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 n from"../consent-manager-widget.js";import*as s from"../../../utils/test-helpers.js";import*as a from"../consent-manager-widget.module.js";o.vi.mock("~/hooks/use-consent-manager",()=>({useConsentManager:o.vi.fn().mockReturnValue({getConsentCategory:o.vi.fn().mockReturnValue({isEnabled:!0}),updateConsentCategory:o.vi.fn(),saveConsents:o.vi.fn(),getDisplayedConsents:o.vi.fn().mockReturnValue([]),translationConfig:{defaultLanguage:"en"}})})),o.vi.mock("~/hooks/use-translations",()=>({useTranslations:o.vi.fn().mockReturnValue(t.defaultTranslationConfig.translations.en)}));let r=[{testId:"consent-manager-widget-root",themeKey:"widget.root",styles:"custom-root"},{testId:"consent-manager-widget-footer",themeKey:"widget.footer",styles:"custom-footer"},{testId:"consent-manager-widget-footer-sub-group",themeKey:"widget.footer.sub-group",styles:"custom-footer-sub-group"},{testId:"consent-manager-widget-reject-button",themeKey:"widget.footer.reject-button",styles:"custom-reject-button"},{testId:"consent-manager-widget-footer-accept-button",themeKey:"widget.footer.accept-button",styles:"custom-accept-button"},{testId:"consent-manager-widget-footer-save-button",themeKey:"widget.footer.save-button",styles:"custom-save-button"},{testId:"consent-manager-widget-accordion-trigger-marketing",themeKey:"widget.accordion.trigger",styles:"custom-accordion-trigger"},{testId:"consent-manager-widget-accordion-trigger-inner-marketing",themeKey:"widget.accordion.trigger-inner",styles:"custom-accordion-trigger-inner"},{testId:"consent-manager-widget-accordion-content-marketing",themeKey:"widget.accordion.content",styles:"custom-accordion-content"},{testId:"consent-manager-widget-switch-marketing",themeKey:"widget.switch",styles:"custom-switch"}];(0,o.test)("should apply string classNames from theme prop to all widget elements",async()=>{let t=(0,e.jsx)(n.ConsentManagerWidget,{theme:r.reduce((e,{themeKey:t,styles:o})=>(e[t]=o,e),{})});await (0,s.default)({component:t,testCases:r.map(({testId:e,styles:t})=>({testId:e,styles:t}))})}),(0,o.test)("should apply className and style objects from theme prop to all widget elements",async()=>{let t={backgroundColor:"#ffffff",padding:"20px",border:"1px solid #000000"},o=r.map(({testId:e,themeKey:o,styles:n})=>({testId:e,themeKey:o,className:n,style:t})),a=(0,e.jsx)(n.ConsentManagerWidget,{theme:o.reduce((e,{themeKey:t,className:o,style:n})=>(e[t]={className:o,style:n},e),{})});await (0,s.default)({component:a,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)(n.ConsentManagerWidget,{noStyle:!0,theme:r.reduce((e,{themeKey:t,styles:o})=>(e[t]=o,e),{})});await (0,s.default)({component:t,testCases:r.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=r.reduce((e,{themeKey:t,styles:o})=>(e[t]={className:o,noStyle:!0},e),{}),o=(0,e.jsx)(n.ConsentManagerWidget,{theme:t});await (0,s.default)({component:o,testCases:r.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)(n.ConsentManagerWidget,{theme:{"widget.root":{className:"custom-root",style:{backgroundColor:"rgb(255, 255, 255)",padding:"16px"}},"widget.accordion.trigger":"custom-accordion-trigger"}});await (0,s.default)({component:t,testCases:[{testId:"consent-manager-widget-root",styles:{className:"custom-root",style:{backgroundColor:"rgb(255, 255, 255)",padding:"16px"}}},{testId:"consent-manager-widget-accordion-trigger-marketing",styles:"custom-accordion-trigger"}]})}),(0,o.test)("should handle empty strings and empty style objects in theme prop gracefully",async()=>{let t=(0,e.jsx)(n.ConsentManagerWidget,{theme:{"widget.root":"","widget.accordion":"","widget.footer":{className:"",style:{margin:"0",padding:"0"}}}});await (0,s.default)({component:t,testCases:[{testId:"consent-manager-widget-root",styles:""},{testId:"consent-manager-widget-accordion",styles:""},{testId:"consent-manager-widget-footer",styles:{className:"",style:{margin:"0",padding:"0"}}}]})}),(0,o.test)("Custom classes override base layer styles",async()=>{let t=document.createElement("style");t.textContent=`
		.custom-widget-background {
			background-color: rgb(255, 0, 0) !important;
		}
		.custom-widget-foooter {
			color: rgb(0, 255, 0) !important;
		}
	`,document.head.appendChild(t);let a=(0,e.jsx)(n.ConsentManagerWidget,{theme:{"widget.root":"custom-widget-background","widget.footer":"custom-widget-foooter"}});await (0,s.default)({component:a,testCases:[{testId:"consent-manager-widget-root",styles:"custom-widget-background"},{testId:"consent-manager-widget-footer",styles:"custom-widget-foooter"}]});let r=document.querySelector('[data-testid="consent-manager-widget-root"]'),d=document.querySelector('[data-testid="consent-manager-widget-footer"]');if(!r||!d)throw Error("Required elements not found in the document");(0,o.expect)(getComputedStyle(r).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()=>{await (0,s.default)({component:(0,e.jsx)(n.ConsentManagerWidget,{}),testCases:[]});let t=document.querySelector('[data-testid="consent-manager-widget-root"]'),a=document.querySelector('[data-testid="consent-manager-widget-footer"]');if(!t||!a)throw Error("Required elements not found in the document");(0,o.expect)(getComputedStyle(t).backgroundColor).toBe("rgba(0, 0, 0, 0)"),(0,o.expect)(getComputedStyle(a).color).toBe("rgb(0, 0, 0)")}),(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 a=(0,e.jsx)(n.ConsentManagerWidget,{theme:{"widget.root":"custom-padding custom-border"}});await (0,s.default)({component:a,testCases:[{testId:"consent-manager-widget-root",styles:"custom-padding custom-border"}]});let r=document.querySelector('[data-testid="consent-manager-widget-root"]');if(!r)throw Error("Required elements not found in the document");(0,o.expect)(getComputedStyle(r).padding).toBe("32px"),(0,o.expect)(getComputedStyle(r).border).toBe("2px solid rgb(0, 0, 255)"),document.head.removeChild(t)}),(0,o.test)("All consent manager widget components should have their base classes applied",async()=>{let t=(0,e.jsx)(n.ConsentManagerWidget,{}),r={card:a.default.card||"",header:a.default.header||"",title:a.default.title||"",description:a.default.description||"",content:a.default.content||"",footer:a.default.footer||"",footerGroup:a.default.footerGroup||"",accordionItem:a.default.accordionItem||"",accordionTrigger:a.default.accordionTrigger||"",accordionTriggerInner:a.default.accordionTriggerInner||"",accordionContent:a.default.accordionContent||"",accordionArrow:a.default.accordionArrow||"",switch:a.default.switch||""};for(let[e,n]of(await (0,s.default)({component:t,testCases:[{testId:"consent-manager-widget-footer",styles:r.footer},{testId:"consent-manager-widget-footer-sub-group",styles:r.footerGroup},{testId:"consent-manager-widget-accordion-trigger-marketing",styles:r.accordionTrigger},{testId:"consent-manager-widget-accordion-trigger-inner-marketing",styles:r.accordionTriggerInner},{testId:"consent-manager-widget-accordion-content-marketing",styles:r.accordionContent},{testId:"consent-manager-widget-switch-marketing",styles:r.switch}]}),Object.entries(r)))(0,o.expect)(n,`Base class for ${e} should not be empty`).not.toBe("")});