diff --git a/src/__tests__/lib/rules/prefer-to-have-style.js b/src/__tests__/lib/rules/prefer-to-have-style.js index ac2b947..5313c03 100644 --- a/src/__tests__/lib/rules/prefer-to-have-style.js +++ b/src/__tests__/lib/rules/prefer-to-have-style.js @@ -74,17 +74,14 @@ ruleTester.run("prefer-to-have-style", rule, { { code: `expect(screen.getByTestId("foo").style["scroll-snap-type"]).toBe("x mandatory")`, errors, - output: `expect(screen.getByTestId("foo")).toHaveStyle({scrollSnapType: "x mandatory"})`, }, { code: 'expect(el.style["scroll-snap-type"]).toBe(`${x} mandatory`)', errors, - output: "expect(el).toHaveStyle({scrollSnapType: `${x} mandatory`})", }, { code: `expect(el.style["scroll-snap-type"]).not.toBe("x mandatory")`, errors, - output: `expect(el).not.toHaveStyle({scrollSnapType: "x mandatory"})`, }, { code: `expect(el.style).toContain("background-color")`, @@ -114,37 +111,30 @@ ruleTester.run("prefer-to-have-style", rule, { { code: `expect(imageElement.style[\`box-shadow\`]).toBe(\`inset 0px 0px 0px 400px \${c}\`)`, errors, - output: `expect(imageElement).toHaveStyle(\`box-shadow: inset 0px 0px 0px 400px \${c}\`)`, }, { code: `expect(imageElement.style[\`box-shadow\` ]).toBe( \`inset 0px 0px 0px 400px \${c}\`)`, errors, - output: `expect(imageElement).toHaveStyle( \`box-shadow: inset 0px 0px 0px 400px \${c}\`)`, }, { code: `expect(imageElement.style[\`box-\${shadow}\`]).toBe("inset 0px 0px 0px 400px 40px")`, errors, - output: `expect(imageElement).toHaveStyle(\`box-\${shadow}: inset 0px 0px 0px 400px 40px\`)`, }, { code: `expect(imageElement.style[\`box-shadow\`]).not.toBe(\`inset 0px 0px 0px 400px \${c}\`)`, errors, - output: `expect(imageElement).not.toHaveStyle(\`box-shadow: inset 0px 0px 0px 400px \${c}\`)`, }, { code: `expect(imageElement.style[\`box-shadow\`]).not.toBe("inset 0px 0px 0px 400px 40px")`, errors, - output: `expect(imageElement).not.toHaveStyle(\`box-shadow: inset 0px 0px 0px 400px 40px\`)`, }, { code: `expect(element.style[1]).toEqual('padding');`, errors, - output: `expect(element).toHaveStyle({padding: expect.anything()});`, }, { code: `expect(element.style[1]).toBe(\`padding\`);`, errors, - output: `expect(element).toHaveStyle({[\`padding\`]: expect.anything()});`, }, { code: `expect(element.style[1]).not.toEqual('padding');`, @@ -157,7 +147,6 @@ ruleTester.run("prefer-to-have-style", rule, { { code: `expect(element.style[1]).toBe(x);`, errors, - output: `expect(element).toHaveStyle({[x]: expect.anything()});`, }, { code: `expect(element.style[0]).toBe(1);`, diff --git a/src/rules/prefer-to-have-style.js b/src/rules/prefer-to-have-style.js index 1d0dead..5a94945 100644 --- a/src/rules/prefer-to-have-style.js +++ b/src/rules/prefer-to-have-style.js @@ -18,25 +18,6 @@ export const meta = { }; export const create = (context) => { - function getReplacementObjectProperty(styleName) { - if (styleName.type === "Literal") { - return camelCase(styleName.value); - } - - return `[${context.getSourceCode().getText(styleName)}]`; - } - function getReplacementStyleParam(styleName, styleValue) { - return styleName.type === "Literal" - ? `{${camelCase(styleName.value)}: ${context - .getSourceCode() - .getText(styleValue)}}` - : `${context.getSourceCode().getText(styleName).slice(0, -1)}: ${ - styleValue.type === "TemplateLiteral" - ? context.getSourceCode().getText(styleValue).substring(1) - : `${styleValue.value}\`` - }`; - } - return { //expect(el.style.foo).toBe("bar"); [`MemberExpression[property.name=style][parent.computed=false][parent.parent.parent.property.name=/toBe$|to(Strict)?Equal/][parent.parent.parent.parent.arguments.0.type=/(Template)?Literal/][parent.parent.callee.name=expect]`]( @@ -158,76 +139,18 @@ export const create = (context) => { [`MemberExpression[property.name=style][parent.computed=true][parent.parent.parent.property.name=/toBe$|to(Strict)?Equal/][parent.parent.parent.parent.arguments.0.type=/((Template)?Literal|Identifier)/][parent.parent.callee.name=expect]`]( node ) { - const styleName = node.parent.property; - const [styleValue] = node.parent.parent.parent.parent.arguments; - const matcher = node.parent.parent.parent.property; - const startOfStyleMemberExpression = node.object.range[1]; - const endOfStyleMemberExpression = - node.parent.parent.arguments[0].range[1]; - - let fix = null; - - if ( - typeof styleValue.value !== "number" && - !(styleValue.value instanceof RegExp) - ) { - fix = (fixer) => { - return [ - fixer.removeRange([ - startOfStyleMemberExpression, - endOfStyleMemberExpression, - ]), - fixer.replaceText(matcher, "toHaveStyle"), - fixer.replaceText( - styleValue, - typeof styleName.value === "number" - ? `{${getReplacementObjectProperty( - styleValue - )}: expect.anything()}` - : getReplacementStyleParam(styleName, styleValue) - ), - ]; - }; - } - context.report({ node: node.property, message: "Use toHaveStyle instead of asserting on element style", - fix, }); }, //expect(el.style["foo-bar"]).not.toBe("baz") [`MemberExpression[property.name=style][parent.computed=true][parent.parent.parent.property.name=not][parent.parent.parent.parent.parent.callee.property.name=/toBe$|to(Strict)?Equal/][parent.parent.parent.parent.parent.arguments.0.type=/(Template)?Literal/][parent.parent.callee.name=expect]`]( node ) { - const styleName = node.parent.property; - const [styleValue] = node.parent.parent.parent.parent.parent.arguments; - const matcher = node.parent.parent.parent.parent.property; - const endOfStyleMemberExpression = - node.parent.parent.arguments[0].range[1]; - - let fix = null; - - if (typeof styleName.value !== "number") { - fix = (fixer) => { - return [ - fixer.removeRange([ - node.object.range[1], - endOfStyleMemberExpression, - ]), - fixer.replaceText(matcher, "toHaveStyle"), - fixer.replaceText( - styleValue, - getReplacementStyleParam(styleName, styleValue) - ), - ]; - }; - } - context.report({ node: node.property, message: "Use toHaveStyle instead of asserting on element style", - fix, }); }, //expect(foo.style).toHaveProperty("foo", "bar")