@c15t/react/dist/hooks/__tests__/use-styles.test.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"vitest";import*as o from"vitest-browser-react";import*as s from"../../context/theme-context.js";import*as r from"../use-styles.js";(0,t.describe)("useStyles",()=>{let l={noStyle:!1,theme:{"dialog.root":{className:"theme-class",style:{color:"blue"}}}};(0,t.test)("returns component styles when no theme is provided",()=>{let l={className:"component-class",style:{backgroundColor:"red"}},{result:a}=(0,o.renderHook)(()=>(0,r.useStyles)("dialog.root",l),{wrapper:({children:t})=>(0,e.jsx)(s.GlobalThemeContext.Provider,{value:{noStyle:!1,theme:{}},children:t})});(0,t.expect)(a.current.className).toContain("component-class"),(0,t.expect)(a.current.style).toEqual({backgroundColor:"red"})}),(0,t.test)("merges theme and component styles correctly",()=>{let a={className:"component-class",style:{backgroundColor:"red"}},{result:c}=(0,o.renderHook)(()=>(0,r.useStyles)("dialog.root",a),{wrapper:({children:t})=>(0,e.jsx)(s.GlobalThemeContext.Provider,{value:l,children:t})});(0,t.expect)(c.current.className).toContain("theme-class"),(0,t.expect)(c.current.className).toContain("component-class"),(0,t.expect)(c.current.style).toEqual({color:"blue",backgroundColor:"red"})}),(0,t.test)("handles string className correctly",()=>{let{result:a}=(0,o.renderHook)(()=>(0,r.useStyles)("dialog.root","component-class"),{wrapper:({children:t})=>(0,e.jsx)(s.GlobalThemeContext.Provider,{value:l,children:t})});(0,t.expect)(a.current.className).toContain("theme-class"),(0,t.expect)(a.current.className).toContain("component-class")}),(0,t.test)("should remove default styles but keep custom classNames when theme object provides noStyle: true",()=>{let l={theme:{"dialog.root":{className:"theme-class",style:{color:"blue"},noStyle:!0}}},a={className:"component-class",style:{backgroundColor:"red"},noStyle:!0},{result:c}=(0,o.renderHook)(()=>(0,r.useStyles)("dialog.root",a),{wrapper:({children:t})=>(0,e.jsx)(s.GlobalThemeContext.Provider,{value:l,children:t})});(0,t.expect)(c.current.className).toContain("theme-class"),(0,t.expect)(c.current.className).not.toContain("component-class"),(0,t.expect)(c.current.style).toEqual({color:"blue"})})});