test(ui): cover user-dataset template via instrumented render

Render the real (instrumented) UserDatasetComponent template, overriding
only the heavy child components to empty shells, so the view-toggle
buttons and the #datasetCardTpl markup are exercised without dragging in
the children's ng-zorro internals. Takes user-dataset.component.html line
coverage from 0% to 100%.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: xuang7

frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.spec.ts

@@ -23,6 +23,32 @@ import { USER_DATASET } from "../../../../app-routing.constant";
 import { UserDatasetVersionCreatorComponent } from "./user-dataset-explorer/user-dataset-version-creator/user-dataset-version-creator.component";
 import { SortMethod } from "../../../type/sort-method";
 import { User } from "../../../../common/type/user";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { NgIf, NgTemplateOutlet } from "@angular/common";
+import { Router } from "@angular/router";
+import { RouterTestingModule } from "@angular/router/testing";
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { NzModalService } from "ng-zorro-antd/modal";
+import { NzMessageService } from "ng-zorro-antd/message";
+import { en_US, NZ_I18N } from "ng-zorro-antd/i18n";
+import { UserService } from "../../../../common/service/user/user.service";
+import { StubUserService } from "../../../../common/service/user/stub-user.service";
+import { SearchService } from "../../../service/user/search.service";
+import { DatasetService } from "../../../service/user/dataset/dataset.service";
+import { WorkflowPersistService } from "../../../../common/service/workflow-persist/workflow-persist.service";
+import { StubWorkflowPersistService } from "../../../../common/service/workflow-persist/stub-workflow-persist.service";
+import { UserProjectService } from "../../../service/user/project/user-project.service";
+import { StubUserProjectService } from "../../../service/user/project/stub-user-project.service";
+import { OperatorMetadataService } from "../../../../workspace/service/operator-metadata/operator-metadata.service";
+import { StubOperatorMetadataService } from "../../../../workspace/service/operator-metadata/stub-operator-metadata.service";
+import { FiltersComponent } from "../filters/filters.component";
+import { FiltersInstructionsComponent } from "../filters-instructions/filters-instructions.component";
+import { SearchResultsComponent } from "../search-results/search-results.component";
+import { CardItemComponent } from "../list-item/card-item/card-item.component";
+import { DashboardEntry } from "../../../type/dashboard-entry";
+import { commonTestProviders } from "../../../../common/testing/test-utils";
 
 type LoadMoreFn = (start: number, count: number) => Promise<{ entries: any[]; more: boolean }>;
 
@@ -361,3 +387,99 @@ describe("UserDatasetComponent", () => {
     });
   });
 });
+
+// Renders the real (instrumented) UserDatasetComponent template so its view-toggle
+// buttons and `#datasetCardTpl` markup are exercised for coverage. We deliberately do
+// NOT override UserDatasetComponent itself (that would JIT-recompile it without
+// instrumentation); instead each heavy child component is stripped to an empty shell so
+// the test does not drag in their ng-zorro internals (menus, date pickers, locale data).
+describe("UserDatasetComponent template", () => {
+  const VIEW_MODE_KEY = "texera.userDataset.viewMode";
+  let fixture: ComponentFixture<UserDatasetComponent>;
+  let component: UserDatasetComponent;
+
+  const makeDatasetEntry = (overrides: Partial<DashboardEntry> = {}): DashboardEntry =>
+    ({
+      id: 5,
+      name: "ds",
+      description: "",
+      type: "dataset",
+      dataset: { isOwner: true },
+      accessibleUserIds: [],
+      likeCount: 0,
+      viewCount: 0,
+      isLiked: false,
+      size: 0,
+      ...overrides,
+    }) as unknown as DashboardEntry;
+
+  beforeEach(async () => {
+    localStorage.removeItem(VIEW_MODE_KEY); // viewType then defaults to "card"
+
+    await TestBed.configureTestingModule({
+      imports: [UserDatasetComponent, HttpClientTestingModule, NoopAnimationsModule, RouterTestingModule],
+      providers: [
+        NzModalService,
+        { provide: NZ_I18N, useValue: en_US },
+        { provide: UserService, useClass: StubUserService },
+        { provide: WorkflowPersistService, useValue: new StubWorkflowPersistService([]) },
+        { provide: UserProjectService, useClass: StubUserProjectService },
+        { provide: OperatorMetadataService, useClass: StubOperatorMetadataService },
+        { provide: Router, useValue: { navigate: vi.fn() } },
+        { provide: SearchService, useValue: { executeSearch: vi.fn(() => of({ entries: [], more: false })) } },
+        {
+          provide: DatasetService,
+          useValue: { getDatasetCoverUrl: vi.fn(() => of({ url: null })), deleteDatasets: vi.fn(() => of({})) },
+        },
+        { provide: NzMessageService, useValue: { warning: vi.fn() } },
+        ...commonTestProviders,
+      ],
+    })
+      .overrideComponent(FiltersComponent, { set: { template: "", imports: [] } })
+      .overrideComponent(FiltersInstructionsComponent, { set: { template: "", imports: [] } })
+      .overrideComponent(CardItemComponent, { set: { template: "", imports: [] } })
+      .overrideComponent(SearchResultsComponent, {
+        set: {
+          // Render the parent-supplied card template for the first entry so the
+          // `#datasetCardTpl` body (which lives in the instrumented parent template) runs.
+          template:
+            '<ng-container *ngIf="viewMode === \'card\' && cardTemplate && entries.length" [ngTemplateOutlet]="cardTemplate" [ngTemplateOutletContext]="{ $implicit: entries[0] }"></ng-container>',
+          imports: [NgIf, NgTemplateOutlet],
+        },
+      })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(UserDatasetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  afterEach(() => localStorage.removeItem(VIEW_MODE_KEY));
+
+  const buttonByTitle = (title: string): HTMLButtonElement =>
+    Array.from(fixture.nativeElement.querySelectorAll("button")).find(
+      (b: any) => b.getAttribute("title") === title
+    ) as HTMLButtonElement;
+
+  it("renders both view-mode toggles and switches viewType on click", () => {
+    expect(component.viewType).toBe("card");
+    expect(buttonByTitle("List View")).toBeTruthy();
+    expect(buttonByTitle("Card View")).toBeTruthy();
+
+    buttonByTitle("List View").click();
+    fixture.detectChanges();
+    expect(component.viewType).toBe("list");
+
+    buttonByTitle("Card View").click();
+    fixture.detectChanges();
+    expect(component.viewType).toBe("card");
+  });
+
+  it("renders the dataset card template for each entry in card view", () => {
+    component.searchResultsComponent.entries = [makeDatasetEntry()];
+    fixture.detectChanges();
+
+    const cards = fixture.debugElement.queryAll(By.css("texera-card-item"));
+    expect(cards.length).toBe(1);
+  });
+});