@c15t/react/dist/components/consent-manager-widget/__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 n in t)__webpack_require__.o(t,n)&&!__webpack_require__.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},__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_widget_cjs_namespaceObject=require("../consent-manager-widget.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_widget_module_cjs_namespaceObject=require("../consent-manager-widget.module.cjs");var external_consent_manager_widget_module_cjs_default=__webpack_require__.n(external_consent_manager_widget_module_cjs_namespaceObject);external_vitest_namespaceObject.vi.mock("~/hooks/use-consent-manager",()=>({useConsentManager:external_vitest_namespaceObject.vi.fn().mockReturnValue({getConsentCategory:external_vitest_namespaceObject.vi.fn().mockReturnValue({isEnabled:!0}),updateConsentCategory:external_vitest_namespaceObject.vi.fn(),saveConsents:external_vitest_namespaceObject.vi.fn(),getDisplayedConsents:external_vitest_namespaceObject.vi.fn().mockReturnValue([]),translationConfig:{defaultLanguage:"en"}})})),external_vitest_namespaceObject.vi.mock("~/hooks/use-translations",()=>({useTranslations:external_vitest_namespaceObject.vi.fn().mockReturnValue(external_c15t_namespaceObject.defaultTranslationConfig.translations.en)}));let ALL_COMPONENTS=[{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"}];for(var __webpack_i__ in(0,external_vitest_namespaceObject.test)("should apply string classNames from theme prop to all widget elements",async()=>{let e=(0,jsx_runtime_namespaceObject.jsx)(external_consent_manager_widget_cjs_namespaceObject.ConsentManagerWidget,{theme:ALL_COMPONENTS.reduce((e,{themeKey:t,styles:n})=>(e[t]=n,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 widget elements",async()=>{let e={backgroundColor:"#ffffff",padding:"20px",border:"1px solid #000000"},t=ALL_COMPONENTS.map(({testId:t,themeKey:n,styles:a})=>({testId:t,themeKey:n,className:a,style:e})),n=(0,jsx_runtime_namespaceObject.jsx)(external_consent_manager_widget_cjs_namespaceObject.ConsentManagerWidget,{theme:t.reduce((e,{themeKey:t,className:n,style:a})=>(e[t]={className:n,style:a},e),{})});await test_helpers_cjs_default()({component:n,testCases:t.map(({testId:e,className:t,style:n})=>({testId:e,styles:{className:t,style:n}}))})}),(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_widget_cjs_namespaceObject.ConsentManagerWidget,{noStyle:!0,theme:ALL_COMPONENTS.reduce((e,{themeKey:t,styles:n})=>(e[t]=n,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:n})=>(e[t]={className:n,noStyle:!0},e),{}),t=(0,jsx_runtime_namespaceObject.jsx)(external_consent_manager_widget_cjs_namespaceObject.ConsentManagerWidget,{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_widget_cjs_namespaceObject.ConsentManagerWidget,{theme:{"widget.root":{className:"custom-root",style:{backgroundColor:"rgb(255, 255, 255)",padding:"16px"}},"widget.accordion.trigger":"custom-accordion-trigger"}});await test_helpers_cjs_default()({component:e,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,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_widget_cjs_namespaceObject.ConsentManagerWidget,{theme:{"widget.root":"","widget.accordion":"","widget.footer":{className:"",style:{margin:"0",padding:"0"}}}});await test_helpers_cjs_default()({component:e,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,external_vitest_namespaceObject.test)("Custom classes override base layer styles",async()=>{let e=document.createElement("style");e.textContent=`
		.custom-widget-background {
			background-color: rgb(255, 0, 0) !important;
		}
		.custom-widget-foooter {
			color: rgb(0, 255, 0) !important;
		}
	`,document.head.appendChild(e);let t=(0,jsx_runtime_namespaceObject.jsx)(external_consent_manager_widget_cjs_namespaceObject.ConsentManagerWidget,{theme:{"widget.root":"custom-widget-background","widget.footer":"custom-widget-foooter"}});await test_helpers_cjs_default()({component:t,testCases:[{testId:"consent-manager-widget-root",styles:"custom-widget-background"},{testId:"consent-manager-widget-footer",styles:"custom-widget-foooter"}]});let n=document.querySelector('[data-testid="consent-manager-widget-root"]'),a=document.querySelector('[data-testid="consent-manager-widget-footer"]');if(!n||!a)throw Error("Required elements not found in the document");(0,external_vitest_namespaceObject.expect)(getComputedStyle(n).backgroundColor).toBe("rgb(255, 0, 0)"),(0,external_vitest_namespaceObject.expect)(getComputedStyle(a).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()=>{await test_helpers_cjs_default()({component:(0,jsx_runtime_namespaceObject.jsx)(external_consent_manager_widget_cjs_namespaceObject.ConsentManagerWidget,{}),testCases:[]});let e=document.querySelector('[data-testid="consent-manager-widget-root"]'),t=document.querySelector('[data-testid="consent-manager-widget-footer"]');if(!e||!t)throw Error("Required elements not found in the document");(0,external_vitest_namespaceObject.expect)(getComputedStyle(e).backgroundColor).toBe("rgba(0, 0, 0, 0)"),(0,external_vitest_namespaceObject.expect)(getComputedStyle(t).color).toBe("rgb(0, 0, 0)")}),(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_widget_cjs_namespaceObject.ConsentManagerWidget,{theme:{"widget.root":"custom-padding custom-border"}});await test_helpers_cjs_default()({component:t,testCases:[{testId:"consent-manager-widget-root",styles:"custom-padding custom-border"}]});let n=document.querySelector('[data-testid="consent-manager-widget-root"]');if(!n)throw Error("Required elements not found in the document");(0,external_vitest_namespaceObject.expect)(getComputedStyle(n).padding).toBe("32px"),(0,external_vitest_namespaceObject.expect)(getComputedStyle(n).border).toBe("2px solid rgb(0, 0, 255)"),document.head.removeChild(e)}),(0,external_vitest_namespaceObject.test)("All consent manager widget components should have their base classes applied",async()=>{let e=(0,jsx_runtime_namespaceObject.jsx)(external_consent_manager_widget_cjs_namespaceObject.ConsentManagerWidget,{}),t={card:external_consent_manager_widget_module_cjs_default().card||"",header:external_consent_manager_widget_module_cjs_default().header||"",title:external_consent_manager_widget_module_cjs_default().title||"",description:external_consent_manager_widget_module_cjs_default().description||"",content:external_consent_manager_widget_module_cjs_default().content||"",footer:external_consent_manager_widget_module_cjs_default().footer||"",footerGroup:external_consent_manager_widget_module_cjs_default().footerGroup||"",accordionItem:external_consent_manager_widget_module_cjs_default().accordionItem||"",accordionTrigger:external_consent_manager_widget_module_cjs_default().accordionTrigger||"",accordionTriggerInner:external_consent_manager_widget_module_cjs_default().accordionTriggerInner||"",accordionContent:external_consent_manager_widget_module_cjs_default().accordionContent||"",accordionArrow:external_consent_manager_widget_module_cjs_default().accordionArrow||"",switch:external_consent_manager_widget_module_cjs_default().switch||""};for(let[n,a]of(await test_helpers_cjs_default()({component:e,testCases:[{testId:"consent-manager-widget-footer",styles:t.footer},{testId:"consent-manager-widget-footer-sub-group",styles:t.footerGroup},{testId:"consent-manager-widget-accordion-trigger-marketing",styles:t.accordionTrigger},{testId:"consent-manager-widget-accordion-trigger-inner-marketing",styles:t.accordionTriggerInner},{testId:"consent-manager-widget-accordion-content-marketing",styles:t.accordionContent},{testId:"consent-manager-widget-switch-marketing",styles:t.switch}]}),Object.entries(t)))(0,external_vitest_namespaceObject.expect)(a,`Base class for ${n} should not be empty`).not.toBe("")}),__webpack_exports__)exports[__webpack_i__]=__webpack_exports__[__webpack_i__];Object.defineProperty(exports,"__esModule",{value:!0});