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,
 };