{#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} { // tests that the cell is not editable const canvas = within(canvasElement); const cells = canvas.getAllByRole("cell"); const initial_value = cells[0].textContent; await userEvent.click(cells[0]); await userEvent.keyboard("new value"); const final_value = cells[0].textContent; if (initial_value?.trim() !== final_value?.trim()) { throw new Error("Cell content changed when it should be non-editable"); } const inputs = canvas.queryAllByRole("textbox"); if (inputs.length > 0) { throw new Error("Input field appeared when table should be non-editable"); } }} > {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} google']], headers: ["link"], datatype: ["markdown"], editable: false, col_count: [1, "dynamic"], row_count: [1, "dynamic"] }} > {#snippet template(args)} {/snippet} { const canvas = within(canvasElement); const cell_400 = canvas.getAllByRole("cell")[5]; await userEvent.click(cell_400); const open_dialog_btn = await within(cell_400).findByLabelText("Open cell menu"); await userEvent.click(open_dialog_btn); const add_row_btn = canvas.getByText("Add row above"); await userEvent.click(add_row_btn); const new_cell = canvas.getAllByRole("cell")[9]; userEvent.click(new_cell); }} > {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} { const canvas = within(canvasElement); const cells = canvas.getAllByRole("cell"); const user = userEvent.setup(); // cmd+click to select non-contiguous cells await user.keyboard("[MetaLeft>]"); await user.click(cells[4]); await user.click(cells[6]); await user.click(cells[2]); await user.keyboard("[/MetaLeft]"); // shift+click to select a range await user.keyboard("[ShiftLeft>]"); await user.click(cells[7]); await user.click(cells[6]); await user.keyboard("[/ShiftLeft]"); // clear selected cells await user.keyboard("{Delete}"); // verify cells were cleared by clicking one await user.click(cells[2]); }} > {#snippet template(args)} {/snippet} { const canvas = within(canvasElement); const copy_button = canvas.getByRole("button", { name: "Copy table data" }); await userEvent.click(copy_button); const fullscreen_button = canvas.getByRole("button", { name: "Fullscreen" }); await userEvent.click(fullscreen_button); await userEvent.click(fullscreen_button); }} > {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} { const canvas = within(canvasElement); const user = userEvent.setup(); const grid = canvas.getByRole("grid"); await user.click(grid); const cells = canvas.getAllByRole("cell"); await user.click(cells[5]); // Click cell with value 6 const row_button = await canvas.findAllByRole("button", { name: "Select row" })[0]; await user.click(row_button); await user.click(cells[6]); const col_button = await canvas.findAllByRole("button", { name: "Select column" })[0]; await user.click(col_button); await user.keyboard("{Delete}"); }} > {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} { const canvas = within(canvasElement); const user = userEvent.setup(); const search_input = canvas.getByPlaceholderText("Filter..."); await user.type(search_input, "Pet"); await user.click(canvas.getByText("Cat")); await new Promise((resolve) => setTimeout(resolve, 100)); const filter_button = canvas.getByLabelText( "Apply filter and update dataframe values" ); await user.click(filter_button); await new Promise((resolve) => setTimeout(resolve, 100)); }} > {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} { const canvas = within(canvasElement); const user = userEvent.setup(); await new Promise((resolve) => setTimeout(resolve, 300)); const table = canvas.getByRole("grid"); const cells = canvas.getAllByRole("cell"); const startCell = cells[6]; const startRect = startCell.getBoundingClientRect(); const startX = startRect.left + startRect.width / 2; const startY = startRect.top + startRect.height / 2; const endCell = cells[18]; const endRect = endCell.getBoundingClientRect(); const endX = endRect.left + endRect.width / 2; const endY = endRect.top + endRect.height / 2; await user.pointer({ keys: "[MouseLeft>]", target: startCell, coords: { clientX: startX, clientY: startY } }); await new Promise((resolve) => setTimeout(resolve, 50)); const midX1 = startX + (endX - startX) / 3; const midY1 = startY + (endY - startY) / 3; await user.pointer({ target: table, coords: { clientX: midX1, clientY: midY1 } }); await new Promise((resolve) => setTimeout(resolve, 50)); const midX2 = startX + ((endX - startX) * 2) / 3; const midY2 = startY + ((endY - startY) * 2) / 3; await user.pointer({ target: table, coords: { clientX: midX2, clientY: midY2 } }); await new Promise((resolve) => setTimeout(resolve, 50)); await user.pointer({ target: endCell, coords: { clientX: endX, clientY: endY } }); await new Promise((resolve) => setTimeout(resolve, 50)); await user.pointer({ keys: "[/MouseLeft]" }); await new Promise((resolve) => setTimeout(resolve, 500)); }} > {#snippet template(args)} {/snippet} { const canvas = within(canvasElement); const user = userEvent.setup(); const header_1 = canvas.getAllByText("A")[1]; await userEvent.click(header_1); const cell_menu_button = canvas.getAllByLabelText("Open cell menu")[0]; await userEvent.click(cell_menu_button); const sort_ascending_button = canvas.getByRole("menuitem", { name: "Sort ascending" }); await userEvent.click(sort_ascending_button); const header_2 = canvas.getAllByText("B")[1]; await userEvent.click(header_2); const cell_menu_button_2 = canvas.getAllByLabelText("Open cell menu")[1]; await userEvent.click(cell_menu_button_2); const sort_descending_button = canvas.getByRole("menuitem", { name: "Sort descending" }); await userEvent.click(sort_descending_button); const header_3 = canvas.getAllByText("C")[1]; await userEvent.click(header_3); const cell_menu_button_3 = canvas.getAllByLabelText("Open cell menu")[2]; await userEvent.click(cell_menu_button_3); const sort_ascending_button_3 = canvas.getByRole("menuitem", { name: "Sort ascending" }); await userEvent.click(sort_ascending_button_3); await userEvent.click(header_3); await userEvent.click(cell_menu_button_3); await userEvent.click(canvas.getByText("Clear sort")); }} > {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} {#snippet template(args)} {/snippet} { const canvas = within(canvasElement); const user = userEvent.setup(); const header_menu_button = canvas.getAllByLabelText("Open cell menu")[0]; await user.click(header_menu_button); const add_column_button = canvas.getByText("Add column to the right"); await user.click(add_column_button); const new_header = canvas.getAllByText("Header 3")[0]; await user.keyboard("{Enter}"); const input = canvas.getByRole("textbox"); await user.clear(input); await user.type(input, "New Column"); await user.keyboard("{Enter}"); }} > {#snippet template(args)} {/snippet}