Temp

packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.browser.tsx

@@ -0,0 +1,212 @@
+// Components
+import { VAppBar } from '@/components/VAppBar'
+import { VLayout } from '@/components/VLayout'
+import { VMain } from '@/components/VMain'
+
+// Utilities
+import { createVuetify } from 'vuetify'
+import { render, screen } from '@testing-library/vue'
+import { ref, nextTick } from 'vue'
+import '@testing-library/jest-dom' // For DOM matchers
+import 'vuetify/styles' // Vuetify styles
+
+const vuetify = createVuetify()
+
+// Scroll Options
+const SCROLL_OPTIONS = { behavior: 'smooth' }
+
+describe('VAppBar', () => {
+  it('allows custom height', async () => {
+    const { rerender } = render(
+      () => (
+        <VLayout>
+          <VAppBar height={64} />
+        </VLayout>
+      ),
+      {
+        global: {
+          plugins: [vuetify],
+        },
+      }
+    )
+
+    const appBar = screen.getByRole('banner') // Assuming VAppBar uses "banner" role
+    expect(appBar).toHaveStyle('height: 64px')
+
+    await rerender(() => (
+      <VLayout>
+        <VAppBar height={128} />
+      </VLayout>
+    ))
+    expect(appBar).toHaveStyle('height: 128px')
+  })
+
+  it('supports density', async () => {
+    const { rerender } = render(
+      () => (
+        <VLayout>
+          <VAppBar density="default" />
+        </VLayout>
+      ),
+      {
+        global: {
+          plugins: [vuetify],
+        },
+      }
+    )
+
+    const appBar = screen.getByRole('banner')
+    expect(appBar).toHaveStyle('height: 64px')
+
+    await rerender(() => (
+      <VLayout>
+        <VAppBar density="prominent" />
+      </VLayout>
+    ))
+    expect(appBar).toHaveStyle('height: 128px')
+
+    await rerender(() => (
+      <VLayout>
+        <VAppBar density="comfortable" />
+      </VLayout>
+    ))
+    expect(appBar).toHaveStyle('height: 56px')
+
+    await rerender(() => (
+      <VLayout>
+        <VAppBar density="compact" />
+      </VLayout>
+    ))
+    expect(appBar).toHaveStyle('height: 48px')
+  })
+
+  it('is hidden on mount', async () => {
+    const model = ref(false)
+
+    render(
+      () => (
+        <VLayout>
+          <VAppBar v-model={model.value} />
+        </VLayout>
+      ),
+      {
+        global: {
+          plugins: [vuetify],
+        },
+      }
+    )
+
+    const appBar = screen.getByRole('banner')
+    expect(appBar).not.toBeVisible()
+
+    model.value = true
+    await nextTick()
+    expect(appBar).toBeVisible()
+  })
+
+  describe('scroll behavior', () => {
+    it('hides on scroll', async () => {
+      render(
+        () => (
+          <VLayout>
+            <VAppBar scrollBehavior="hide" />
+            <VMain style="min-height: 200vh;" />
+          </VLayout>
+        ),
+        {
+          global: {
+            plugins: [vuetify],
+          },
+        }
+      )
+
+      const appBar = screen.getByRole('banner')
+      expect(appBar).toBeVisible()
+
+      window.scrollTo({ top: 500, ...SCROLL_OPTIONS })
+      await new Promise((r) => setTimeout(r, 100))
+      expect(appBar).not.toBeVisible()
+
+      window.scrollTo({ top: 250, ...SCROLL_OPTIONS })
+      await new Promise((r) => setTimeout(r, 100))
+      expect(appBar).toBeVisible()
+    })
+
+    it('collapses on scroll', async () => {
+      render(
+        () => (
+          <VLayout>
+            <VAppBar scrollBehavior="collapse" />
+            <VMain style="min-height: 200vh;" />
+          </VLayout>
+        ),
+        {
+          global: {
+            plugins: [vuetify],
+          },
+        }
+      )
+
+      const appBar = screen.getByRole('banner')
+      expect(appBar).toBeVisible()
+      expect(appBar).not.toHaveClass('v-toolbar--collapse')
+
+      window.scrollTo({ top: 500, ...SCROLL_OPTIONS })
+      await new Promise((r) => setTimeout(r, 100))
+      expect(appBar).toHaveClass('v-toolbar--collapse')
+    })
+
+    it('elevates on scroll', async () => {
+      render(
+        () => (
+          <VLayout>
+            <VAppBar scrollBehavior="elevate" />
+            <VMain style="min-height: 200vh;" />
+          </VLayout>
+        ),
+        {
+          global: {
+            plugins: [vuetify],
+          },
+        }
+      )
+
+      const appBar = screen.getByRole('banner')
+      expect(appBar).toHaveClass('v-toolbar--flat')
+
+      window.scrollTo({ top: 500, ...SCROLL_OPTIONS })
+      await new Promise((r) => setTimeout(r, 100))
+      expect(appBar).not.toHaveClass('v-toolbar--flat')
+    })
+
+    it('fades image on scroll', async () => {
+      render(
+        () => (
+          <VLayout>
+            <VAppBar
+              image="https://picsum.photos/1920/1080?random"
+              scrollBehavior="fade-image"
+            />
+            <VMain style="min-height: 200vh;" />
+          </VLayout>
+        ),
+        {
+          global: {
+            plugins: [vuetify],
+          },
+        }
+      )
+
+      const toolbarImage = screen.getByRole('img', { hidden: true })
+      expect(toolbarImage).toHaveStyle('opacity: 1')
+
+      window.scrollTo({ top: 150, ...SCROLL_OPTIONS })
+      await new Promise((r) => setTimeout(r, 100))
+      expect(toolbarImage).toHaveStyle('opacity: 0.5')
+
+      window.scrollTo({ top: 300, ...SCROLL_OPTIONS })
+      await new Promise((r) => setTimeout(r, 100))
+      expect(toolbarImage).toHaveStyle('opacity: 0')
+    })
+  })
+})