fix: Robust optional dependency handling for TableWidget and consolidated JS tests

Author: shuoweil

bigframes/display/anywidget.py

@@ -44,6 +44,78 @@
 except Exception:
     _ANYWIDGET_INSTALLED = False
 
+    class _DummyTraitlet:
+        def __init__(self, default_value=None):
+            self.default_value = default_value
+            self.name = None
+
+        def tag(self, **kwargs):
+            return self
+
+        def __set_name__(self, owner, name):
+            self.name = name
+
+        def __get__(self, instance, owner):
+            if instance is None:
+                return self
+            return instance.__dict__.get(self.name, self.default_value)
+
+        def __set__(self, instance, value):
+            # Basic mimic of traitlets validation/observation
+            # Look for validators registered via @validate
+            for attr_name in dir(instance):
+                attr = getattr(type(instance), attr_name, None)
+                if (
+                    attr is not None
+                    and hasattr(attr, "_validated_trait")
+                    and attr._validated_trait == self.name
+                ):
+                    value = getattr(instance, attr_name)({"value": value})
+
+            instance.__dict__[self.name] = value
+
+            # Look for observers registered via @observe
+            for attr_name in dir(instance):
+                attr = getattr(type(instance), attr_name, None)
+                if (
+                    attr is not None
+                    and hasattr(attr, "_observed_trait")
+                    and attr._observed_trait == self.name
+                ):
+                    getattr(instance, attr_name)({"new": value})
+
+    class _DummyTraitletsModule:
+        def Int(self, default_value=0, **kwargs):
+            return _DummyTraitlet(default_value)
+
+        def Unicode(self, default_value="", **kwargs):
+            return _DummyTraitlet(default_value)
+
+        def List(self, trait=None, default_value=None, **kwargs):
+            return _DummyTraitlet(default_value if default_value is not None else [])
+
+        def Bool(self, default_value=False, **kwargs):
+            return _DummyTraitlet(default_value)
+
+        def Dict(self, *args, **kwargs):
+            return _DummyTraitlet({})
+
+        def observe(self, trait_name, **kwargs):
+            def decorator(func):
+                func._observed_trait = trait_name
+                return func
+
+            return decorator
+
+        def validate(self, trait_name, **kwargs):
+            def decorator(func):
+                func._validated_trait = trait_name
+                return func
+
+            return decorator
+
+    traitlets = _DummyTraitletsModule()  # type: ignore[assignment]
+
 _WIDGET_BASE: type[Any]
 if _ANYWIDGET_INSTALLED:
     _WIDGET_BASE = anywidget.AnyWidget

tests/js/table_widget.test.js

@@ -528,4 +528,92 @@ describe('TableWidget', () => {
       expect(model.save_changes).toHaveBeenCalled();
     });
   });
+
+  describe('Deferred Mode UI', () => {
+    it('should show deferred message and hide table when in deferred mode', () => {
+      // Mock deferred mode = true
+      model.get.mockImplementation((property) => {
+        if (property === 'is_deferred_mode') return true;
+        if (property === 'table_html') return '<table></table>';
+        return null;
+      });
+
+      render({ model, el });
+
+      const deferredContainer = el.querySelector('.deferred-message');
+      const tableContainer = el.querySelector('.table-container');
+      const footer = el.querySelector('.footer');
+
+      expect(deferredContainer.style.display).toBe('flex');
+      expect(tableContainer.style.display).toBe('none');
+      expect(footer.style.display).toBe('none');
+      expect(deferredContainer.textContent).toContain(
+        'This is a preview of the widget',
+      );
+    });
+
+    it('should show table and hide deferred message when not in deferred mode', () => {
+      // Mock deferred mode = false
+      model.get.mockImplementation((property) => {
+        if (property === 'is_deferred_mode') return false;
+        if (property === 'table_html') return '<table></table>';
+        return null;
+      });
+
+      render({ model, el });
+
+      const deferredContainer = el.querySelector('.deferred-message');
+      const tableContainer = el.querySelector('.table-container');
+      const footer = el.querySelector('.footer');
+
+      expect(deferredContainer.style.display).toBe('none');
+      expect(tableContainer.style.display).toBe('block');
+      expect(footer.style.display).toBe('flex');
+    });
+
+    it('should trigger start_execution when run button is clicked', () => {
+      model.get.mockImplementation((property) => {
+        if (property === 'is_deferred_mode') return true;
+        return null;
+      });
+
+      render({ model, el });
+
+      const runButton = el.querySelector('.run-button');
+      runButton.click();
+
+      expect(model.set).toHaveBeenCalledWith('start_execution', true);
+      expect(model.save_changes).toHaveBeenCalled();
+      expect(runButton.textContent).toBe('Running...');
+      expect(runButton.disabled).toBe(true);
+    });
+
+    it('should update UI when is_deferred_mode changes', () => {
+      // Start in deferred mode
+      let isDeferred = true;
+      model.get.mockImplementation((property) => {
+        if (property === 'is_deferred_mode') return isDeferred;
+        if (property === 'table_html') return '<table></table>';
+        return null;
+      });
+
+      render({ model, el });
+
+      const deferredContainer = el.querySelector('.deferred-message');
+      const tableContainer = el.querySelector('.table-container');
+
+      expect(deferredContainer.style.display).toBe('flex');
+      expect(tableContainer.style.display).toBe('none');
+
+      // Change to non-deferred mode
+      isDeferred = false;
+      const changeHandler = model.on.mock.calls.find(
+        (call) => call[0] === 'change:is_deferred_mode',
+      )[1];
+      changeHandler();
+
+      expect(deferredContainer.style.display).toBe('none');
+      expect(tableContainer.style.display).toBe('block');
+    });
+  });
 });

tests/js/table_widget_deferred.test.js

@@ -22,26 +22,29 @@
 
 @pytest.fixture
 def mock_df():
-    df = mock.Mock()
-    # Mock behavior for caching check (shape)
-    df.shape = (100, 4)
-    df.columns = ["A", "B", "C", "D"]
-    # Use actual bigframes dtypes or compatible types that works with is_orderable
-    df.dtypes = {
-        "A": bigframes.dtypes.INT_DTYPE,
-        "B": bigframes.dtypes.STRING_DTYPE,
-        "C": bigframes.dtypes.FLOAT_DTYPE,
-        "D": bigframes.dtypes.BOOL_DTYPE,
-    }
-
-    # Ensure to_pandas_batches returns an iterable
-    df.to_pandas_batches.return_value = iter(
-        [pd.DataFrame({"A": [1], "B": ["a"], "C": [1.0], "D": [True]})]
-    )
-
-    # Ensure sort_values returns the mock itself (so to_pandas_batches is still configured)
-    df.sort_values.return_value = df
-    return df
+    # Mock _ANYWIDGET_INSTALLED to True so we can test the class logic
+    # even when anywidget isn't installed in the test environment.
+    with mock.patch("bigframes.display.anywidget._ANYWIDGET_INSTALLED", True):
+        df = mock.Mock()
+        # Mock behavior for caching check (shape)
+        df.shape = (100, 4)
+        df.columns = ["A", "B", "C", "D"]
+        # Use actual bigframes dtypes or compatible types that works with is_orderable
+        df.dtypes = {
+            "A": bigframes.dtypes.INT_DTYPE,
+            "B": bigframes.dtypes.STRING_DTYPE,
+            "C": bigframes.dtypes.FLOAT_DTYPE,
+            "D": bigframes.dtypes.BOOL_DTYPE,
+        }
+
+        # Ensure to_pandas_batches returns an iterable
+        df.to_pandas_batches.return_value = iter(
+            [pd.DataFrame({"A": [1], "B": ["a"], "C": [1.0], "D": [True]})]
+        )
+
+        # Ensure sort_values returns the mock itself (so to_pandas_batches is still configured)
+        df.sort_values.return_value = df
+        yield df
 
 
 def test_init_raises_if_anywidget_not_installed():