diff --git a/apps/chat-e2e/src/assertions/chatMessagesAssertion.ts b/apps/chat-e2e/src/assertions/chatMessagesAssertion.ts index f3f2f7e1dc..4505b3eeef 100644 --- a/apps/chat-e2e/src/assertions/chatMessagesAssertion.ts +++ b/apps/chat-e2e/src/assertions/chatMessagesAssertion.ts @@ -27,8 +27,8 @@ export class ChatMessagesAssertion { ) { const button = label === 'more' - ? this.chatMessages.showMoreButton.getElementLocator() - : this.chatMessages.showLessButton.getElementLocator(); + ? this.chatMessages.showPreviousButton.getElementLocator() + : this.chatMessages.hidePreviousButton.getElementLocator(); expectedState === 'visible' ? await expect .soft(button, ExpectedMessages.buttonIsVisible) @@ -44,8 +44,8 @@ export class ChatMessagesAssertion { ) { const button = label === 'more' - ? this.chatMessages.showMoreButton - : this.chatMessages.showLessButton; + ? this.chatMessages.showPreviousButton + : this.chatMessages.hidePreviousButton; const color = await button.getComputedStyleProperty(Styles.color); expect .soft(color[0], ExpectedMessages.elementColorIsValid) diff --git a/apps/chat-e2e/src/tests/conversationWithStage.test.ts b/apps/chat-e2e/src/tests/conversationWithStage.test.ts index 188144f02d..80b014ddaf 100644 --- a/apps/chat-e2e/src/tests/conversationWithStage.test.ts +++ b/apps/chat-e2e/src/tests/conversationWithStage.test.ts @@ -54,7 +54,7 @@ dialTest( await dialTest.step( 'Click on "Show more" and verify all stages and "Show less" button are displayed', async () => { - await chatMessages.showMoreButton.click(); + await chatMessages.showPreviousButton.click(); await chatMessagesAssertion.assertMessageStagesCount(2, stagesCount); await chatMessagesAssertion.assertShowMoreLessButtonState( 'less', @@ -70,7 +70,7 @@ dialTest( await dialTest.step( 'Click on "Show less" and verify 3 stages and "Show more" button are displayed', async () => { - await chatMessages.showLessButton.click(); + await chatMessages.hidePreviousButton.click(); await chatMessagesAssertion.assertMessageStagesCount( 2, maxDisplayedStagesCount, diff --git a/apps/chat-e2e/src/ui/selectors/chatSelectors.ts b/apps/chat-e2e/src/ui/selectors/chatSelectors.ts index b74b62e013..152d477eae 100644 --- a/apps/chat-e2e/src/ui/selectors/chatSelectors.ts +++ b/apps/chat-e2e/src/ui/selectors/chatSelectors.ts @@ -143,8 +143,8 @@ export const ChatSelectors = { messageSpinner: '[data-qa="message-input-spinner"]', plotlyContainer: '.plot-container', maxWidth: '.max-w-none', - showMore: '[data-qa="show-more"]', - showLess: '[data-qa="show-less"]', + showPrevious: '[data-qa="show-previous"]', + hidePrevious: '[data-qa="hide-previous"]', }; export const TableSelectors = { diff --git a/apps/chat-e2e/src/ui/webElements/chatMessages.ts b/apps/chat-e2e/src/ui/webElements/chatMessages.ts index 97b031844e..a1a0ec6456 100644 --- a/apps/chat-e2e/src/ui/webElements/chatMessages.ts +++ b/apps/chat-e2e/src/ui/webElements/chatMessages.ts @@ -62,12 +62,12 @@ export class ChatMessages extends BaseElement { ChatSelectors.stageLoader, ); - public showMoreButton = this.getChildElementBySelector( - ChatSelectors.showMore, + public showPreviousButton = this.getChildElementBySelector( + ChatSelectors.showPrevious, ); - public showLessButton = this.getChildElementBySelector( - ChatSelectors.showLess, + public hidePreviousButton = this.getChildElementBySelector( + ChatSelectors.hidePrevious, ); public async waitForResponseReceived() { diff --git a/apps/chat/src/components/Chat/MessageStages.tsx b/apps/chat/src/components/Chat/MessageStages.tsx index 68aa3af102..d558a0ea6b 100644 --- a/apps/chat/src/components/Chat/MessageStages.tsx +++ b/apps/chat/src/components/Chat/MessageStages.tsx @@ -15,35 +15,34 @@ export interface Props { const NUMBER_OF_VISIBLE_STAGES = 3; export const MessageStages = ({ stages }: Props) => { - const [showMore, setShowMore] = useState(false); + const [showPrevious, setShowPrevious] = useState(false); const displayedStages = stages.slice( - 0, - showMore ? stages.length : NUMBER_OF_VISIBLE_STAGES, + showPrevious ? -stages.length : -NUMBER_OF_VISIBLE_STAGES, ); return (
- {displayedStages.map((stage) => ( - - ))} {stages.length > NUMBER_OF_VISIBLE_STAGES && ( )} + {displayedStages.map((stage) => ( + + ))}
); };