chore: Add more tests for uncovered parts

Author: danez

codecov.yml

@@ -0,0 +1,4 @@
+coverage:
+  parsers:
+    javascript:
+      enable_partials: yes

src/components/UncontrolledTabs.js

@@ -38,6 +38,7 @@ function determineCanUseActiveElement(environment) {
     // Refer to the following resources:
     // http://stackoverflow.com/a/10982960/369687
     // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12733599
+    // istanbul ignore next
     canUseActiveElement = false;
   }
 }
@@ -265,13 +266,16 @@ const UncontrolledTabs = (props) => {
       let preventDefault = false;
       let useSelectedIndex = false;
 
-      if (e.keyCode === 32 || e.keyCode === 13) {
+      if (e.keyCode === 32 /* space */ || e.keyCode === 13 /* enter */) {
         preventDefault = true;
         useSelectedIndex = false;
         handleClick(e);
       }
 
-      if (e.keyCode === 37 || (!disableUpDownKeys && e.keyCode === 38)) {
+      if (
+        e.keyCode === 37 /* arrow left */ ||
+        (!disableUpDownKeys && e.keyCode === 38) /* arrow up */
+      ) {
         // Select next tab to the left, validate if up arrow is not disabled
         if (direction === 'rtl') {
           index = getNextTab(index);
@@ -280,7 +284,10 @@ const UncontrolledTabs = (props) => {
         }
         preventDefault = true;
         useSelectedIndex = true;
-      } else if (e.keyCode === 39 || (!disableUpDownKeys && e.keyCode === 40)) {
+      } else if (
+        e.keyCode === 39 /* arrow right */ ||
+        (!disableUpDownKeys && e.keyCode === 40) /* arrow down */
+      ) {
         // Select next tab to the right, validate if down arrow is not disabled
         if (direction === 'rtl') {
           index = getPrevTab(index);

src/components/__tests__/Tabs-test.js

@@ -156,6 +156,42 @@ describe('<Tabs />', () => {
         assertTabSelected(2);
       });
 
+      test('should overflow when arrow right key pressed and no right tab available', () => {
+        render(createTabs());
+        const element = screen.getByTestId('tab3');
+        userEvent.click(element);
+        userEvent.type(element, '{arrowright}');
+
+        assertTabSelected(1);
+      });
+
+      test('should overflow when arrow left key pressed and no left tab available', () => {
+        render(createTabs());
+        const element = screen.getByTestId('tab1');
+        userEvent.click(element);
+        userEvent.type(element, '{arrowleft}');
+
+        assertTabSelected(3);
+      });
+
+      test('should move to first tab on home key', () => {
+        render(createTabs());
+        const element = screen.getByTestId('tab3');
+        userEvent.click(element);
+        userEvent.type(element, '{home}');
+
+        assertTabSelected(1);
+      });
+
+      test('should move to first tab on end key', () => {
+        render(createTabs());
+        const element = screen.getByTestId('tab1');
+        userEvent.click(element);
+        userEvent.type(element, '{end}');
+
+        assertTabSelected(3);
+      });
+
       test('should update selectedIndex when arrow left key pressed (RTL)', () => {
         render(createTabs({ direction: 'rtl' }));
         const element = screen.getByTestId('tab1');
@@ -165,6 +201,15 @@ describe('<Tabs />', () => {
         assertTabSelected(2);
       });
 
+      test('should update selectedIndex when arrow right key pressed (RTL)', () => {
+        render(createTabs({ direction: 'rtl' }));
+        const element = screen.getByTestId('tab2');
+        userEvent.click(element);
+        userEvent.type(element, '{arrowright}');
+
+        assertTabSelected(1);
+      });
+
       test.skip('should not change selectedIndex when arrow left key pressed on a disabled tab', () => {
         render(createTabs());
         const element = screen.getByTestId('tab4');