fixed all tests in test-apputils

packages/apputils/src/toolbar.tsx

@@ -482,27 +482,18 @@ export function ToolbarButtonComponent(props: ToolbarButtonComponent.IProps) {
     }
   };
 
-  return (
-    <Button
-      className={
-        props.className
-          ? props.className + ' jp-ToolbarButtonComponent'
-          : 'jp-ToolbarButtonComponent'
-      }
-      disabled={props.enabled === false}
-      onMouseDown={handleMouseDown}
-      onKeyDown={handleKeyDown}
-      title={props.tooltip || props.iconLabel}
-      minimal
-    >
-      {props.iconRenderer ? (
+  const Icon = () => {
+    if (props.iconRenderer) {
+      return (
         <props.iconRenderer.react
           className={classes(props.iconClass, 'jp-ToolbarButtonComponent-icon')}
           tag="span"
           justify="center"
           kind="toolbarButton"
         />
-      ) : (
+      );
+    } else if (props.iconClass) {
+      return (
         <JLIcon.getReact
           name={classes(props.iconClass, 'jp-Icon', 'jp-Icon-16')}
           className="jp-ToolbarButtonComponent-icon"
@@ -510,7 +501,26 @@ export function ToolbarButtonComponent(props: ToolbarButtonComponent.IProps) {
           justify="center"
           kind="toolbarButton"
         />
-      )}
+      );
+    } else {
+      return <></>;
+    }
+  };
+
+  return (
+    <Button
+      className={
+        props.className
+          ? props.className + ' jp-ToolbarButtonComponent'
+          : 'jp-ToolbarButtonComponent'
+      }
+      disabled={props.enabled === false}
+      onMouseDown={handleMouseDown}
+      onKeyDown={handleKeyDown}
+      title={props.tooltip || props.iconLabel}
+      minimal
+    >
+      <Icon />
       {props.label && (
         <span className="jp-ToolbarButtonComponent-label">{props.label}</span>
       )}

packages/ui-components/src/icon/jlicon.tsx

@@ -142,7 +142,7 @@ export class JLIcon {
   }: JLIcon.IProps = {}): HTMLElement {
     // check if icon element is already set
     const maybeSvgElement = container?.firstChild as HTMLElement;
-    if (maybeSvgElement?.dataset?.iconid === this._uuid) {
+    if (maybeSvgElement?.dataset?.iconId === this._uuid) {
       // return the existing icon element
       return maybeSvgElement;
     }
@@ -227,7 +227,8 @@ export class JLIcon {
       }
     } else {
       // parse succeeded
-      svgElement.dataset.iconid = this._uuid;
+      svgElement.dataset.icon = this.name;
+      svgElement.dataset.iconId = this._uuid;
 
       if (title) {
         Private.setTitleSvg(svgElement, title);

packages/ui-components/tsconfig.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "outDir": "lib",
     "rootDir": "src",
-    "strictNullChecks": true,
     "types": ["webpack-env", "node"]
   },
   "include": ["src/**/*"],

tests/test-apputils/src/toolbar.spec.ts

@@ -326,7 +326,7 @@ describe('@jupyterlab/apputils', () => {
           let called = false;
           sessionContext.statusChanged.connect((_, status) => {
             if (status === 'busy') {
-              expect(item.hasClass('jp-FilledCircleIcon')).to.equal(true);
+              expect(item.node.querySelector("[data-icon='circle']")).to.exist;
               called = true;
             }
           });
@@ -362,7 +362,8 @@ describe('@jupyterlab/apputils', () => {
           await sessionContext.initialize();
           const item = Toolbar.createKernelStatusItem(sessionContext);
           expect(item.node.title).to.equal('Kernel Connecting');
-          expect(item.hasClass('jp-FilledCircleIcon')).to.equal(false);
+          expect(item.node.querySelector("[data-icon='circle-empty']")).to
+            .exist;
           await sessionContext.initialize();
           await sessionContext.session?.kernel?.info;
         });