import { describe, it, expect } from 'vitest';
import { defineComponent } from 'vue';
import { mount } from '@vue/test-utils';
import { createVuetify } from 'vuetify';
import { useLayoutTier } from '../../resources/js/composables/useLayoutTier';

function tierAtWidth(width: number): string {
    Object.defineProperty(window, 'innerWidth', { configurable: true, value: width });
    window.dispatchEvent(new Event('resize'));
    const vuetify = createVuetify();
    let captured = '';
    const Harness = defineComponent({
        setup() {
            const { tier } = useLayoutTier();
            captured = tier.value;
            return () => null;
        },
    });
    mount(Harness, { global: { plugins: [vuetify] } });
    return captured;
}

describe('useLayoutTier', () => {
    it('телефон при ширине < 600', () => { expect(tierAtWidth(390)).toBe('phone'); });
    it('планшет при 600..1279', () => { expect(tierAtWidth(820)).toBe('tablet'); });
    it('десктоп при >= 1280', () => { expect(tierAtWidth(1440)).toBe('desktop'); });
});