Дмитрий
d3764cb8f2
Обёртка ResponsiveTable (таблица на десктопе/планшете, карточки на телефоне по ярусу useLayoutTier). Применена к реестру лидов «Сделки»: на телефоне — карточки лида (чекбокс выбора, телефон, статус-плашка, источник·город, комментарий, дата), тап открывает карточку сделки; на десктопе прежняя v-data-table без изменений. Тесты: ResponsiveTable.spec (2), «Сделки» 58/58 зелёные. Проверено на 390 и 1440px. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
32 lines
1.3 KiB
TypeScript
32 lines
1.3 KiB
TypeScript
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('на десктопе (>=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);
|
|
});
|
|
});
|