[chore]: tests, getAttributes clean-up

Author: sarahvharris

__tests__/src/util/getAttributes-test.js

@@ -0,0 +1,98 @@
+import test from 'tape';
+
+import getAttributes from '../../../src/util/getAttributes';
+import JSXElementMock from '../../../__mocks__/JSXElementMock';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Button: 'button',
+      MyInput: {
+        component: 'input',
+        attributes: {
+          type: ['myType'],
+        },
+      },
+      Link: {
+        component: 'a',
+        attributes: {
+          href: ['to', 'href'],
+          onClick: ['onClick', 'handleClick'],
+        },
+      },
+    },
+  },
+};
+
+test('getAttributes', (t) => {
+  t.test('no settings in context', (st) => {
+    st.deepEqual(
+      getAttributes(
+        JSXElementMock('input').openingElement,
+        'input',
+        {},
+      ),
+      [],
+      'returns no attributes',
+    );
+
+    st.deepEqual(
+      getAttributes(
+        JSXElementMock('input', [JSXAttributeMock('type', 'text')]).openingElement,
+        'input',
+        {},
+      ),
+      [JSXAttributeMock('type', 'text')],
+      'returns raw attributes if no settings are provided',
+    );
+
+    st.end();
+  });
+
+  t.test('components settings in context', (st) => {
+    st.deepEqual(
+      getAttributes(
+        JSXElementMock('MyInput', [JSXAttributeMock('type', 'text')]).openingElement,
+        'input',
+        { settings: componentsSettings },
+      ),
+      [JSXAttributeMock('myType', 'text')],
+      'should expect a custom attribute name mapping to `myType`',
+    );
+
+    st.deepEqual(
+      getAttributes(
+        JSXElementMock('input', [JSXAttributeMock('type', 'text')]).openingElement,
+        'input',
+        { settings: componentsSettings },
+      ),
+      [JSXAttributeMock('type', 'text')],
+      'should not expect a custom attribute name when native element is used',
+    );
+
+    st.deepEqual(
+      getAttributes(
+        JSXElementMock('Button', [JSXAttributeMock('type', 'text')]).openingElement,
+        'button',
+        { settings: componentsSettings },
+      ),
+      [JSXAttributeMock('type', 'text')],
+      'should not expect a custom attribute name when no custom attributes configured',
+    );
+
+    st.deepEqual(
+      getAttributes(
+        JSXElementMock('Link', [JSXAttributeMock('href', '/path'), JSXAttributeMock('onClick', 'handler')]).openingElement,
+        'a',
+        { settings: componentsSettings },
+      ),
+      [JSXAttributeMock('to', '/path'), JSXAttributeMock('href', '/path'), JSXAttributeMock('onClick', 'handler'), JSXAttributeMock('handleClick', 'handler')],
+      'should map multiple attributes according to configuration',
+    );
+
+    st.end();
+  });
+
+  t.end();
+});

src/util/getAttributes.js

@@ -1,47 +1,35 @@
-import { getProp } from 'jsx-ast-utils';
-
-const getAttributes = (node, type, context) => {
-  const { settings } = context;
-  const { attributes } = node;
-  const components = settings['jsx-a11y']?.components;
-
-  if (!components || !type) {
-    return attributes;
-  }
-
-  const componentConfig = Object.entries(components).find(([, config]) => (
-    config && typeof config === 'object' && config.component === type
-  ));
-
-  if (!componentConfig) {
-    return attributes;
-  }
-
-  const [, config] = componentConfig;
-  const attributeMap = config && typeof config === 'object' ? config.attributes : null;
-
-  if (!attributeMap || typeof attributeMap !== 'object') {
-    return attributes;
-  }
-
-  const mappedAttributes = [...attributes];
-
-  Object.entries(attributeMap).forEach(([originalAttr, mappedAttrs]) => {
-    if (Array.isArray(mappedAttrs)) {
-      mappedAttrs.forEach((mappedAttr) => {
-        const mappedProp = getProp(attributes, mappedAttr);
-        if (mappedProp) {
-          const newAttribute = {
-            ...mappedProp,
-            name: {
-              ...mappedProp.name,
-              name: originalAttr,
-            },
-          };
-          mappedAttributes.push(newAttribute);
-        }
-      });
-    }
+// @flow
+
+import type { Node, JSXOpeningElement } from 'ast-types-flow';
+import { getProp, elementType } from 'jsx-ast-utils';
+import type { ESLintContext } from '../../flow/eslint';
+
+const getAttributes = (node: JSXOpeningElement, type: string, context: ESLintContext): Node[] => {
+  const { attributes: rawAttributes } = node;
+  const { components } = context?.settings?.['jsx-a11y'] || {};
+
+  if (!type || !components) return rawAttributes;
+
+  const jsxElementName = elementType(node);
+  const componentConfig = components[jsxElementName];
+
+  if (!componentConfig || componentConfig.component !== type) return rawAttributes;
+
+  const { attributes: settingsAttributes } = typeof componentConfig === 'object' ? componentConfig : {};
+
+  if (!settingsAttributes || typeof settingsAttributes !== 'object') return rawAttributes;
+
+  const mappedAttributes = Object.entries(settingsAttributes).flatMap(([originalAttr, mappedAttrs]) => {
+    if (!Array.isArray(mappedAttrs)) return [];
+
+    const originalProp = getProp(rawAttributes, originalAttr);
+    return originalProp ? mappedAttrs.map((mappedAttr) => ({
+      ...originalProp,
+      name: {
+        ...originalProp.name,
+        name: mappedAttr,
+      },
+    })) : [];
   });
 
   return mappedAttributes;