gradio/js/app/test/chatbot_multimodal.spec.ts

import { test, expect } from "@gradio/tootils";

test("text input by a user should be shown in the chatbot as a paragraph", async ({ page }) => {
    const textbox = await page.getByTestId('textbox');
    await textbox.fill("Lorem ipsum");
    await page.keyboard.press('Enter');
    const user_message = await page.getByTestId('user').first().getByRole('paragraph').textContent();
    const bot_message = await page.getByTestId('bot').first().getByRole('paragraph').textContent();
    await expect(user_message).toEqual("Lorem ipsum");
    await expect(bot_message).toBeTruthy();
});

test("images uploaded by a user should be shown in the chat", async ({ page }) => {
    const fileChooserPromise = page.waitForEvent('filechooser');
    await page.getByRole('button', { name: '📁' }).click();
    const fileChooser = await fileChooserPromise;
    await fileChooser.setFiles("./test/files/cheetah1.jpg");
    await page.keyboard.press('Enter');

    const user_message = await page.getByTestId('user').first().getByRole('img');
    const bot_message = await page.getByTestId('bot').first().getByRole('paragraph').textContent();
    const image_data = await user_message.getAttribute("src");
    await expect(image_data).toContain("cheetah1.jpg");
    await expect(bot_message).toBeTruthy();
});

test("audio uploaded by a user should be shown in the chatbot", async ({ page }) => {
    const fileChooserPromise = page.waitForEvent('filechooser');
    await page.getByRole('button', { name: '📁' }).click();
    const fileChooser = await fileChooserPromise;
    await fileChooser.setFiles("../../test/test_files/audio_sample.wav");
    await page.keyboard.press('Enter');

    const user_message = await page.getByTestId('user').first().locator('audio');
    const bot_message = await page.getByTestId('bot').first().getByRole('paragraph').textContent();
    const audio_data = await user_message.getAttribute("src");
    await expect(audio_data).toContain("audio_sample.wav");
    await expect(bot_message).toBeTruthy();

});

test("videos uploaded by a user should be shown in the chatbot", async ({ page }) => {
    const fileChooserPromise = page.waitForEvent('filechooser');
    await page.getByRole('button', { name: '📁' }).click();
    const fileChooser = await fileChooserPromise;
    await fileChooser.setFiles("../../test/test_files/video_sample.mp4");
    await page.keyboard.press('Enter');

    const user_message = await page.getByTestId('user').first().locator('video');
    const bot_message = await page.getByTestId('bot').first().getByRole('paragraph').textContent();
    const video_data = await user_message.getAttribute("src");
    await expect(video_data).toContain("video_sample.mp4");
    await expect(bot_message).toBeTruthy();
});


test("markdown input by a user should be correctly formatted: bold, italics, links", async ({ page }) => {
    const textbox = await page.getByTestId('textbox');
    await textbox.fill("This is **bold text**. This is *italic text*. This is a [link](https://gradio.app).");
    await page.keyboard.press('Enter');
    const user_message = await page.getByTestId('user').first().getByRole('paragraph').innerHTML();
    const bot_message = await page.getByTestId('bot').first().getByRole('paragraph').textContent();
    await expect(user_message).toEqual('This is <strong>bold text</strong>. This is <em>italic text</em>. This is a <a href=\"https://gradio.app\" target=\"_blank\" rel=\"noopener noreferrer\">link</a>.');
    await expect(bot_message).toBeTruthy();
});

test("inline code markdown input by the user should be correctly formatted", async ({ page }) => {
    const textbox = await page.getByTestId('textbox');
    await textbox.fill("This is `code`.");
    await page.keyboard.press('Enter');
    const user_message = await page.getByTestId('user').first().getByRole('paragraph').innerHTML();
    const bot_message = await page.getByTestId('bot').first().getByRole('paragraph').textContent();
    await expect(user_message).toEqual("This is <code>code</code>.");
    await expect(bot_message).toBeTruthy();
});

test("markdown code blocks input by a user should be rendered correctly with the correct language tag", async ({ page }) => {
    const textbox = await page.getByTestId('textbox');
    await textbox.fill("```python\nprint('Hello')\nprint('World!')\n```");
    await page.keyboard.press('Enter');
    const user_message = await page.getByTestId('user').first().locator('pre').innerHTML();
    const bot_message = await page.getByTestId('bot').first().getByRole('paragraph').textContent();
    await expect(user_message).toContain("language-python");
    await expect(bot_message).toBeTruthy();

});

test("LaTeX input by a user should be rendered correctly", async ({ page }) => {
    const textbox = await page.getByTestId('textbox');
    await textbox.fill("This is LaTeX $$x^2$$");
    await page.keyboard.press('Enter');
    const user_message = await page.getByTestId('user').first().getByRole('paragraph').innerHTML();
    const bot_message = await page.getByTestId('bot').first().getByRole('paragraph').textContent();
    await expect(user_message).toContain("katex-display");
    await expect(bot_message).toBeTruthy();
});


test("when a new message is sent the chatbot should scroll to the latest message", async ({ page }) => {
    const textbox = await page.getByTestId('textbox');
    const line_break = "<br>"
    await textbox.fill(line_break.repeat(30));
    await page.keyboard.press('Enter');
    const bot_message = await page.getByTestId('bot').first().getByRole('paragraph');
    await expect(bot_message).toBeVisible();
    const bot_message_text = bot_message.textContent();
    await expect(bot_message_text).toBeTruthy();
});