Skip to content
This repository has been archived by the owner on Jan 11, 2023. It is now read-only.

Bug 1463780 - Set cursor style to element-node rep #6444

Merged
merged 2 commits into from May 30, 2018
Merged

Bug 1463780 - Set cursor style to element-node rep #6444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a2a37b7
Set pointer cursor in case of the component was clickable
dadaa May 29, 2018
610d136
Add test
dadaa May 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/devtools-reps/src/reps/element-node.js
View file
Open in desktop
Expand Up @@ -50,7 +50,8 @@ function ElementNode(props) {
if (isInTree) {
if (onDOMNodeClick) {
Object.assign(baseConfig, {
onClick: _ => onDOMNodeClick(object)
onClick: _ => onDOMNodeClick(object),
className: `${baseConfig.className} clickable`
});
}

Expand Down
5 changes: 5 additions & 0 deletions packages/devtools-reps/src/reps/reps.css
View file
Open in desktop
Expand Up @@ -142,6 +142,10 @@
padding: 0 2px;
}

.objectBox-node.clickable {
cursor: pointer;
}

/******************************************************************************/

.objectBox-event,
Expand Down Expand Up @@ -248,6 +252,7 @@ button.open-inspector {
height: 16px;
margin-left: 0.25em;
vertical-align: middle;
cursor: pointer;
}

.objectBox-node:hover .open-inspector,
Expand Down
71 changes: 70 additions & 1 deletion packages/devtools-reps/src/reps/tests/element-node.js
View file
Open in desktop
Expand Up @@ -3,7 +3,8 @@
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */

/* global jest */
const { shallow } = require("enzyme");
const { mount, shallow } = require("enzyme");
const { JSDOM } = require("jsdom");
const { REPS, getRep } = require("../rep");
const { MODE } = require("../constants");
const { ElementNode } = REPS;
Expand Down Expand Up @@ -482,3 +483,71 @@ describe("ElementNode - Inspect icon title", () => {
expect(iconNode.prop("title")).toEqual(inspectIconTitle);
});
});

describe("ElementNode - Cursor style", () => {
const stub = stubs.get("Node");

it("renders with styled cursor", async () => {
const window = await createWindowForCursorTest();
const attachTo = window.document.querySelector("#attach-to");
const renderedComponent = mount(
ElementNode.rep({
object: stub,
onDOMNodeClick: jest.fn(),
onInspectIconClick: jest.fn()
}),
{
attachTo
}
);

const objectNode = renderedComponent.getDOMNode();
const iconNode = objectNode.querySelector(".open-inspector");
expect(renderedComponent.hasClass("clickable")).toBeTruthy();
expect(window.getComputedStyle(objectNode).cursor).toEqual("pointer");
expect(window.getComputedStyle(iconNode).cursor).toEqual("pointer");
});

it("renders with unstyled cursor", async () => {
const window = await createWindowForCursorTest();
const attachTo = window.document.querySelector("#attach-to");
const renderedComponent = mount(
ElementNode.rep({
object: stub
}),
{
attachTo
}
);

const objectNode = renderedComponent.getDOMNode();
expect(renderedComponent.hasClass("clickable")).toBeFalsy();
expect(window.getComputedStyle(objectNode).cursor).toEqual("");
});
});

async function createWindowForCursorTest() {
const path = require("path");
const css = await readTextFile(path.resolve(__dirname, "..", "reps.css"));
const html = `
<body>
<style>${css}</style>
<div id="attach-to"></div>
</body>
`;

return new JSDOM(html).window;
}

async function readTextFile(fileName) {
return new Promise((resolve, reject) => {
const fs = require("fs");
fs.readFile(fileName, "utf8", (error, text) => {
if (error) {
reject(error);
} else {
resolve(text);
}
});
});
}