Add tests for DataFrame rendering and interaction

- Created sample DataFrame with 15 rows (more than 10) in main.py to test pagination
- Added Cypress test to validate Dataframe rendering, sorting, pagination, and rows per page functionality

cypress/e2e/dataframe/main.py

@@ -0,0 +1,68 @@
+import pandas as pd
+
+import chainlit as cl
+
+
+@cl.on_chat_start
+async def start():
+    # Create a sample DataFrame with more than 10 rows to test pagination functionality
+    data = {
+        "Name": [
+            "Alice",
+            "David",
+            "Charlie",
+            "Bob",
+            "Eva",
+            "Grace",
+            "Hannah",
+            "Jack",
+            "Frank",
+            "Kara",
+            "Liam",
+            "Ivy",
+            "Mia",
+            "Noah",
+            "Olivia",
+        ],
+        "Age": [25, 40, 35, 30, 45, 55, 60, 70, 50, 75, 80, 65, 85, 90, 95],
+        "City": [
+            "New York",
+            "Houston",
+            "Chicago",
+            "Los Angeles",
+            "Phoenix",
+            "San Antonio",
+            "San Diego",
+            "San Jose",
+            "Philadelphia",
+            "Austin",
+            "Fort Worth",
+            "Dallas",
+            "Jacksonville",
+            "Columbus",
+            "Charlotte",
+        ],
+        "Salary": [
+            70000,
+            100000,
+            90000,
+            80000,
+            110000,
+            130000,
+            140000,
+            160000,
+            120000,
+            170000,
+            180000,
+            150000,
+            190000,
+            200000,
+            210000,
+        ],
+    }
+
+    df = pd.DataFrame(data)
+
+    elements = [cl.Dataframe(data=df, display="inline", name="Dataframe")]
+
+    await cl.Message(content="This message has a Dataframe", elements=elements).send()

cypress/e2e/dataframe/spec.cy.ts

@@ -0,0 +1,41 @@
+import { runTestServer } from '../../support/testUtils';
+
+describe('dataframe', () => {
+  before(() => {
+    runTestServer();
+  });
+
+  it('should be able to display an inline dataframe', () => {
+    // Check if the DataFrame is rendered within the first step
+    cy.get('.step').should('have.length', 1);
+    cy.get('.step').first().find('.MuiDataGrid-main').should('have.length', 1);
+
+    // Click the sort button in the "Age" column header to sort in ascending order
+    cy.get('.MuiDataGrid-columnHeader[aria-label="Age"]')
+      .find('button')
+      .first()
+      .click({ force: true });
+    // Verify the first row's "Age" cell contains '25' after sorting
+    cy.get('.MuiDataGrid-row')
+      .first()
+      .find('.MuiDataGrid-cell[data-field="Age"] .MuiDataGrid-cellContent')
+      .should('have.text', '25');
+
+    // Click the "Next page" button in the pagination controls
+    cy.get('.MuiTablePagination-actions').find('button').eq(1).click();
+    // Verify that the next page contains exactly 5 rows
+    cy.get('.MuiDataGrid-row').should('have.length', 5);
+
+    // Click the input to open the dropdown
+    cy.get('.MuiTablePagination-select').click();
+    // Select the option with the value '50' from the dropdown list
+    cy.get('ul.MuiMenu-list li').contains('50').click();
+    // Scroll to the bottom of the virtual scroller in the MUI DataGrid
+    cy.get('.MuiDataGrid-virtualScroller').scrollTo('bottom');
+    // Check that tha last name is Olivia
+    cy.get('.MuiDataGrid-row')
+      .last()
+      .find('.MuiDataGrid-cell[data-field="Name"] .MuiDataGrid-cellContent')
+      .should('have.text', 'Olivia');
+  });
+});