[chore]: add more tests, fix logic for non-mapped attrs in settings

Author: sarahvharris

__tests__/src/rules/no-static-element-interactions-test.js

@@ -35,7 +35,7 @@ const componentsSettings = {
       Button: 'button',
       TestComponent: 'div',
       Link: {
-        components: 'a',
+        component: 'a',
         attributes: {
           href: ['to', 'href'],
         },
@@ -44,16 +44,6 @@ const componentsSettings = {
   },
 };
 
-const componentsSettingNoAttributes = {
-  'jsx-a11y': {
-    components: {
-      Button: 'button',
-      TestComponent: 'div',
-      Link: 'a',
-    },
-  },
-};
-
 const alwaysValid = [
   { code: '<TestComponent onClick={doFoo} />' },
   { code: '<Button onClick={doFoo} />' },
@@ -373,8 +363,8 @@ const neverValid = [
   { code: '<div onMouseDown={() => {}} />;', errors: [expectedError] },
   { code: '<div onMouseUp={() => {}} />;', errors: [expectedError] },
   // Custom components
+  { code: '<Link onClick={() => void 0} to="path/to/page" />', settings: { 'jsx-a11y': { components: { Link: 'a' } } }, errors: [expectedError] },
   { code: '<TestComponent onClick={() => void 0} to="path/to/page" />', settings: componentsSettings, errors: [expectedError] },
-  { code: '<Link onClick={() => void 0} to="path/to/page" />', settings: componentsSettingNoAttributes, errors: [expectedError] },
   // `a` with a `to` is not valid, only custom components listed in `components`
   { code: '<a onClick={() => void 0} to="path/to/page" />', settings: componentsSettings, errors: [expectedError] },
 ];

__tests__/src/util/getSettingsAttributes-test.js

@@ -18,6 +18,14 @@ test('getSettingsAttributes', (t) => {
       'returns existing attributes when no component settings exist',
     );
 
+    st.deepEqual(
+      getSettingsAttributes(JSXElementMock('Link', [JSXAttributeMock('foo', 'path/to/page')]).openingElement, {
+        'jsx-a11y': {},
+      }),
+      [JSXAttributeMock('foo', 'path/to/page')],
+      'returns existing attributes when `components` is empty',
+    );
+
     st.end();
   });
 
@@ -40,7 +48,24 @@ test('getSettingsAttributes', (t) => {
     );
 
     st.deepEqual(
-      getSettingsAttributes(JSXElementMock('a', [JSXAttributeMock('foo', 'path/to/page')]).openingElement, {
+      getSettingsAttributes(JSXElementMock('Link', [JSXAttributeMock('bar', 'path/to/page')]).openingElement, {
+        'jsx-a11y': {
+          components: {
+            Link: {
+              component: 'a',
+              attributes: {
+                href: ['foo', 'bar'],
+              },
+            },
+          },
+        },
+      }),
+      [JSXAttributeMock('href', 'path/to/page')],
+      'returns the exisiting attributes and the mapped attributes',
+    );
+
+    st.deepEqual(
+      getSettingsAttributes(JSXElementMock('button', [JSXAttributeMock('foo', 'path/to/page')]).openingElement, {
         'jsx-a11y': {
           components: {
             Link: {
@@ -56,6 +81,37 @@ test('getSettingsAttributes', (t) => {
       'should return the existing attributes when no mapping exists',
     );
 
+    st.deepEqual(
+      getSettingsAttributes(JSXElementMock('Link', [JSXAttributeMock('bar', 'path/to/page')]).openingElement, {
+        'jsx-a11y': {
+          components: {
+            Link: {
+              component: 'a',
+              attributes: {
+                href: ['foo'],
+              },
+            },
+          },
+        },
+      }),
+      [JSXAttributeMock('bar', 'path/to/page')],
+      'returns the exisiting attributes when no mapping exists',
+    );
+
+    st.deepEqual(
+      getSettingsAttributes(JSXElementMock('Link', [JSXAttributeMock('foo', 'path/to/page')]).openingElement, {
+        settings: {
+          'jsx-a11y': {
+            components: {
+              Link: 'a',
+            },
+          },
+        },
+      }),
+      [JSXAttributeMock('foo', 'path/to/page')],
+      'returns existing attributes when components mapping to the component does not have attributes',
+    );
+
     st.end();
   });
 

src/util/getSettingsAttributes.js

@@ -1,7 +1,7 @@
 // @flow
 
 import type { Node, JSXOpeningElement } from 'ast-types-flow';
-import { elementType, getProp } from 'jsx-ast-utils';
+import { elementType, getProp, propName } from 'jsx-ast-utils';
 import type { ESLintSettings } from '../../flow/eslint';
 
 /**
@@ -37,23 +37,32 @@ const getSettingsAttributes = (node: JSXOpeningElement, settings: ESLintSettings
 
   if (!settingsAttributes || typeof settingsAttributes !== 'object') return rawAttributes;
 
+  const mappedRawAttrNames = new Set();
+
   const mappedAttributes = Object.entries(settingsAttributes).flatMap(([originalAttr, mappedAttrs]) => {
     if (!Array.isArray(mappedAttrs)) return [];
 
     return mappedAttrs.flatMap((mappedAttr) => {
       const originalProp = getProp(rawAttributes, mappedAttr);
 
-      return originalProp ? [{
-        ...originalProp,
-        name: {
-          ...originalProp.name,
-          name: originalAttr,
-        },
-      }] : [];
+      if (originalProp) {
+        mappedRawAttrNames.add(mappedAttr);
+        return [{
+          ...originalProp,
+          name: {
+            ...originalProp.name,
+            name: originalAttr,
+          },
+        }];
+      }
+      return [];
     });
   });
 
-  return mappedAttributes;
+  // raw attributes that don't have mappings
+  const unmappedAttributes = rawAttributes.filter((attr) => !mappedRawAttrNames.has(propName(attr)));
+
+  return [...unmappedAttributes, ...mappedAttributes];
 };
 
 export default getSettingsAttributes;