diff --git a/cypress.config.ts b/cypress.config.ts index 3a6c4534c66..b34efe59050 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -1,4 +1,4 @@ -import codeCoverageTask from '@cypress/code-coverage/task'; +import codeCoverageTask from '@cypress/code-coverage/task.js'; import { defineConfig } from 'cypress'; export default defineConfig({ diff --git a/packages/main/src/components/MessageView/MessageItem.tsx b/packages/main/src/components/MessageView/MessageItem.tsx index 1649ef30349..f56f2aeea57 100644 --- a/packages/main/src/components/MessageView/MessageItem.tsx +++ b/packages/main/src/components/MessageView/MessageItem.tsx @@ -94,12 +94,19 @@ const MessageItem = forwardRef((prop const hasChildren = Children.count(children); useEffect(() => { - const titleTextObserver = new ResizeObserver(([titleTextSpan]) => { - if (titleTextSpan.target.scrollWidth > titleTextSpan.target.clientWidth) { - setIsTitleTextIsOverflowing(true); - } else { - setIsTitleTextIsOverflowing(false); + const titleTextObserver = new ResizeObserver(([titleTextSpanEntry]) => { + const child = titleTextSpanEntry.target.children[0]; + const target = titleTextSpanEntry.target; + const isTargetOverflowing = target.scrollWidth > target.clientWidth; + let isChildOverflowing = false; + + if (!isTargetOverflowing) { + const firstChild = child?.shadowRoot?.firstElementChild as HTMLAnchorElement | undefined; + if (firstChild) { + isChildOverflowing = firstChild.scrollWidth > firstChild.clientWidth; + } } + setIsTitleTextIsOverflowing(isTargetOverflowing || isChildOverflowing); }); if (!hasChildren && titleTextRef.current) { titleTextObserver.observe(titleTextRef.current); diff --git a/packages/main/src/components/MessageView/MessageView.cy.tsx b/packages/main/src/components/MessageView/MessageView.cy.tsx index e6854a47daa..291318951bb 100644 --- a/packages/main/src/components/MessageView/MessageView.cy.tsx +++ b/packages/main/src/components/MessageView/MessageView.cy.tsx @@ -2,6 +2,7 @@ import { useRef } from 'react'; import { ValueState } from '../../enums/index.js'; import { MessageItem } from './MessageItem'; import { MessageView } from './index.js'; +import { Link } from '../../webComponents/Link/index.js'; describe('MessageView', () => { it('default & grouped', () => { @@ -164,4 +165,46 @@ describe('MessageView', () => { cy.findByText('SubtitleText').should('not.exist'); cy.findByText('1337').should('not.exist'); }); + + it('MessageItem - titleText overflow', () => { + const selectSpy = cy.spy().as('select'); + cy.mount( + + + Long Error Message Type without children/details including a Link as `titleText` which has + wrappingType="None" applied. - The details view is only available if the `titleText` is not fully visible. + It is NOT recommended to use long titles! + + } + type={ValueState.Error} + counter={3} + /> + + + + ); + + cy.get('[name="slim-arrow-right"]').should('be.visible').and('have.length', 2); + + cy.findByTestId('item1').click(); + cy.get('@select').should('have.been.calledOnce'); + cy.get('[name="slim-arrow-left"]').should('be.visible').and('have.length', 1).click(); + + cy.findByTestId('item2').click(); + cy.get('@select').should('have.been.calledTwice'); + cy.get('[name="slim-arrow-left"]').should('be.visible').and('have.length', 1).click(); + + cy.findByTestId('item3').click(); + cy.get('@select').should('have.been.calledTwice'); + cy.get('[name="slim-arrow-left"]').should('not.exist'); + }); });