add js unit test framework

Author: shuoweil

bigframes/display/anywidget.py

@@ -12,6 +12,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
+"""A scrollable, paginated table widget for BigQuery DataFrames."""
+
 from __future__ import annotations
 
 import dataclasses
@@ -107,7 +109,7 @@ def __init__(self, dataframe: bigframes.dataframe.DataFrame):
         # TODO(b/462525985): Investigate and improve TableWidget UX for DataFrames with a large number of columns.
         self.page_size = initial_page_size
         self.orderable_columns = [
-            col_name
+            str(col_name)
             for col_name, dtype in dataframe.dtypes.items()
             if dtypes.is_orderable(dtype)
         ]

bigframes/display/html.py

@@ -50,8 +50,15 @@ def render_html(
         if col in orderable_columns:
             th_classes.append("sortable")
         class_str = f'class="{" ".join(th_classes)}"' if th_classes else ""
+        header_div = (
+            '<div style="resize: horizontal; overflow: auto; '
+            "box-sizing: border-box; width: 100%; height: 100%; "
+            'padding: 0.5em;">'
+            f"{html.escape(str(col))}"
+            "</div>"
+        )
         table_html.append(
-            f'      <th style="text-align: left;" {class_str}><div style="resize: horizontal; overflow: auto; box-sizing: border-box; width: 100%; height: 100%; padding: 0.5em;">{html.escape(str(col))}</div></th>'
+            f'      <th style="text-align: left;" {class_str}>{header_div}</th>'
         )
     table_html.append("    </tr>")
     table_html.append("  </thead>")

bigframes/display/table_widget.js

@@ -1,5 +1,5 @@
-/**
- * Copyright 2025 Google LLC
+/*
+ * Copyright 2024 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -26,24 +26,22 @@ const ModelProperty = {
 };
 
 const Event = {
-	CHANGE: "change",
-	CHANGE_TABLE_HTML: `change:${ModelProperty.TABLE_HTML}`,
 	CLICK: "click",
+	CHANGE: "change",
+	CHANGE_TABLE_HTML: "change:table_html",
 };
 
 /**
  * Renders the interactive table widget.
- * @param {{
- * model: any,
- * el: HTMLElement
- * }} options
+ * @param {{ model: any, el: HTMLElement }} props - The widget properties.
+ * @param {Document} doc - The document object to use for creating elements.
  */
-function render({ model, el }) {
+function render({ model, el }, doc) {
 	// Main container with a unique class for CSS scoping
 	el.classList.add("bigframes-widget");
 
 	// Add error message container at the top
-	const errorContainer = document.createElement("div");
+	const errorContainer = doc.createElement("div");
 	errorContainer.classList.add("error-message");
 	errorContainer.style.display = "none";
 	errorContainer.style.color = "red";
@@ -53,94 +51,95 @@ function render({ model, el }) {
 	errorContainer.style.borderRadius = "4px";
 	errorContainer.style.backgroundColor = "#ffebee";
 
-	const tableContainer = document.createElement("div");
-	const footer = document.createElement("div");
-
-	// Footer: Total rows label
-	const rowCountLabel = document.createElement("div");
-
-	// Footer: Pagination controls
-	const paginationContainer = document.createElement("div");
-	const prevPage = document.createElement("button");
-	const paginationLabel = document.createElement("span");
-	const nextPage = document.createElement("button");
-
-	// Footer: Page size controls
-	const pageSizeContainer = document.createElement("div");
-	const pageSizeLabel = document.createElement("label");
-	const pageSizeSelect = document.createElement("select");
-
-	// Add CSS classes
-	tableContainer.classList.add("table-container");
-	footer.classList.add("footer");
-	paginationContainer.classList.add("pagination");
-	pageSizeContainer.classList.add("page-size");
-
-	// Configure pagination buttons
-	prevPage.type = "button";
-	nextPage.type = "button";
-	prevPage.textContent = "Prev";
-	nextPage.textContent = "Next";
-
-	// Configure page size selector
-	pageSizeLabel.textContent = "Page Size";
-	for (const size of [10, 25, 50, 100]) {
-		const option = document.createElement("option");
+	const tableContainer = doc.createElement("div");
+	const footer = doc.createElement("div");
+
+	// Footer styles
+	footer.style.display = "flex";
+	footer.style.justifyContent = "space-between";
+	footer.style.alignItems = "center";
+	footer.style.padding = "8px";
+	footer.style.fontFamily =
+		'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+
+	// Pagination controls
+	const paginationContainer = doc.createElement("div");
+	const prevPage = doc.createElement("button");
+	const pageIndicator = doc.createElement("span");
+	const nextPage = doc.createElement("button");
+	const rowCountLabel = doc.createElement("span");
+
+	// Page size controls
+	const pageSizeContainer = doc.createElement("div");
+	const pageSizeLabel = doc.createElement("label");
+	const pageSizeInput = doc.createElement("select");
+
+	prevPage.textContent = "<";
+	nextPage.textContent = ">";
+	pageSizeLabel.textContent = "Page size:";
+	pageSizeLabel.style.marginRight = "8px";
+	pageIndicator.style.margin = "0 8px";
+	rowCountLabel.style.margin = "0 8px";
+
+	// Page size options
+	const pageSizes = [10, 20, 50, 100, 200, 500, 1000];
+	for (const size of pageSizes) {
+		const option = doc.createElement("option");
 		option.value = size;
 		option.textContent = size;
 		if (size === model.get(ModelProperty.PAGE_SIZE)) {
 			option.selected = true;
 		}
-		pageSizeSelect.appendChild(option);
+		pageSizeInput.appendChild(option);
 	}
 
 	/** Updates the footer states and page label based on the model. */
 	function updateButtonStates() {
-		const rowCount = model.get(ModelProperty.ROW_COUNT);
-		const pageSize = model.get(ModelProperty.PAGE_SIZE);
 		const currentPage = model.get(ModelProperty.PAGE);
+		const pageSize = model.get(ModelProperty.PAGE_SIZE);
+		const rowCount = model.get(ModelProperty.ROW_COUNT);
 
 		if (rowCount === null) {
 			// Unknown total rows
 			rowCountLabel.textContent = "Total rows unknown";
-			paginationLabel.textContent = `Page ${(currentPage + 1).toLocaleString()} of many`;
+			pageIndicator.textContent = `Page ${(currentPage + 1).toLocaleString()} of many`;
 			prevPage.disabled = currentPage === 0;
 			nextPage.disabled = false; // Allow navigation until we hit the end
 		} else {
 			// Known total rows
 			const totalPages = Math.ceil(rowCount / pageSize);
 			rowCountLabel.textContent = `${rowCount.toLocaleString()} total rows`;
-			paginationLabel.textContent = `Page ${(currentPage + 1).toLocaleString()} of ${rowCount.toLocaleString()}`;
+			pageIndicator.textContent = `Page ${(currentPage + 1).toLocaleString()} of ${totalPages.toLocaleString()}`;
 			prevPage.disabled = currentPage === 0;
 			nextPage.disabled = currentPage >= totalPages - 1;
 		}
-		pageSizeSelect.value = pageSize;
+		pageSizeInput.value = pageSize;
 	}
 
 	/**
-	 * Increments or decrements the page in the model.
-	 * @param {number} direction - `1` for next, `-1` for previous.
+	 * Handles page navigation.
+	 * @param {number} direction - The direction to navigate (-1 for previous, 1 for next).
 	 */
 	function handlePageChange(direction) {
-		const current = model.get(ModelProperty.PAGE);
-		const next = current + direction;
-		model.set(ModelProperty.PAGE, next);
+		const currentPage = model.get(ModelProperty.PAGE);
+		model.set(ModelProperty.PAGE, currentPage + direction);
 		model.save_changes();
 	}
 
 	/**
-	 * Handles changes to the page size from the dropdown.
-	 * @param {number} size - The new page size.
+	 * Handles page size changes.
+	 * @param {number} newSize - The new page size.
 	 */
-	function handlePageSizeChange(size) {
-		const currentSize = model.get(ModelProperty.PAGE_SIZE);
-		if (size !== currentSize) {
-			model.set(ModelProperty.PAGE_SIZE, size);
-			model.save_changes();
-		}
+	function handlePageSizeChange(newSize) {
+		model.set(ModelProperty.PAGE_SIZE, newSize);
+		model.set(ModelProperty.PAGE, 0); // Reset to first page
+		model.save_changes();
 	}
 
+	/** Updates the HTML in the table container and refreshes button states. */
 	function handleTableHTMLChange() {
+		// Note: Using innerHTML is safe here because the content is generated
+		// by a trusted backend (DataFrame.to_html).
 		tableContainer.innerHTML = model.get(ModelProperty.TABLE_HTML);
 
 		// Get sortable columns from backend
@@ -159,7 +158,7 @@ function render({ model, el }) {
 				header.style.cursor = "pointer";
 
 				// Create a span for the indicator
-				const indicatorSpan = document.createElement("span");
+				const indicatorSpan = doc.createElement("span");
 				indicatorSpan.classList.add("sort-indicator");
 				indicatorSpan.style.paddingLeft = "5px";
 
@@ -230,7 +229,7 @@ function render({ model, el }) {
 	// Add event listeners
 	prevPage.addEventListener(Event.CLICK, () => handlePageChange(-1));
 	nextPage.addEventListener(Event.CLICK, () => handlePageChange(1));
-	pageSizeSelect.addEventListener(Event.CHANGE, (e) => {
+	pageSizeInput.addEventListener(Event.CHANGE, (e) => {
 		const newSize = Number(e.target.value);
 		if (newSize) {
 			handlePageSizeChange(newSize);
@@ -244,14 +243,15 @@ function render({ model, el }) {
 			updateButtonStates();
 		}
 	});
+	model.on(`change:${ModelProperty.PAGE}`, updateButtonStates);
 
 	// Assemble the DOM
 	paginationContainer.appendChild(prevPage);
-	paginationContainer.appendChild(paginationLabel);
+	paginationContainer.appendChild(pageIndicator);
 	paginationContainer.appendChild(nextPage);
 
 	pageSizeContainer.appendChild(pageSizeLabel);
-	pageSizeContainer.appendChild(pageSizeSelect);
+	pageSizeContainer.appendChild(pageSizeInput);
 
 	footer.appendChild(rowCountLabel);
 	footer.appendChild(paginationContainer);

notebooks/dataframes/anywidget_mode.ipynb

@@ -157,7 +157,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "690ebe0bf3c34f83919efff6e6c17857",
+       "model_id": "e77180eeab3044efb14c01a1705e4bf9",
        "version_major": 2,
        "version_minor": 1
       },
@@ -255,7 +255,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "18820d9a6273417583384784e33c4bf0",
+       "model_id": "69a579846a4f4107956ac6047fef2d15",
        "version_major": 2,
        "version_minor": 1
       },
@@ -369,7 +369,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "eecb39677d214b1e9a06b7045be41765",
+       "model_id": "9223dcd7727d49d7b2e633cc268399f5",
        "version_major": 2,
        "version_minor": 1
       },
@@ -409,7 +409,7 @@
      "data": {
       "text/html": [
        "✅ Completed. \n",
-       "    Query processed 85.9 kB in 12 seconds of slot time.\n",
+       "    Query processed 85.9 kB in 14 seconds of slot time.\n",
        "    "
       ],
       "text/plain": [
@@ -456,7 +456,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "54337083f3814865b928d066e35289c4",
+       "model_id": "efc4892c045742dbbf96fb90eff2bb22",
        "version_major": 2,
        "version_minor": 1
       },

tests/js/babel.config.cjs

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+module.exports = {
+  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
+};

tests/js/jest.config.cjs

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** @type {import('jest').Config} */
+const config = {
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\.js$': 'babel-jest',
+  },
+  setupFilesAfterEnv: ['./jest.setup.js'],
+  transformIgnorePatterns: [],
+};
+
+module.exports = config;

tests/js/jest.setup.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { TextDecoder, TextEncoder } from "node:util";
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;