You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
5.4 KiB
116 lines
5.4 KiB
import { readFileSync } from 'node:fs';
|
|
import { join } from 'node:path';
|
|
import { describe, expect, it } from 'vitest';
|
|
|
|
const COMPONENTS_DIR = 'src/uix/eidos/components';
|
|
|
|
const VISUAL_ATTRS = [
|
|
['accordion/accordion.svelte', ['data-size', 'data-variant']],
|
|
['accordion/accordion-content.svelte', ['data-size']],
|
|
['accordion/accordion-header.svelte', ['data-size']],
|
|
['accordion/accordion-trigger.svelte', ['data-size', 'data-indicator-placement']],
|
|
[
|
|
'avatar/avatar.svelte',
|
|
['data-size', 'data-variant', 'data-color', 'data-radius', 'data-status']
|
|
],
|
|
['avatar/avatar-image.svelte', ['data-status']],
|
|
['avatar/avatar-fallback.svelte', ['data-status']],
|
|
['breadcrumb/breadcrumb.svelte', ['data-size']],
|
|
['calendar/calendar.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['date-picker/date-picker.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['date-picker/date-picker-trigger.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['date-picker/date-picker-calendar.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['date-range-picker/date-range-picker.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
[
|
|
'date-range-picker/date-range-picker-trigger.svelte',
|
|
['data-size', 'data-variant', 'data-color']
|
|
],
|
|
[
|
|
'date-range-picker/date-range-picker-calendar.svelte',
|
|
['data-size', 'data-variant', 'data-color']
|
|
],
|
|
['checkbox/checkbox.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['checkbox/checkbox-group.svelte', ['data-columns']],
|
|
['dialog/dialog-close.svelte', ['data-position', 'data-icon-only']],
|
|
['dialog/dialog-content.svelte', ['data-size', 'data-position', 'data-sheet']],
|
|
['drawer/drawer-close.svelte', ['data-icon-only']],
|
|
['drawer/drawer-content.svelte', ['data-size']],
|
|
['editable/editable.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['field/field.svelte', ['data-size', 'data-variant', 'data-orientation', 'data-color']],
|
|
['file-upload/file-upload.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['file-upload/file-upload-item-progress.svelte', ['style']],
|
|
['meter/meter.svelte', ['data-size', 'data-shape']],
|
|
['number-field/number-field.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['pagination/pagination.svelte', ['data-size']],
|
|
['popover/popover-close.svelte', ['data-icon-only']],
|
|
['popover/popover-content.svelte', ['data-size']],
|
|
['progress/progress.svelte', ['data-size', 'data-shape']],
|
|
['radio-group/radio-group.svelte', ['data-size', 'data-variant', 'data-color', 'data-columns']],
|
|
['rating-group/rating-group.svelte', ['data-size']],
|
|
['search-field/search-field.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['select/select.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['select/select-trigger.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['select/select-content.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['select/select-indicator.svelte', ['data-select-indicator']],
|
|
['select/select-item-indicator.svelte', ['data-select-item-indicator']],
|
|
['combobox/combobox.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
[
|
|
'combobox/combobox-control.svelte',
|
|
['data-combobox-control', 'data-size', 'data-variant', 'data-color']
|
|
],
|
|
['combobox/combobox-input.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['combobox/combobox-trigger.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['combobox/combobox-content.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['combobox/combobox-indicator.svelte', ['data-combobox-indicator']],
|
|
['combobox/combobox-item-indicator.svelte', ['data-combobox-item-indicator']],
|
|
['slider/slider.svelte', ['data-size']],
|
|
['stepper/stepper.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['switch/switch.svelte', ['data-size']],
|
|
[
|
|
'tabs/tabs.svelte',
|
|
['data-size', 'data-variant', 'data-fitted', 'data-collapsed', 'data-motion']
|
|
],
|
|
['tabs/tabs-content.svelte', ['data-motion']],
|
|
['tabs/tabs-indicator.svelte', ['data-ready']],
|
|
['tag-group/tag-group.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['tags-input/tags-input.svelte', ['data-size', 'data-variant', 'data-color']],
|
|
['toolbar/toolbar.svelte', ['data-size', 'data-variant']],
|
|
['toast/toast-close.svelte', ['data-icon-only']],
|
|
['toast/toast-viewport.svelte', ['data-position']],
|
|
['toggle/toggle.svelte', ['data-size', 'data-variant', 'data-block', 'data-icon-only']],
|
|
['tooltip/tooltip-content.svelte', ['data-size', 'data-variant']],
|
|
['svg/svg-check.svelte', ['data-svg']],
|
|
['svg/svg-chevron.svelte', ['data-svg', 'data-svg-direction']],
|
|
['svg/svg-dash.svelte', ['data-svg']],
|
|
['svg/svg-dot.svelte', ['data-svg']]
|
|
] as const;
|
|
|
|
function stripComments(source: string): string {
|
|
return source.replace(/\/\*[\s\S]*?\*\//g, '').replace(/(^|[^:])\/\/.*$/gm, '$1');
|
|
}
|
|
|
|
function readComponentSource(relativePath: string): string {
|
|
return stripComments(readFileSync(join(COMPONENTS_DIR, relativePath), 'utf8'));
|
|
}
|
|
|
|
function attrPattern(attr: string): RegExp {
|
|
return new RegExp(`${attr.replaceAll('-', '\\-')}\\s*=|\\.\\w+Attrs\\b`);
|
|
}
|
|
|
|
describe('Eidos component visual attrs', () => {
|
|
it('keeps visual recipe attrs wired in their wrappers', () => {
|
|
const missing: string[] = [];
|
|
|
|
for (const [relativePath, attrs] of VISUAL_ATTRS) {
|
|
const source = readComponentSource(relativePath);
|
|
for (const attr of attrs) {
|
|
if (!attrPattern(attr).test(source)) {
|
|
missing.push(`${relativePath}: ${attr}`);
|
|
}
|
|
}
|
|
}
|
|
|
|
expect(missing).toEqual([]);
|
|
});
|
|
});
|