[MM-61571]: Add label to form field in channel header (#29553)

* [MA-12]: Add label to form field in channel header

* [MA-12]: Update aria attributes and tests

* [MA-12]: Update snapshots, fix e2e test

* [MA-12]: Fix E2E tests

* [MA-12]: Fix type in test
Этот коммит содержится в:
Saurabh Sharma
2025-01-09 03:34:42 +05:30
коммит произвёл GitHub
родитель 3a13dc2d5d
Коммит a3b2ecec19
12 изменённых файлов: 59 добавлений и 64 удалений

Просмотреть файл

@@ -36,13 +36,13 @@ describe('Channel Settings - Channel Header', () => {
cy.findByText('Edit Channel Header').click();
// # Type something in the header edit box
cy.get('[aria-label="edit the channel header..."]').clear().type('This is the new header content');
cy.get('textarea[placeholder="Edit the Channel Header..."]').clear().type('This is the new header content');
// * Verify the "Preview" button exists
cy.findByText('Preview').should('be.visible');
// * Verify that before hitting the preview button, the style on the textbox is `display: block`
cy.get('[aria-label="edit the channel header..."]').should('have.css', 'display', 'block');
cy.get('textarea[placeholder="Edit the Channel Header..."]').should('have.css', 'display', 'block');
// # Click the "Preview" button
cy.findByText('Preview').click();
@@ -51,7 +51,7 @@ describe('Channel Settings - Channel Header', () => {
cy.findByText('Edit').should('be.visible');
// * Verify that the display is now none on the textbox element
cy.get('[aria-label="edit the channel header..."]').should('have.css', 'display', 'none');
cy.get('textarea[placeholder="Edit the Channel Header..."]').should('have.css', 'display', 'none');
});
});
});

Просмотреть файл

@@ -122,7 +122,7 @@ describe('Verify Accessibility Support in different input fields', () => {
cy.apiAddUserToTeam(testTeam.id, user.id).then(() => {
cy.apiAddUserToChannel(testChannel.id, user.id).then(() => {
// * Verify Accessibility support in post input field
cy.uiGetPostTextBox().should('have.attr', 'aria-label', `write to ${testChannel.display_name}`).clear().focus();
cy.uiGetPostTextBox().should('have.attr', 'placeholder', `Write to ${testChannel.display_name}`).clear().focus();
// # Ensure User list is cached once in UI
cy.uiGetPostTextBox().type('@').wait(TIMEOUTS.FIVE_SEC);
@@ -168,7 +168,7 @@ describe('Verify Accessibility Support in different input fields', () => {
it('MM-T1458 Verify Accessibility Support in Main Post Input', () => {
cy.get('#advancedTextEditorCell').within(() => {
// * Verify Accessibility Support in Main Post input
cy.uiGetPostTextBox().should('have.attr', 'aria-label', `write to ${testChannel.display_name}`).and('have.attr', 'role', 'textbox').clear().focus().type('test');
cy.uiGetPostTextBox().should('have.attr', 'placeholder', `Write to ${testChannel.display_name}`).and('have.attr', 'role', 'textbox').clear().focus().type('test');
// # Set a11y focus on the textbox
cy.get('#FormattingControl_bold').focus().tab({shift: true});
@@ -231,7 +231,7 @@ describe('Verify Accessibility Support in different input fields', () => {
cy.get('#rhsContainer').within(() => {
// * Verify Accessibility Support in RHS input
cy.uiGetReplyTextBox().should('have.attr', 'aria-label', 'reply to this thread...').and('have.attr', 'role', 'textbox').focus().type('test').tab({shift: true}).tab().tab();
cy.uiGetReplyTextBox().should('have.attr', 'placeholder', 'Reply to this thread...').and('have.attr', 'role', 'textbox').focus().type('test').tab({shift: true}).tab().tab();
// * Verify if the focus is on the preview button
cy.get('#PreviewInputTextButton').should('be.focused').and('have.attr', 'aria-label', 'preview').tab();

Просмотреть файл

@@ -61,7 +61,7 @@ describe('MM-23102 - Channel Moderation - Create Posts', () => {
// # Check Guest user should not have the permission to create a post on a channel when the option is removed
// * Guest user should see a message stating that this channel is read-only and the textbox area should be disabled
cy.findByTestId('post_textbox_placeholder').should('have.text', 'This channel is read-only. Only members with permission can post here.');
cy.findByTestId('post_textbox').should('have.attr', 'placeholder', 'This channel is read-only. Only members with permission can post here.');
cy.findByTestId('post_textbox').should('be.disabled');
// # As a system admin, check the option to allow Create Posts for Guests and save
@@ -75,7 +75,7 @@ describe('MM-23102 - Channel Moderation - Create Posts', () => {
// # Check Guest user should have the permission to create a post on a channel when the option is allowed
// * Guest user should see a message stating that this channel is read-only and the textbox area should be disabled
cy.findByTestId('post_textbox').clear();
cy.findByTestId('post_textbox_placeholder').should('have.text', `Write to ${testChannel.display_name}`);
cy.findByTestId('post_textbox').should('have.attr', 'placeholder', `Write to ${testChannel.display_name}`);
cy.findByTestId('post_textbox').should('not.be.disabled');
});
@@ -92,7 +92,7 @@ describe('MM-23102 - Channel Moderation - Create Posts', () => {
// # Check Member should not have the permission to create a post on a channel when the option is removed.
// * User should see a message stating that this channel is read-only and the textbox area should be disabled
cy.findByTestId('post_textbox_placeholder').should('have.text', 'This channel is read-only. Only members with permission can post here.');
cy.findByTestId('post_textbox').should('have.attr', 'placeholder', 'This channel is read-only. Only members with permission can post here.');
cy.findByTestId('post_textbox').should('be.disabled');
// # As a system admin, check the option to allow Create Posts for Members and save
@@ -106,7 +106,7 @@ describe('MM-23102 - Channel Moderation - Create Posts', () => {
// # Check Member should have the permission to create a post on a channel when the option is allowed
// * Member user should see a message stating that this channel is read-only and the textbox area should be disabled
cy.findByTestId('post_textbox').clear();
cy.findByTestId('post_textbox_placeholder').should('have.text', `Write to ${testChannel.display_name}`);
cy.findByTestId('post_textbox').should('have.attr', 'placeholder', `Write to ${testChannel.display_name}`);
cy.findByTestId('post_textbox').should('not.be.disabled');
});
});

Просмотреть файл

@@ -31,7 +31,7 @@ describe('Keyboard Shortcuts', () => {
// * Verify modal is open
cy.findByRole('dialog', {name: 'Edit Header for Off-Topic'}).within(() => {
// # Enter new header and save
cy.findByRole('textbox', {name: 'edit the channel header...'}).type(newHeader);
cy.findByRole('textbox', {name: 'Edit the text appearing next to the channel name in the header.'}).type(newHeader);
cy.uiSave();
});