add more tests for MultiSelectOptionsList (#1097)

.eslintrc

@@ -5,7 +5,8 @@
     "shallow":true,
     "spy":true,
     "it":true,
-    "mount":true
+    "mount":true,
+    "viewport": true
   },
   "extends": "@folio/eslint-config-stripes",
   "overrides": [

karma.conf.js

@@ -1,3 +1,5 @@
+const karmaViewport = require('karma-viewport');
+
 module.exports = (config) => {
   const configuration = {
     browserStack: {
@@ -24,12 +26,10 @@ module.exports = (config) => {
         os: 'Windows',
         os_version: '10'
       }
-    }
+    },
+    frameworks: [...config.frameworks, 'viewport'],
+    plugins: [...config.plugins, karmaViewport, 'karma-browserstack-launcher'],
   };
 
-  // BrowserStack launcher isn't automatically added by Stripes CLI
-  configuration.plugins = config.plugins;
-  configuration.plugins.push('karma-browserstack-launcher');
-
   config.set(configuration);
 };

lib/MultiSelection/MultiSelectOptionsList.js

@@ -168,7 +168,8 @@ class MultiSelectOptionsList extends React.Component {
             </SelectOption>
           ))}
           {renderedItems && actions && actions.length > 0 && actions.map((item, index) => {
-            const actionIndex = renderedItems ? renderedItems.length + index : index;
+            const actionIndex = renderedItems.length + index;
+
             return (
               <SelectOption
                 key={`${this.props.id}-action-${actionIndex}`}

lib/MultiSelection/tests/MultiSelection-test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { describe, beforeEach, it } from '@bigtest/mocha';
+import { describe, beforeEach, it, afterEach } from '@bigtest/mocha';
 import { expect } from 'chai';
 
 import { mountWithContext } from '../../../tests/helpers';
@@ -535,4 +535,35 @@ describe('MultiSelect', () => {
       });
     });
   });
+
+  describe('when the menu is open on a small screen', () => {
+    beforeEach(async () => {
+      viewport.set(300);
+      await mountWithContext(
+        <MultiSelectionHarness
+          id={testId}
+          dataOptions={listOptions}
+        />
+      );
+      await multiselection.clickToggleButton();
+    });
+
+    afterEach(() => {
+      viewport.reset();
+    });
+
+    it('should focus the input', () => {
+      expect(multiselection.filterIsFocused).to.be.true;
+    });
+
+    describe('and the menu was closed', () => {
+      beforeEach(async () => {
+        await multiselection.clickToggleButton();
+      });
+
+      it('should focus the control', () => {
+        expect(multiselection.controlIsFocused).to.be.true;
+      });
+    });
+  });
 });

lib/MultiSelection/tests/interactor.js

@@ -52,6 +52,7 @@ const ValueChipInteractor = interactor(class ValueChipInteractor {
 export default interactor(class MultiSelectInteractor {
   defaultScope = `.${css.multiSelectContainer}`
   controlPresent = isPresent(`.${css.multiSelectContainer}`);
+  controlIsFocused = is(controlClass, ':focus');
   filterIsFocused = is(filterClass, ':focus');
   containerId = attribute(`.${css.multiSelectContainer}`, 'id');
   options = collection(optionClass, OptionInteractor);

package.json

@@ -56,6 +56,7 @@
     "faker": "^4.1.0",
     "file-loader": "^2.0.0",
     "jest-mock": "23.2.0",
+    "karma-viewport": "^1.0.4",
     "mocha": "^5.2.0",
     "postcss": "^7.0.2",
     "postcss-calc": "^6.0.1",