E2E/Playwright: MM-T5424 Find channel limit to 50 results (#23248)

* fix aria-label of Find Channels modal

* add components

* add test for MM-T5424

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/playwright/support/ui/components/channels/find_channels_modal.ts

@@ -0,0 +1,23 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, Locator} from '@playwright/test';
+
+export default class FindChannelsModal {
+    readonly container: Locator;
+    readonly input;
+    readonly searchList;
+
+    constructor(container: Locator) {
+        this.container = container;
+
+        this.input = container.getByRole('textbox', {name: 'quick switch input'});
+        this.searchList = container.locator('.suggestion-list__item');
+    }
+
+    async toBeVisible() {
+        await expect(this.container).toBeVisible();
+    }
+}
+
+export {FindChannelsModal};

e2e-tests/playwright/support/ui/components/channels/header_mobile.ts

@@ -0,0 +1,22 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, Locator} from '@playwright/test';
+
+export default class ChannelsHeaderMobile {
+    readonly container: Locator;
+
+    constructor(container: Locator) {
+        this.container = container;
+    }
+
+    async toggleSidebar() {
+        await this.container.getByRole('button', {name: 'Toggle sidebar Menu Icon'}).click();
+    }
+
+    async toBeVisible() {
+        await expect(this.container).toBeVisible();
+    }
+}
+
+export {ChannelsHeaderMobile};

e2e-tests/playwright/support/ui/components/channels/sidebar_left.ts

@@ -0,0 +1,21 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, Locator} from '@playwright/test';
+
+export default class ChannelsSidebarLeft {
+    readonly container: Locator;
+    readonly findChannelButton;
+
+    constructor(container: Locator) {
+        this.container = container;
+
+        this.findChannelButton = container.getByRole('button', {name: 'Find Channels'});
+    }
+
+    async toBeVisible() {
+        await expect(this.container).toBeVisible();
+    }
+}
+
+export {ChannelsSidebarLeft};

e2e-tests/playwright/support/ui/components/index.ts

@@ -3,19 +3,25 @@
 
 import {BoardsSidebar} from './boards/sidebar';
 import {ChannelsHeader} from './channels/header';
+import {ChannelsHeaderMobile} from './channels/header_mobile';
 import {ChannelsAppBar} from './channels/app_bar';
 import {ChannelsPostCreate} from './channels/post_create';
 import {ChannelsPost} from './channels/post';
+import {ChannelsSidebarLeft} from './channels/sidebar_left';
 import {ChannelsSidebarRight} from './channels/sidebar_right';
+import {FindChannelsModal} from './channels/find_channels_modal';
 import {GlobalHeader} from './global_header';
 
 const components = {
     BoardsSidebar,
     ChannelsAppBar,
     ChannelsHeader,
+    ChannelsHeaderMobile,
     ChannelsPostCreate,
     ChannelsPost,
+    ChannelsSidebarLeft,
     ChannelsSidebarRight,
+    FindChannelsModal,
     GlobalHeader,
 };
 
@@ -24,8 +30,11 @@ export {
     BoardsSidebar,
     ChannelsAppBar,
     ChannelsHeader,
+    ChannelsHeaderMobile,
     ChannelsPostCreate,
     ChannelsPost,
+    ChannelsSidebarLeft,
     ChannelsSidebarRight,
+    FindChannelsModal,
     GlobalHeader,
 };

e2e-tests/playwright/support/ui/pages/channels.ts

@@ -11,17 +11,23 @@ export default class ChannelsPage {
     readonly channels = 'Channels';
     readonly page: Page;
     readonly postCreate;
+    readonly findChannelsModal;
     readonly globalHeader;
     readonly header;
+    readonly headerMobile;
     readonly appBar;
+    readonly sidebarLeft;
     readonly sidebarRight;
 
     constructor(page: Page) {
         this.page = page;
         this.postCreate = new components.ChannelsPostCreate(page.locator('#post-create'));
+        this.findChannelsModal = new components.FindChannelsModal(page.getByRole('dialog', {name: 'Find Channels'}));
         this.globalHeader = new components.GlobalHeader(page.locator('#global-header'));
         this.header = new components.ChannelsHeader(page.locator('.channel-header'));
+        this.headerMobile = new components.ChannelsHeaderMobile(page.locator('.navbar'));
         this.appBar = new components.ChannelsAppBar(page.locator('.app-bar'));
+        this.sidebarLeft = new components.ChannelsSidebarLeft(page.locator('#SidebarContainer'));
         this.sidebarRight = new components.ChannelsSidebarRight(page.locator('#sidebar-right'));
     }