test : 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.
This commit is contained in:
Ante Budimir 2025-03-09 18:12:00 +02:00
parent 3e9bad1b02
commit 5f1e602dee
25 changed files with 3635 additions and 24 deletions

View file

@ -0,0 +1,92 @@
import tsParser from '@typescript-eslint/parser';
import { run } from 'eslint-vitest-rule-tester';
import alphabeticalOrderRule from '../rule-definition.js';
run({
name: 'vanilla-extract/alphabetical-order/recipe',
rule: alphabeticalOrderRule,
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
},
valid: [
// Recipe with alphabetical ordering
`
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: {
alignItems: 'center',
display: 'flex'
},
variants: {
color: {
blue: {
backgroundColor: 'blue',
color: 'white'
},
red: {
backgroundColor: 'red',
color: 'black'
}
}
}
});
`,
],
invalid: [
// Recipe with incorrect ordering
{
code: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: {
display: 'flex',
alignItems: 'center'
},
variants: {
color: {
blue: {
color: 'white',
backgroundColor: 'blue'
},
red: {
color: 'black',
backgroundColor: 'red'
}
}
}
});
`,
errors: [
{ messageId: 'alphabeticalOrder' },
{ messageId: 'alphabeticalOrder' },
{ messageId: 'alphabeticalOrder' },
],
output: `
import { recipe } from '@vanilla-extract/recipes';
const myRecipe = recipe({
base: {
alignItems: 'center',
display: 'flex'
},
variants: {
color: {
blue: {
backgroundColor: 'blue',
color: 'white'
},
red: {
backgroundColor: 'red',
color: 'black'
}
}
}
});
`,
},
],
});