Skip to content

Commit

Permalink
Merge branch 'main' into fix-left-nav-subtabs-tearsheet
Browse files Browse the repository at this point in the history
  • Loading branch information
@nmgokhale
nmgokhale authored Apr 15, 2024
2 parents f0a4941 + ee24d1d commit c564641
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 95 deletions.
91 changes: 50 additions & 41 deletions canvas_modules/common-canvas/__tests__/toolbar/toolbar-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,11 @@
*/

import React from "react";
import { mountWithIntl } from "../_utils_/intl-utils";
import { renderWithIntl } from "../_utils_/intl-utils";
import { expect } from "chai";
import Toolbar from "../../src/toolbar/toolbar.jsx";
import sinon from "sinon";
import { fireEvent } from "@testing-library/react";

describe("Toolbar renders correctly", () => {

Expand All @@ -39,13 +40,12 @@ describe("Toolbar renders correctly", () => {
{ action: "deleteSelectedObjects", label: "Delete", enable: true }
]
};
const canvasToolbar = createToolbar(toolbarConfig);
expect(canvasToolbar.find(".toolbar-div")).to.have.length(1);
expect(canvasToolbar.find(".toolbar-left-bar")).to.have.length(1);
expect(canvasToolbar.find(".toolbar-right-bar")).to.have.length(1);
expect(canvasToolbar.find(".toolbar-item")).to.have.length(10);
expect(canvasToolbar.find(".toolbar-divider")).to.have.length(2);
expect(canvasToolbar.find(".toolbar-overflow-container")).to.have.length(10);
const { container } = createToolbar(toolbarConfig);
expect(container.getElementsByClassName("toolbar-div")).to.have.length(1);
expect(container.getElementsByClassName("toolbar-left-bar")).to.have.length(1);
expect(container.getElementsByClassName("toolbar-item")).to.have.length(10);
expect(container.getElementsByClassName("toolbar-divider")).to.have.length(2);
expect(container.getElementsByClassName("toolbar-overflow-container")).to.have.length(10);
});

it("should render a Toolbar with just a right bar defined", () => {
Expand All @@ -59,14 +59,14 @@ describe("Toolbar renders correctly", () => {
]
};

const canvasToolbar = createToolbar(toolbarConfig);
expect(canvasToolbar.find(".toolbar-div")).to.have.length(1);
expect(canvasToolbar.find(".toolbar-left-bar")).to.have.length(1);
expect(canvasToolbar.find(".toolbar-right-bar")).to.have.length(1);
expect(canvasToolbar.find(".toolbar-item")).to.have.length(4);
expect(canvasToolbar.find(".toolbar-divider")).to.have.length(1);
const { container } = createToolbar(toolbarConfig);

expect(container.getElementsByClassName("toolbar-left-bar")).to.have.length(1);
expect(container.getElementsByClassName("toolbar-right-bar")).to.have.length(1);
expect(container.getElementsByClassName("toolbar-item")).to.have.length(4);
expect(container.getElementsByClassName("toolbar-divider")).to.have.length(1);
// No toolbar-overflow-container created for the right bar
expect(canvasToolbar.find(".toolbar-overflow-container")).to.have.length(0);
expect(container.getElementsByClassName("toolbar-overflow-container")).to.have.length(0);
});

it("should register a click when clicked on an enabled toolbar item", () => {
Expand All @@ -80,12 +80,11 @@ describe("Toolbar renders correctly", () => {
]
};
const toolbarActionHandler = sinon.spy();
const canvasToolbar = createToolbar(toolbarConfig, toolbarActionHandler);
const { container } = createToolbar(toolbarConfig, toolbarActionHandler);

canvasToolbar.find(".zoomIn-action button")
.at(0)
.simulate("click");
expect(toolbarActionHandler.calledOnce).to.equal(true);
const el = container.querySelector(".zoomIn-action button");
fireEvent.click(el);
expect(toolbarActionHandler.calledOnce).to.be.true;

});

Expand All @@ -100,12 +99,11 @@ describe("Toolbar renders correctly", () => {
]
};
const toolbarActionHandler = sinon.spy();
const canvasToolbar = createToolbar(toolbarConfig, toolbarActionHandler);
const { container } = createToolbar(toolbarConfig, toolbarActionHandler);

canvasToolbar.find(".zoomToFit-action button")
.at(0)
.simulate("click");
expect(toolbarActionHandler.calledOnce).to.equal(false);
const el = container.querySelector(".zoomToFit-action button");
fireEvent.click(el);
expect(toolbarActionHandler.calledOnce).to.be.false;
});

it("should render a Toolbar with medium size buttons", () => {
Expand All @@ -117,17 +115,21 @@ describe("Toolbar renders correctly", () => {
{ action: "run", label: "Run Pipeline", enable: false },
]
};
const canvasToolbar = createToolbar(toolbarConfig, sinon.spy(), "md");
const { container } = createToolbar(toolbarConfig, sinon.spy(), "md");
// Select the toolbar medium buttons
const overflowButtons = canvasToolbar.find(".toolbar-overflow-item button");
const defaultButtons = canvasToolbar.find(".toolbar-item.default button");
const overflowButtons = container.querySelectorAll(".toolbar-overflow-item button");
const defaultButtons = container.querySelectorAll(".toolbar-item.default button");

expect(overflowButtons).to.have.length(3);
expect(defaultButtons).to.have.length(3);

// Verify if the buttons show up with medium size
expect(overflowButtons.find(".cds--btn--md")).to.have.length(3);
expect(defaultButtons.find(".cds--btn--md")).to.have.length(3);
overflowButtons.forEach((button) => {
expect(button.classList.contains("cds--btn--md")).to.be.true;
});
defaultButtons.forEach((button) => {
expect(button.classList.contains("cds--btn--md")).to.be.true;
});
});

it("should render a Toolbar with small size buttons", () => {
Expand All @@ -139,17 +141,21 @@ describe("Toolbar renders correctly", () => {
{ action: "run", label: "Run Pipeline", enable: false },
]
};
const canvasToolbar = createToolbar(toolbarConfig, sinon.spy(), "sm");
const { container } = createToolbar(toolbarConfig, sinon.spy(), "sm");
// Select the toolbar small buttons
const overflowButtons = canvasToolbar.find(".toolbar-overflow-item button");
const defaultButtons = canvasToolbar.find(".toolbar-item.default button");
const overflowButtons = container.querySelectorAll(".toolbar-overflow-item button");
const defaultButtons = container.querySelectorAll(".toolbar-item.default button");

expect(overflowButtons).to.have.length(3);
expect(defaultButtons).to.have.length(3);

// Verify if the buttons show up with small size
expect(overflowButtons.find(".cds--btn--sm")).to.have.length(3);
expect(defaultButtons.find(".cds--btn--sm")).to.have.length(3);
overflowButtons.forEach((button) => {
expect(button.classList.contains("cds--btn--sm")).to.be.true;
});
defaultButtons.forEach((button) => {
expect(button.classList.contains("cds--btn--sm")).to.be.true;
});
});

it("should render a Toolbar buttons with only icons ", () => {
Expand All @@ -158,9 +164,9 @@ describe("Toolbar renders correctly", () => {
{ action: "cut", enable: true, incLabelWithIcon: "no" },
]
};
const canvasToolbar = createToolbar(toolbarConfig);
const { container } = createToolbar(toolbarConfig);
// Select the toolbar only icons buttons
const defaultButtons = canvasToolbar.find(".toolbar-item.default button");
const defaultButtons = container.querySelectorAll(".toolbar-item.default button");

expect(defaultButtons).to.have.length(1);
});
Expand All @@ -171,18 +177,21 @@ describe("Toolbar renders correctly", () => {
{ action: "run", label: "Before - enabled", enable: true, incLabelWithIcon: "before" },
]
};
const canvasToolbar = createToolbar(toolbarConfig);
const { container } = createToolbar(toolbarConfig);
// Select the toolbar only icons buttons
const defaultButtons = canvasToolbar.find(".toolbar-item.default button");
const defaultButtons = container.querySelectorAll(".toolbar-item.default button");

expect(defaultButtons).to.have.length(1);
expect(defaultButtons.find(".cds--btn--icon-only")).to.have.length(0);

defaultButtons.forEach((button) => {
expect(button.classList.contains(".cds--btn--icon-only")).to.be.false;
});
});
});

function createToolbar(config, actionHandler, size) {
const toolbarActionHandler = actionHandler || sinon.spy();
const canvasToolbar = mountWithIntl(
const canvasToolbar = renderWithIntl(
<Toolbar
config={config}
instanceId={0}
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/03.03-callbacks.md
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
# Callbacks Overview

You can *optionally* provide callback listeners. These will be called when the user interacts with the canvas and allows
your application to perform processing specific to your application's needs based on user interactions.
your application to perform processing specific to your application's needs based on user interactions. If you don't implement any of the callbacks, common-canvas will perform appropriate actions if necessary.

These listeners are as follows:

### Context Menu Handler
_Overrides or adds to the default context menu (or context toolbar) displayed for nodes, links, comments, etc._

### Before Edit Action Handler
_Called for each edit action on the canvas. For example, when a node it created or a link is deleted or a comment is moved. It is called **before** the internal object model has been updated and the edit action has completed, so this can be used to cancel user actions if necessary._
_Called for each edit action on the canvas. It is called **before** the internal object model has been updated and the edit action has completed, so this can be used to cancel user actions if necessary._

### Edit Action Handler
_Called for each edit action on the canvas. For example, when a node it created or a link is deleted or a comment is moved. It is called **after** the internal object model has been updated and the edit action has completed._
_Called for each edit action on the canvas. It is called **after** the internal object model has been updated and the edit action has completed._

### Layout Handler
_Allows the application to override layout settings for nodes on a node-by-node basis._
Expand Down
Loading

0 comments on commit c564641

Please sign in to comment.