CLD-5948 Playwright/E2E: Update dependencies, server default config and its types, and remove Boards and mobile view tests (#24583)

* update dependencies

* update dependencies

* remove mobile view

* remove boards

* update default config  and its types

* update snapshots

* fix formatting

* check works and fix styling

e2e-tests/playwright/support/ui/components/boards/create_modal.ts

@@ -1,27 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {expect, Locator} from '@playwright/test';
-
-export default class BoardsCreateModal {
-    readonly container: Locator;
-
-    readonly productSwitchMenu;
-
-    constructor(container: Locator) {
-        this.container = container;
-
-        this.productSwitchMenu = container.getByRole('button', {name: 'Product switch menu'});
-    }
-
-    async switchProduct(name: string) {
-        await this.productSwitchMenu.click();
-        await this.container.getByRole('link', {name: ` ${name}`}).click();
-    }
-
-    async toBeVisible(name: string) {
-        await expect(this.container.getByRole('heading', {name})).toBeVisible();
-    }
-}
-
-export {BoardsCreateModal};

e2e-tests/playwright/support/ui/components/boards/sidebar.ts

@@ -1,28 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {Locator} from '@playwright/test';
-
-export default class BoardsSidebar {
-    readonly container: Locator;
-
-    readonly plusButton;
-    readonly createNewBoardMenuItem;
-    readonly createNewCategoryMenuItem;
-    readonly titles;
-
-    constructor(container: Locator) {
-        this.container = container;
-
-        this.plusButton = container.locator('.add-board-icon');
-        this.createNewBoardMenuItem = container.getByRole('button', {name: 'Create new board'});
-        this.createNewCategoryMenuItem = container.getByRole('button', {name: 'Create New Category'});
-        this.titles = container.locator('.SidebarBoardItem > .octo-sidebar-title');
-    }
-
-    async waitForTitle(name: string) {
-        await this.container.getByRole('button', {name: ` ${name}`}).waitFor({state: 'visible'});
-    }
-}
-
-export {BoardsSidebar};

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

@@ -47,8 +47,8 @@ export default class ChannelsCenterView {
 
     /**
      * Return the Nth post in the Center from the top
-     * @param index 
-     * @returns 
+     * @param index
+     * @returns
      */
     async getNthPost(index: number) {
         const nthPost = this.container.getByTestId('postView').nth(index);
@@ -73,7 +73,7 @@ export default class ChannelsCenterView {
                 const content = await post.container.textContent();
                 return content?.includes(text);
             },
-            {timeout}
+            {timeout},
         );
     }
 
@@ -85,7 +85,7 @@ export default class ChannelsCenterView {
 
                 return content?.includes(text);
             },
-            {timeout}
+            {timeout},
         );
     }
 }

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

@@ -15,7 +15,7 @@ export default class EmojiGifPicker {
 
         this.gifTab = container.getByText('GIFs');
         this.gifSearchInput = container.getByPlaceholder('Search GIPHY');
-        this.gifPickerItems = container.locator('.gif-picker__items')
+        this.gifPickerItems = container.locator('.gif-picker__items');
     }
 
     async toBeVisible() {
@@ -24,7 +24,7 @@ export default class EmojiGifPicker {
 
     async openGifTab() {
         await expect(this.gifTab).toBeVisible();
-        
+
         await this.gifTab.click({force: true});
 
         await expect(this.gifSearchInput).toBeVisible();
@@ -41,7 +41,7 @@ export default class EmojiGifPicker {
 
         await this.gifPickerItems.locator('img').nth(n).waitFor();
         const nthGif = this.gifPickerItems.locator('img').nth(n);
-        await expect(nthGif).toBeVisible()
+        await expect(nthGif).toBeVisible();
 
         const nthGifSrc = await nthGif.getAttribute('src');
         const nthGifAlt = await nthGif.getAttribute('alt');

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

@@ -1,13 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-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 {ChannelsCenterView} from './channels/center_view'
+import {ChannelsCenterView} from './channels/center_view';
 import {ChannelsSidebarLeft} from './channels/sidebar_left';
 import {ChannelsSidebarRight} from './channels/sidebar_right';
 import {DeletePostModal} from './channels/delete_post_modal';
@@ -22,7 +21,6 @@ import {ThreadFooter} from './channels/thread_footer';
 import {EmojiGifPicker} from './channels/emoji_gif_picker';
 
 const components = {
-    BoardsSidebar,
     GlobalHeader,
     ChannelsCenterView,
     ChannelsSidebarLeft,
@@ -45,7 +43,6 @@ const components = {
 
 export {
     components,
-    BoardsSidebar,
     GlobalHeader,
     ChannelsCenterView,
     ChannelsSidebarLeft,

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

@@ -1,47 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {expect, Page} from '@playwright/test';
-
-import {components} from '@e2e-support/ui/components';
-
-export default class BoardsCreatePage {
-    readonly boards = 'Boards';
-    readonly page: Page;
-
-    readonly globalHeader;
-
-    readonly createBoardHeading;
-    readonly createEmptyBoardButton;
-    readonly useTemplateButton;
-
-    constructor(page: Page) {
-        this.page = page;
-        this.globalHeader = new components.GlobalHeader(this.page.locator('#global-header'));
-        this.createBoardHeading = page.getByRole('heading', {name: 'Create a board'});
-        this.createEmptyBoardButton = page.getByRole('button', {name: ' Create an empty board'});
-        this.useTemplateButton = page.getByRole('button', {name: 'Use this template'});
-    }
-
-    async goto(teamId = '') {
-        let boardsUrl = '/boards';
-        if (teamId) {
-            boardsUrl += `/team/${teamId}`;
-        }
-
-        await this.page.goto(boardsUrl);
-    }
-
-    async toBeVisible() {
-        await this.globalHeader.toBeVisible(this.boards);
-        await expect(this.createEmptyBoardButton).toBeVisible();
-        await expect(this.useTemplateButton).toBeVisible();
-        await expect(this.createBoardHeading).toBeVisible();
-    }
-
-    async createEmptyBoard() {
-        await this.createEmptyBoardButton.click();
-    }
-}
-
-export {BoardsCreatePage};

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

@@ -1,60 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {expect, Page} from '@playwright/test';
-
-import {components} from '@e2e-support/ui/components';
-
-export default class BoardsViewPage {
-    readonly boards = 'Boards';
-    readonly page: Page;
-
-    readonly sidebar;
-    readonly globalHeader;
-
-    readonly topHead;
-    readonly editableTitle;
-    readonly shareButton;
-
-    constructor(page: Page) {
-        this.page = page;
-        this.sidebar = new components.BoardsSidebar(page.locator('.octo-sidebar'));
-        this.globalHeader = new components.GlobalHeader(this.page.locator('#global-header'));
-        this.topHead = page.locator('.top-head');
-        this.editableTitle = this.topHead.getByPlaceholder('Untitled board');
-        this.shareButton = page.getByRole('button', {name: '󰍁 Share'});
-    }
-
-    async goto(teamId = '', boardId = '', viewId = '', cardId = '') {
-        let boardsUrl = '/boards';
-        if (teamId) {
-            boardsUrl += `/team/${teamId}`;
-            if (boardId) {
-                boardsUrl += `/${boardId}`;
-                if (viewId) {
-                    boardsUrl += `/${viewId}`;
-                    if (cardId) {
-                        boardsUrl += `/${cardId}`;
-                    }
-                }
-            }
-        }
-
-        await this.page.goto(boardsUrl);
-    }
-
-    async toBeVisible() {
-        await this.page.waitForLoadState('networkidle');
-        await this.globalHeader.toBeVisible(this.boards);
-        await expect(this.shareButton).toBeVisible();
-        await expect(this.topHead).toBeVisible();
-    }
-
-    async shouldHaveUntitledBoard() {
-        await this.editableTitle.isVisible();
-        expect(await this.editableTitle.getAttribute('value')).toBe('');
-        await expect(this.page.getByTitle('(Untitled Board)')).toBeVisible();
-    }
-}
-
-export {BoardsViewPage};

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

@@ -4,7 +4,6 @@
 import {Page} from '@playwright/test';
 
 import {components} from '@e2e-support/ui/components';
-import {isSmallScreen} from '@e2e-support/util';
 
 export default class ChannelsPage {
     readonly channels = 'Channels';
@@ -19,7 +18,7 @@ export default class ChannelsPage {
 
     readonly findChannelsModal;
     readonly deletePostModal;
-    
+
     readonly postDotMenu;
     readonly postReminderMenu;
 
@@ -35,7 +34,7 @@ export default class ChannelsPage {
         this.sidebarRight = new components.ChannelsSidebarRight(page.locator('#sidebar-right'));
         this.appBar = new components.ChannelsAppBar(page.locator('.app-bar'));
 
-        // Modals        
+        // Modals
         this.findChannelsModal = new components.FindChannelsModal(page.getByRole('dialog', {name: 'Find Channels'}));
         this.deletePostModal = new components.DeletePostModal(page.locator('#deletePostModal'));
 
@@ -48,10 +47,6 @@ export default class ChannelsPage {
     }
 
     async toBeVisible() {
-        if (!isSmallScreen(this.page.viewportSize())) {
-            await this.globalHeader.toBeVisible(this.channels);
-        }
-
         await this.centerView.toBeVisible();
     }
 

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

@@ -1,8 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {BoardsCreatePage} from './boards_create';
-import {BoardsViewPage} from './boards_view';
 import {ChannelsPage} from './channels';
 import {LandingLoginPage} from './landing_login';
 import {LoginPage} from './login';
@@ -10,8 +8,6 @@ import {ResetPasswordPage} from './reset_password';
 import {SignupPage} from './signup';
 
 const pages = {
-    BoardsCreatePage,
-    BoardsViewPage,
     ChannelsPage,
     LandingLoginPage,
     LoginPage,
@@ -19,4 +15,4 @@ const pages = {
     SignupPage,
 };
 
-export {pages, BoardsCreatePage, BoardsViewPage, ChannelsPage, LandingLoginPage, LoginPage, SignupPage};
+export {pages, ChannelsPage, LandingLoginPage, LoginPage, SignupPage};

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

@@ -44,7 +44,7 @@ export default class SignupPage {
         this.createAccountButton = page.locator('button:has-text("Create Account")');
         this.emailError = page.locator('text=Please enter a valid email address');
         this.usernameError = page.locator(
-            'text=Usernames have to begin with a lowercase letter and be 3-22 characters long. You can use lowercase letters, numbers, periods, dashes, and underscores.'
+            'text=Usernames have to begin with a lowercase letter and be 3-22 characters long. You can use lowercase letters, numbers, periods, dashes, and underscores.',
         );
         this.passwordError = page.locator('text=Must be 5-64 characters long.');