Add failing test cases and non-literal mocks

github · Jul 17, 2023 · fc59d7e · fc59d7e
1 parent 209d482
commit fc59d7e
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 3 deletions.
diff --git a/tests/a11y-role-supports-aria-props.js b/tests/a11y-role-supports-aria-props.js
@@ -36,6 +36,8 @@ ruleTester.run('a11y-role-supports-aria-props', rule, {
     {code: '<div role="presentation" {...props} />'},
     {code: '<Foo.Bar baz={true} />'},
     {code: '<Link href="#" aria-checked />'},
+    {code: '<Box aria-labelledby="some-id" role={role} />'},
+    {code: '<Box aria-labelledby="some-id"as={isNavigationOpen ? "div" : "nav"} />'},
 
     // IMPLICIT ROLE TESTS
     // A TESTS - implicit role is `link`

diff --git a/tests/utils/get-element-type.js b/tests/utils/get-element-type.js
@@ -1,5 +1,5 @@
 const {getElementType} = require('../../lib/utils/get-element-type')
-const {mockJSXAttribute, mockJSXOpeningElement} = require('./mocks')
+const {mockJSXAttribute, mockJSXConditionalAttribute, mockJSXOpeningElement} = require('./mocks')
 
 const mocha = require('mocha')
 const describe = mocha.describe
@@ -55,4 +55,12 @@ describe('getElementType', function () {
     const node = mockJSXOpeningElement('Link', [mockJSXAttribute('as', 'Button')])
     expect(getElementType(setting, node)).to.equal('button')
   })
+
+  it('returns raw type when polymorphic prop is set to non-literal expression', function () {
+    // <Box as={isNavigationOpen ? 'generic' : 'navigation'} />
+    const node = mockJSXOpeningElement('Box', [
+      mockJSXConditionalAttribute('as', 'isNavigationOpen', 'generic', 'navigation'),
+    ])
+    expect(getElementType({}, node)).to.equal('Box')
+  })
 })
diff --git a/tests/utils/get-role.js b/tests/utils/get-role.js
@@ -1,11 +1,31 @@
 const {getRole} = require('../../lib/utils/get-role')
-const {mockJSXAttribute, mockJSXOpeningElement} = require('./mocks')
+const {mockJSXAttribute, mockJSXConditionalAttribute, mockJSXOpeningElement} = require('./mocks')
 const mocha = require('mocha')
 const describe = mocha.describe
 const it = mocha.it
 const expect = require('chai').expect
 
 describe('getRole', function () {
+  it('returns undefined when polymorphic prop is set with a non-literal expression', function () {
+    // <Box as={isNavigationOpen ? 'div' : 'nav'} />
+    const node = mockJSXOpeningElement('Box', [mockJSXConditionalAttribute('as', 'isNavigationOpen', 'div', 'nav')])
+    expect(getRole({}, node)).to.equal(undefined)
+  })
+
+  it('returns undefined when role is set to non-literal expression', function () {
+    // <Box role={isNavigationOpen ? 'generic' : 'navigation'} />
+    const node = mockJSXOpeningElement('Box', [
+      mockJSXConditionalAttribute('role', 'isNavigationOpen', 'generic', 'navigation'),
+    ])
+    expect(getRole({}, node)).to.equal(undefined)
+  })
+
+  it('returns `role` when set to a literal expression', function () {
+    // <Box role="generic" />
+    const node = mockJSXOpeningElement('Box', [mockJSXAttribute('role', 'generic')])
+    expect(getRole({}, node)).to.equal('generic')
+  })
+
   it('returns generic role for <span> regardless of attribute', function () {
     const node = mockJSXOpeningElement('span', [mockJSXAttribute('aria-label', 'something')])
     expect(getRole({}, node)).to.equal('generic')

diff --git a/tests/utils/mocks.js b/tests/utils/mocks.js
@@ -12,6 +12,38 @@ function mockJSXAttribute(prop, propValue) {
   }
 }
 
+/* Mocks conditional expression
+  e.g. <Box as={isNavigationOpen ? 'generic' : 'navigation'} /> can be by calling
+  mockJSXConditionalAttribute('as', 'isNavigationOpen', 'generic', 'navigation')
+*/
+function mockJSXConditionalAttribute(prop, expression, consequentValue, alternateValue) {
+  return {
+    type: 'JSXAttribute',
+    name: {
+      type: 'JSXIdentifier',
+      name: prop,
+    },
+    value: {
+      type: 'JSXExpressionContainer',
+      value: prop,
+      expression: {
+        type: 'ConditionalExpression',
+        test: {
+          type: expression,
+        },
+        consequent: {
+          type: 'Literal',
+          value: consequentValue,
+        },
+        alternate: {
+          type: 'Literal',
+          value: alternateValue,
+        },
+      },
+    },
+  }
+}
+
 function mockJSXOpeningElement(tagName, attributes = []) {
   return {
     type: 'JSXOpeningElement',
@@ -23,4 +55,4 @@ function mockJSXOpeningElement(tagName, attributes = []) {
   }
 }
 
-module.exports = {mockJSXAttribute, mockJSXOpeningElement}
+module.exports = {mockJSXAttribute, mockJSXOpeningElement, mockJSXConditionalAttribute}