feat(FN-1793): merge fusion/fn-1793
This commit is contained in:
gsxdsm
@@ -430,4 +430,194 @@ describe("SkillsView", () => {
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe("CSS class assertions", () => {
|
||||
it("renders with .skills-view root class", async () => {
|
||||
render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(document.querySelector(".skills-view")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("renders .skills-view-header and .skills-view-content sections", async () => {
|
||||
render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(document.querySelector(".skills-view-header")).toBeTruthy();
|
||||
expect(document.querySelector(".skills-view-section")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("renders discovered skills list with .skills-view-item rows", async () => {
|
||||
render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const items = document.querySelectorAll(".skills-view-item");
|
||||
expect(items.length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
});
|
||||
|
||||
it("renders catalog cards with .skills-view-card class", async () => {
|
||||
render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(document.querySelectorAll(".skills-view-card").length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
});
|
||||
|
||||
it("renders search input with .skills-view-search class", async () => {
|
||||
render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(document.querySelector(".skills-view-search")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("renders toggle sliders with .skills-view-toggle-slider class", async () => {
|
||||
render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const sliders = document.querySelectorAll(".skills-view-toggle-slider");
|
||||
expect(sliders.length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
});
|
||||
|
||||
it("renders catalog grid with .skills-view-grid class", async () => {
|
||||
render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(document.querySelector(".skills-view-grid")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("catalog search debounce", () => {
|
||||
it("debounces catalog search input", async () => {
|
||||
vi.useFakeTimers();
|
||||
vi.advanceTimersByTime(0); // Initialize fake timers
|
||||
|
||||
render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
|
||||
|
||||
// Wait for initial render and API calls
|
||||
await act(async () => {
|
||||
vi.runAllTimers();
|
||||
});
|
||||
await act(async () => {
|
||||
vi.advanceTimersByTime(100);
|
||||
});
|
||||
|
||||
mockFetchSkillsCatalog.mockClear();
|
||||
|
||||
const searchInput = screen.getByPlaceholderText("Search skills...");
|
||||
|
||||
// Type in the search input
|
||||
fireEvent.change(searchInput, { target: { value: "test" } });
|
||||
|
||||
// Should NOT have called fetchSkillsCatalog yet (debounce not triggered)
|
||||
expect(mockFetchSkillsCatalog).not.toHaveBeenCalled();
|
||||
|
||||
// Advance timers by 300ms (component debounce is ~300ms)
|
||||
await act(async () => {
|
||||
vi.advanceTimersByTime(300);
|
||||
});
|
||||
|
||||
// Now fetchSkillsCatalog should have been called with the search query
|
||||
expect(mockFetchSkillsCatalog).toHaveBeenCalledWith("test", 20, undefined);
|
||||
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
it("debounces with original query when clearing search", async () => {
|
||||
vi.useFakeTimers();
|
||||
vi.advanceTimersByTime(0); // Initialize fake timers
|
||||
|
||||
render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
|
||||
|
||||
// Wait for initial render and API calls
|
||||
await act(async () => {
|
||||
vi.runAllTimers();
|
||||
});
|
||||
await act(async () => {
|
||||
vi.advanceTimersByTime(100);
|
||||
});
|
||||
|
||||
const searchInput = screen.getByPlaceholderText("Search skills...");
|
||||
|
||||
// Type something and wait for debounce
|
||||
fireEvent.change(searchInput, { target: { value: "test" } });
|
||||
await act(async () => {
|
||||
vi.advanceTimersByTime(300);
|
||||
});
|
||||
|
||||
mockFetchSkillsCatalog.mockClear();
|
||||
|
||||
// Clear the search
|
||||
fireEvent.change(searchInput, { target: { value: "" } });
|
||||
await act(async () => {
|
||||
vi.advanceTimersByTime(300);
|
||||
});
|
||||
|
||||
// Should call with empty query
|
||||
expect(mockFetchSkillsCatalog).toHaveBeenCalledWith("", 20, undefined);
|
||||
|
||||
vi.useRealTimers();
|
||||
});
|
||||
});
|
||||
|
||||
describe("error-state retry", () => {
|
||||
it("retry button is displayed when catalog fetch fails", async () => {
|
||||
mockFetchSkillsCatalog.mockRejectedValue({
|
||||
error: "Service unavailable",
|
||||
code: "upstream_http_error",
|
||||
});
|
||||
|
||||
render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Try Again")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("error message is displayed when catalog fetch fails", async () => {
|
||||
mockFetchSkillsCatalog.mockRejectedValue(new Error("Network error"));
|
||||
|
||||
render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/unavailable|error|failed/i)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("success state after retry clears error", async () => {
|
||||
// Use a custom mock function that rejects on first call and resolves on second
|
||||
let callCount = 0;
|
||||
mockFetchSkillsCatalog.mockImplementation(() => {
|
||||
callCount++;
|
||||
if (callCount === 1) {
|
||||
return Promise.reject(new Error("Service unavailable"));
|
||||
}
|
||||
return Promise.resolve({
|
||||
entries: mockCatalogEntries,
|
||||
auth: { mode: "unauthenticated", tokenPresent: false, fallbackUsed: false },
|
||||
});
|
||||
});
|
||||
|
||||
render(<SkillsView addToast={mockAddToast} onClose={onClose} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Try Again")).toBeTruthy();
|
||||
});
|
||||
|
||||
// Click retry
|
||||
await act(async () => {
|
||||
fireEvent.click(screen.getByText("Try Again"));
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
// Catalog should now show entries
|
||||
expect(screen.getByText("Test Skill")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { readFileSync } from "fs";
|
||||
import { resolve } from "path";
|
||||
|
||||
function extractRuleBlock(css: string, selector: string): string {
|
||||
const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
||||
const match = css.match(new RegExp(`${escapedSelector}\\s*\\{([^}]*)\\}`));
|
||||
return match?.[1] ?? "";
|
||||
}
|
||||
|
||||
function extractMobileMediaBlocks(content: string): string {
|
||||
const blocks: string[] = [];
|
||||
const regex = /@media\s*\(\s*max-width:\s*768px\s*\)\s*\{/g;
|
||||
let match;
|
||||
|
||||
while ((match = regex.exec(content)) !== null) {
|
||||
const startIdx = match.index + match[0].length;
|
||||
let braceCount = 1;
|
||||
let endIdx = startIdx;
|
||||
|
||||
while (braceCount > 0 && endIdx < content.length) {
|
||||
if (content[endIdx] === "{") braceCount += 1;
|
||||
if (content[endIdx] === "}") braceCount -= 1;
|
||||
endIdx += 1;
|
||||
}
|
||||
|
||||
if (braceCount === 0) {
|
||||
blocks.push(content.slice(startIdx, endIdx - 1));
|
||||
}
|
||||
}
|
||||
|
||||
return blocks.join("\n");
|
||||
}
|
||||
|
||||
describe("skills-view mobile css", () => {
|
||||
const cssPath = resolve(__dirname, "../../styles.css");
|
||||
const cssContent = readFileSync(cssPath, "utf-8");
|
||||
const mobileMediaBlock = extractMobileMediaBlocks(cssContent);
|
||||
|
||||
it("defines .skills-view-header in mobile block with reduced padding", () => {
|
||||
expect(mobileMediaBlock).toContain(".skills-view-header");
|
||||
const block = extractRuleBlock(cssContent, ".skills-view-header");
|
||||
// Base has padding: var(--space-lg) 20px; mobile should override
|
||||
expect(block).toMatch(/padding:\s*var\(--space-sm\)\s+var\(--space-md\)/);
|
||||
});
|
||||
|
||||
it("defines .skills-view-title h2 with smaller font on mobile", () => {
|
||||
expect(mobileMediaBlock).toContain(".skills-view-title h2");
|
||||
const block = extractRuleBlock(cssContent, ".skills-view-title h2");
|
||||
expect(block).toContain("font-size: 16px");
|
||||
});
|
||||
|
||||
it("defines .skills-view-content with reduced padding on mobile", () => {
|
||||
expect(mobileMediaBlock).toContain(".skills-view-content");
|
||||
const block = extractRuleBlock(cssContent, ".skills-view-content");
|
||||
expect(block).toContain("padding: var(--space-md)");
|
||||
});
|
||||
|
||||
it("defines .skills-view-search .form-input as full width on mobile", () => {
|
||||
expect(mobileMediaBlock).toContain(".skills-view-search .form-input");
|
||||
const block = extractRuleBlock(cssContent, ".skills-view-search .form-input");
|
||||
expect(block).toContain("max-width: none");
|
||||
expect(block).toContain("width: 100%");
|
||||
});
|
||||
|
||||
it("collapses catalog grid to single column on mobile", () => {
|
||||
expect(mobileMediaBlock).toContain(".skills-view-grid");
|
||||
expect(mobileMediaBlock).toMatch(/\.skills-view-grid\s*\{[^}]*grid-template-columns:\s*1fr/);
|
||||
});
|
||||
|
||||
it("defines .skills-view-item wrapping on mobile", () => {
|
||||
expect(mobileMediaBlock).toContain(".skills-view-item");
|
||||
const block = extractRuleBlock(cssContent, ".skills-view-item");
|
||||
expect(block).toContain("flex-wrap: wrap");
|
||||
});
|
||||
|
||||
it("defines .skills-view-toggle-slider with minimum dimensions on mobile", () => {
|
||||
expect(mobileMediaBlock).toContain(".skills-view-toggle-slider");
|
||||
const block = extractRuleBlock(cssContent, ".skills-view-toggle-slider");
|
||||
expect(block).toContain("min-width: 32px");
|
||||
expect(block).toContain("min-height: 18px");
|
||||
});
|
||||
|
||||
it("skills-view base styles are defined in styles.css", () => {
|
||||
expect(cssContent).toContain(".skills-view {");
|
||||
expect(cssContent).toContain(".skills-view-header {");
|
||||
expect(cssContent).toContain(".skills-view-title {");
|
||||
expect(cssContent).toContain(".skills-view-content {");
|
||||
expect(cssContent).toContain(".skills-view-section {");
|
||||
expect(cssContent).toContain(".skills-view-list {");
|
||||
expect(cssContent).toContain(".skills-view-item {");
|
||||
expect(cssContent).toContain(".skills-view-card {");
|
||||
expect(cssContent).toContain(".skills-view-grid {");
|
||||
expect(cssContent).toContain(".skills-view-search {");
|
||||
expect(cssContent).toContain(".skills-view-toggle-slider {");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user