test: update tests for messageCanvas and copy

Author: lyjeileen

src/components/messageCanvas/actions/copy/copy.cy.tsx

@@ -1,5 +1,6 @@
 import 'cypress-real-events'
 
+import { supportedViewports } from '../../../../../cypress/support/variables'
 import Copy from './copy'
 describe('Copy component', () => {
   const copyButton = '[data-cy=copy-text-button]'
@@ -14,14 +15,21 @@ describe('Copy component', () => {
     data: { text: 'Hello World' },
   }
 
-  it('should copy text when clicked', () => {
-    cy.mount(<Copy message={message} />)
+  supportedViewports.forEach((viewport) => {
+    it(`should copy text when clicked on ${viewport} screen`, () => {
+      cy.viewport(viewport)
+      cy.mount(<Copy message={message} />)
 
-    cy.get(copyButton).focus().realClick()
+      if (viewport === 'iphone-6') {
+        cy.get(copyButton).focus().realTouch()
+      } else {
+        cy.get(copyButton).focus().realClick()
+      }
 
-    cy.window().then((win) => {
-      win.navigator.clipboard.readText().then((text) => {
-        expect(text).to.eq('Hello World')
+      cy.window().then((win) => {
+        win.navigator.clipboard.readText().then((text) => {
+          expect(text).to.eq('Hello World')
+        })
       })
     })
   })

src/components/messageCanvas/messageCanvas.cy.tsx

@@ -3,6 +3,8 @@ import 'cypress-real-events'
 
 import { supportedViewports } from '../../../cypress/support/variables'
 import Icon from '../icon'
+import type { ThreadableMessage } from '../types'
+import Copy from './actions/copy/copy'
 import MessageCanvas from './messageCanvas'
 
 describe('MessageCanvas', () => {
@@ -30,6 +32,7 @@ describe('MessageCanvas', () => {
     },
   }
 
+  const messageCanvas = '[data-cy=message-canvas]'
   supportedViewports.forEach((viewport) => {
     it(`renders the component on ${viewport} screen`, () => {
       cy.viewport(viewport)
@@ -46,6 +49,36 @@ describe('MessageCanvas', () => {
       cy.contains('senderId').should('be.visible')
       cy.get('[data-cy="account-circle-icon"]').should('be.visible')
     })
+
+    it(`allows copying text on ${viewport} screen`, () => {
+      cy.mount(
+        <MessageCanvas
+          message={testMessage}
+          getActionsComponent={(message: ThreadableMessage) => {
+            const copyButton = message.format === 'text' && (
+              <Copy message={message} />
+            )
+            if (copyButton) {
+              return <>{copyButton}</>
+            }
+          }}
+        >
+          <p>Hello World</p>
+        </MessageCanvas>
+      )
+      if (viewport === 'iphone-6') {
+        cy.get(messageCanvas).realTouch()
+      } else {
+        cy.get(messageCanvas).realHover()
+      }
+
+      cy.get('[data-cy=copy-text-button]').focus().realClick()
+      cy.window().then((win) => {
+        win.navigator.clipboard.readText().then((text) => {
+          expect(text).to.eq('Hello World')
+        })
+      })
+    })
   })
 
   context('Desktop', () => {
@@ -60,7 +93,7 @@ describe('MessageCanvas', () => {
         </MessageCanvas>
       )
       cy.contains('Jan 1 2020').should('not.be.visible')
-      cy.get('.rustic-message-canvas').realHover()
+      cy.get(messageCanvas).realHover()
       cy.contains('Jan 1 2020').should('be.visible')
     })
 
@@ -71,7 +104,7 @@ describe('MessageCanvas', () => {
         </MessageCanvas>
       )
 
-      cy.get('.rustic-message-canvas').realHover()
+      cy.get(messageCanvas).realHover()
       cy.contains('last updated').should('be.visible')
     })
   })
@@ -88,7 +121,7 @@ describe('MessageCanvas', () => {
         </MessageCanvas>
       )
       cy.contains('Jan 1 2020').should('not.be.visible')
-      cy.get('.rustic-message-canvas').realTouch()
+      cy.get(messageCanvas).realTouch()
       cy.contains('Jan 1 2020').should('be.visible')
     })
 
@@ -99,7 +132,7 @@ describe('MessageCanvas', () => {
         </MessageCanvas>
       )
 
-      cy.get('.rustic-message-canvas').realTouch()
+      cy.get(messageCanvas).realTouch()
       cy.contains('last updated').should('be.visible')
     })
   })

src/components/messageCanvas/messageCanvas.stories.tsx

@@ -15,7 +15,7 @@ export default {
     docs: {
       description: {
         component:
-          'The `MessageCanvas` component serves as a container for displaying messages within a chat interface. It provides a structured layout for rendering message content along with sender information and timestamp details. This component is designed to encapsulate individual message items and facilitate consistent rendering of messages within an application.\n\n##`getActionsComponent`:\n\n`getActionsComponent` is a single React element and can be composed of several actions supported for the message, such as editing, copying, and deleting. The examples of actions are listed below:\n\n###Copy:\n\nOnly supports copying text from text message.\n\nFields:\n\n```message: ThreadableMessage```\n\nAdditional control options are currently under development.\n\n---\n\n###Advance Usage\n\nFor advanced customization of available message actions, developers can import the `Action` component and extend its functionality to incorporate additional actions as needed. This approach offers flexibility in tailoring message interactions to specific application requirements. For an example, see the copy icon below, which extends the functionality of the `Action` component.',
+          'The `MessageCanvas` component serves as a container for displaying messages within a chat interface. It provides a structured layout for rendering message content along with sender information and timestamp details. This component is designed to encapsulate individual message items and facilitate consistent rendering of messages within an application.\n\n##`getActionsComponent`:\n\n`getActionsComponent` is a single React element and can be composed of several actions supported for the message, such as editing, copying, and deleting. Listed below are actions you can import from the library to use in your application:\n\n###Copy:\n\nOnly supports copying text from text message.\n\nFields:\n\n```message: ThreadableMessage```\n\nAdditional control options are currently under development.\n\n---\n\n###Advance Usage\n\nFor advanced customization of available message actions, developers can import the `Action` component and extend its functionality to incorporate additional actions as needed. This approach offers flexibility in tailoring message interactions to specific application requirements. For an example, see the copy icon below, which extends the functionality of the `Action` component.',
       },
     },
   },