eslint-plugin-primer-react/src/rules/__tests__/merge-spread-props-classname.test.js at 8c82c5337fde920f07d40c30fca204dcdf6ddba2 · primer/eslint-plugin-primer-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
const rule = require('../merge-spread-props-classname')
const {RuleTester} = require('eslint')

const ruleTester = new RuleTester({
  languageOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parserOptions: {
      ecmaFeatures: {
        jsx: true,
      },
    },
  },
})

ruleTester.run('merge-spread-props-classname', rule, {
  valid: [
    // No spread props
    `<Example className="foo" />`,
    // Spread props but no className
    `<Example {...rest} />`,
    // className before spread props (spread will override, which is expected)
    `<Example className="foo" {...rest} />`,
    // className already using clsx
    `<Example {...rest} className={clsx(rest.className, "foo")} />`,
    // className already using classnames
    `<Example {...rest} className={classnames(rest.className, "foo")} />`,
    // className already using classNames (capital N)
    `<Example {...rest} className={classNames(rest.className, "foo")} />`,
    // className already using cn
    `<Example {...rest} className={cn(rest.className, "foo")} />`,
    // Multiple spreads but no className
    `<Example {...rest} {...other} />`,
  ],
  invalid: [
    // className after spread with string literal
    {
      code: `<Example {...rest} className="foo" />`,
      output: `<Example {...rest} className={clsx(rest.className, "foo")} />`,
      errors: [
        {
          messageId: 'mergeClassName',
        },
      ],
    },
    // className after spread with expression
    {
      code: `<Example {...rest} className={styles.button} />`,
      output: `<Example {...rest} className={clsx(rest.className, styles.button)} />`,
      errors: [
        {
          messageId: 'mergeClassName',
        },
      ],
    },
    // className after spread with template literal
    {
      code: '<Example {...rest} className={`foo ${bar}`} />',
      output: '<Example {...rest} className={clsx(rest.className, `foo ${bar}`)} />',
      errors: [
        {
          messageId: 'mergeClassName',
        },
      ],
    },
    // Multiple spreads with className after first spread
    {
      code: `<Example {...rest} {...other} className="foo" />`,
      output: `<Example {...rest} {...other} className={clsx(rest.className, "foo")} />`,
      errors: [
        {
          messageId: 'mergeClassName',
        },
      ],
    },
    // className after spread with custom prop name
    {
      code: `<Example {...props} className="foo" />`,
      output: `<Example {...props} className={clsx(props.className, "foo")} />`,
      errors: [
        {
          messageId: 'mergeClassName',
        },
      ],
    },
    // Complex className expression
    {
      code: `<Example {...rest} className={someCondition ? "foo" : "bar"} />`,
      output: `<Example {...rest} className={clsx(rest.className, someCondition ? "foo" : "bar")} />`,
      errors: [
        {
          messageId: 'mergeClassName',
        },
      ],
    },
    // className in the middle of spreads
    {
      code: `<Example {...rest} className="foo" {...other} />`,
      output: `<Example {...rest} className={clsx(rest.className, "foo")} {...other} />`,
      errors: [
        {
          messageId: 'mergeClassName',
        },
      ],
    },
  ],
})