Files
mattermost-mobile/detox/e2e/test/messaging/markdown_table.e2e.ts
2023-02-09 09:40:32 +01:00

231 lines
11 KiB
TypeScript

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
// *******************************************************************
// - [#] indicates a test step (e.g. # Go to a screen)
// - [*] indicates an assertion (e.g. * Check the title)
// - Use element testID when selecting an element. Create one if none.
// *******************************************************************
import {
Post,
Setup,
} from '@support/server_api';
import {
serverOneUrl,
siteOneUrl,
} from '@support/test_config';
import {
ChannelListScreen,
ChannelScreen,
HomeScreen,
LoginScreen,
ServerScreen,
TableScreen,
} from '@support/ui/screen';
import {expect} from 'detox';
describe('Messaging - Markdown Table', () => {
const serverOneDisplayName = 'Server 1';
const channelsCategory = 'channels';
let testChannel: any;
beforeAll(async () => {
const {channel, user} = await Setup.apiInit(siteOneUrl);
testChannel = channel;
// # Log in to server
await ServerScreen.connectToServer(serverOneUrl, serverOneDisplayName);
await LoginScreen.login(user);
});
beforeEach(async () => {
// * Verify on channel list screen
await ChannelListScreen.toBeVisible();
});
afterAll(async () => {
// # Log out
await HomeScreen.logout();
});
it('MM-T4899_1 - should be able to display markdown table', async () => {
// # Open a channel screen and post a markdown table
const markdownTable =
'| A | B | C |\n' +
'|:---|:---|:---|\n' +
'| 1 | Name | Toast |\n' +
'| 2 | Name | Server |\n';
await ChannelScreen.open(channelsCategory, testChannel.name);
await Post.apiCreatePost(siteOneUrl, {
channelId: testChannel.id,
message: markdownTable,
});
// * Verify markdown table is displayed
const {post} = await Post.apiGetLastPostInChannel(siteOneUrl, testChannel.id);
const {postListPostItemTable} = ChannelScreen.getPostListPostItem(post.id);
await expect(postListPostItemTable).toBeVisible();
// # Go back to channel list screen
await ChannelScreen.back();
});
it('MM-T4899_2 - should be able to display markdown table with long text wrapped properly', async () => {
// # Open a channel screen and post a markdown table with long text
const markdownTable =
'| Left header that wraps | Center header that wraps | Right header that wraps |\n' +
'| :-- | :-: | --: |\n' +
'| Left text that wraps row | Center text that wraps row | Right text that wraps row |\n';
await ChannelScreen.open(channelsCategory, testChannel.name);
await Post.apiCreatePost(siteOneUrl, {
channelId: testChannel.id,
message: markdownTable,
});
// * Verify table is displayed with long text wrapped properly
const {post} = await Post.apiGetLastPostInChannel(siteOneUrl, testChannel.id);
const {postListPostItemTable, postListPostItemTableExpandButton} = ChannelScreen.getPostListPostItem(post.id);
await expect(postListPostItemTable).toBeVisible();
await expect(element(by.text('Left header that wraps'))).toBeVisible();
await expect(element(by.text('Center header that wraps'))).toBeVisible();
await expect(element(by.text('Right header that wraps'))).toBeVisible();
await expect(element(by.text('Left text that wraps row'))).toBeVisible();
await expect(element(by.text('Center text that wraps row'))).toBeVisible();
await expect(element(by.text('Right text that wraps row'))).toBeVisible();
// # Expand to full view
await waitFor(postListPostItemTableExpandButton).toBeVisible().whileElement(by.id(ChannelScreen.postList.testID.flatList)).scroll(50, 'down');
await postListPostItemTableExpandButton.tap();
// * Verify on table screen with the markdown table
await TableScreen.toBeVisible();
await expect(element(by.text('Left header that wraps'))).toBeVisible();
await expect(element(by.text('Center header that wraps'))).toBeVisible();
await expect(element(by.text('Right header that wraps'))).toBeVisible();
await expect(element(by.text('Left text that wraps row'))).toBeVisible();
await expect(element(by.text('Center text that wraps row'))).toBeVisible();
await expect(element(by.text('Right text that wraps row'))).toBeVisible();
// # Go back to channel list screen
await TableScreen.back();
await ChannelScreen.back();
});
it('MM-T4899_3 - should be able to open markdown table in full view and allow horizontal scroll', async () => {
// # Open a channel screen and post a markdown table with more columns past horizontal view
const markdownTable =
'| Header | Header | Header | Header | Header | Header | Header | Header HS last |\n' +
'| :-- | :-: | --: | --: | :-- | :-: | --: | --: |\n' +
'| Left | Center | Right | Right | Left | Center | Right | Right |\n'.repeat(7) +
'| Left | Center | Right | Right | Left | Center | Right | Right HS last |\n';
await ChannelScreen.open(channelsCategory, testChannel.name);
await Post.apiCreatePost(siteOneUrl, {
channelId: testChannel.id,
message: markdownTable,
});
// * Verify table is displayed with some right columns not visible
const {post} = await Post.apiGetLastPostInChannel(siteOneUrl, testChannel.id);
const {postListPostItemTable, postListPostItemTableExpandButton} = ChannelScreen.getPostListPostItem(post.id);
await expect(postListPostItemTable).toBeVisible();
await expect(element(by.text('Header HS last'))).not.toBeVisible();
await expect(element(by.text('Right HS last'))).not.toBeVisible();
// # Expand to full view
await waitFor(postListPostItemTableExpandButton).toBeVisible().whileElement(by.id(ChannelScreen.postList.testID.flatList)).scroll(50, 'down');
await postListPostItemTableExpandButton.tap();
await TableScreen.toBeVisible();
await expect(element(by.text('Header HS last'))).not.toBeVisible();
await expect(element(by.text('Right HS last'))).not.toBeVisible();
// * Verify table screen is scrollable to the right
await TableScreen.tableScrollView.scrollTo('right');
await expect(element(by.text('Header HS last'))).toBeVisible();
await expect(element(by.text('Right HS last'))).toBeVisible();
// # Go back to channel list screen
await TableScreen.back();
await ChannelScreen.back();
});
it('MM-T4899_4 - should be able to open markdown table in full view and allow vertical scroll', async () => {
// # Open a channel screen and post a markdown table with more rows past vertical view
const markdownTable =
'| Header | Header | Header VS last |\n' +
'| :-- | :-: | --: |\n' +
'| Left | Center | Right |\n'.repeat(30) +
'| Left | Center | Right VS last |\n';
await ChannelScreen.open(channelsCategory, testChannel.name);
await Post.apiCreatePost(siteOneUrl, {
channelId: testChannel.id,
message: markdownTable,
});
// * Verify table is displayed with some bottom rows not visible
const {post} = await Post.apiGetLastPostInChannel(siteOneUrl, testChannel.id);
const {postListPostItemTable, postListPostItemTableExpandButton} = ChannelScreen.getPostListPostItem(post.id);
await expect(postListPostItemTable).toBeVisible();
await expect(element(by.text('Header VS last'))).toBeVisible();
await expect(element(by.text('Right VS last'))).not.toBeVisible();
// # Expand to full view
await waitFor(postListPostItemTableExpandButton).toBeVisible().whileElement(by.id(ChannelScreen.postList.testID.flatList)).scroll(50, 'down');
await postListPostItemTableExpandButton.tap();
await TableScreen.toBeVisible();
await expect(element(by.text('Header VS last'))).toBeVisible();
await expect(element(by.text('Right VS last'))).not.toBeVisible();
// * Verify table screen is scrollable to the bottom
const expectedElement = element(by.text('Right VS last'));
await waitFor(expectedElement).toBeVisible().whileElement(by.id(TableScreen.testID.tableScrollView)).scroll(50, 'down');
await expect(element(by.text('Header VS last'))).not.toBeVisible();
await expect(expectedElement).toBeVisible();
// # Go back to channel list screen
await TableScreen.back();
await ChannelScreen.back();
});
it('MM-T4899_5 - should be able to open markdown table in full view and allow both horizontal and vertical scrolls', async () => {
// # Open a channel screen and post a markdown table with more columns and rows past horizontal and vertical views
const markdownTable =
'| Header | Header | Header | Header | Header | Header | Header | Header last |\n' +
'| :-- | :-: | --: | --: | :-- | :-: | --: | --: |\n' +
'| Left | Center | Right | Right | Left | Center | Right | Right |\n'.repeat(30) +
'| Left | Center | Right | Right | Left | Center | Right | Right last |\n';
await ChannelScreen.open(channelsCategory, testChannel.name);
await Post.apiCreatePost(siteOneUrl, {
channelId: testChannel.id,
message: markdownTable,
});
// * Verify table is displayed with some right columns and bottom rows not visible
const {post} = await Post.apiGetLastPostInChannel(siteOneUrl, testChannel.id);
const {postListPostItemTable, postListPostItemTableExpandButton} = ChannelScreen.getPostListPostItem(post.id);
await expect(postListPostItemTable).toBeVisible();
await expect(element(by.text('Header last'))).not.toBeVisible();
await expect(element(by.text('Right last'))).not.toBeVisible();
// # Expand to full view
await waitFor(postListPostItemTableExpandButton).toBeVisible().whileElement(by.id(ChannelScreen.postList.testID.flatList)).scroll(50, 'down');
await postListPostItemTableExpandButton.tap();
await TableScreen.toBeVisible();
await expect(element(by.text('Header last'))).not.toBeVisible();
await expect(element(by.text('Right last'))).not.toBeVisible();
// * Verify table screen is scrollable to the right and scrollable to the bottom
await TableScreen.tableScrollView.scrollTo('right');
await expect(element(by.text('Header last'))).toBeVisible();
await expect(element(by.text('Right last'))).not.toBeVisible();
const expectedElement = element(by.text('Right last'));
await waitFor(expectedElement).toBeVisible().whileElement(by.id(TableScreen.testID.tableScrollView)).scroll(50, 'down');
await expect(element(by.text('Header last'))).not.toBeVisible();
await expect(expectedElement).toBeVisible();
// # Go back to channel list screen
await TableScreen.back();
await ChannelScreen.back();
});
});