mirror of
https://github.com/hanzoai/team.git
synced 2026-11-01 07:55:31 +00:00
Harrison HealeyandGitHub
368189074f
* MM-67953 Changed Browse Channels modal to prioritize channels with DisplayName matching search query * MM-67953 Changed channel shortlink autocomplete to prioritize non-member channels with DisplayName matching search query * Shared orderByDisplayNameMatch between both methods * Add E2E tests * Update existing E2E test to use new fixture * Run Prettier on E2E tests * And fix linting issue * And fix the fix... * Run server code linter
133 lines
4.9 KiB
TypeScript
133 lines
4.9 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import {expect, test} from '@mattermost/playwright-lib';
|
|
|
|
/**
|
|
* @objective Verify accessibility support in Browse Channels Dialog screen
|
|
*/
|
|
test(
|
|
'MM-T1467 Accessibility Support in Browse Channels Dialog screen',
|
|
{tag: ['@accessibility', '@browse_channels']},
|
|
async ({pw}) => {
|
|
// # Skip test if no license
|
|
await pw.skipIfNoLicense();
|
|
|
|
// # Initialize setup
|
|
const {team, user, adminClient} = await pw.initSetup();
|
|
|
|
// # Create two channels with purposes for testing aria-label
|
|
const channel1 = await adminClient.createChannel({
|
|
team_id: team.id,
|
|
name: 'accessibility-' + Date.now(),
|
|
display_name: 'Accessibility',
|
|
type: 'O',
|
|
purpose: 'some purpose',
|
|
});
|
|
|
|
const channel2 = await adminClient.createChannel({
|
|
team_id: team.id,
|
|
name: 'z-accessibility-' + Date.now(),
|
|
display_name: 'Z Accessibility',
|
|
type: 'O',
|
|
purpose: 'other purpose',
|
|
});
|
|
|
|
// # Log in as regular user
|
|
const {page, channelsPage} = await pw.testBrowser.login(user);
|
|
|
|
// # Visit town-square channel
|
|
await channelsPage.goto(team.name, 'town-square');
|
|
await channelsPage.toBeVisible();
|
|
|
|
// # Open the Browse Channels modal
|
|
const dialog = await channelsPage.openBrowseChannelsModal();
|
|
|
|
// * Verify the search input exists
|
|
const searchInput = dialog.searchInput;
|
|
await expect(searchInput).toBeVisible();
|
|
|
|
// # Wait for channel list to load
|
|
await dialog.toBeDoneLoading();
|
|
|
|
// # Hide already joined channels
|
|
const hideJoinedCheckbox = dialog.hideJoinedCheckbox;
|
|
await hideJoinedCheckbox.click();
|
|
|
|
// # Focus on Create Channel button and tab through elements
|
|
const createChannelButton = dialog.createNewChannelButton;
|
|
await createChannelButton.focus();
|
|
await page.keyboard.press('Tab');
|
|
await page.keyboard.press('Tab');
|
|
await page.keyboard.press('Tab');
|
|
await page.keyboard.press('Tab');
|
|
await page.keyboard.press('Tab');
|
|
|
|
// * Verify channel name is highlighted and has proper aria-label
|
|
await dialog.toHaveChannelAsNthResult(channel1.name, 0);
|
|
const channel1AriaLabel = `${channel1.display_name.toLowerCase()}, ${channel1.purpose.toLowerCase()}`;
|
|
const channel1Item = dialog.container.getByLabel(channel1AriaLabel);
|
|
await expect(channel1Item).toBeVisible();
|
|
await expect(channel1Item).toBeFocused();
|
|
|
|
// # Press Tab again to move to next channel
|
|
await page.keyboard.press('Tab');
|
|
|
|
// * Verify focus moved to next channel
|
|
await dialog.toHaveChannelAsNthResult(channel2.name, 1);
|
|
const channel2AriaLabel = `${channel2.display_name.toLowerCase()}, ${channel2.purpose.toLowerCase()}`;
|
|
const channel2Item = dialog.container.getByLabel(channel2AriaLabel);
|
|
await expect(channel2Item).toBeFocused();
|
|
},
|
|
);
|
|
|
|
/**
|
|
* @objective Verify Browse Channels dialog passes accessibility scan and matches aria-snapshot
|
|
*/
|
|
test(
|
|
'accessibility scan and aria-snapshot of Browse Channels dialog',
|
|
{tag: ['@accessibility', '@browse_channels', '@snapshots']},
|
|
async ({pw, axe}) => {
|
|
// # Skip test if no license
|
|
await pw.skipIfNoLicense();
|
|
|
|
// # Initialize setup
|
|
const {team, user} = await pw.initSetup();
|
|
|
|
// # Log in as regular user
|
|
const {page, channelsPage} = await pw.testBrowser.login(user);
|
|
|
|
// # Visit town-square channel
|
|
await channelsPage.goto(team.name, 'town-square');
|
|
await channelsPage.toBeVisible();
|
|
|
|
// # Open the Browse Channels modal
|
|
const dialog = await channelsPage.openBrowseChannelsModal();
|
|
|
|
// * Verify aria snapshot of Browse Channels dialog
|
|
await expect(dialog.container).toMatchAriaSnapshot(`
|
|
- dialog "Browse Channels":
|
|
- document:
|
|
- heading "Browse Channels" [level=1]
|
|
- button "Create New Channel"
|
|
- button "Close"
|
|
- textbox "Search Channels"
|
|
- /text: \\d+ Results/
|
|
- /status: \\d+ Results/
|
|
- status: Channel type filter set to All
|
|
- button "Channel type filter"
|
|
- checkbox "Hide joined channels": Hide Joined
|
|
- search
|
|
`);
|
|
|
|
// * Analyze the Browse Channels dialog for accessibility issues
|
|
const accessibilityScanResults = await axe
|
|
.builder(page, {disableColorContrast: true})
|
|
.include('[role="dialog"]')
|
|
.analyze();
|
|
|
|
// * Should have no violations
|
|
expect(accessibilityScanResults.violations).toHaveLength(0);
|
|
},
|
|
);
|