From 1871bc3bc148661fa50816c45b6f1197250e4b82 Mon Sep 17 00:00:00 2001
From: Maksym Dryha <43514877+MaksymDryha@users.noreply.github.com>
Date: Wed, 13 Nov 2019 12:45:49 +0200
Subject: [PATCH] add more tests for MultiSelectOptionsList (#1097)

---
 .eslintrc                                     |  3 +-
 karma.conf.js                                 | 10 +++---
 lib/MultiSelection/MultiSelectOptionsList.js  |  3 +-
 .../tests/MultiSelection-test.js              | 33 ++++++++++++++++++-
 lib/MultiSelection/tests/interactor.js        |  1 +
 package.json                                  |  1 +
 6 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 877ea06ce..e5e0921da 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -5,7 +5,8 @@
     "shallow":true,
     "spy":true,
     "it":true,
-    "mount":true
+    "mount":true,
+    "viewport": true
   },
   "extends": "@folio/eslint-config-stripes",
   "overrides": [
diff --git a/karma.conf.js b/karma.conf.js
index 87baec41d..2342c7b6d 100644
--- a/karma.conf.js
+++ b/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);
 };
diff --git a/lib/MultiSelection/MultiSelectOptionsList.js b/lib/MultiSelection/MultiSelectOptionsList.js
index 497099cfb..eb78096ca 100644
--- a/lib/MultiSelection/MultiSelectOptionsList.js
+++ b/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}`}
diff --git a/lib/MultiSelection/tests/MultiSelection-test.js b/lib/MultiSelection/tests/MultiSelection-test.js
index 0afb685f6..b5c36ae15 100644
--- a/lib/MultiSelection/tests/MultiSelection-test.js
+++ b/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;
+      });
+    });
+  });
 });
diff --git a/lib/MultiSelection/tests/interactor.js b/lib/MultiSelection/tests/interactor.js
index d734ce47f..f6f9a9fe2 100644
--- a/lib/MultiSelection/tests/interactor.js
+++ b/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);
diff --git a/package.json b/package.json
index b860c2789..0f421f7d4 100644
--- a/package.json
+++ b/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",