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

import { describe, it, expect, beforeEach } from 'vitest';
import { mount, flushPromises } from '@vue/test-utils';
import { createPinia, setActivePinia } from 'pinia';
import { createVuetify } from 'vuetify';
import { createMemoryHistory, createRouter } from 'vue-router';
import DealsView from '../../resources/js/views/DealsView.vue';

function setup() {
    setActivePinia(createPinia());
    const router = createRouter({ history: createMemoryHistory(), routes: [{ path: '/deals', component: DealsView }] });
    router.push('/deals');
    return mount(DealsView, {
        global: {
            plugins: [router, createVuetify()],
            stubs: { RouterLink: true, VDataTable: true },
        },
    });
}

describe('DealsView — redesigned', () => {
    beforeEach(() => localStorage.clear());

    it('renders filterbar with at least 3 FilterChips', async () => {
        const w = setup();
        await flushPromises();
        const chips = w.findAll('.ld-filter-chip');
        expect(chips.length).toBeGreaterThanOrEqual(3);
    });

    it('renders DensityToggle in filterbar', async () => {
        const w = setup();
        await flushPromises();
        expect(w.find('.ld-density-toggle').exists()).toBe(true);
    });

    it('row uses StatusPill component for status column', async () => {
        const w = setup();
        await flushPromises();
        // After data load — at least one ld-status-pill should be present
        // (если stub VDataTable — test проверяет наличие компонента в template, не в render)
        expect(w.html()).toMatch(/ld-status-pill|StatusPill/);
    });

    it('applies ld-hover-lift utility class to table container or row wrapper', async () => {
        const w = setup();
        await flushPromises();
        expect(w.html()).toMatch(/ld-hover-lift|hover-lift/);
    });

    it('applies ld-stagger-row class to deal rows (motion #2)', async () => {
        const w = setup();
        await flushPromises();
        expect(w.html()).toMatch(/ld-stagger-row/);
    });
});