40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
import { describe, it, expect, beforeEach } from 'vitest';
|
|
import { mount } from '@vue/test-utils';
|
|
import DensityToggle from '../../resources/js/components/ui/DensityToggle.vue';
|
|
import { DENSITY_KEY } from '../../resources/js/composables/useDensity';
|
|
|
|
describe('DensityToggle', () => {
|
|
beforeEach(() => {
|
|
localStorage.clear();
|
|
});
|
|
|
|
it('renders two buttons: Компакт + Комфорт', () => {
|
|
const w = mount(DensityToggle);
|
|
const buttons = w.findAll('button');
|
|
expect(buttons).toHaveLength(2);
|
|
expect(buttons[0].text()).toMatch(/Компакт/);
|
|
expect(buttons[1].text()).toMatch(/Комфорт/);
|
|
});
|
|
|
|
it('marks Comfortable as active by default', () => {
|
|
const w = mount(DensityToggle);
|
|
const comfortBtn = w.findAll('button')[1];
|
|
expect(comfortBtn.classes()).toContain('ld-density-toggle__btn--active');
|
|
});
|
|
|
|
it('clicking Компакт switches to compact and persists to localStorage', async () => {
|
|
const w = mount(DensityToggle);
|
|
const compactBtn = w.findAll('button')[0];
|
|
await compactBtn.trigger('click');
|
|
expect(compactBtn.classes()).toContain('ld-density-toggle__btn--active');
|
|
expect(localStorage.getItem(DENSITY_KEY)).toBe('compact');
|
|
});
|
|
|
|
it('emits change with new density value', async () => {
|
|
const w = mount(DensityToggle);
|
|
await w.findAll('button')[0].trigger('click');
|
|
expect(w.emitted('change')).toBeTruthy();
|
|
expect(w.emitted('change')?.[0]).toEqual(['compact']);
|
|
});
|
|
});
|