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/server/channel.ts

@@ -4,25 +4,32 @@
 import {getRandomId} from '@e2e-support/util';
 import {Channel, ChannelType} from '@mattermost/types/channels';
 
-export function createRandomChannel(
-    teamId: string,
-    name: string,
-    displayName: string,
-    type: ChannelType = 'O',
-    purpose = '',
-    header = '',
-    unique = true
-): Channel {
-    const randomSuffix = getRandomId();
+type ChannelInput = {
+    teamId: string;
+    name: string;
+    displayName: string;
+    type?: ChannelType;
+    purpose?: string;
+    header?: string;
+    unique?: boolean;
+};
 
+export function createRandomChannel(channelInput: ChannelInput): Channel {
     const channel = {
-        team_id: teamId,
-        name: unique ? `${name}-${randomSuffix}` : name,
-        display_name: unique ? `${displayName} ${randomSuffix}` : displayName,
-        type,
-        purpose,
-        header,
+        team_id: channelInput.teamId,
+        name: channelInput.name,
+        display_name: channelInput.displayName,
+        type: channelInput.type || 'O',
+        purpose: channelInput.type || '',
+        header: channelInput.type || '',
     };
 
+    if (channelInput.unique) {
+        const randomSuffix = getRandomId();
+
+        channel.name = `${channelInput.name}-${randomSuffix}`;
+        channel.display_name = `${channelInput.displayName} ${randomSuffix}`;
+    }
+
     return channel as Channel;
 }

e2e-tests/playwright/support/test_fixture.ts

@@ -1,8 +1,9 @@
-import {test as base, Browser} from '@playwright/test';
+import {test as base, Browser, ViewportSize} from '@playwright/test';
 
 import {TestBrowser} from './browser_context';
 import {shouldHaveCallsEnabled, shouldHaveFeatureFlag, shouldSkipInSmallScreen, shouldRunInLinux} from './flag';
 import {initSetup, getAdminClient} from './server';
+import {isSmallScreen} from './util';
 import {hideDynamicChannelsContent, waitForAnimationEnd, waitUntil} from './test_action';
 import {pages} from './ui/pages';
 import {matchSnapshot} from './visual';
@@ -15,8 +16,8 @@ type ExtendedFixtures = {
 };
 
 export const test = base.extend<ExtendedFixtures>({
-    pw: async ({browser}, use) => {
-        const pw = new PlaywrightExtended(browser);
+    pw: async ({browser, viewport}, use) => {
+        const pw = new PlaywrightExtended(browser, viewport);
         await use(pw);
         await pw.testBrowser.close();
     },
@@ -48,10 +49,13 @@ class PlaywrightExtended {
     // ./ui/pages
     readonly pages;
 
+    // ./util
+    readonly isSmallScreen;
+
     // ./visual
     readonly matchSnapshot;
 
-    constructor(browser: Browser) {
+    constructor(browser: Browser, viewport: ViewportSize | null) {
         // ./browser_context
         this.testBrowser = new TestBrowser(browser);
 
@@ -73,6 +77,9 @@ class PlaywrightExtended {
         // ./ui/pages
         this.pages = pages;
 
+        // ./util
+        this.isSmallScreen = () => isSmallScreen(viewport);
+
         // ./visual
         this.matchSnapshot = matchSnapshot;
     }

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'));
     }