From c161a8b78e3d73755c236210092c36510bd03425 Mon Sep 17 00:00:00 2001
From: Nikki Gonzales
 <38495263+nikkithelegendarypokemonster@users.noreply.github.com>
Date: Mon, 7 Oct 2024 18:53:24 +0800
Subject: [PATCH] MultiView: Add unit tests for keyboard navigation with hidden
 items (#28137)

---
 .../DevExpress.ui.widgets/multiView.tests.js  | 104 ++++++++++++++++++
 1 file changed, 104 insertions(+)

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/multiView.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/multiView.tests.js
index cc8ce89bda5d..37354b7b8ac5 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/multiView.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/multiView.tests.js
@@ -1222,6 +1222,110 @@ QUnit.module('keyboard navigation', {
         delete this.animationStartAction;
     }
 }, () => {
+    ['right', 'down'].forEach((key) => {
+        QUnit.test(`selectedIndex should be correct when one item is not visible using '${key}' arrow key`, function(assert) {
+            const $multiView = $('#multiView').dxMultiView({
+                items: [
+                    { text: '1', visible: true },
+                    { text: '2', visible: false },
+                    { text: '3', visible: true }
+                ],
+                focusStateEnabled: true
+            });
+            const instance = $multiView.dxMultiView('instance');
+            const $lastItem = $multiView.find(`.${MULTIVIEW_ITEM_CLASS}`).eq(2);
+
+            $multiView.focusin();
+            keyboardMock($multiView).keyDown(key);
+
+            assert.strictEqual(instance.option('selectedIndex'), 2, 'correct index is selected');
+            assert.roughEqual(position($multiView), position($lastItem), 1, 'container moved to proper position');
+        });
+    });
+
+    ['left', 'up'].forEach((key) => {
+        QUnit.test(`selectedIndex should be correct when one item is not visible using '${key}' arrow key`, function(assert) {
+            const $multiView = $('#multiView').dxMultiView({
+                items: [
+                    { text: '1', visible: true },
+                    { text: '2', visible: false },
+                    { text: '3', visible: true }
+                ],
+                selectedIndex: 2,
+                focusStateEnabled: true
+            });
+            const instance = $multiView.dxMultiView('instance');
+            const $firstItem = $multiView.find(`.${MULTIVIEW_ITEM_CLASS}`).eq(0);
+
+            $multiView.focusin();
+            keyboardMock($multiView).keyDown(key);
+
+            assert.strictEqual(instance.option('selectedIndex'), 0, 'correct index is selected');
+            assert.roughEqual(position($multiView), -position($firstItem), 1, 'container moved to proper position');
+        });
+    });
+
+    ['left', 'right', 'up', 'down', 'home', 'end'].forEach((key) => {
+        QUnit.test(`when only one item is visible, '${key}' key press doesn't moves the current visible view`, function(assert) {
+            const $multiView = $('#multiView').dxMultiView({
+                items: [
+                    { text: '1', visible: true },
+                    { text: '2', visible: false }
+                ],
+                loop: true,
+                focusStateEnabled: true
+            });
+            const instance = $multiView.dxMultiView('instance');
+            const $itemContainer = $multiView.find(toSelector(MULTIVIEW_ITEM_CONTAINER_CLASS));
+            const keyboard = keyboardMock($multiView);
+
+            $multiView.focusin();
+            keyboard.keyDown(key);
+
+            assert.strictEqual(position($itemContainer), 0, 'container did not move');
+            assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is not changed');
+        });
+    });
+
+    QUnit.test('item switching should go to first visible element when clicking home button', function(assert) {
+        const $multiView = $('#multiView').dxMultiView({
+            items: [
+                { text: '1', visible: false },
+                { text: '2', visible: true },
+                { text: '3', visible: true }
+            ],
+            selectedIndex: 2,
+            focusStateEnabled: true
+        });
+        const instance = $multiView.dxMultiView('instance');
+        const $firstVisibleItem = $multiView.find(`.${MULTIVIEW_ITEM_CLASS}`).eq(1);
+
+        $multiView.focusin();
+        keyboardMock($multiView).keyDown('home');
+
+        assert.strictEqual(instance.option('selectedIndex'), 1, 'correct index is selected');
+        assert.roughEqual(position($multiView), -position($firstVisibleItem), 1, 'container moved to proper position');
+    });
+
+    QUnit.test('item switching should go to last visible element when clicking end button', function(assert) {
+        const $multiView = $('#multiView').dxMultiView({
+            items: [
+                { text: '1', visible: true },
+                { text: '2', visible: true },
+                { text: '3', visible: false }
+            ],
+            focusStateEnabled: true
+        });
+        const instance = $multiView.dxMultiView('instance');
+        const $lastVisibleItem = $multiView.find(`.${MULTIVIEW_ITEM_CLASS}`).eq(1);
+
+        $multiView.focusin();
+        keyboardMock($multiView).keyDown('end');
+
+        assert.strictEqual(instance.option('selectedIndex'), 1, 'correct index is selected');
+        assert.roughEqual(position($multiView), position($lastVisibleItem), 1, 'container moved to proper position');
+    });
+
     QUnit.test('selected item should have focus after swipe', function(assert) {
         const $multiView = $('#multiView').dxMultiView({
             items: [1, 2, 3, 4],