@c15t/react/dist/components/cookie-banner/__tests__/cookie-banner.e2e.test.js

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

let e;import*as t from"react/jsx-runtime";import*as o from"vitest";import*as n from"vitest-browser-react";import*as c from"../../consent-manager-dialog/consent-manager-dialog.js";import*as a from"../../../providers/consent-manager-provider.js";import*as s from"../cookie-banner.js";let r=!0,i=!1;o.vi.mock("~/hooks/use-consent-manager",async e=>{let t=await e();return{useConsentManager:()=>({...t.useConsentManager(),showPopup:r,isPrivacyDialogOpen:i,setShowPopup:e=>{r=e},setIsPrivacyDialogOpen:e=>{i=e}})}}),Object.defineProperty(window,"localStorage",{value:(e={},{getItem:t=>e[t]||null,setItem:(t,o)=>{e[t]=o.toString()},removeItem:t=>{delete e[t]},clear:()=>{e={}}})});let d={mode:"offline"};(0,o.describe)("CookieBanner E2E Tests",()=>{(0,o.beforeEach)(()=>{window.localStorage.clear(),r=!0,o.vi.clearAllMocks(),(0,a.clearConsentManagerCache)()}),(0,o.test)("should show cookie banner on first visit",async()=>{(0,n.render)((0,t.jsxs)(a.ConsentManagerProvider,{options:d,children:[(0,t.jsx)(s.CookieBanner,{}),(0,t.jsx)(c.ConsentManagerDialog,{})]}));let e=document.body.querySelector('[data-testid="cookie-banner-root"]');(0,o.expect)(e).toBeInTheDocument(),(0,o.expect)(r).toBe(!0),(0,o.expect)(document.querySelector('[data-testid="cookie-banner-title"]')).toBeInTheDocument(),(0,o.expect)(document.querySelector('[data-testid="cookie-banner-description"]')).toBeInTheDocument(),(0,o.expect)(document.querySelector('[data-testid="cookie-banner-reject-button"]')).toBeInTheDocument(),(0,o.expect)(document.querySelector('[data-testid="cookie-banner-customize-button"]')).toBeInTheDocument(),(0,o.expect)(document.querySelector('[data-testid="cookie-banner-accept-button"]')).toBeInTheDocument()}),(0,o.test)("should accept all cookies when clicking Accept All",async()=>{(0,n.render)((0,t.jsxs)(a.ConsentManagerProvider,{options:d,children:[(0,t.jsx)(s.CookieBanner,{}),(0,t.jsx)(c.ConsentManagerDialog,{})]}));let e=document.querySelector('[data-testid="cookie-banner-accept-button"]');e?.dispatchEvent(new MouseEvent("click",{bubbles:!0})),await new Promise(e=>setTimeout(e,100)),(0,o.expect)(r).toBe(!1),(0,o.expect)(document.querySelector('[data-testid="cookie-banner-root"]')).not.toBeInTheDocument();let i=JSON.parse(window.localStorage.getItem("privacy-consent-storage")||"{}");(0,o.expect)(i.consents).toBeTruthy(),(0,o.expect)(i.consentInfo.type).toBe("all")}),(0,o.test)("should reject non-essential cookies when clicking Reject All",async()=>{(0,n.render)((0,t.jsxs)(a.ConsentManagerProvider,{options:d,children:[(0,t.jsx)(s.CookieBanner,{}),(0,t.jsx)(c.ConsentManagerDialog,{})]}));let e=document.querySelector('[data-testid="cookie-banner-reject-button"]');e?.dispatchEvent(new MouseEvent("click",{bubbles:!0})),await new Promise(e=>setTimeout(e,100)),(0,o.expect)(r).toBe(!1),(0,o.expect)(document.querySelector('[data-testid="cookie-banner-root"]')).not.toBeInTheDocument();let i=JSON.parse(window.localStorage.getItem("privacy-consent-storage")||"{}");(0,o.expect)(i.consents).toBeTruthy(),(0,o.expect)(i.consentInfo.type).toBe("necessary"),(0,o.expect)(i.consents.necessary).toBe(!0),(0,o.expect)(i.consents.experience).toBe(!1),(0,o.expect)(i.consents.functionality).toBe(!1),(0,o.expect)(i.consents.marketing).toBe(!1),(0,o.expect)(i.consents.measurement).toBe(!1)}),(0,o.test)("should open consent manager dialog when clicking Customize",async()=>{(0,n.render)((0,t.jsxs)(a.ConsentManagerProvider,{options:d,children:[(0,t.jsx)(s.CookieBanner,{}),(0,t.jsx)(c.ConsentManagerDialog,{})]}));let e=document.querySelector('[data-testid="cookie-banner-customize-button"]');e?.dispatchEvent(new MouseEvent("click",{bubbles:!0})),await new Promise(e=>setTimeout(e,100)),(0,o.expect)(r).toBe(!1),(0,o.expect)(document.querySelector('[data-testid="cookie-banner-root"]')).not.toBeInTheDocument(),(0,o.expect)(i).toBe(!0);let l=document.querySelector('[data-testid="consent-manager-dialog-root"]');(0,o.expect)(l).toBeInTheDocument(),(0,o.expect)(document.querySelector('[data-testid="consent-manager-widget-switch-necessary"]')).toBeInTheDocument(),(0,o.expect)(document.querySelector('[data-testid="consent-manager-widget-switch-marketing"]')).toBeInTheDocument();let u=document.querySelector('[data-testid="consent-manager-widget-switch-marketing"]');u?.dispatchEvent(new MouseEvent("click",{bubbles:!0}));let m=document.querySelector('[data-testid="consent-manager-widget-footer-save-button"]');m?.dispatchEvent(new MouseEvent("click",{bubbles:!0})),await new Promise(e=>setTimeout(e,100)),(0,o.expect)(i).toBe(!1);let p=JSON.parse(window.localStorage.getItem("privacy-consent-storage")||"{}");(0,o.expect)(p.consents).toBeTruthy(),(0,o.expect)(p.consentInfo.type).toBe("custom"),(0,o.expect)(p.consents.marketing).toBe(!0)}),(0,o.test)("should be keyboard accessible",async()=>{(0,n.render)((0,t.jsxs)(a.ConsentManagerProvider,{options:d,children:[(0,t.jsx)(s.CookieBanner,{}),(0,t.jsx)(c.ConsentManagerDialog,{})]}));let e=document.querySelector('[data-testid="cookie-banner-reject-button"]'),r=document.querySelector('[data-testid="cookie-banner-customize-button"]'),i=document.querySelector('[data-testid="cookie-banner-accept-button"]');e.focus(),(0,o.expect)(document.activeElement).toBe(e),r.focus(),(0,o.expect)(document.activeElement).toBe(r),i.focus(),(0,o.expect)(document.activeElement).toBe(i)}),(0,o.test)("should handle scroll lock properly",async()=>{(0,n.render)((0,t.jsxs)(a.ConsentManagerProvider,{options:d,children:[(0,t.jsx)(s.CookieBanner,{scrollLock:!0}),(0,t.jsx)(c.ConsentManagerDialog,{})]})),(0,o.expect)(document.querySelector('[data-testid="cookie-banner-overlay"]')).toBeInTheDocument();let e=document.querySelector('[data-testid="cookie-banner-accept-button"]');e?.dispatchEvent(new MouseEvent("click",{bubbles:!0})),await new Promise(e=>setTimeout(e,100)),(0,o.expect)(document.querySelector('[data-testid="cookie-banner-overlay"]')).not.toBeInTheDocument()})});