Skip to content

Commit

Permalink
cover all properties
Browse files Browse the repository at this point in the history
  • Loading branch information
jomarko committed Mar 22, 2024
1 parent f941d07 commit 098110b
Show file tree
Hide file tree
Showing 9 changed files with 447 additions and 34 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export function DiagramPropertiesPanel() {

return (
<DrawerPanelContent
data-testid="properties-panel-container"
isResizable={true}
minSize={"300px"}
defaultSize={"500px"}
Expand Down
2 changes: 1 addition & 1 deletion packages/dmn-editor/src/propertiesPanel/FontOptions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import { FormSection } from "@patternfly/react-core/dist/js/components/Form";
import { NumberInput } from "@patternfly/react-core/dist/js/components/NumberInput";
import { Select, SelectOption, SelectVariant } from "@patternfly/react-core/dist/js/components/Select";
import { ToggleGroup, ToggleGroupItem } from "@patternfly/react-core/dist/js/components/ToggleGroup";
import { Tooltip } from "@patternfly/react-core/dist/js/components/Tooltip";
import { PencilAltIcon } from "@patternfly/react-icons/dist/js/icons/pencil-alt-icon";
import { UndoAltIcon } from "@patternfly/react-icons/dist/js/icons/undo-alt-icon";
import * as React from "react";
Expand Down Expand Up @@ -375,6 +374,7 @@ export function FontOptions({ startExpanded, nodeIds }: { startExpanded: boolean
</div>
<br />
<Select
ouiaId="node-font-style-selector"
toggleRef={toggleRef}
variant={SelectVariant.single}
aria-label={"Select font style"}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export function PropertiesPanelHeader(props: {
{props.expands && (
<div className={"kie-dmn-editor--properties-panel-header-toogle-expanded"}>
<Button
title={"Expand / collapse documentation link"}
title={`Expand / collapse ${props.title}`}
variant={ButtonVariant.plain}
className={"kie-dmn-editor--documentation-link--row-expand-toogle"}
onClick={() => props.toogleSectionExpanded?.()}
Expand Down
98 changes: 76 additions & 22 deletions packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,70 +20,124 @@
import { Page } from "@playwright/test";
import { DataType } from "./jsonModel";
import { Diagram } from "./diagram";
import { Nodes } from "./nodes";
import { NodePosition, Nodes } from "./nodes";

export class PropertiesPanel {
constructor(public diagram: Diagram, public nodes: Nodes, public page: Page) {}

private panel() {
return this.page.getByTestId("properties-panel-container");
}

public async open() {
await this.page.getByTitle("Properties panel").click();
}

public async changeNodeName(args: { newName: string }) {
await this.page.getByPlaceholder("Enter a name...").fill(args.newName);
public async changeNodeName(args: { from: string; to: string }) {
await this.nodes.select({ name: args.from, position: NodePosition.TOP });
await this.panel().getByPlaceholder("Enter a name...").fill(args.to);
await this.page.keyboard.press("Enter");
}

public async changeNodeDataType(args: { newDataType: DataType }) {
await this.page.getByPlaceholder("Select a data type...").click();
public async changeNodeDataType(args: { nodeName: string; newDataType: DataType }) {
await this.nodes.select({ name: args.nodeName, position: NodePosition.TOP });
await this.panel().getByPlaceholder("Select a data type...").click();
await this.page.getByRole("option").getByText(args.newDataType, { exact: true }).click();
}

public async changeNodeDescription(args: { newDescription: string }) {
await this.page.getByPlaceholder("Enter a description...").fill(args.newDescription);
public async changeNodeDescription(args: { nodeName: string; newDescription: string }) {
await this.nodes.select({ name: args.nodeName, position: NodePosition.TOP });
await this.panel().getByPlaceholder("Enter a description...").fill(args.newDescription);

// commit changes by click to the diagram
await this.diagram.resetFocus();
}

public async getNodeDescription(args: { nodeName: string }) {
await this.nodes.select({ name: args.nodeName });
return await this.page.getByPlaceholder("Enter a description...").inputValue();
await this.nodes.select({ name: args.nodeName, position: NodePosition.TOP });
return await this.panel().getByPlaceholder("Enter a description...").inputValue();
}

public async changeNodeQuestion(args: { newQuestion: string }) {
await this.page.getByPlaceholder("Enter a question...").fill(args.newQuestion);
public async changeNodeQuestion(args: { nodeName: string; newQuestion: string }) {
await this.nodes.select({ name: args.nodeName, position: NodePosition.TOP });
await this.panel().getByPlaceholder("Enter a question...").fill(args.newQuestion);
// commit changes by click to the diagram
await this.diagram.resetFocus();
}

public async getNodeQuestion(args: { nodeName: string }) {
await this.nodes.select({ name: args.nodeName });
return await this.page.getByPlaceholder("Enter a question...").inputValue();
await this.nodes.select({ name: args.nodeName, position: NodePosition.TOP });
return await this.panel().getByPlaceholder("Enter a question...").inputValue();
}

public async changeNodeSourceType(args: { nodeName: string; newSourceType: string }) {
await this.nodes.select({ name: args.nodeName, position: NodePosition.TOP });
await this.panel().getByPlaceholder("Enter source type...").fill(args.newSourceType);
// commit changes by click to the diagram
await this.diagram.resetFocus();
}

public async getNodeSourceType(args: { nodeName: string }) {
await this.nodes.select({ name: args.nodeName, position: NodePosition.TOP });
return await this.panel().getByPlaceholder("Enter source type...").inputValue();
}

public async changeNodeLocationURI(args: { nodeName: string; newLocationURI: string }) {
await this.nodes.select({ name: args.nodeName, position: NodePosition.TOP });
await this.panel().getByPlaceholder("Enter location URI...").fill(args.newLocationURI);
// commit changes by click to the diagram
await this.diagram.resetFocus();
}

public async getNodeLocationURI(args: { nodeName: string }) {
await this.nodes.select({ name: args.nodeName, position: NodePosition.TOP });
return await this.panel().getByPlaceholder("Enter location URI...").inputValue();
}

public async changeNodeAllowedAnswers(args: { newAllowedAnswers: string }) {
await this.page.getByPlaceholder("Enter allowed answers...").fill(args.newAllowedAnswers);
await this.panel().getByPlaceholder("Enter allowed answers...").fill(args.newAllowedAnswers);
// commit changes by click to the diagram
await this.diagram.resetFocus();
}

public async getNodeAllowedAnswers(args: { nodeName: string }) {
await this.nodes.select({ name: args.nodeName });
return await this.page.getByPlaceholder("Enter allowed answers...").inputValue();
await this.nodes.select({ name: args.nodeName, position: NodePosition.TOP });
return await this.panel().getByPlaceholder("Enter allowed answers...").inputValue();
}

public async addDocumentationLink(args: { linkText: string; linkHref: string }) {
await this.page.getByTitle("Add documentation link").click();
await this.page
public async addDocumentationLink(args: { nodeName: string; linkText: string; linkHref: string }) {
await this.nodes.select({ name: args.nodeName, position: NodePosition.TOP });
await this.panel().getByTitle("Add documentation link").click();
await this.panel()
.locator(".kie-dmn-editor--documentation-link--row")
.getByPlaceholder("Enter a title...")
.fill(args.linkText);
await this.page.locator(".kie-dmn-editor--documentation-link--row").getByPlaceholder("http://").fill(args.linkHref);
await this.panel()
.locator(".kie-dmn-editor--documentation-link--row")
.getByPlaceholder("http://")
.fill(args.linkHref);
await this.page.keyboard.press("Enter");
}

public async getDocumentationLinks(args: { nodeName: string }) {
await this.nodes.select({ name: args.nodeName });
return await this.page.locator(".kie-dmn-editor--documentation-link--row-title").locator("a").all();
await this.nodes.select({ name: args.nodeName, position: NodePosition.TOP });
return await this.panel().locator(".kie-dmn-editor--documentation-link--row-title").locator("a").all();
}

public async changeNodeFont(args: { nodeName: string; newFont: string }) {
await this.nodes.select({ name: args.nodeName, position: NodePosition.TOP });
await this.panel().getByTitle("Expand / collapse Font").click();

await this.panel().locator("[data-ouia-component-id='node-font-style-selector']").click();
await this.panel().getByText(args.newFont).click();

await this.diagram.resetFocus();
}

public async getNodeFont(args: { nodeName: string }) {
await this.nodes.select({ name: args.nodeName, position: NodePosition.TOP });
await this.panel().getByTitle("Expand / collapse Font").click();

return await this.panel().locator("[data-ouia-component-id='node-font-style-selector']").textContent();
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import { test, expect } from "../__fixtures__/base";
import { DataType } from "../__fixtures__/jsonModel";
import { DefaultNodeName, NodeType } from "../__fixtures__/nodes";

test.beforeEach(async ({ editor }) => {
await editor.open();
});

test.describe("Change Properties - BKM", () => {
test.beforeEach(async ({ palette, nodes, propertiesPanel }) => {
await palette.dragNewNode({ type: NodeType.BKM, targetPosition: { x: 100, y: 100 } });
await nodes.select({ name: DefaultNodeName.BKM });
await propertiesPanel.open();
});

test("should change the BKM node name", async ({ nodes, propertiesPanel }) => {
await propertiesPanel.changeNodeName({ from: DefaultNodeName.BKM, to: "Renamed BKM" });

await expect(nodes.get({ name: "Renamed BKM" })).toBeVisible();
});

test("should change the BKM node data type", async ({ nodes, propertiesPanel }) => {
await propertiesPanel.changeNodeDataType({ nodeName: DefaultNodeName.BKM, newDataType: DataType.Number });

await nodes.hover({ name: DefaultNodeName.BKM });
await expect(nodes.get({ name: DefaultNodeName.BKM }).getByPlaceholder("Select a data type...")).toHaveValue(
DataType.Number
);
});

test("should change the BKM node description", async ({ propertiesPanel }) => {
await propertiesPanel.changeNodeDescription({
nodeName: DefaultNodeName.BKM,
newDescription: "New BKM Description",
});

expect(await propertiesPanel.getNodeDescription({ nodeName: DefaultNodeName.BKM })).toBe("New BKM Description");
});

test("should change the BKM node documentation links", async ({ propertiesPanel }) => {
await propertiesPanel.addDocumentationLink({
nodeName: DefaultNodeName.BKM,
linkText: "Link Text",
linkHref: "http://link.test.com",
});

const links = await propertiesPanel.getDocumentationLinks({ nodeName: DefaultNodeName.BKM });
expect(links).toHaveLength(1);
expect(links[0]).toHaveText("Link Text");
expect(links[0]).toHaveAttribute("href", "http://link.test.com/");
});

test("should change the BKM node font - family", async ({ propertiesPanel }) => {
await propertiesPanel.changeNodeFont({ nodeName: DefaultNodeName.BKM, newFont: "Verdana" });

expect(await propertiesPanel.getNodeFont({ nodeName: DefaultNodeName.BKM })).toBe("Verdana");
});

test.skip("should change the BKM node shape - background color", async ({ nodes, propertiesPanel }) => {
// blocked https://github.com/microsoft/playwright/issues/19929#issuecomment-1377035969
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -25,21 +25,21 @@ test.beforeEach(async ({ editor }) => {
await editor.open();
});

test.describe.only("Change Properties - Decision", () => {
test.describe("Change Properties - Decision", () => {
test.beforeEach(async ({ palette, nodes, propertiesPanel }) => {
await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x: 100, y: 100 } });
await nodes.select({ name: DefaultNodeName.DECISION });
await propertiesPanel.open();
});

test("should change the Decision node name", async ({ nodes, propertiesPanel }) => {
await propertiesPanel.changeNodeName({ newName: "Renamed Decision" });
await propertiesPanel.changeNodeName({ from: DefaultNodeName.DECISION, to: "Renamed Decision" });

await expect(nodes.get({ name: "Renamed Decision" })).toBeVisible();
});

test("should change the Decision node data type", async ({ nodes, propertiesPanel }) => {
await propertiesPanel.changeNodeDataType({ newDataType: DataType.Number });
await propertiesPanel.changeNodeDataType({ nodeName: DefaultNodeName.DECISION, newDataType: DataType.Number });

await nodes.hover({ name: DefaultNodeName.DECISION });
await expect(nodes.get({ name: DefaultNodeName.DECISION }).getByPlaceholder("Select a data type...")).toHaveValue(
Expand All @@ -48,15 +48,21 @@ test.describe.only("Change Properties - Decision", () => {
});

test("should change the Decision node description", async ({ propertiesPanel }) => {
await propertiesPanel.changeNodeDescription({ newDescription: "New Decision Description" });
await propertiesPanel.changeNodeDescription({
nodeName: DefaultNodeName.DECISION,
newDescription: "New Decision Description",
});

expect(await propertiesPanel.getNodeDescription({ nodeName: DefaultNodeName.DECISION })).toBe(
"New Decision Description"
);
});

test("should change the Decision node question", async ({ propertiesPanel }) => {
await propertiesPanel.changeNodeQuestion({ newQuestion: "New Decision Question" });
await propertiesPanel.changeNodeQuestion({
nodeName: DefaultNodeName.DECISION,
newQuestion: "New Decision Question",
});

expect(await propertiesPanel.getNodeQuestion({ nodeName: DefaultNodeName.DECISION })).toBe("New Decision Question");
});
Expand All @@ -70,18 +76,25 @@ test.describe.only("Change Properties - Decision", () => {
});

test("should change the Decision node documentation links", async ({ propertiesPanel }) => {
await propertiesPanel.addDocumentationLink({ linkText: "Link Text", linkHref: "http://link.test.com" });
await propertiesPanel.addDocumentationLink({
nodeName: DefaultNodeName.DECISION,
linkText: "Link Text",
linkHref: "http://link.test.com",
});

const links = await propertiesPanel.getDocumentationLinks({ nodeName: DefaultNodeName.DECISION });
expect(links).toHaveLength(1);
expect(links[0]).toHaveText("Link Text");
expect(links[0]).toHaveAttribute("href", "http://link.test.com/");
});

test("should change the Decision node font", async ({ nodes, propertiesPanel }) => {
// TODO
test("should change the Decision node font - family", async ({ propertiesPanel }) => {
await propertiesPanel.changeNodeFont({ nodeName: DefaultNodeName.DECISION, newFont: "Verdana" });

expect(await propertiesPanel.getNodeFont({ nodeName: DefaultNodeName.DECISION })).toBe("Verdana");
});
test("should change the Decision node shape", async ({ nodes, propertiesPanel }) => {
// TODO

test.skip("should change the Decision node shape - background color", async ({ nodes, propertiesPanel }) => {
// blocked https://github.com/microsoft/playwright/issues/19929#issuecomment-1377035969
});
});
Loading

0 comments on commit 098110b

Please sign in to comment.