Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TreeViewList searching bug and simplified interface #809

Merged
merged 17 commits into from
Feb 15, 2024
Merged

TreeViewList searching bug and simplified interface #809

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
6f0543f
Bug fix - added trim to search term
syedsalehinipg Jan 29, 2024
a2ef12c
search data and tests
syedsalehinipg Jan 29, 2024
a34263f
improved re-render issue
syedsalehinipg Jan 30, 2024
3fb5cdb
Rebuild search
syedsalehinipg Jan 30, 2024
84f3f82
tidy up and move tooltip item outside
dmbarry86 Jan 31, 2024
fe52db8
remove options and id
dmbarry86 Jan 31, 2024
bbd2ccc
simplify the items dat we pass in
dmbarry86 Jan 31, 2024
36ed674
simplify the interface by matching MUI props
dmbarry86 Feb 8, 2024
20f7b58
expose onNodeToggle
dmbarry86 Feb 8, 2024
d99a72f
show example with node disabled
dmbarry86 Feb 8, 2024
6697bc9
optional search box prop
dmbarry86 Feb 8, 2024
31a5f8b
recursive search based on multiple terms
dmbarry86 Feb 8, 2024
b26f571
optional prop to expand nodes with search active
dmbarry86 Feb 8, 2024
5c08973
logic to expand search results
dmbarry86 Feb 8, 2024
522aa47
updated tests
syedsalehinipg Feb 9, 2024
62093c9
custom width story
syedsalehinipg Feb 12, 2024
1631e11
updated comments
syedsalehinipg Feb 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
230 changes: 144 additions & 86 deletions src/TreeViewList/TreeViewList.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,12 @@ test("should render the tree list", async ({ page }) => {
await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByRole("treeitem", { name: "BRK" })
.getByRole("treeitem", { name: "Aerodynamics" })
).toBeVisible();
await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByRole("treeitem", { name: "ELE" })
).toBeVisible();
await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByRole("treeitem", { name: "TRM" })
.getByRole("treeitem", { name: "Suspension" })
).toBeVisible();
});

Expand All @@ -31,14 +26,17 @@ test("should display parameter value once expanded", async ({ page }) => {
await page.goto(
"http://localhost:6006/?path=/story/lists-treeviewlist--default"
);

await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("TRM")
.getByRole("treeitem", { name: "Aerodynamics" })
.getByTestId("AddIcon")
.click();

await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("Efficiency1D", { exact: true })
.getByText("Drag Coefficient", { exact: true })
).toBeVisible();
});

Expand All @@ -53,26 +51,24 @@ test("should display tooltip for the expanded parameter on hover", async ({
);
await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("BRK")
.getByText("Suspension")
.click();
await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("MCBooster")
.getByText("Axle")
.click();
await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("HydESPModel")
.getByText("Front")
.click();
await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("PumpMaxDelivery", { exact: true })
.getByText("Load", { exact: true })
.hover();
await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText(
"BRK.MCBooster.HydESPModel.PumpMaxDeliveryMaximum delivery of the two hydraulic pumps (each responsible for one circuit) at 0 bar pressure difference. Parameter needed for CarMaker hydraulic ESC (Name: 'Pump.qMax')."
)
.getByText("Preload of Front Suspension")
).toBeVisible();
});

Expand All @@ -85,28 +81,49 @@ test("should hide tooltip when not hovering over parameter", async ({
await page.goto(
"http://localhost:6006/?path=/story/lists-treeviewlist--default"
);
await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("TRM")
.click();
await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("GearSpred")
.hover();
await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("TRM.GearSpredEfficieny for")
).toBeVisible();

// Move the mouse to the top left corner of the page to simulate "unhovering"
await page.mouse.move(0, 0);
// Wait for the iframe to be attached in the DOM.
await page.waitForSelector('iframe[title="storybook-preview-iframe"]');

await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("TRM.GearSpred Efficieny for")
).toBeHidden();
// Get the Frame object for the iframe.
const frameElement = await page.$('iframe[title="storybook-preview-iframe"]');

if (frameElement !== null) {
const frame = await frameElement.contentFrame();

if (frame !== null) {
// Wait for the '#storybook-root ul li' to be attached in the DOM.
await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("Suspension")
.click();
await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("Axle")
.click();
await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("Front")
.click();
await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("Load", { exact: true })
.hover();

// Move the mouse to the top left corner of the page to simulate "unhovering"
await page.mouse.move(0, 0);

await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("Preload of Front Suspension")
).toBeHidden();
} else {
throw new Error("Frame object is null");
}
} else {
throw new Error("Frame element is null");
}
});

/**
Expand All @@ -116,68 +133,109 @@ test("should hide child when is collapsed", async ({ page }) => {
await page.goto(
"http://localhost:6006/?path=/story/lists-treeviewlist--default"
);
await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("TRM")
.click();
await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("GearSpred", { exact: true })
).toBeVisible();
await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("TRM")
.click();
await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("GearSpred", { exact: true })
).toBeHidden();

const frameElement = await page.$('iframe[title="storybook-preview-iframe"]');

if (frameElement !== null) {
const frame = await frameElement.contentFrame();

if (frame !== null) {
await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("Aerodynamics")
.click();
await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("Reference Length", { exact: true })
).toBeVisible();
await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("Aerodynamics")
.click();
await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("Reference Length", { exact: true })
).toBeHidden();
} else {
throw new Error("Frame object is null");
}
} else throw new Error("Frame element is null");
});

test("should expand the parent and child nodes that match the search term", async ({
page
}) => {
await page.goto(
"http://localhost:6006/?path=/story/lists-treeviewlist--default&args=expandSearchTerm:true;searchTerm:ratio"
"http://localhost:6006/?path=/story/lists-treeviewlist--default&args=enableSearch:true;expandSearchResults:true"
);
await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("BRK")
).toBeVisible();
await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("Pedal")
).toBeVisible();
await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("Ratio", { exact: true })
).toBeVisible();

// Wait for the iframe to be attached in the DOM.
await page.waitForSelector('iframe[title="storybook-preview-iframe"]');

await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByPlaceholder("Search")
.fill("rear");

// Get the Frame object for the iframe.
const frameElement = await page.$('iframe[title="storybook-preview-iframe"]');

if (frameElement !== null) {
const frame = await frameElement.contentFrame();

if (frame !== null) {
// Wait for the '#storybook-root ul li' to be attached in the DOM.
await frame.waitForSelector("#storybook-root ul li");

const liElements = await frame.$$("#storybook-root ul li");

const elementCount = liElements.length;

expect(elementCount).toBe(5);
} else {
throw new Error("Frame object is null");
}
} else {
throw new Error("Frame element is null");
}
});

test("should not expand the child nodes when expand for search is not enabled", async ({
page
}) => {
await page.goto(
"http://localhost:6006/?path=/story/lists-treeviewlist--default&args=expandSearchTerm:false;searchTerm:ratio"
"http://localhost:6006/?path=/story/lists-treeviewlist--default&args=enableSearch:true;expandSearchResults:false"
);
await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("BRK")
).toBeVisible();
await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("Pedal")
).toBeHidden();
await expect(
page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByText("Ratio", { exact: true })
).toBeHidden();

// Wait for the iframe to be attached in the DOM.
await page.waitForSelector('iframe[title="storybook-preview-iframe"]');

await page
.frameLocator('iframe[title="storybook-preview-iframe"]')
.getByPlaceholder("Search")
.fill("rear");

// Get the Frame object for the iframe.
const frameElement = await page.$('iframe[title="storybook-preview-iframe"]');

if (frameElement !== null) {
const frame = await frameElement.contentFrame();

if (frame !== null) {
// Wait for the '#storybook-root ul li' to be attached in the DOM.
await frame.waitForSelector("#storybook-root ul li");

const liElements = await frame.$$("#storybook-root ul li");

const elementCount = liElements.length;

expect(elementCount).toBe(1);
} else {
throw new Error("Frame object is null");
}
} else {
throw new Error("Frame element is null");
}
});
Loading
Loading