@c15t/react/dist/components/cookie-banner/__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 s from"../cookie-banner.js";import*as n from"../../../utils/test-helpers.js";import*as a from"../../shared/ui/button/button.module.js";import*as r from"../cookie-banner.module.js";o.vi.mock("~/hooks/use-consent-manager",()=>({useConsentManager:()=>({showPopup:!0,translationConfig:{defaultLanguage:"en"},...o.vi.fn()})})),o.vi.mock("~/hooks/use-translations",()=>({useTranslations:()=>t.defaultTranslationConfig.translations.en})),o.vi.mock("~/hooks/use-text-direction",()=>({useTextDirection:o.vi.fn().mockReturnValue("ltr")}));let c=[{testId:"cookie-banner-root",themeKey:"banner.root",styles:"custom-root"},{testId:"cookie-banner-card",themeKey:"banner.card",styles:"custom-card"},{testId:"cookie-banner-header",themeKey:"banner.header.root",styles:"custom-header"},{testId:"cookie-banner-title",themeKey:"banner.header.title",styles:"custom-title"},{testId:"cookie-banner-description",themeKey:"banner.header.description",styles:"custom-description"},{testId:"cookie-banner-footer",themeKey:"banner.footer",styles:"custom-footer"},{testId:"cookie-banner-footer-sub-group",themeKey:"banner.footer.sub-group",styles:"custom-footer-sub-group"},{testId:"cookie-banner-overlay",themeKey:"banner.overlay",styles:"custom-overlay"},{testId:"cookie-banner-reject-button",themeKey:"banner.footer.reject-button",styles:"custom-reject-button"},{testId:"cookie-banner-customize-button",themeKey:"banner.footer.customize-button",styles:"custom-customize-button"},{testId:"cookie-banner-accept-button",themeKey:"banner.footer.accept-button",styles:"custom-accept-button"}];(0,o.test)("should apply string classNames from theme prop to all banner elements",async()=>{let t=(0,e.jsx)(s.CookieBanner,{scrollLock:!0,theme:c.reduce((e,{themeKey:t,styles:o})=>(e[t]=o,e),{})});await (0,n.default)({component:t,testCases:c.map(({testId:e,styles:t})=>({testId:e,styles:t}))})}),(0,o.test)("should apply className and style objects from theme prop to all banner elements",async()=>{let t={backgroundColor:"#ffffff",padding:"20px",border:"1px solid #000000"},o=c.map(({testId:e,themeKey:o,styles:s})=>({testId:e,themeKey:o,className:s,style:t})),a=(0,e.jsx)(s.CookieBanner,{scrollLock:!0,theme:o.reduce((e,{themeKey:t,className:o,style:s})=>(e[t]={className:o,style:s},e),{})});await (0,n.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)(s.CookieBanner,{scrollLock:!0,noStyle:!0,theme:c.reduce((e,{themeKey:t,styles:o})=>(e[t]=o,e),{})});await (0,n.default)({component:t,testCases:c.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=c.reduce((e,{themeKey:t,styles:o})=>(e[t]={className:o,noStyle:!0},e),{}),o=(0,e.jsx)(s.CookieBanner,{scrollLock:!0,theme:t});await (0,n.default)({component:o,testCases:c.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)(s.CookieBanner,{scrollLock:!0,theme:{"banner.root":{className:"custom-root",style:{backgroundColor:"rgb(255, 255, 255)",padding:"16px"}},"banner.header.title":"custom-title"}});await (0,n.default)({component:t,testCases:[{testId:"cookie-banner-root",styles:{className:"custom-root",style:{backgroundColor:"rgb(255, 255, 255)",padding:"16px"}}},{testId:"cookie-banner-title",styles:"custom-title"}]})}),(0,o.test)("should handle empty strings and empty style objects in theme prop gracefully",async()=>{let t=(0,e.jsx)(s.CookieBanner,{scrollLock:!0,theme:{"banner.root":"","banner.card":"","banner.header.root":"","banner.header.title":"","banner.header.description":"","banner.footer":{className:"",style:{margin:"0",padding:"0"}}}});await (0,n.default)({component:t,testCases:[{testId:"cookie-banner-root",styles:""},{testId:"cookie-banner-title",styles:""},{testId:"cookie-banner-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-banner-background {
			background-color: rgb(255, 0, 0) !important;
		}
		.custom-banner-text {
			color: rgb(0, 255, 0) !important;
		}
	`,document.head.appendChild(t);let a=(0,e.jsx)(s.CookieBanner,{theme:{"banner.card":"custom-banner-background","banner.header.title":"custom-banner-text"}});await (0,n.default)({component:a,testCases:[{testId:"cookie-banner-card",styles:"custom-banner-background"},{testId:"cookie-banner-title",styles:"custom-banner-text"}]});let r=document.querySelector('[data-testid="cookie-banner-card"]'),c=document.querySelector('[data-testid="cookie-banner-title"]');if(!r||!c)throw Error("Required elements not found in the document");(0,o.expect)(getComputedStyle(r).backgroundColor).toBe("rgb(255, 0, 0)"),(0,o.expect)(getComputedStyle(c).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)(s.CookieBanner,{});await (0,n.default)({component:t,testCases:[]});let a=document.querySelector('[data-testid="cookie-banner-card"]'),r=document.querySelector('[data-testid="cookie-banner-title"]');if(!a||!r)throw Error("Required elements not found in the document");(0,o.expect)(getComputedStyle(a).backgroundColor).toBe("rgb(255, 255, 255)"),(0,o.expect)(getComputedStyle(r).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 a=(0,e.jsx)(s.CookieBanner,{theme:{"banner.card":"custom-padding custom-border"}});await (0,n.default)({component:a,testCases:[{testId:"cookie-banner-card",styles:"custom-padding custom-border"}]});let r=document.querySelector('[data-testid="cookie-banner-card"]');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 cookie banner components should have their base classes applied",async()=>{let t=(0,e.jsx)(s.CookieBanner,{}),c={root:r.default.root||"",card:r.default.card||"",header:r.default.header||"",title:r.default.title||"",description:r.default.description||"",footer:r.default.footer||"",footerSubGroup:r.default.footerSubGroup||"",rejectButton:`${a.default.button} ${a.default["button-small"]} ${a.default["button-neutral-stroke"]}`,acceptButton:`${a.default.button} ${a.default["button-small"]} ${a.default["button-neutral-stroke"]}`,customizeButton:`${a.default.button} ${a.default["button-small"]} ${a.default["button-primary-stroke"]}`};for(let[e,s]of(await (0,n.default)({component:t,testCases:[{testId:"cookie-banner-root",styles:c.root},{testId:"cookie-banner-card",styles:c.card},{testId:"cookie-banner-header",styles:c.header},{testId:"cookie-banner-title",styles:c.title},{testId:"cookie-banner-description",styles:c.description},{testId:"cookie-banner-footer",styles:c.footer},{testId:"cookie-banner-footer-sub-group",styles:c.footerSubGroup},{testId:"cookie-banner-reject-button",styles:c.rejectButton},{testId:"cookie-banner-customize-button",styles:c.customizeButton},{testId:"cookie-banner-accept-button",styles:c.acceptButton}]}),Object.entries(c)))(0,o.expect)(s,`Base class for ${e} should not be empty`).not.toBe("")}),(0,o.test)("should apply correct styles when text direction is RTL",async()=>{let t=await import("../../../hooks/use-text-direction.js"),a=o.vi.mocked(t.useTextDirection),r=a.getMockImplementation();a.mockReturnValue("rtl");let c=(0,e.jsx)(s.CookieBanner,{scrollLock:!0,theme:{"banner.root":"custom-root","banner.footer.accept-button":"custom-accept-button"}});await (0,n.default)({component:c,testCases:[{testId:"cookie-banner-root",styles:"custom-root"},{testId:"cookie-banner-accept-button",styles:"custom-accept-button"}]}),r?a.mockImplementation(r):a.mockReturnValue("ltr")});