@stone-js/starters 0.8.3 → 0.8.4

package/full-react-imperative/app/components/PostWidget/PostWidget.tsx

@@ -2,9 +2,9 @@ import { User } from '../../models/User'
 import { Post } from '../../models/Post'
 import { deletePost } from '../../pages/utils'
 import { PostCard } from '../PostCard/PostCard'
-import PullToRefresh from 'react-pull-to-refresh'
 import { IContainer, ILogger } from '@stone-js/core'
 import { FC, useEffect, useRef, useState } from 'react'
+import { PullToRefresh } from '../PullToRefresh/PullToRefresh'
 import { PostSkeleton } from '../PostSkeleton/PostSkeleton'
 import { CommentWidget } from '../CommentWidget/CommentWidget'
 import { IRouter, ReactIncomingEvent } from '@stone-js/use-react'

package/full-react-imperative/app/components/PullToRefresh/PullToRefresh.css

@@ -0,0 +1,10 @@
+.pull-to-refresh {
+  will-change: transform;
+}
+
+.pull-to-refresh__indicator {
+  text-align: center;
+  padding: 8px 0;
+  font-size: 0.85rem;
+  opacity: 0.7;
+}

package/full-react-imperative/app/components/PullToRefresh/PullToRefresh.tsx

@@ -0,0 +1,66 @@
+import './PullToRefresh.css'
+import { FC, ReactNode, TouchEvent, useRef, useState } from 'react'
+
+/**
+ * PullToRefresh options.
+ */
+export interface PullToRefreshOptions {
+  children: ReactNode
+  threshold?: number
+  onRefresh: () => Promise<void> | void
+}
+
+/**
+ * Lightweight, SSR-safe pull-to-refresh wrapper.
+ *
+ * Implemented in-app (with no dependency that touches `window` at import time)
+ * so it renders safely during server-side rendering and static route
+ * generation. The pull gesture is a progressive enhancement that only activates
+ * from touch interactions on the client.
+ */
+export const PullToRefresh: FC<PullToRefreshOptions> = ({ children, onRefresh, threshold = 64 }) => {
+  const startY = useRef<number | null>(null)
+  const [pullY, setPullY] = useState(0)
+  const [refreshing, setRefreshing] = useState(false)
+
+  const onTouchStart = (event: TouchEvent): void => {
+    if (refreshing) { return }
+    // Only start a pull when the page is scrolled to the very top.
+    if (document.documentElement.scrollTop <= 0) {
+      startY.current = event.touches[0].clientY
+    }
+  }
+
+  const onTouchMove = (event: TouchEvent): void => {
+    if (startY.current === null || refreshing) { return }
+    const delta = event.touches[0].clientY - startY.current
+    if (delta > 0) { setPullY(Math.min(delta, threshold * 1.5)) }
+  }
+
+  const onTouchEnd = (): void => {
+    if (startY.current === null) { return }
+    const shouldRefresh = pullY >= threshold
+    startY.current = null
+    setPullY(0)
+    if (shouldRefresh) {
+      setRefreshing(true)
+      void Promise.resolve(onRefresh()).finally(() => setRefreshing(false))
+    }
+  }
+
+  return (
+    <div
+      className='pull-to-refresh'
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
+      style={{
+        transform: pullY > 0 ? `translateY(${pullY}px)` : undefined,
+        transition: pullY > 0 ? 'none' : 'transform .2s ease'
+      }}
+    >
+      {refreshing && <div className='pull-to-refresh__indicator'>Refreshing…</div>}
+      {children}
+    </div>
+  )
+}

package/full-react-imperative/app/layout/ErrorLayout/ErrorLayout.tsx

@@ -18,7 +18,7 @@ export const ErrorLayout = (): IPageLayout => ({
         <header className='mt-64'>
           <div className='container'>
             <p className='pa-24'>
-              <img src='/logo.png' className='logo' alt='Stone.js Logo' />
+              <img src='/logo.svg' className='logo' alt='Stone.js' />
             </p>
           </div>
         </header>

package/full-react-imperative/app/layout/SecurityLayout/SecurityLayout.tsx

@@ -18,7 +18,7 @@ export const SecurityLayout = (): IPageLayout => ({
         <header className='mt-64'>
           <div className='container'>
             <p className='pa-24'>
-              <img src='/logo.png' className='logo' alt='Stone.js Logo' />
+              <img src='/logo.svg' className='logo' alt='Stone.js' />
             </p>
           </div>
         </header>

package/full-react-imperative/package.json

@@ -18,26 +18,25 @@
     "test:cvg": "npm run test -- --coverage"
   },
   "dependencies": {
-    "@stone-js/env": "^0.8.3",
-    "@stone-js/http-core": "^0.8.3",
-    "@stone-js/node-http-adapter": "^0.8.3",
-    "@stone-js/router": "^0.8.3",
-    "@stone-js/filesystem": "^0.8.3",
-    "@stone-js/core": "^0.8.3",
-    "@stone-js/use-react": "^0.8.3",
-    "@stone-js/browser-adapter": "^0.8.3",
-    "@stone-js/node-cli-adapter": "^0.8.3",
+    "@stone-js/env": "^0.8.4",
+    "@stone-js/http-core": "^0.8.4",
+    "@stone-js/node-http-adapter": "^0.8.4",
+    "@stone-js/router": "^0.8.4",
+    "@stone-js/filesystem": "^0.8.4",
+    "@stone-js/core": "^0.8.4",
+    "@stone-js/use-react": "^0.8.4",
+    "@stone-js/browser-adapter": "^0.8.4",
+    "@stone-js/node-cli-adapter": "^0.8.4",
     "axios": "^1.7.9",
     "dayjs": "^1.11.13",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-pull-to-refresh": "^2.0.1"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-typescript": "^7.27.0",
-    "@stone-js/cli": "^0.8.3",
+    "@stone-js/cli": "^0.8.4",
     "@types/axios": "^0.14.4",
     "@types/node": "^24.0.7",
     "@types/react": "^19.0.7",

package/full-react-imperative/public/logo.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96" role="img" aria-label="Stone.js">
+  <title>Stone.js</title>
+  <style>
+    .ink { stroke: #1B1613; }
+    @media (prefers-color-scheme: dark) { .ink { stroke: #EFE8DC; } }
+  </style>
+  <defs>
+    <linearGradient id="braise" gradientUnits="userSpaceOnUse" x1="22" y1="14" x2="74" y2="26.1">
+      <stop offset="0" stop-color="#FFC46B" />
+      <stop offset="1" stop-color="#FF5A1F" />
+    </linearGradient>
+  </defs>
+  <path class="ink" d="M 79.96 36.4 A 34 34 0 0 1 53.9 81.5" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path class="ink" d="M 42.1 81.5 A 34 34 0 0 1 16.05 36.4" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path d="M 22 26.1 A 34 34 0 0 1 74 26.1" fill="none" stroke="url(#braise)" stroke-width="11" stroke-linecap="round" />
+</svg>

package/full-react-imperative/tests/LayoutHeader.spec.ts

@@ -0,0 +1,39 @@
+import { createElement } from 'react'
+import { renderToString } from 'react-dom/server'
+import { LayoutHeader } from '../app/components/LayoutHeader/LayoutHeader'
+
+// We must mock router-bound components to lighten the test environment
+vi.mock('@stone-js/use-react', async (importOriginal) => {
+  const actual: any = await importOriginal()
+  return {
+    ...actual,
+    StoneLink: ({ children }: any) => children
+  }
+})
+
+describe('LayoutHeader', () => {
+  const render = (): string => {
+    const container = {
+      make: (key: string) => key === 'event' ? { getUser: () => undefined } : {}
+    } as any
+    return renderToString(createElement(LayoutHeader, { container }))
+  }
+
+  it('should render the real Stone.js logo', () => {
+    // Act
+    const html = render()
+
+    // Assert
+    expect(html).toContain('/logo.svg')
+    expect(html).toContain('alt="Stone.js"')
+  })
+
+  it('should render the Stone.js brand for an unauthenticated visitor', () => {
+    // Act
+    const html = render()
+
+    // Assert
+    expect(html).toContain('Stone.js')
+    expect(html).toContain('app-navbar')
+  })
+})

package/full-service-declarative/package.json

@@ -22,14 +22,14 @@
   },
   "dependencies": {
     "@libsql/client": "^0.14.0",
-    "@stone-js/core": "^0.8.3",
-    "@stone-js/env": "^0.8.3",
-    "@stone-js/filesystem": "^0.8.3",
-    "@stone-js/http-core": "^0.8.3",
-    "@stone-js/node-cli-adapter": "^0.8.3",
-    "@stone-js/node-http-adapter": "^0.8.3",
-    "@stone-js/pipeline": "^0.8.3",
-    "@stone-js/router": "^0.8.3",
+    "@stone-js/core": "^0.8.4",
+    "@stone-js/env": "^0.8.4",
+    "@stone-js/filesystem": "^0.8.4",
+    "@stone-js/http-core": "^0.8.4",
+    "@stone-js/node-cli-adapter": "^0.8.4",
+    "@stone-js/node-http-adapter": "^0.8.4",
+    "@stone-js/pipeline": "^0.8.4",
+    "@stone-js/router": "^0.8.4",
     "bcryptjs": "^3.0.2",
     "drizzle-orm": "^0.44.2",
     "jsonwebtoken": "^9.0.2"
@@ -38,7 +38,7 @@
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-typescript": "^7.27.0",
-    "@stone-js/cli": "^0.8.3",
+    "@stone-js/cli": "^0.8.4",
     "@types/jsonwebtoken": "^9.0.8",
     "@types/node": "^24.0.3",
     "@vitest/coverage-v8": "^3.0.9",

package/full-service-declarative/tests/PostService.spec.ts

@@ -0,0 +1,56 @@
+import { NotFoundError } from '@stone-js/http-core'
+import { PostService } from '../app/services/PostService'
+import { PostRepository } from '../app/repositories/PostRepository'
+import { Post } from '../app/models/Post'
+
+// Neutralize the @Service decorator to lighten the test environment,
+// while keeping the real `isNotEmpty` helper so we assert real behavior.
+vi.mock(import('@stone-js/core'), async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    Service: vi.fn(() => vi.fn()),
+  }
+})
+
+describe('PostService', () => {
+  let service: PostService
+  let postRepository: PostRepository
+
+  beforeEach(() => {
+    postRepository = {
+      list: vi.fn(),
+      findById: vi.fn(),
+    } as unknown as PostRepository
+
+    service = new PostService({ postRepository })
+  })
+
+  it('should delegate list() to the repository with the given limit', async () => {
+    // Arrange
+    const posts = [{ id: 1, title: 'Hello' }] as unknown as Post[]
+    ;(postRepository.list as any).mockResolvedValue(posts)
+
+    // Act
+    const result = await service.list(5)
+
+    // Assert
+    expect(result).toBe(posts)
+    expect(postRepository.list).toHaveBeenCalledWith({ limit: 5 })
+  })
+
+  it('should return the post when found and throw NotFoundError otherwise', async () => {
+    // Arrange
+    const post = { id: 42, title: 'Answer' } as unknown as Post
+    ;(postRepository.findById as any).mockResolvedValueOnce(post)
+
+    // Act & Assert (found)
+    await expect(service.findById(42)).resolves.toBe(post)
+
+    // Arrange (not found)
+    ;(postRepository.findById as any).mockResolvedValueOnce(undefined)
+
+    // Act & Assert (not found)
+    await expect(service.findById(99)).rejects.toBeInstanceOf(NotFoundError)
+  })
+})

package/full-service-declarative/vitest.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vitest/config.js'
+import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   test: {

package/full-service-imperative/package.json

@@ -22,14 +22,14 @@
   },
   "dependencies": {
     "@libsql/client": "^0.14.0",
-    "@stone-js/core": "^0.8.3",
-    "@stone-js/env": "^0.8.3",
-    "@stone-js/filesystem": "^0.8.3",
-    "@stone-js/http-core": "^0.8.3",
-    "@stone-js/node-cli-adapter": "^0.8.3",
-    "@stone-js/node-http-adapter": "^0.8.3",
-    "@stone-js/pipeline": "^0.8.3",
-    "@stone-js/router": "^0.8.3",
+    "@stone-js/core": "^0.8.4",
+    "@stone-js/env": "^0.8.4",
+    "@stone-js/filesystem": "^0.8.4",
+    "@stone-js/http-core": "^0.8.4",
+    "@stone-js/node-cli-adapter": "^0.8.4",
+    "@stone-js/node-http-adapter": "^0.8.4",
+    "@stone-js/pipeline": "^0.8.4",
+    "@stone-js/router": "^0.8.4",
     "bcryptjs": "^3.0.2",
     "drizzle-orm": "^0.44.2",
     "jsonwebtoken": "^9.0.2"
@@ -38,7 +38,7 @@
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-typescript": "^7.27.0",
-    "@stone-js/cli": "^0.8.3",
+    "@stone-js/cli": "^0.8.4",
     "@types/jsonwebtoken": "^9.0.8",
     "@types/node": "^24.0.3",
     "@vitest/coverage-v8": "^3.0.9",

package/full-service-imperative/tests/PostService.spec.ts

@@ -0,0 +1,47 @@
+import { NotFoundError } from '@stone-js/http-core'
+import { factoryPostService } from '../app/services/PostService'
+import { IPostService } from '../app/services/contracts/IPostService'
+import { IPostRepository } from '../app/repositories/contracts/IPostRepository'
+import { Post } from '../app/models/Post'
+
+describe('factoryPostService', () => {
+  let service: IPostService
+  let postRepository: IPostRepository
+
+  beforeEach(() => {
+    postRepository = {
+      list: vi.fn(),
+      findById: vi.fn(),
+    } as unknown as IPostRepository
+
+    service = factoryPostService({ postRepository })
+  })
+
+  it('should delegate list() to the repository with the given limit', async () => {
+    // Arrange
+    const posts = [{ id: 1, title: 'Hello' }] as unknown as Post[]
+    ;(postRepository.list as any).mockResolvedValue(posts)
+
+    // Act
+    const result = await service.list(5)
+
+    // Assert
+    expect(result).toBe(posts)
+    expect(postRepository.list).toHaveBeenCalledWith({ limit: 5 })
+  })
+
+  it('should return the post when found and throw NotFoundError otherwise', async () => {
+    // Arrange
+    const post = { id: 42, title: 'Answer' } as unknown as Post
+    ;(postRepository.findById as any).mockResolvedValueOnce(post)
+
+    // Act & Assert (found)
+    await expect(service.findById(42)).resolves.toBe(post)
+
+    // Arrange (not found)
+    ;(postRepository.findById as any).mockResolvedValueOnce(undefined)
+
+    // Act & Assert (not found)
+    await expect(service.findById(99)).rejects.toBeInstanceOf(NotFoundError)
+  })
+})

package/full-service-imperative/vitest.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vitest/config.js'
+import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   test: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stone-js/starters",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "This repository contains official **starter templates** for Stone.js applications.",
   "author": "Mr. Stone <evensstone@gmail.com>",
   "license": "MIT",

package/standard-react-declarative/app/pages/welcome/WelcomePage.tsx

@@ -50,6 +50,7 @@ export class WelcomePage implements IPage<ReactIncomingEvent> {
   render ({ data }: PageRenderContext<ResponseData>): JSX.Element {
     return (
       <section className='container'>
+        <img src='/logo.svg' alt='Stone.js' width={96} height={96} />
         <h1 className='h1 text-center mt-64'>{data?.message}</h1>
       </section>
     )

package/standard-react-declarative/package.json

@@ -20,19 +20,19 @@
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@stone-js/use-react": "^0.8.3",
-    "@stone-js/browser-adapter": "^0.8.3",
-    "@stone-js/pipeline": "^0.8.3",
-    "@stone-js/http-core": "^0.8.3",
-    "@stone-js/node-http-adapter": "^0.8.3",
-    "@stone-js/router": "^0.8.3",
-    "@stone-js/core": "^0.8.3"
+    "@stone-js/use-react": "^0.8.4",
+    "@stone-js/browser-adapter": "^0.8.4",
+    "@stone-js/pipeline": "^0.8.4",
+    "@stone-js/http-core": "^0.8.4",
+    "@stone-js/node-http-adapter": "^0.8.4",
+    "@stone-js/router": "^0.8.4",
+    "@stone-js/core": "^0.8.4"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-typescript": "^7.27.0",
-    "@stone-js/cli": "^0.8.3",
+    "@stone-js/cli": "^0.8.4",
     "@types/node": "^24.0.7",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",

package/standard-react-declarative/public/logo.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96" role="img" aria-label="Stone.js">
+  <title>Stone.js</title>
+  <style>
+    .ink { stroke: #1B1613; }
+    @media (prefers-color-scheme: dark) { .ink { stroke: #EFE8DC; } }
+  </style>
+  <defs>
+    <linearGradient id="braise" gradientUnits="userSpaceOnUse" x1="22" y1="14" x2="74" y2="26.1">
+      <stop offset="0" stop-color="#FFC46B" />
+      <stop offset="1" stop-color="#FF5A1F" />
+    </linearGradient>
+  </defs>
+  <path class="ink" d="M 79.96 36.4 A 34 34 0 0 1 53.9 81.5" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path class="ink" d="M 42.1 81.5 A 34 34 0 0 1 16.05 36.4" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path d="M 22 26.1 A 34 34 0 0 1 74 26.1" fill="none" stroke="url(#braise)" stroke-width="11" stroke-linecap="round" />
+</svg>

package/standard-react-declarative/tests/WelcomePage.spec.ts

@@ -0,0 +1,69 @@
+import { ILogger } from '@stone-js/core'
+import { renderToString } from 'react-dom/server'
+import { ReactIncomingEvent } from '@stone-js/use-react'
+import { WelcomePage } from '../app/pages/welcome/WelcomePage'
+import { WelcomeService } from '../app/services/WelcomeService'
+
+// We must mock decorators to lighten the test environment
+vi.mock('@stone-js/use-react', async (importOriginal) => {
+  const actual: any = await importOriginal()
+  return {
+    ...actual,
+    Page: vi.fn(() => vi.fn()),
+  }
+})
+
+// We must mock decorators to lighten the test environment
+vi.mock('@stone-js/core', async (importOriginal) => {
+  const actual: any = await importOriginal()
+  return {
+    ...actual,
+    Service: vi.fn(() => vi.fn()),
+  }
+})
+
+describe('WelcomePage', () => {
+  let page: WelcomePage
+  let mockedLogger: ILogger
+
+  beforeEach(() => {
+    mockedLogger = {
+      info: vi.fn(),
+    } as unknown as ILogger
+
+    page = new WelcomePage({ welcomeService: new WelcomeService({ logger: mockedLogger }) })
+  })
+
+  it('should handle incoming events', () => {
+    // Arrange
+    const expectedMessage = 'Hello World!'
+    const event = { get: () => 'World' } as unknown as ReactIncomingEvent
+
+    // Act
+    const response = page.handle(event)
+
+    // Assert
+    expect(response.message).toBe(expectedMessage)
+    expect(mockedLogger.info).toHaveBeenCalledWith('Welcome World')
+  })
+
+  it('should render the message', () => {
+    // Arrange
+    const message = 'Hello World!'
+
+    // Act
+    const response = renderToString(page.render({ data: { message } } as any))
+
+    // Assert
+    expect(response).toContain(message)
+  })
+
+  it('should render the Stone.js logo', () => {
+    // Act
+    const response = renderToString(page.render({ data: { message: 'Hello World!' } } as any))
+
+    // Assert
+    expect(response).toContain('/logo.svg')
+    expect(response).toContain('alt="Stone.js"')
+  })
+})

package/standard-react-imperative/app/pages/welcome/WelcomePage.tsx

@@ -38,6 +38,7 @@ export const WelcomePage = ({ welcomeService }: WelcomePageOptions): IPage<React
   render ({ data }: PageRenderContext<ResponseData>): JSX.Element {
     return (
       <section className='container'>
+        <img src='/logo.svg' alt='Stone.js' width={96} height={96} />
         <h1 className='h1 text-center mt-64'>{data?.message}</h1>
       </section>
     )

package/standard-react-imperative/package.json

@@ -20,19 +20,19 @@
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@stone-js/use-react": "^0.8.3",
-    "@stone-js/browser-adapter": "^0.8.3",
-    "@stone-js/pipeline": "^0.8.3",
-    "@stone-js/http-core": "^0.8.3",
-    "@stone-js/node-http-adapter": "^0.8.3",
-    "@stone-js/router": "^0.8.3",
-    "@stone-js/core": "^0.8.3"
+    "@stone-js/use-react": "^0.8.4",
+    "@stone-js/browser-adapter": "^0.8.4",
+    "@stone-js/pipeline": "^0.8.4",
+    "@stone-js/http-core": "^0.8.4",
+    "@stone-js/node-http-adapter": "^0.8.4",
+    "@stone-js/router": "^0.8.4",
+    "@stone-js/core": "^0.8.4"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-typescript": "^7.27.0",
-    "@stone-js/cli": "^0.8.3",
+    "@stone-js/cli": "^0.8.4",
     "@types/node": "^24.0.7",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",

package/standard-react-imperative/public/logo.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96" role="img" aria-label="Stone.js">
+  <title>Stone.js</title>
+  <style>
+    .ink { stroke: #1B1613; }
+    @media (prefers-color-scheme: dark) { .ink { stroke: #EFE8DC; } }
+  </style>
+  <defs>
+    <linearGradient id="braise" gradientUnits="userSpaceOnUse" x1="22" y1="14" x2="74" y2="26.1">
+      <stop offset="0" stop-color="#FFC46B" />
+      <stop offset="1" stop-color="#FF5A1F" />
+    </linearGradient>
+  </defs>
+  <path class="ink" d="M 79.96 36.4 A 34 34 0 0 1 53.9 81.5" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path class="ink" d="M 42.1 81.5 A 34 34 0 0 1 16.05 36.4" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path d="M 22 26.1 A 34 34 0 0 1 74 26.1" fill="none" stroke="url(#braise)" stroke-width="11" stroke-linecap="round" />
+</svg>

package/standard-react-imperative/tests/WelcomePage.spec.ts

@@ -0,0 +1,51 @@
+import { ILogger } from '@stone-js/core'
+import { renderToString } from 'react-dom/server'
+import { ReactIncomingEvent } from '@stone-js/use-react'
+import { WelcomePage } from '../app/pages/welcome/WelcomePage'
+import { WelcomeService } from '../app/services/WelcomeService'
+
+describe('WelcomePage', () => {
+  let page: any
+  let mockedLogger: ILogger
+
+  beforeEach(() => {
+    mockedLogger = {
+      info: vi.fn(),
+    } as unknown as ILogger
+
+    page = WelcomePage({ welcomeService: WelcomeService({ logger: mockedLogger }) })
+  })
+
+  it('should handle incoming events', () => {
+    // Arrange
+    const expectedMessage = 'Hello World!'
+    const event = { get: () => 'World' } as unknown as ReactIncomingEvent
+
+    // Act
+    const response = page.handle(event) as { message: string }
+
+    // Assert
+    expect(response.message).toBe(expectedMessage)
+    expect(mockedLogger.info).toHaveBeenCalledWith('Welcome World')
+  })
+
+  it('should render the message', () => {
+    // Arrange
+    const message = 'Hello World!'
+
+    // Act
+    const response = renderToString(page.render({ data: { message } } as any))
+
+    // Assert
+    expect(response).toContain(message)
+  })
+
+  it('should render the Stone.js logo', () => {
+    // Act
+    const response = renderToString(page.render({ data: { message: 'Hello World!' } } as any))
+
+    // Assert
+    expect(response).toContain('/logo.svg')
+    expect(response).toContain('alt="Stone.js"')
+  })
+})