fix: send and cancel btn tooltips (#436)

* fix: tooltips * fix: use test id --------- Co-authored-by: Gerred Dillon <gerred@defenseunicorns.com>
defenseunicorns · Apr 25, 2024 · bbb6ea9 · bbb6ea9
1 parent fe3bd9b
commit bbb6ea9
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 10 deletions.
diff --git a/src/leapfrogai_ui/src/routes/(dashboard)/chat/[[conversation_id]]/+page.svelte b/src/leapfrogai_ui/src/routes/(dashboard)/chat/[[conversation_id]]/+page.svelte
@@ -160,20 +160,22 @@
 			/>
 			{#if !$isLoading}
 				<Button
+					data-testid="send message"
 					kind="secondary"
 					icon={ArrowRight}
 					size="field"
 					type="submit"
-					aria-label="send"
+					iconDescription="send"
 					disabled={$isLoading || !$input}
 				/>
 			{:else}
 				<Button
+					data-testid="cancel message"
 					kind="secondary"
 					size="field"
 					type="submit"
 					icon={StopFilledAlt}
-					aria-label="cancel message"
+					iconDescription="cancel"
 				/>
 			{/if}
 		</div>

diff --git a/src/leapfrogai_ui/src/routes/(dashboard)/chat/[[conversation_id]]/chatpage.test.ts b/src/leapfrogai_ui/src/routes/(dashboard)/chat/[[conversation_id]]/chatpage.test.ts
@@ -51,7 +51,7 @@ describe('The Chat Page', () => {
 
 		test('the send button is disabled when there is no text in the input', () => {
 			render(ChatPage);
-			const submitBtn = screen.getByLabelText('send');
+			const submitBtn = screen.getByTestId('send message');
 			expect(submitBtn).toHaveProperty('disabled', true);
 		});
 
@@ -99,12 +99,12 @@ describe('The Chat Page', () => {
 			await user.type(input, question);
 			await user.click(submitBtn);
 
-			expect(screen.getByLabelText('cancel message')).toBeInTheDocument();
+			expect(screen.getByTestId('cancel message')).toBeInTheDocument();
 
 			await delay(delayTime);
 
 			await user.type(input, 'new question');
-			expect(screen.queryByLabelText('cancel message')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('cancel message')).not.toBeInTheDocument();
 		});
 
 		it('displays a toast error notification when there is an error with the AI response', async () => {
@@ -245,7 +245,7 @@ describe('The Chat Page', () => {
 				await user.type(input, question);
 				await user.click(submitBtn);
 				await delay(delayTime / 2);
-				const cancelBtn = screen.getByLabelText('cancel message');
+				const cancelBtn = screen.getByTestId('cancel message');
 				await user.click(cancelBtn);
 
 				await screen.findAllByText('Response Canceled');

diff --git a/src/leapfrogai_ui/tests/chat.test.ts b/src/leapfrogai_ui/tests/chat.test.ts
@@ -65,7 +65,7 @@ test('it cancels responses', async ({ page }) => {
 	await sendMessage(page, newMessage);
 	await expect(messages).toHaveCount(2); // ensure new response is being received
 	await page.waitForTimeout(300); // let it partially complete
-	await page.getByLabel('cancel message').click();
+	await page.getByTestId('cancel message').click();
 	await page.waitForTimeout(200); // wait to ensure new question was not sent
 	await expect(messages).toHaveCount(2);
 	const allMessages = await messages.all();

diff --git a/src/leapfrogai_ui/tests/helpers.ts b/src/leapfrogai_ui/tests/helpers.ts
@@ -26,7 +26,7 @@ export const deleteConversationsByLabel = async (labels: string[]) => {
 };
 
 export const waitForResponseToComplete = async (page: Page) => {
-	await expect(page.getByLabel('cancel message')).toHaveCount(1, { timeout: 25000 });
-	await expect(page.getByLabel('cancel message')).toHaveCount(0, { timeout: 25000 });
-	await expect(page.getByLabel('send')).toHaveCount(1, { timeout: 25000 });
+	await expect(page.getByTestId('cancel message')).toHaveCount(1, { timeout: 25000 });
+	await expect(page.getByTestId('cancel message')).toHaveCount(0, { timeout: 25000 });
+	await expect(page.getByTestId('send message')).toHaveCount(1, { timeout: 25000 });
 };