IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

MM-54458 : Refactor playwright test with app areas (#24527)

Browse Source
This commit is contained in:
M-ZubairAhmed 2023-09-12 16:35:07 +05:30 committed by GitHub
parent c887381318
commit 6109330beb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 243 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
e2e-tests/playwright/support/ui/components/channels/center_view.ts Normal file
View File

@ -0,0 +1,93 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {expect, Locator} from '@playwright/test';
import {components} from '@e2e-support/ui/components';
import {waitUntil} from '@e2e-support/test_action';
import {duration} from '@e2e-support/util';
export default class ChannelsCenterView {
readonly container: Locator;
readonly header;
readonly headerMobile;
readonly postCreate;
constructor(container: Locator) {
this.container = container;
this.header = new components.ChannelsHeader(this.container.locator('.channel-header'));
this.headerMobile = new components.ChannelsHeaderMobile(this.container.locator('.navbar'));
this.postCreate = new components.ChannelsPostCreate(container.getByTestId('post-create'));
}
async toBeVisible() {
await expect(this.container).toBeVisible();
await this.postCreate.toBeVisible();
}
/**
* Return the first post in the Center
*/
async getFirstPost() {
const firstPost = this.container.getByTestId('postView').first();
await firstPost.waitFor();
return new components.ChannelsPost(firstPost);
}
/**
* Return the last post in the Center
*/
async getLastPost() {
const lastPost = this.container.getByTestId('postView').last();
await lastPost.waitFor();
return new components.ChannelsPost(lastPost);
}
/**
* Return the Nth post in the Center from the top
* @param index
* @returns
*/
async getNthPost(index: number) {
const nthPost = this.container.getByTestId('postView').nth(index);
await nthPost.waitFor();
return new components.ChannelsPost(nthPost);
}
/**
* Returns the Center post by post's id
* @param postId Just the ID without the prefix
*/
async getPostById(id: string) {
const postById = this.container.locator(`[id="post_${id}"]`);
await postById.waitFor();
return new components.ChannelsPost(postById);
}
async waitUntilLastPostContains(text: string, timeout = duration.ten_sec) {
await waitUntil(
async () => {
const post = await this.getLastPost();
const content = await post.container.textContent();
return content?.includes(text);
},
{timeout}
);
}
async waitUntilPostWithIdContains(id: string, text: string, timeout = duration.ten_sec) {
await waitUntil(
async () => {
const post = await this.getPostById(id);
const content = await post.container.textContent();
return content?.includes(text);
},
{timeout}
);
}
}
export {ChannelsCenterView};

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

@ -10,13 +10,13 @@ export default class ChannelsHeaderMobile {
this.container = container;
}
async toggleSidebar() {
await this.container.getByRole('button', {name: 'Toggle sidebar Menu Icon'}).click();
}
async toBeVisible() {
await expect(this.container).toBeVisible();
}
async toggleSidebar() {
await this.container.getByRole('button', {name: 'Toggle sidebar Menu Icon'}).click();
}
}
export {ChannelsHeaderMobile};

56
e2e-tests/playwright/support/ui/components/channels/post_create.ts
View File

@ -7,30 +7,76 @@ export default class ChannelsPostCreate {
readonly container: Locator;
readonly input;
readonly attachmentButton;
readonly emojiButton;
readonly sendMessageButton;
constructor(container: Locator) {
constructor(container: Locator, isRHS = false) {
this.container = container;
this.input = container.getByTestId('post_textbox');
if (!isRHS) {
this.input = container.getByTestId('post_textbox');
} else {
this.input = container.getByTestId('reply_textbox');
}
this.attachmentButton = container.getByLabel('attachment');
this.emojiButton = container.getByLabel('select an emoji');
this.sendMessageButton = container.getByTestId('SendMessageButton');
}
async toBeVisible() {
await expect(this.container).toBeVisible();
await this.input.waitFor();
await expect(this.input).toBeVisible();
}
/**
* It just writes the message in the input and doesn't send it
* @param message : Message to be written in the input
*/
async writeMessage(message: string) {
await this.input.waitFor();
await expect(this.input).toBeVisible();
await this.input.fill(message);
}
/**
* Returns the value of the message input
*/
async getInputValue() {
await expect(this.input).toBeVisible();
return await this.input.inputValue();
}
/**
* Sends the message already written in the input
*/
async sendMessage() {
await expect(this.input).toBeVisible();
const messageInputValue = await this.getInputValue();
expect(messageInputValue).not.toBe('');
await expect(this.sendMessageButton).toBeVisible();
await expect(this.sendMessageButton).toBeEnabled();
await this.sendMessageButton.click();
}
async toBeVisible() {
await expect(this.container).toBeVisible();
await expect(this.input).toBeVisible();
/**
* Composes and sends a message
*/
async postMessage(message: string) {
await this.writeMessage(message);
await this.sendMessage();
}
async openEmojiPicker() {
await expect(this.emojiButton).toBeVisible();
await this.emojiButton.click();
}
}

44
e2e-tests/playwright/support/ui/components/channels/sidebar_right.ts
View File

@ -8,16 +8,13 @@ import {components} from '@e2e-support/ui/components';
export default class ChannelsSidebarRight {
readonly container: Locator;
readonly input;
readonly sendMessageButton;
readonly postCreate;
readonly closeButton;
constructor(container: Locator) {
this.container = container;
this.input = container.getByTestId('reply_textbox');
this.sendMessageButton = container.getByTestId('SendMessageButton');
this.postCreate = new components.ChannelsPostCreate(container.getByTestId('comment-create'), true);
this.closeButton = container.locator('#rhsCloseButton');
}
@ -25,34 +22,23 @@ export default class ChannelsSidebarRight {
await expect(this.container).toBeVisible();
}
async postMessage(message: string) {
await this.writeMessage(message);
await this.sendMessage();
}
async writeMessage(message: string) {
await this.input.fill(message);
}
async sendMessage() {
await this.sendMessageButton.click();
}
/**
* Returns the value of the textbox in RHS
*/
async getInputValue() {
return await this.input.inputValue();
}
/**
* Returns the RHS post by post id
* @param postId Just the ID without the prefix
*/
async getRHSPostById(postId: string) {
const rhsPostId = `rhsPost_${postId}`;
const postLocator = this.container.locator(`#${rhsPostId}`);
return new components.ChannelsPost(postLocator);
async getPostById(postId: string) {
const post = this.container.locator(`[id="rhsPost_${postId}"]`);
await post.waitFor();
return new components.ChannelsPost(post);
}
/**
* Return the last post in the RHS
*/
async getLastPost() {
const post = this.container.getByTestId('rhsPostView').last();
await post.waitFor();
return new components.ChannelsPost(post);
}
/**

25
e2e-tests/playwright/support/ui/components/index.ts
View File

@ -7,6 +7,7 @@ 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 {ChannelsSidebarLeft} from './channels/sidebar_left';
import {ChannelsSidebarRight} from './channels/sidebar_right';
import {DeletePostModal} from './channels/delete_post_modal';
@ -21,38 +22,40 @@ import {ThreadFooter} from './channels/thread_footer';
const components = {
BoardsSidebar,
GlobalHeader,
ChannelsCenterView,
ChannelsSidebarLeft,
ChannelsSidebarRight,
ChannelsAppBar,
ChannelsHeader,
ChannelsHeaderMobile,
ChannelsPostCreate,
ChannelsPost,
ChannelsSidebarLeft,
ChannelsSidebarRight,
DeletePostModal,
FindChannelsModal,
Footer,
GlobalHeader,
MainHeader,
DeletePostModal,
PostDotMenu,
PostReminderMenu,
PostMenu,
ThreadFooter,
Footer,
MainHeader,
PostReminderMenu,
};
export {
components,
BoardsSidebar,
GlobalHeader,
ChannelsCenterView,
ChannelsSidebarLeft,
ChannelsSidebarRight,
ChannelsAppBar,
ChannelsHeader,
ChannelsHeaderMobile,
ChannelsPostCreate,
ChannelsPost,
ChannelsSidebarLeft,
ChannelsSidebarRight,
FindChannelsModal,
GlobalHeader,
PostDotMenu,
DeletePostModal,
PostDotMenu,
PostMenu,
ThreadFooter,
};

115
e2e-tests/playwright/support/ui/pages/channels.ts
View File

@ -3,38 +3,51 @@
import {Page} from '@playwright/test';
import {waitUntil} from '@e2e-support/test_action';
import {components} from '@e2e-support/ui/components';
import {duration, isSmallScreen} from '@e2e-support/util';
import {isSmallScreen} from '@e2e-support/util';
export default class ChannelsPage {
readonly channels = 'Channels';
readonly page: Page;
readonly postCreate;
readonly findChannelsModal;
readonly globalHeader;
readonly header;
readonly headerMobile;
readonly appBar;
readonly centerView;
readonly sidebarLeft;
readonly sidebarRight;
readonly appBar;
readonly findChannelsModal;
readonly deletePostModal;
readonly postDotMenu;
readonly postReminderMenu;
readonly deletePostModal;
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'}));
// The main areas of the app
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.centerView = new components.ChannelsCenterView(page.getByTestId('channel_view'));
this.sidebarLeft = new components.ChannelsSidebarLeft(page.locator('#SidebarContainer'));
this.sidebarRight = new components.ChannelsSidebarRight(page.locator('#sidebar-right'));
this.appBar = new components.ChannelsAppBar(page.locator('.app-bar'));
// Modals
this.findChannelsModal = new components.FindChannelsModal(page.getByRole('dialog', {name: 'Find Channels'}));
this.deletePostModal = new components.DeletePostModal(page.locator('#deletePostModal'));
// Menus
this.postDotMenu = new components.PostDotMenu(page.getByRole('menu', {name: 'Post extra options'}));
this.postReminderMenu = new components.PostReminderMenu(page.getByRole('menu', {name: 'Set a reminder for:'}));
this.deletePostModal = new components.DeletePostModal(page.locator('#deletePostModal'));
}
async toBeVisible() {
if (!isSmallScreen(this.page.viewportSize())) {
await this.globalHeader.toBeVisible(this.channels);
}
await this.centerView.toBeVisible();
}
async goto(teamName = '', channelName = '') {
@ -48,80 +61,6 @@ export default class ChannelsPage {
await this.page.goto(channelsUrl);
}
async toBeVisible() {
if (!isSmallScreen(this.page.viewportSize())) {
await this.globalHeader.toBeVisible(this.channels);
}
await this.postCreate.toBeVisible();
}
async postMessage(message: string) {
await this.writeMessage(message);
await this.sendMessage();
}
async writeMessage(message: string) {
await this.postCreate.input.waitFor();
await this.postCreate.writeMessage(message);
}
async sendMessage() {
await this.postCreate.sendMessage();
}
async getFirstPost() {
await this.page.getByTestId('postView').first().waitFor();
const post = await this.page.getByTestId('postView').first();
return new components.ChannelsPost(post);
}
async getLastPost() {
await this.page.getByTestId('postView').last().waitFor();
const post = await this.page.getByTestId('postView').last();
return new components.ChannelsPost(post);
}
async getNthPost(index: number) {
await this.page.getByTestId('postView').nth(index).waitFor();
const post = await this.page.getByTestId('postView').nth(index);
return new components.ChannelsPost(post);
}
async getPostById(id: string) {
await this.page.locator(`[id="post_${id}"]`).waitFor();
const post = await this.page.locator(`[id="post_${id}"]`);
return new components.ChannelsPost(post);
}
async getRHSPostById(id: string) {
await this.page.locator(`[id="rhsPost_${id}"]`).waitFor();
const post = await this.page.locator(`[id="rhsPost_${id}"]`);
return new components.ChannelsPost(post);
}
async waitUntilLastPostContains(text: string, timeout = duration.ten_sec) {
await waitUntil(
async () => {
const post = await this.getLastPost();
const content = await post.container.textContent();
return content?.includes(text);
},
{timeout}
);
}
async waitUntilPostWithIdContains(id: string, text: string, timeout = duration.ten_sec) {
await waitUntil(
async () => {
const post = await this.getPostById(id);
const content = await post.container.textContent();
return content?.includes(text);
},
{timeout}
);
}
}
export {ChannelsPage};

6
e2e-tests/playwright/tests/accessibility/channels/intro_channel.spec.ts
View File

@ -14,7 +14,7 @@ test('Base channel accessibility', async ({pw, pages, axe}) => {
const channelsPage = new pages.ChannelsPage(page);
await channelsPage.goto();
await channelsPage.toBeVisible();
await channelsPage.postMessage('hello');
await channelsPage.centerView.postCreate.postMessage('hello');
// # Analyze the page
// Disable 'color-contrast' to be addressed by MM-53814
@ -35,9 +35,9 @@ test('Post actions tab support', async ({pw, pages, axe}) => {
const channelsPage = new pages.ChannelsPage(page);
await channelsPage.goto();
await channelsPage.toBeVisible();
await channelsPage.postMessage('hello');
await channelsPage.centerView.postCreate.postMessage('hello');
const post = await channelsPage.getLastPost();
const post = await channelsPage.centerView.getLastPost();
await post.hover();
await post.postMenu.toBeVisible();

18
e2e-tests/playwright/tests/functional/channels/drafts/drafts_on_deleted_message.spec.ts
View File

@ -33,7 +33,7 @@ test('MM-T5435_1 Global Drafts link in sidebar should be hidden when another use
await channelPage.goto();
await channelPage.toBeVisible();
const lastPostByAdmin = await channelPage.getLastPost();
const lastPostByAdmin = await channelPage.centerView.getLastPost();
await lastPostByAdmin.toBeVisible();
// # Open the last post sent by admin in RHS
@ -44,11 +44,11 @@ test('MM-T5435_1 Global Drafts link in sidebar should be hidden when another use
// # Post a message as a user
const sidebarRight = channelPage.sidebarRight;
await sidebarRight.toBeVisible();
await sidebarRight.postMessage('Replying to a thread');
await sidebarRight.postCreate.postMessage('Replying to a thread');
// # Write a message in the reply thread but don't send it now so that it becomes a draft
const draftMessageByUser = 'I should be in drafts by User';
await sidebarRight.writeMessage(draftMessageByUser);
await sidebarRight.postCreate.writeMessage(draftMessageByUser);
// # Close the RHS for draft to be saved
await sidebarRight.close();
@ -67,11 +67,11 @@ test('MM-T5435_1 Global Drafts link in sidebar should be hidden when another use
await lastPostByAdmin.threadFooter.reply();
// * Verify drafts in user's textbox is still visible
const rhsTextboxValue = await sidebarRight.getInputValue();
const rhsTextboxValue = await sidebarRight.postCreate.getInputValue();
expect(rhsTextboxValue).toBe(draftMessageByUser);
// # Click on remove post
const deletedPostByAdminInRHS = await sidebarRight.getRHSPostById(adminPost.id);
const deletedPostByAdminInRHS = await sidebarRight.getPostById(adminPost.id);
await deletedPostByAdminInRHS.remove();
// * Verify the drafts links should also be removed from sidebar
@ -90,10 +90,10 @@ test('MM-T5435_2 Global Drafts link in sidebar should be hidden when user delete
await channelPage.toBeVisible();
// # Post a message in the channel
await channelPage.postMessage('Message which will be deleted');
await channelPage.centerView.postCreate.postMessage('Message which will be deleted');
// # Start a thread by clicking on reply menuitem from post options menu
const post = await channelPage.getLastPost();
const post = await channelPage.centerView.getLastPost();
await post.hover();
await post.postMenu.toBeVisible();
await post.postMenu.reply();
@ -102,10 +102,10 @@ test('MM-T5435_2 Global Drafts link in sidebar should be hidden when user delete
await sidebarRight.toBeVisible();
// # Post a message in the thread
await sidebarRight.postMessage('Replying to a thread');
await sidebarRight.postCreate.postMessage('Replying to a thread');
// # Write a message in the reply thread but don't send it
await sidebarRight.writeMessage('I should be in drafts');
await sidebarRight.postCreate.writeMessage('I should be in drafts');
// # Close the RHS for draft to be saved
await sidebarRight.close();

2
e2e-tests/playwright/tests/functional/channels/search/find_channels.spec.ts
View File

@ -38,7 +38,7 @@ test('MM-T5424 Find channel search returns only 50 results when there are more t
// # Click on "Find channel" and type "test_channel"
if (pw.isSmallScreen()) {
await channelsPage.headerMobile.toggleSidebar();
await channelsPage.centerView.headerMobile.toggleSidebar();
}
await channelsPage.sidebarLeft.findChannelButton.click();

12
webapp/channels/src/components/advanced_create_post/__snapshots__/advanced_create_post.test.jsx.snap
View File

@ -3,6 +3,7 @@
exports[`components/advanced_create_post Show tutorial 1`] = `
<form
className=""
data-testid="create-post"
id="create_post"
onSubmit={[Function]}
>
@ -81,6 +82,7 @@ exports[`components/advanced_create_post Show tutorial 1`] = `
exports[`components/advanced_create_post should match snapshot for center textbox 1`] = `
<form
className="center"
data-testid="create-post"
id="create_post"
onSubmit={[Function]}
>
@ -159,6 +161,7 @@ exports[`components/advanced_create_post should match snapshot for center textbo
exports[`components/advanced_create_post should match snapshot when cannot post 1`] = `
<form
className=""
data-testid="create-post"
id="create_post"
onSubmit={[Function]}
>
@ -237,6 +240,7 @@ exports[`components/advanced_create_post should match snapshot when cannot post
exports[`components/advanced_create_post should match snapshot when file upload disabled 1`] = `
<form
className=""
data-testid="create-post"
id="create_post"
onSubmit={[Function]}
>
@ -315,6 +319,7 @@ exports[`components/advanced_create_post should match snapshot when file upload
exports[`components/advanced_create_post should match snapshot, can post; preview disabled 1`] = `
<form
className=""
data-testid="create-post"
id="create_post"
onSubmit={[Function]}
>
@ -393,6 +398,7 @@ exports[`components/advanced_create_post should match snapshot, can post; previe
exports[`components/advanced_create_post should match snapshot, can post; preview enabled 1`] = `
<form
className=""
data-testid="create-post"
id="create_post"
onSubmit={[Function]}
>
@ -471,6 +477,7 @@ exports[`components/advanced_create_post should match snapshot, can post; previe
exports[`components/advanced_create_post should match snapshot, cannot post; preview disabled 1`] = `
<form
className=""
data-testid="create-post"
id="create_post"
onSubmit={[Function]}
>
@ -549,6 +556,7 @@ exports[`components/advanced_create_post should match snapshot, cannot post; pre
exports[`components/advanced_create_post should match snapshot, cannot post; preview enabled 1`] = `
<form
className=""
data-testid="create-post"
id="create_post"
onSubmit={[Function]}
>
@ -627,6 +635,7 @@ exports[`components/advanced_create_post should match snapshot, cannot post; pre
exports[`components/advanced_create_post should match snapshot, init 1`] = `
<form
className=""
data-testid="create-post"
id="create_post"
onSubmit={[Function]}
>
@ -705,6 +714,7 @@ exports[`components/advanced_create_post should match snapshot, init 1`] = `
exports[`components/advanced_create_post should match snapshot, post priority disabled, with priority important 1`] = `
<form
className=""
data-testid="create-post"
id="create_post"
onSubmit={[Function]}
>
@ -788,6 +798,7 @@ exports[`components/advanced_create_post should match snapshot, post priority di
exports[`components/advanced_create_post should match snapshot, post priority enabled 1`] = `
<form
className=""
data-testid="create-post"
id="create_post"
onSubmit={[Function]}
>
@ -874,6 +885,7 @@ exports[`components/advanced_create_post should match snapshot, post priority en
exports[`components/advanced_create_post should match snapshot, post priority enabled, with priority important 1`] = `
<form
className=""
data-testid="create-post"
id="create_post"
onSubmit={[Function]}
>

1
webapp/channels/src/components/advanced_create_post/advanced_create_post.tsx
View File

@ -1626,6 +1626,7 @@ class AdvancedCreatePost extends React.PureComponent<Props, State> {
<form
id='create_post'
ref={this.topDiv}
data-testid='create-post'
className={centerClass}
onSubmit={this.handleSubmit}
>

1
webapp/channels/src/components/channel_layout/channel_controller.tsx
View File

@ -55,6 +55,7 @@ export default function ChannelController(props: Props) {
<div
id='channel_view'
className='channel-view'
data-testid='channel_view'
>
<FaviconTitleHandler/>
<ProductNoticesModal/>

1
webapp/channels/src/components/channel_view/__snapshots__/channel_view.test.tsx.snap
View File

@ -143,6 +143,7 @@ exports[`components/channel_view Should match snapshot with base props 1`] = `
/>
<div
className="post-create__container AdvancedTextEditor__ctr"
data-testid="post-create"
id="post-create"
>
<Connect(AdvancedCreatePost)

3
webapp/channels/src/components/channel_view/channel_view.tsx
View File

@ -149,8 +149,9 @@ export default class ChannelView extends React.PureComponent<Props, State> {
} else {
createPost = (
<div
className='post-create__container AdvancedTextEditor__ctr'
id='post-create'
data-testid='post-create'
className='post-create__container AdvancedTextEditor__ctr'
>
<AdvancedCreatePost getChannelView={this.getChannelView}/>
</div>

9
webapp/channels/src/components/post/post_component.tsx
View File

@ -509,13 +509,20 @@ const PostComponent = (props: Props): JSX.Element => {
priority = <span className='d-flex mr-2 ml-1'><PriorityLabel priority={post.metadata.priority.priority}/></span>;
}
let postAriaLabelDivTestId = '';
if (props.location === Locations.CENTER) {
postAriaLabelDivTestId = 'postView';
} else if (props.location === Locations.RHS_ROOT || props.location === Locations.RHS_COMMENT) {
postAriaLabelDivTestId = 'rhsPostView';
}
return (
<>
{(isSearchResultItem || (props.location !== Locations.CENTER && (props.isPinnedPosts || props.isFlaggedPosts))) && <DateSeparator date={currentPostDay}/>}
<PostAriaLabelDiv
ref={postRef}
id={getTestId()}
data-testid={props.location === 'CENTER' ? 'postView' : ''}
data-testid={postAriaLabelDivTestId}
tabIndex={0}
post={post}
className={getClassName()}

1
webapp/channels/src/components/threading/virtualized_thread_viewer/create_comment.tsx
View File

@ -92,6 +92,7 @@ const CreateComment = forwardRef<HTMLDivElement, Props>(({
<div
className='post-create__container'
ref={ref}
data-testid='comment-create'
>
<AdvancedCreateComment
focusOnMount={focusOnMount}