eslint-plugin-vanilla-extract/src/css-rules/custom-order/__tests__/global.test.ts
Ante Budimir da4d2d6373 feat : add comprehensive test suite for CSS ordering rules
Add tests for all three CSS property ordering rules:

    alphabetical-order,
    concentric-order,
    custom-order,

Tests cover all implemented vanilla-extract APIs, fontFace, globalFontFace, globalKeyframes, globalStyle, keyframes, style, and styleVariants.. Each test verifies both valid and invalid cases, along with proper auto-fixing functionality.
2025-03-09 18:12:00 +02:00

127 lines
3.2 KiB
TypeScript

import tsParser from '@typescript-eslint/parser';
import { run } from 'eslint-vitest-rule-tester';
import customGroupOrderRule from '../rule-definition.js';
run({
name: 'vanilla-extract/custom-order/global',
rule: customGroupOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// globalStyle with custom group ordering (concentric for remaining)
{
code: `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
margin: 0,
position: 'relative',
display: 'block',
backgroundColor: 'white',
padding: 0,
color: 'black'
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'concentric',
},
],
},
// globalStyle with custom group ordering (alphabetical for remaining)
{
code: `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
margin: 0,
backgroundColor: 'white',
color: 'black',
display: 'block',
padding: 0,
position: 'relative'
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'alphabetical',
},
],
},
],
invalid: [
// globalStyle with incorrect ordering (concentric for remaining)
{
code: `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
color: 'black',
margin: 0,
backgroundColor: 'white',
padding: 0,
display: 'block',
position: 'relative'
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'concentric',
},
],
errors: [{ messageId: 'incorrectOrder' }],
output: `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
margin: 0,
position: 'relative',
display: 'block',
backgroundColor: 'white',
padding: 0,
color: 'black'
});
`,
},
// globalStyle with incorrect ordering (alphabetical for remaining)
{
code: `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
position: 'relative',
display: 'block',
margin: 0,
backgroundColor: 'white',
padding: 0,
color: 'black'
});
`,
options: [
{
groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
sortRemainingProperties: 'alphabetical',
},
],
errors: [{ messageId: 'incorrectOrder' }],
output: `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
margin: 0,
backgroundColor: 'white',
color: 'black',
display: 'block',
padding: 0,
position: 'relative'
});
`,
},
],
});