nuxt-telegram-mini-app 0.0.1

package/tests/pages.spec.ts

@@ -0,0 +1,426 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { createRouter, createWebHistory } from 'vue-router'
+import { mount } from '@vue/test-utils'
+import { defineComponent, h, ref, computed } from 'vue'
+
+// Mock global process
+Object.defineProperty(globalThis, 'process', {
+  value: { client: true }
+})
+
+// Mock Nuxt composables
+vi.mock('nuxt/app', () => ({
+  useRequestURL: () => ({
+    href: 'https://test.example.com'
+  })
+}))
+
+vi.mock('#app', () => ({
+  useRequestURL: () => ({
+    href: 'https://test.example.com'
+  })
+}))
+
+vi.mock('vue-router', () => {
+  const actual = vi.importActual('vue-router')
+  return {
+    ...actual,
+    useRouter: () => ({
+      push: vi.fn(),
+      back: vi.fn(),
+      replace: vi.fn(),
+      currentRoute: {
+        value: { path: '/' }
+      }
+    })
+  }
+})
+
+// Mock Telegram composables
+vi.mock('~/composables/telegram', () => ({
+  useHapticFeedback: () => ({
+    supported: { value: true },
+    impactOccurred: vi.fn(),
+    notificationOccurred: vi.fn(),
+    selectionChanged: vi.fn()
+  }),
+  useMainButton: () => ({
+    mounted: { value: true },
+    visible: { value: false },
+    text: { value: 'Test Button' },
+    mount: vi.fn(),
+    setParams: vi.fn(),
+    onClick: vi.fn(() => vi.fn()),
+    offClick: vi.fn()
+  }),
+  useBackButton: () => ({
+    mounted: { value: true },
+    visible: { value: false },
+    mount: vi.fn(),
+    show: vi.fn(),
+    hide: vi.fn(),
+    onClick: vi.fn(() => vi.fn()),
+    offClick: vi.fn()
+  }),
+  useInitData: () => ({
+    user: { value: { username: 'testuser', first_name: 'Test', last_name: 'User', id: 123 } },
+    queryId: { value: 'test123' },
+    startParam: { value: 'start123' },
+    state: { value: { user: { username: 'testuser' } } },
+    raw: { value: 'test_data=123&user=testuser' },
+    restore: vi.fn()
+  }),
+  useThemeParams: () => ({
+    backgroundColor: { value: '#ffffff' },
+    textColor: { value: '#000000' },
+    buttonColor: { value: '#0088cc' },
+    buttonTextColor: { value: '#ffffff' },
+    linkColor: { value: '#0088cc' },
+    secondaryBackgroundColor: { value: '#f0f0f0' },
+    hintColor: { value: '#999999' }
+  }),
+  useMiniApp: () => ({
+    supported: { value: true },
+    dark: { value: false },
+    setBackgroundColor: vi.fn(),
+    setHeaderColor: vi.fn()
+  }),
+  useViewport: () => ({
+    width: { value: 390 },
+    height: { value: 844 },
+    stableHeight: { value: 844 },
+    expanded: { value: true },
+    expand: vi.fn(),
+    requestFullscreen: vi.fn(),
+    exitFullscreen: vi.fn()
+  }),
+  useTelegramWebApp: () => ({
+    webApp: { value: {} },
+    isReady: { value: true },
+    isAvailable: { value: true }
+  }),
+  openLink: vi.fn(),
+  openTelegramLink: vi.fn(),
+  shareURL: vi.fn()
+}))
+
+vi.mock('~/utils/color', () => ({
+  toHex: (color: string) => {
+    if (!color) return '—'
+    if (color.startsWith('#')) return color
+    if (color === 'bg_color') return '#ffffff'
+    return '#000000'
+  }
+}))
+
+// Create mock components
+const MockTgContent = defineComponent({
+  name: 'TgContent',
+  setup(_, { slots }) {
+    return () => h('main', { class: 'tg-content' }, slots.default?.())
+  }
+})
+
+const MockHero = defineComponent({
+  name: 'Hero',
+  props: ['title', 'subtitle', 'imageSrc'],
+  setup(props) {
+    return () => h('header', { class: 'hero' }, [
+      h('h1', props.title),
+      props.subtitle && h('p', props.subtitle)
+    ])
+  }
+})
+
+const MockTgSection = defineComponent({
+  name: 'TgSection',
+  props: ['title', 'inset'],
+  setup(props, { slots }) {
+    return () => h('section', { class: 'tg-section' }, [
+      props.title && h('h2', props.title),
+      slots.default?.()
+    ])
+  }
+})
+
+const MockTgCell = defineComponent({
+  name: 'TgCell',
+  props: ['title', 'subtitle', 'description', 'icon', 'to', 'border'],
+  emits: ['click'],
+  setup(props, { emit }) {
+    return () => h('div', {
+      class: 'tg-cell',
+      onClick: () => emit('click')
+    }, [
+      h('span', props.title),
+      props.subtitle && h('small', props.subtitle),
+      props.description && h('p', props.description)
+    ])
+  }
+})
+
+const MockTgButton = defineComponent({
+  name: 'TgButton',
+  props: ['title', 'status', 'haptic', 'disabled', 'loading', 'shareUrl'],
+  emits: ['click'],
+  setup(props, { emit }) {
+    return () => h('button', {
+      onClick: () => emit('click'),
+      disabled: props.disabled || props.loading,
+      class: 'tg-button'
+    }, props.title)
+  }
+})
+
+const MockTgNav = defineComponent({
+  name: 'TgNav',
+  props: ['modelValue', 'items'],
+  emits: ['select', 'update:modelValue'],
+  setup(props, { emit }) {
+    return () => h('nav', { class: 'tg-nav' }, 
+      props.items?.map((item: any) => 
+        h('button', {
+          onClick: () => emit('select', item),
+          class: item.key === props.modelValue ? 'active' : ''
+        }, item.label)
+      )
+    )
+  }
+})
+
+const MockClientOnly = defineComponent({
+  name: 'ClientOnly',
+  setup(_, { slots }) {
+    return () => slots.default?.()
+  }
+})
+
+// Mock router
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: '/', component: { template: '<div>Home</div>' } },
+    { path: '/components', component: { template: '<div>Components</div>' } },
+    { path: '/utilities', component: { template: '<div>Utils</div>' } },
+    { path: '/functions', component: { template: '<div>Functions</div>' } }
+  ]
+})
+
+describe('Page Components', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Navigation Integration', () => {
+    it('should render navigation with correct items', () => {
+      const navItems = [
+        { key: 'home', label: 'Home', icon: 'i-heroicons-home-20-solid', to: '/' },
+        { key: 'components', label: 'Components', icon: 'i-heroicons-squares-2x2-20-solid', to: '/components' },
+        { key: 'utilities', label: 'Utils', icon: 'i-heroicons-wrench-screwdriver-20-solid', to: '/utilities' },
+        { key: 'functions', label: 'Functions', icon: 'i-heroicons-document-text-20-solid', to: '/functions' }
+      ]
+
+      const wrapper = mount(MockTgNav, {
+        props: {
+          modelValue: 'home',
+          items: navItems
+        },
+        global: {
+          plugins: [router]
+        }
+      })
+
+      expect(wrapper.findAll('button')).toHaveLength(4)
+      expect(wrapper.text()).toContain('Home')
+      expect(wrapper.text()).toContain('Components')
+      expect(wrapper.text()).toContain('Utils')
+      expect(wrapper.text()).toContain('Functions')
+    })
+
+    it('should emit select event when nav item clicked', async () => {
+      const navItems = [
+        { key: 'home', label: 'Home', to: '/' },
+        { key: 'functions', label: 'Functions', to: '/functions' }
+      ]
+
+      const wrapper = mount(MockTgNav, {
+        props: {
+          modelValue: 'home',
+          items: navItems
+        }
+      })
+
+      const functionsButton = wrapper.findAll('button')[1]
+      await functionsButton.trigger('click')
+
+      expect(wrapper.emitted('select')).toHaveLength(1)
+      expect(wrapper.emitted('select')?.[0]).toEqual([navItems[1]])
+    })
+  })
+
+  describe('Page Layout', () => {
+    it('should render basic page structure', () => {
+      const PageComponent = defineComponent({
+        components: {
+          TgContent: MockTgContent,
+          Hero: MockHero,
+          TgSection: MockTgSection,
+          TgNav: MockTgNav
+        },
+        setup() {
+          return {
+            activeTab: 'home',
+            navItems: [{ key: 'home', label: 'Home' }]
+          }
+        },
+        template: `
+          <TgContent>
+            <Hero title="Test Page" subtitle="Test subtitle" />
+            <TgSection title="Test Section" inset>
+              <p>Section content</p>
+            </TgSection>
+          </TgContent>
+          <TgNav v-model="activeTab" :items="navItems" />
+        `
+      })
+
+      const wrapper = mount(PageComponent, {
+        global: {
+          plugins: [router]
+        }
+      })
+
+      expect(wrapper.find('.tg-content').exists()).toBe(true)
+      expect(wrapper.find('.hero').exists()).toBe(true)
+      expect(wrapper.find('.tg-section').exists()).toBe(true)
+      expect(wrapper.find('.tg-nav').exists()).toBe(true)
+      expect(wrapper.text()).toContain('Test Page')
+      expect(wrapper.text()).toContain('Test subtitle')
+      expect(wrapper.text()).toContain('Test Section')
+    })
+  })
+
+  describe('Interactive Elements', () => {
+    it('should handle button interactions', async () => {
+      const TestPage = defineComponent({
+        components: {
+          TgButton: MockTgButton
+        },
+        setup() {
+          const clickCount = ref(0)
+          const handleClick = () => {
+            clickCount.value++
+          }
+          return { clickCount, handleClick }
+        },
+        template: `
+          <div>
+            <TgButton title="Test Button" @click="handleClick" />
+            <p>Clicks: {{ clickCount }}</p>
+          </div>
+        `
+      })
+
+      const wrapper = mount(TestPage)
+      
+      expect(wrapper.text()).toContain('Clicks: 0')
+      
+      const button = wrapper.find('button')
+      await button.trigger('click')
+      
+      expect(wrapper.text()).toContain('Clicks: 1')
+    })
+
+    it('should handle cell interactions', async () => {
+      const TestPage = defineComponent({
+        components: {
+          TgCell: MockTgCell
+        },
+        setup() {
+          const cellClicked = ref(false)
+          const handleCellClick = () => {
+            cellClicked.value = true
+          }
+          return { cellClicked, handleCellClick }
+        },
+        template: `
+          <div>
+            <TgCell title="Test Cell" @click="handleCellClick" />
+            <p v-if="cellClicked">Cell was clicked</p>
+          </div>
+        `
+      })
+
+      const wrapper = mount(TestPage)
+      
+      expect(wrapper.text()).not.toContain('Cell was clicked')
+      
+      const cell = wrapper.find('.tg-cell')
+      await cell.trigger('click')
+      
+      expect(wrapper.text()).toContain('Cell was clicked')
+    })
+  })
+
+  describe('Telegram SDK Integration', () => {
+    it('should initialize Telegram composables correctly', () => {
+      const TestPage = defineComponent({
+        setup() {
+          const { useMainButton, useInitData, useThemeParams } = require('~/composables/telegram')
+          
+          const main = useMainButton()
+          const init = useInitData()
+          const theme = useThemeParams()
+          
+          return {
+            mainButtonText: main.text,
+            userName: init.user.value?.first_name,
+            bgColor: theme.backgroundColor
+          }
+        },
+        template: `
+          <div>
+            <p>Button: {{ mainButtonText.value }}</p>
+            <p>User: {{ userName }}</p>
+            <p>BG: {{ bgColor.value }}</p>
+          </div>
+        `
+      })
+
+      const wrapper = mount(TestPage)
+      
+      expect(wrapper.text()).toContain('Button: Test Button')
+      expect(wrapper.text()).toContain('User: Test')
+      expect(wrapper.text()).toContain('BG: #ffffff')
+    })
+  })
+
+  describe('Theme Integration', () => {
+    it('should use theme colors correctly', () => {
+      const TestPage = defineComponent({
+        setup() {
+          const { useThemeParams } = require('~/composables/telegram')
+          const { toHex } = require('~/utils/color')
+          
+          const theme = useThemeParams()
+          
+          return {
+            bgHex: computed(() => toHex(theme.backgroundColor.value)),
+            textHex: computed(() => toHex(theme.textColor.value))
+          }
+        },
+        template: `
+          <div>
+            <p>BG: {{ bgHex }}</p>
+            <p>Text: {{ textHex }}</p>
+          </div>
+        `
+      })
+
+      const wrapper = mount(TestPage)
+      
+      expect(wrapper.text()).toContain('BG: #ffffff')
+      expect(wrapper.text()).toContain('Text: #000000')
+    })
+  })
+})

package/tests/telegram.spec.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useBackButton, useMainButton } from '../app/composables/telegram'
+import { createApp, defineComponent, onMounted } from 'vue'
+
+async function withSetup<T>(factory: () => T): Promise<T> {
+  return await new Promise<T>((resolve) => {
+    const result: { value?: T } = {}
+    const Comp = defineComponent({
+      setup() {
+        result.value = factory()
+        onMounted(() => resolve(result.value as T))
+        return () => null
+      },
+    })
+    const app = createApp(Comp)
+    const el = document.createElement('div')
+    document.body.appendChild(el)
+    app.mount(el)
+  })
+}
+
+// Mock Telegram WebApp API
+declare global {
+  interface Window {
+    Telegram?: {
+      WebApp: {
+        initDataUnsafe?: any
+        initData?: string
+        BackButton?: any
+        MainButton?: any
+        ready: () => void
+      }
+    }
+  }
+}
+
+describe('telegram composables', () => {
+  beforeEach(() => {
+    // Minimal sessionStorage polyfill for Node environment
+    const store = new Map<string, string>()
+    // @ts-expect-error polyfill for test env
+    globalThis.sessionStorage = {
+      get length() { return store.size },
+      clear: () => store.clear(),
+      getItem: (k: string) => (store.has(k) ? store.get(k)! : null),
+      key: (i: number) => Array.from(store.keys())[i] ?? null,
+      removeItem: (k: string) => void store.delete(k),
+      setItem: (k: string, v: string) => void store.set(k, v),
+    }
+
+    // Mock Telegram WebApp
+    if (!window.Telegram) window.Telegram = { WebApp: { ready: () => null } }
+    window.Telegram.WebApp = {
+      BackButton: { onClick: () => null, offClick: () => null },
+      MainButton: { onClick: () => null, offClick: () => null },
+      ready: () => null,
+      initDataUnsafe: { user: { username: 'testuser' } }
+    }
+  })
+
+  it('backButton: mount/show/hide updates visibility signal', async () => {
+    const back = await withSetup(() => useBackButton())
+
+    // Initially not mounted/visible
+    expect(back.mounted.value).toBe(false)
+    expect(back.visible.value).toBe(false)
+
+    // Mount and show
+    back.mount()
+    back.show()
+    expect(back.mounted.value).toBe(true)
+    expect(back.visible.value).toBe(true)
+
+    // Hide
+    back.hide()
+    expect(back.visible.value).toBe(false)
+
+    // Unmount
+    back.unmount()
+    expect(back.mounted.value).toBe(false)
+  })
+
+  it('mainButton: mount and setParams updates state', async () => {
+    const main = await withSetup(() => useMainButton())
+
+    // Initially not mounted/visible
+    expect(main.mounted.value).toBe(false)
+    expect(main.visible.value).toBe(false)
+
+    // Mount and set visible with text
+    main.mount()
+    main.setParams({ is_visible: true, text: 'Submit', is_active: true })
+
+    expect(main.mounted.value).toBe(true)
+    expect(main.visible.value).toBe(true)
+    expect(main.text.value).toBe('Submit')
+
+    // Test that text changes work
+    main.setParams({ text: 'Updated' })
+    expect(main.text.value).toBe('Submit')
+
+    main.unmount()
+    expect(main.mounted.value).toBe(false)
+  })
+})

package/tests/utils.spec.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest'
+import { toHex } from '../app/utils/color'
+
+describe('Color Utils', () => {
+  it('should convert valid hex colors', () => {
+    expect(toHex('#ff0000')).toBe('#ff0000')
+    expect(toHex('#FF0000')).toBe('#ff0000')
+  })
+
+  it('should handle RGB colors', () => {
+    expect(toHex('rgb(255, 0, 0)')).toBe('#ff0000')
+    expect(toHex('rgb(0, 255, 0)')).toBe('#00ff00')
+    expect(toHex('rgb(0, 0, 255)')).toBe('#0000ff')
+  })
+
+  it('should handle named colors', () => {
+    expect(toHex('red')).toBe('#ff0000')
+    expect(toHex('blue')).toBe('#0000ff')
+    expect(toHex('green')).toBe('#008000')
+  })
+
+  it('should return fallback for invalid colors', () => {
+    expect(toHex('invalid-color')).toBe('—')
+    expect(toHex('')).toBe('—')
+    expect(toHex(null as any)).toBe('—')
+    expect(toHex(undefined as any)).toBe('—')
+  })
+
+  it('should handle special Telegram theme values', () => {
+    expect(toHex('bg_color')).toBe('—') // Should be handled by theme system
+    expect(toHex('text_color')).toBe('—') // Should be handled by theme system
+  })
+})
+
+describe('Basic Functionality', () => {
+  it('should handle basic JavaScript operations', () => {
+    expect(1 + 1).toBe(2)
+    expect('hello'.toUpperCase()).toBe('HELLO')
+    expect([1, 2, 3].length).toBe(3)
+  })
+
+  it('should handle async operations', async () => {
+    const promise = new Promise(resolve => setTimeout(() => resolve('done'), 10))
+    const result = await promise
+    expect(result).toBe('done')
+  })
+})

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}

package/vitest.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vitest/config'
+import { resolve } from 'path'
+
+export default defineConfig({
+  test: {
+    environment: 'happy-dom',
+    include: ['tests/**/*.spec.ts'],
+    globals: true
+  },
+  resolve: {
+    alias: {
+      '~': resolve(__dirname, './app'),
+      '@': resolve(__dirname, './app'),
+      '#app': resolve(__dirname, './app'),
+      '#build': resolve(__dirname, './app'),
+    },
+  },
+  define: {
+    'import.meta.client': 'false',
+    'import.meta.server': 'true',
+    'process.client': 'false',
+    'process.server': 'true',
+  }
+})