Дмитрий
995aae4571
Широкая таблица (7 колонок) не влезала в узкую колонку планшета рядом с rail-меню — правые колонки «Комментарий»/«Поставлен» обрезались на 600–1279px. ResponsiveTable теперь показывает карточки на телефоне И планшете, таблицу — только на десктопе (>=1280). Тесты табличного слоя зафиксированы на десктоп-ширину. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
37 lines
1.6 KiB
TypeScript
37 lines
1.6 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('на планшете-портрете (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);
|
|
});
|
|
});
|