portal/app/tests/Frontend/ResponsiveTable.spec.ts

import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import { createVuetify } from 'vuetify';
import ResponsiveTable from '../../resources/js/components/common/ResponsiveTable.vue';

function mountAt(width: number) {
    Object.defineProperty(window, 'innerWidth', { configurable: true, value: width });
    window.dispatchEvent(new Event('resize'));
    const vuetify = createVuetify();
    return mount(ResponsiveTable, {
        global: { plugins: [vuetify] },
        props: { items: [{ id: 1, phone: '+7 900 000' }] },
        slots: {
            table: '<div data-testid="as-table">TABLE</div>',
            card: '<div data-testid="as-card">CARD</div>',
        },
    });
}

describe('ResponsiveTable', () => {
    it('на телефоне (<600) показывает слот card', () => {
        const w = mountAt(390);
        expect(w.find('[data-testid="as-card"]').exists()).toBe(true);
        expect(w.find('[data-testid="as-table"]').exists()).toBe(false);
    });
    it('на планшете-портрете (768) показывает слот card, а не обрезанную таблицу', () => {
        const w = mountAt(768);
        expect(w.find('[data-testid="as-card"]').exists()).toBe(true);
        expect(w.find('[data-testid="as-table"]').exists()).toBe(false);
    });
    it('на десктопе (>=1280) показывает слот table', () => {
        const w = mountAt(1440);
        expect(w.find('[data-testid="as-table"]').exists()).toBe(true);
        expect(w.find('[data-testid="as-card"]').exists()).toBe(false);
    });
});