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

Brightscout · Dec 20, 2024 · a418ea4 · a418ea4
1 parent 8ac7d8e
commit a418ea4
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 38 deletions.
diff --git a/e2e-tests/cypress/tests/integration/channels/channel/channel_header_modal_spec.js b/e2e-tests/cypress/tests/integration/channels/channel/channel_header_modal_spec.js
@@ -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');
         });
     });
 });
diff --git a/...ss/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts b/...ss/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts
@@ -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});

diff --git a/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap b/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
@@ -2,22 +2,6 @@
 
 exports[`components/AutosizeTextarea should match snapshot, init 1`] = `
 <div>
-  <div
-    data-testid="autosize_textarea_placeholder"
-    id="autosize_textarea_placeholder"
-    style={
-      Object {
-        "background": "none",
-        "borderColor": "transparent",
-        "opacity": 0.75,
-        "overflow": "hidden",
-        "pointerEvents": "none",
-        "position": "absolute",
-        "textOverflow": "ellipsis",
-        "whiteSpace": "nowrap",
-      }
-    }
-  />
   <textarea
     data-testid="autosize_textarea"
     dir="auto"

diff --git a/webapp/channels/src/components/autosize_textarea.tsx b/webapp/channels/src/components/autosize_textarea.tsx
@@ -130,20 +130,6 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
         heightProps.height = height.current;
     }
 
-    let textareaPlaceholder = null;
-    if (!value && !defaultValue) {
-        textareaPlaceholder = (
-            <div
-                {...otherProps}
-                id={`${id}_placeholder`}
-                data-testid={`${id}_placeholder`}
-                style={styles.placeholder}
-            >
-                {placeholder}
-            </div>
-        );
-    }
-
     let referenceValue = value || defaultValue;
     if (referenceValue?.endsWith('\n')) {
         // In a div, the browser doesn't always count characters at the end of a line when measuring the dimensions
@@ -157,8 +143,7 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
     }
 
     return (
-        <div>
-            {textareaPlaceholder}
+        <div >
             <textarea
                 ref={setTextareaRef}
                 data-testid={id}

diff --git a/webapp/channels/src/sass/components/_post.scss b/webapp/channels/src/sass/components/_post.scss
@@ -26,6 +26,11 @@
             background: #ffffac !important;
             color: #d04444 !important;
         }
+
+        ::placeholder-shown {
+            text-overflow: ellipsis;
+            white-space: pre;
+        }
     }
 }
 

diff --git a/webapp/channels/src/utils/performance_telemetry/element_identification.test.tsx b/webapp/channels/src/utils/performance_telemetry/element_identification.test.tsx
@@ -148,6 +148,6 @@ describe('identifyElementRegion', () => {
             expect(identifyElementRegion(screen.getByText(post.message))).toEqual('post');
         });
 
-        expect(identifyElementRegion(screen.getByText('Write to ' + channel.display_name))).toEqual('post_textbox');
+        expect(identifyElementRegion(screen.getByPlaceholderText('Write to ' + channel.display_name))).toEqual('post_textbox');
     });
 });