@c15t/react/dist/components/cookie-banner/__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_modules__={"~/hooks/use-text-direction":function(e){e.exports=import("../../../hooks/use-text-direction.cjs")}},__webpack_module_cache__={};function __webpack_require__(e){var t=__webpack_module_cache__[e];if(void 0!==t)return t.exports;var o=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e](o,o.exports,__webpack_require__),o.exports}__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 o in t)__webpack_require__.o(t,o)&&!__webpack_require__.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var __webpack_exports__={};for(var __webpack_i__ in(()=>{let e=require("react/jsx-runtime"),t=require("c15t"),o=require("vitest"),r=require("../cookie-banner.cjs"),n=require("../../../utils/test-helpers.cjs");var s=__webpack_require__.n(n);let a=require("../../shared/ui/button/button.module.cjs");var c=__webpack_require__.n(a);let l=require("../cookie-banner.module.cjs");var i=__webpack_require__.n(l);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 u=[{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)(r.CookieBanner,{scrollLock:!0,theme:u.reduce((e,{themeKey:t,styles:o})=>(e[t]=o,e),{})});await s()({component:t,testCases:u.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=u.map(({testId:e,themeKey:o,styles:r})=>({testId:e,themeKey:o,className:r,style:t})),n=(0,e.jsx)(r.CookieBanner,{scrollLock:!0,theme:o.reduce((e,{themeKey:t,className:o,style:r})=>(e[t]={className:o,style:r},e),{})});await s()({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)(r.CookieBanner,{scrollLock:!0,noStyle:!0,theme:u.reduce((e,{themeKey:t,styles:o})=>(e[t]=o,e),{})});await s()({component:t,testCases:u.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=u.reduce((e,{themeKey:t,styles:o})=>(e[t]={className:o,noStyle:!0},e),{}),o=(0,e.jsx)(r.CookieBanner,{scrollLock:!0,theme:t});await s()({component:o,testCases:u.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)(r.CookieBanner,{scrollLock:!0,theme:{"banner.root":{className:"custom-root",style:{backgroundColor:"rgb(255, 255, 255)",padding:"16px"}},"banner.header.title":"custom-title"}});await s()({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)(r.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 s()({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 n=(0,e.jsx)(r.CookieBanner,{theme:{"banner.card":"custom-banner-background","banner.header.title":"custom-banner-text"}});await s()({component:n,testCases:[{testId:"cookie-banner-card",styles:"custom-banner-background"},{testId:"cookie-banner-title",styles:"custom-banner-text"}]});let a=document.querySelector('[data-testid="cookie-banner-card"]'),c=document.querySelector('[data-testid="cookie-banner-title"]');if(!a||!c)throw Error("Required elements not found in the document");(0,o.expect)(getComputedStyle(a).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)(r.CookieBanner,{});await s()({component:t,testCases:[]});let n=document.querySelector('[data-testid="cookie-banner-card"]'),a=document.querySelector('[data-testid="cookie-banner-title"]');if(!n||!a)throw Error("Required elements not found in the document");(0,o.expect)(getComputedStyle(n).backgroundColor).toBe("rgb(255, 255, 255)"),(0,o.expect)(getComputedStyle(a).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)(r.CookieBanner,{theme:{"banner.card":"custom-padding custom-border"}});await s()({component:n,testCases:[{testId:"cookie-banner-card",styles:"custom-padding custom-border"}]});let a=document.querySelector('[data-testid="cookie-banner-card"]');if(!a)throw Error("Required elements not found in the document");(0,o.expect)(getComputedStyle(a).padding).toBe("32px"),(0,o.expect)(getComputedStyle(a).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)(r.CookieBanner,{}),n={root:i().root||"",card:i().card||"",header:i().header||"",title:i().title||"",description:i().description||"",footer:i().footer||"",footerSubGroup:i().footerSubGroup||"",rejectButton:`${c().button} ${c()["button-small"]} ${c()["button-neutral-stroke"]}`,acceptButton:`${c().button} ${c()["button-small"]} ${c()["button-neutral-stroke"]}`,customizeButton:`${c().button} ${c()["button-small"]} ${c()["button-primary-stroke"]}`};for(let[e,r]of(await s()({component:t,testCases:[{testId:"cookie-banner-root",styles:n.root},{testId:"cookie-banner-card",styles:n.card},{testId:"cookie-banner-header",styles:n.header},{testId:"cookie-banner-title",styles:n.title},{testId:"cookie-banner-description",styles:n.description},{testId:"cookie-banner-footer",styles:n.footer},{testId:"cookie-banner-footer-sub-group",styles:n.footerSubGroup},{testId:"cookie-banner-reject-button",styles:n.rejectButton},{testId:"cookie-banner-customize-button",styles:n.customizeButton},{testId:"cookie-banner-accept-button",styles:n.acceptButton}]}),Object.entries(n)))(0,o.expect)(r,`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 Promise.resolve().then(__webpack_require__.bind(__webpack_require__,"~/hooks/use-text-direction")),n=o.vi.mocked(t.useTextDirection),a=n.getMockImplementation();n.mockReturnValue("rtl");let c=(0,e.jsx)(r.CookieBanner,{scrollLock:!0,theme:{"banner.root":"custom-root","banner.footer.accept-button":"custom-accept-button"}});await s()({component:c,testCases:[{testId:"cookie-banner-root",styles:"custom-root"},{testId:"cookie-banner-accept-button",styles:"custom-accept-button"}]}),a?n.mockImplementation(a):n.mockReturnValue("ltr")})})(),__webpack_exports__)exports[__webpack_i__]=__webpack_exports__[__webpack_i__];Object.defineProperty(exports,"__esModule",{value:!0});