@pyreon/rocketstyle 0.11.5 → 0.11.7

package/src/__tests__/providerConsumer.test.ts

@@ -1,50 +1,17 @@
-import { popContext, pushContext } from "@pyreon/core"
-import { config } from "@pyreon/ui-core"
-import { context } from "../context/context"
-import rocketstyle from "../init"
-
-// Mock styled function that returns the component unchanged
-const mockStyled = (component: any) => {
-  const taggedTemplate = (_strings: any, ..._args: any[]) => component
-  return taggedTemplate
-}
-
-const mockCss = (_strings: any, ..._args: any[]) => ""
-
-const originalStyled = config.styled
-const originalCss = config.css
-
+import { popContext, pushContext } from '@pyreon/core'
+import {
+  BaseComponent,
+  buildThemeContextMap,
+  initTestConfig,
+  withThemeContext,
+} from '@pyreon/test-utils'
+import rocketstyle from '../init'
+
+let cleanup: () => void
 beforeAll(() => {
-  config.init({
-    css: mockCss as any,
-    styled: mockStyled as any,
-    component: "div",
-    textComponent: "span",
-  })
-})
-
-afterAll(() => {
-  config.styled = originalStyled
-  config.css = originalCss
+  cleanup = initTestConfig()
 })
-
-/**
- * Base component that exposes internal props for testing.
- * In Pyreon, components are plain functions — no forwardRef needed.
- */
-const BaseComponent: any = ({ children, $rocketstyle, $rocketstate, ...rest }: any) => ({
-  type: "div",
-  props: {
-    ...rest,
-    "data-hover": String($rocketstate?.pseudo?.hover ?? "none"),
-    "data-focus": String($rocketstate?.pseudo?.focus ?? "none"),
-    "data-pressed": String($rocketstate?.pseudo?.pressed ?? "none"),
-  },
-  children,
-  $rocketstyle,
-  $rocketstate,
-})
-BaseComponent.displayName = "BaseComponent"
+afterAll(() => cleanup())
 
 /** Child component that reads consumer context */
 const ChildComponent: any = ({
@@ -54,123 +21,94 @@ const ChildComponent: any = ({
   parentHover,
   ...rest
 }: any) => ({
-  type: "div",
-  props: { ...rest, "data-parent-hover": parentHover ?? "none" },
+  type: 'div',
+  props: { ...rest, 'data-parent-hover': parentHover ?? 'none' },
   children,
 })
-ChildComponent.displayName = "ChildComponent"
-
-/** Unwrap reactive accessors (EnhancedComponent returns a function for mode switching). */
-const unwrap = (val: any): any => {
-  let result = val
-  while (typeof result === "function" && !result.IS_ROCKETSTYLE) result = result()
-  return result
-}
-
-/** Push a theme context and run fn, then pop */
-const withThemeContext = (fn: () => any) => {
-  pushContext(
-    new Map([
-      [
-        context.id,
-        {
-          theme: { rootSize: 16 },
-          mode: "light",
-          isDark: false,
-          isLight: true,
-        },
-      ],
-    ]),
-  )
-  try {
-    return fn()
-  } finally {
-    popContext()
-  }
-}
+ChildComponent.displayName = 'ChildComponent'
 
 // --------------------------------------------------------
 // Provider/Consumer integration
 // --------------------------------------------------------
-describe("Provider/Consumer integration", () => {
-  describe("provider component", () => {
-    it("renders with provider: true", () => {
+describe('Provider/Consumer integration', () => {
+  describe('provider component', () => {
+    it('renders with provider: true', () => {
       const ParentButton: any = rocketstyle()({
-        name: "ProviderButton",
+        name: 'ProviderButton',
         component: BaseComponent,
       }).config({ provider: true })
 
-      const result = withThemeContext(() => ParentButton({ children: "Child" }))
+      const result = withThemeContext(() => ParentButton({ children: 'Child' }))
       expect(result).toBeDefined()
     })
 
-    it("detects pseudo-state via $rocketstate on provider", () => {
+    it('detects pseudo-state via $rocketstate on provider', () => {
       const ParentButton: any = rocketstyle()({
-        name: "HoverProvider",
+        name: 'HoverProvider',
         component: BaseComponent,
       }).config({ provider: true })
 
-      const result = withThemeContext(() => unwrap(ParentButton({ children: "Child" })))
+      const result = withThemeContext(() => ParentButton({ children: 'Child' }))
       // Provider wraps with createLocalProvider which injects pseudo state
       // Initial state should be false
-      expect(result.props["data-hover"]).toBe("false")
-      expect(result.props["data-focus"]).toBe("false")
-      expect(result.props["data-pressed"]).toBe("false")
+      expect(result.props['data-hover']).toBe('false')
+      expect(result.props['data-focus']).toBe('false')
+      expect(result.props['data-pressed']).toBe('false')
     })
   })
 
-  describe("consumer component", () => {
-    it("consumer receives pseudo-state from provider context", () => {
+  describe('consumer component', () => {
+    it('consumer receives pseudo-state from provider context', () => {
       const Parent: any = rocketstyle()({
-        name: "ParentProvider",
+        name: 'ParentProvider',
         component: BaseComponent,
       }).config({ provider: true })
 
       const Child: any = rocketstyle()({
-        name: "ChildConsumer",
+        name: 'ChildConsumer',
         component: ChildComponent,
       }).config({
         consumer: (ctx: any) =>
           ctx((rawCtx: any) => ({
-            parentHover: rawCtx?.pseudo?.hover ? "yes" : "no",
+            parentHover: rawCtx?.pseudo?.hover ? 'yes' : 'no',
           })),
       })
 
       // Render parent, then render child within the same context
       withThemeContext(() => {
-        const _parentResult = unwrap(Parent({ children: null }))
+        const _parentResult = Parent({ children: null })
         // The parent pushes local context — child should see it
-        const childResult = unwrap(Child({}))
+        const childResult = Child({})
         expect(childResult).toBeDefined()
         const childProps = childResult?.props ?? childResult
-        expect(childProps["data-parent-hover"]).toBe("no")
+        expect(childProps['data-parent-hover']).toBe('no')
       })
     })
 
-    it("consumer without provider returns default pseudo", () => {
+    it('consumer without provider returns default pseudo', () => {
       const Child: any = rocketstyle()({
-        name: "OrphanConsumer",
+        name: 'OrphanConsumer',
         component: ChildComponent,
       }).config({
         consumer: (ctx: any) =>
           ctx((rawCtx: any) => ({
-            parentHover: rawCtx?.pseudo?.hover ? "yes" : "no",
+            parentHover: rawCtx?.pseudo?.hover ? 'yes' : 'no',
           })),
       })
 
-      const result = withThemeContext(() => unwrap(Child({})))
+      const result = withThemeContext(() => Child({}))
       const props = result?.props ?? result
-      expect(props["data-parent-hover"]).toBe("no")
+      expect(props['data-parent-hover']).toBe('no')
     })
 
-    it("component without consumer ignores provider context", () => {
+    it('component without consumer ignores provider context', () => {
       const Parent: any = rocketstyle()({
-        name: "IgnoredProvider",
+        name: 'IgnoredProvider',
         component: BaseComponent,
       }).config({ provider: true })
 
       const Child: any = rocketstyle()({
-        name: "NoConsumer",
+        name: 'NoConsumer',
         component: BaseComponent,
       }).config({})
 
@@ -182,10 +120,10 @@ describe("Provider/Consumer integration", () => {
     })
   })
 
-  describe("theme mode", () => {
-    it("light mode is default", () => {
+  describe('theme mode', () => {
+    it('light mode is default', () => {
       const Button: any = rocketstyle()({
-        name: "LightButton",
+        name: 'LightButton',
         component: BaseComponent,
       }).config({})
 
@@ -193,24 +131,14 @@ describe("Provider/Consumer integration", () => {
       expect(result).toBeDefined()
     })
 
-    it("dark mode is passed through Provider", () => {
+    it('dark mode is passed through Provider', () => {
       const Button: any = rocketstyle()({
-        name: "DarkButton",
+        name: 'DarkButton',
         component: BaseComponent,
       }).config({})
 
       pushContext(
-        new Map([
-          [
-            context.id,
-            {
-              theme: { rootSize: 16 },
-              mode: "dark",
-              isDark: true,
-              isLight: false,
-            },
-          ],
-        ]),
+        buildThemeContextMap({ mode: 'dark', isDark: true, isLight: false }),
       )
       try {
         const result = Button({})
@@ -220,9 +148,9 @@ describe("Provider/Consumer integration", () => {
       }
     })
 
-    it("inversed config flips the mode", () => {
+    it('inversed config flips the mode', () => {
       const Button: any = rocketstyle()({
-        name: "InversedButton",
+        name: 'InversedButton',
         component: BaseComponent,
       }).config({ inversed: true })
 
@@ -231,15 +159,15 @@ describe("Provider/Consumer integration", () => {
     })
   })
 
-  describe("nested providers", () => {
-    it("supports nested provider components", () => {
+  describe('nested providers', () => {
+    it('supports nested provider components', () => {
       const Outer: any = rocketstyle()({
-        name: "OuterProvider",
+        name: 'OuterProvider',
         component: BaseComponent,
       }).config({ provider: true })
 
       const Inner: any = rocketstyle()({
-        name: "InnerProvider",
+        name: 'InnerProvider',
         component: BaseComponent,
       }).config({ provider: true })