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

Jump to bottom

dom4 v2 + updated polyfills #2043

Merged
merged 12 commits into from
Jan 26, 2018
Merged

dom4 v2 + updated polyfills #2043

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e955b0e
require Array.from ES2015 polyfill, add iterable libs in tsconfig
Jan 25, 2018
354fd28
dom4 v2 dependencies
Jan 25, 2018
6163a6d
query(All)? => querySelector(All)?, use Array.from as necessary
Jan 25, 2018
6c03161
remove table index es6-shim import
Jan 25, 2018
36bd0e8
[PoC] use core-js instead of es6-shim, test-commons polyfills
Jan 25, 2018
7fd878f
applyPolyfills() function
Jan 25, 2018
aa86bda
test-commons/bootstrap loads polyfills and configures enzyme
Jan 25, 2018
d8f29a9
use test-commons/bootstrap in all test suites, remove es6-shim entirely
Jan 25, 2018
b646ae2
import polyfill in docs-app
Jan 25, 2018
3c9c654
Array.fill polyfill required for table
Jan 25, 2018
a53ced4
polyfill.js next to bootstrap, inline enzyme configure
Jan 26, 2018
2ea8a68
bring back enzyme dep
Jan 26, 2018
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
6 changes: 6 additions & 0 deletions config/tsconfig.base.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@
"experimentalDecorators": true,
"importHelpers": true,
"jsx": "react",
"lib": [
"dom",
"dom.iterable",
"es5",
"es2015.iterable"
],
"module": "es2015",
"moduleResolution": "node",
"noFallthroughCasesInSwitch": true,
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"dependencies": {
"@types/chai": "^4.1.0",
"@types/classnames": "^2.2.3",
"@types/dom4": "^1.5.20",
"@types/dom4": "^2.0.0",
"@types/enzyme": "^3.1.6",
"@types/enzyme-adapter-react-16": "^1.0.1",
"@types/mocha": "^2.2.46",
Expand Down
6 changes: 2 additions & 4 deletions packages/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@
},
"dependencies": {
"@blueprintjs/icons": "^2.0.0-beta.3",
"@types/dom4": "^1.5.20",
"@types/dom4": "^2.0.0",
"classnames": "^2.2",
"dom4": "^1.8",
"dom4": "^2.0.1",
"normalize.css": "^7.0.0",
"popper.js": "^1.12.6",
"react-popper": "~0.7.4",
Expand All @@ -49,8 +49,6 @@
"@blueprintjs/node-build-scripts": "^0.4.0",
"@blueprintjs/test-commons": "^0.4.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"es6-shim": "^0.35.3",
"karma": "^1.7.1",
"mocha": "^4.1.0",
"npm-run-all": "^4.1.2",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/context-menu/context-menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ This API is ideal for non-React-based apps or for programmatically triggered men
```ts
import { ContextMenu, Menu, MenuItem } from "@blueprintjs/core";

const rightClickMe = document.query("#right-click-me") as HTMLElement;
const rightClickMe = document.querySelector("#right-click-me") as HTMLElement;
rightClickMe.oncontextmenu = (e: MouseEvent) => {
// prevent the browser's native context menu
e.preventDefault();
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/overlay/overlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,8 +249,8 @@ export class Overlay extends React.PureComponent<IOverlayProps, IOverlayState> {
const isFocusOutsideModal = !this.containerElement.contains(document.activeElement);
if (isFocusOutsideModal) {
// element marked autofocus has higher priority than the other clowns
const autofocusElement = this.containerElement.query("[autofocus]") as HTMLElement;
const wrapperElement = this.containerElement.query("[tabindex]") as HTMLElement;
const autofocusElement = this.containerElement.querySelector("[autofocus]") as HTMLElement;
const wrapperElement = this.containerElement.querySelector("[tabindex]") as HTMLElement;
if (autofocusElement != null) {
autofocusElement.focus();
} else if (wrapperElement != null) {
Expand Down
6 changes: 3 additions & 3 deletions packages/core/src/components/tabs/tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,9 +214,9 @@ export class Tabs extends AbstractPureComponent<ITabsProps, ITabsState> {
/** Queries root HTML element for all `.pt-tab`s with optional filter selector */
private getTabElements(subselector = "") {
if (this.tablistElement == null) {
return [] as Elements;
return [];
}
return this.tablistElement.queryAll(TAB_SELECTOR + subselector);
return Array.from(this.tablistElement.querySelectorAll(TAB_SELECTOR + subselector));
}

private handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
Expand Down Expand Up @@ -265,7 +265,7 @@ export class Tabs extends AbstractPureComponent<ITabsProps, ITabsState> {
}

const tabIdSelector = `${TAB_SELECTOR}[data-tab-id="${this.state.selectedTabId}"]`;
const selectedTabElement = this.tablistElement.query(tabIdSelector) as HTMLElement;
const selectedTabElement = this.tablistElement.querySelector(tabIdSelector) as HTMLElement;

let indicatorWrapperStyle: React.CSSProperties = { display: "none" };
if (selectedTabElement != null) {
Expand Down
6 changes: 3 additions & 3 deletions packages/core/test/context-menu/contextMenuTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,16 +95,16 @@ describe("ContextMenu", () => {
});

function getPopover() {
return document.query(`.${Classes.POPOVER}.${Classes.MINIMAL}`);
return document.querySelector(`.${Classes.POPOVER}.${Classes.MINIMAL}`);
}

function assertContextMenuWasRendered(expectedLength = MENU_ITEMS.length) {
const menu = document.query(`.${Classes.CONTEXT_MENU}`);
const menu = document.querySelector(`.${Classes.CONTEXT_MENU}`);
assert.isNotNull(menu);
// popover is rendered in a Portal
const popover = getPopover();
assert.isNotNull(popover);
const menuItems = popover.queryAll(`.${Classes.MENU_ITEM}`);
const menuItems = popover.querySelectorAll(`.${Classes.MENU_ITEM}`);
assert.lengthOf(menuItems, expectedLength);
}

Expand Down
8 changes: 4 additions & 4 deletions packages/core/test/controls/numericInputTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ describe("<NumericInput>", () => {
const attachTo = document.createElement("div");
mount(<NumericInput value="12345678" />, { attachTo });

const input = attachTo.query("input") as HTMLInputElement;
const input = attachTo.querySelector("input") as HTMLInputElement;
input.focus();

expect(input.selectionStart).to.equal(input.selectionEnd);
Expand All @@ -240,7 +240,7 @@ describe("<NumericInput>", () => {

component.find("input").simulate("focus");

const input = attachTo.query("input") as HTMLInputElement;
const input = attachTo.querySelector("input") as HTMLInputElement;
expect(input.selectionStart).to.equal(0);
expect(input.selectionEnd).to.equal(VALUE.length);
});
Expand All @@ -256,7 +256,7 @@ describe("<NumericInput>", () => {
const wrappedInput = component.find(InputGroup).find("input");
wrappedInput.simulate("keyDown", INCREMENT_KEYSTROKE);

const input = attachTo.query("input") as HTMLInputElement;
const input = attachTo.querySelector("input") as HTMLInputElement;
expect(input.selectionStart).to.equal(input.selectionEnd);
});

Expand All @@ -268,7 +268,7 @@ describe("<NumericInput>", () => {
const wrappedInput = component.find(InputGroup).find("input");
wrappedInput.simulate("keyDown", INCREMENT_KEYSTROKE);

const input = attachTo.query("input") as HTMLInputElement;
const input = attachTo.querySelector("input") as HTMLInputElement;
expect(input.selectionStart).to.equal(0);
expect(input.selectionEnd).to.equal(VALUE.length);
});
Expand Down
8 changes: 4 additions & 4 deletions packages/core/test/editable-text/editableTextTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,15 +153,15 @@ describe("<EditableText>", () => {
// mount into a DOM element so we can get the input to inspect its HTML props
const attachTo = document.createElement("div");
mount(<EditableText isEditing={true} value="alphabet" />, { attachTo });
const input = attachTo.query("input") as HTMLInputElement;
const input = attachTo.querySelector("input") as HTMLInputElement;
assert.strictEqual(input.selectionStart, 8);
assert.strictEqual(input.selectionEnd, 8);
});

it("controlled mode can only change value via props", () => {
let expected = "alphabet";
const wrapper = mount(<EditableText isEditing={true} value={expected} />);
const inputElement = ReactDOM.findDOMNode(wrapper.instance()).query("input") as HTMLInputElement;
const inputElement = ReactDOM.findDOMNode(wrapper.instance()).querySelector("input") as HTMLInputElement;

const input = wrapper.find("input");
input.simulate("change", { target: { value: "hello" } });
Expand All @@ -185,7 +185,7 @@ describe("<EditableText>", () => {
xit("the full input box is highlighted when selectAllOnFocus is true", () => {
const attachTo = document.createElement("div");
mount(<EditableText isEditing={true} selectAllOnFocus={true} value="alphabet" />, { attachTo });
const input = attachTo.query("input") as HTMLInputElement;
const input = attachTo.querySelector("input") as HTMLInputElement;
assert.strictEqual(input.selectionStart, 0);
assert.strictEqual(input.selectionEnd, 8);
});
Expand Down Expand Up @@ -247,7 +247,7 @@ describe("<EditableText>", () => {
const wrapper = mount(
<EditableText isEditing={true} onConfirm={confirmSpy} multiline={true} confirmOnEnterKey={true} />,
);
const textarea = ReactDOM.findDOMNode(wrapper.instance()).query("textarea") as HTMLTextAreaElement;
const textarea = ReactDOM.findDOMNode(wrapper.instance()).querySelector("textarea") as HTMLTextAreaElement;
// pass "" as second argument since Phantom does not update cursor properly after a simulated value change
// Chrome: "control" => "control\n"
// Phantom: "control" => "\ncontrol"
Expand Down
7 changes: 1 addition & 6 deletions packages/core/test/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,7 @@
* Licensed under the terms of the LICENSE file distributed with this project.
*/

import "es6-shim";

import * as Enzyme from "enzyme";
import * as Adapter from "enzyme-adapter-react-16";

Enzyme.configure({ adapter: new Adapter() });
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@adidahiya thoughts?

import "@blueprintjs/test-commons/bootstrap";

import "./alert/alertTests";
import "./breadcrumbs/breadcrumbTests";
Expand Down
10 changes: 5 additions & 5 deletions packages/core/test/menu/menuTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ describe("MenuItem", () => {
</React.Fragment>,
);
hoverOverTarget(0, () => {
assert.isNotNull(childContainer.query(`.${Classes.ALIGN_LEFT}`));
assert.isNotNull(childContainer.querySelector(`.${Classes.ALIGN_LEFT}`));
done();
});
});
Expand All @@ -176,8 +176,8 @@ describe("MenuItem", () => {
</React.Fragment>,
);
hoverOverTarget(0, () => {
assert.isNotNull(childContainer.query(`.${Classes.OVERLAY_OPEN}`));
assert.isNull(childContainer.query(`.${Classes.ALIGN_LEFT}`));
assert.isNotNull(childContainer.querySelector(`.${Classes.OVERLAY_OPEN}`));
assert.isNull(childContainer.querySelector(`.${Classes.ALIGN_LEFT}`));
done();
});
});
Expand Down Expand Up @@ -244,7 +244,7 @@ describe("MenuItem", () => {
];
menuItem = mountMenuItem({ iconName: "align-left", text: "Alignment", submenu: items });
hoverOverTarget(0, () => {
assert.isNotNull(childContainer.query(`.${Classes.ALIGN_LEFT}`));
assert.isNotNull(childContainer.querySelector(`.${Classes.ALIGN_LEFT}`));
done();
});
});
Expand Down Expand Up @@ -288,7 +288,7 @@ describe("MenuItem", () => {
}

function assertClassNameCount(className: string, count: number) {
assert.strictEqual(childContainer.queryAll(`.${className}`).length, count, `${count}x .${className}`);
assert.lengthOf(childContainer.querySelectorAll(`.${className}`), count, `${count}x .${className}`);
}

function mountMenuItem(props?: IMenuItemProps, childItems?: React.ReactNode) {
Expand Down
8 changes: 6 additions & 2 deletions packages/core/test/slider/sliderTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,9 @@ describe("<Slider>", () => {
const slider = renderSlider(<Slider disabled={true} />);
// spy on instance method instead of onChange because we can't supply nativeEvent
const trackClickSpy = sinon.spy(slider.instance() as any, "handleTrackClick");
slider.find(trackSelector).simulate("mousedown", { target: testsContainerElement.query(trackSelector) });
slider
.find(trackSelector)
.simulate("mousedown", { target: testsContainerElement.querySelector(trackSelector) });
assert.isTrue(trackClickSpy.notCalled, "handleTrackClick was called when disabled");
});

Expand All @@ -169,7 +171,9 @@ describe("<Slider>", () => {
const slider = renderSlider(<Slider disabled={true} />);
// spy on instance method instead of onChange because we can't supply nativeEvent
const trackClickSpy = sinon.spy(slider.instance() as any, "handleTrackTouch");
slider.find(trackSelector).simulate("touchstart", { target: testsContainerElement.query(trackSelector) });
slider
.find(trackSelector)
.simulate("touchstart", { target: testsContainerElement.querySelector(trackSelector) });
assert.isTrue(trackClickSpy.notCalled, "handleTrackTouch was called when disabled");
});

Expand Down
6 changes: 3 additions & 3 deletions packages/core/test/tabs/tabsTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ describe("<Tabs>", () => {
);

const tabList = wrapper.find(TAB_LIST);
const tabElements = testsContainerElement.queryAll(TAB);
const tabElements = testsContainerElement.querySelectorAll(TAB);
(tabElements[0] as HTMLElement).focus();

tabList.simulate("keydown", { which: Keys.ARROW_RIGHT });
Expand All @@ -184,7 +184,7 @@ describe("<Tabs>", () => {
{ attachTo: testsContainerElement },
);
const tabList = wrapper.find(TAB_LIST);
const tabElements = testsContainerElement.queryAll(TAB);
const tabElements = testsContainerElement.querySelectorAll(TAB);

// must target different elements each time as onChange is only called when id changes
tabList.simulate("keypress", { target: tabElements[1], which: Keys.ENTER });
Expand Down Expand Up @@ -355,7 +355,7 @@ describe("<Tabs>", () => {
const style = wrapper.state().indicatorWrapperStyle;
assert.isDefined(style, "Tabs should have a indicatorWrapperStyle prop set");
const node = ReactDOM.findDOMNode(wrapper.instance());
const expected = (node.query(`${TAB}[data-tab-id='${selectedTabId}']`) as HTMLLIElement).offsetLeft;
const expected = (node.querySelector(`${TAB}[data-tab-id='${selectedTabId}']`) as HTMLLIElement).offsetLeft;
assert.isTrue(style.transform.indexOf(`${expected}px`) !== -1, "indicator has not moved correctly");
}

Expand Down
8 changes: 5 additions & 3 deletions packages/core/test/toast/toasterTests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ describe("Toaster", () => {
message: "Hello world",
});
assert.lengthOf(toaster.getToasts(), 1, "expected 1 toast");
assert.isNotNull(document.query(`.${Classes.TOAST_CONTAINER}.${Classes.OVERLAY_OPEN}`));
assert.isNotNull(document.querySelector(`.${Classes.TOAST_CONTAINER}.${Classes.OVERLAY_OPEN}`));
});

it("multiple show()s renders them all", () => {
Expand Down Expand Up @@ -77,7 +77,8 @@ describe("Toaster", () => {
message: "message",
timeout: 0,
});
const action = document.queryAll(`.${Classes.TOAST} .${Classes.BUTTON}`)[0] as HTMLElement;
// action is first descendant button
const action = document.querySelector(`.${Classes.TOAST} .${Classes.BUTTON}`) as HTMLElement;
action.click();
assert.isTrue(onClick.calledOnce, "expected onClick to be called once");
});
Expand All @@ -89,7 +90,8 @@ describe("Toaster", () => {
onDismiss: handleDismiss,
timeout: 0,
});
const dismiss = document.queryAll(`.${Classes.TOAST} .${Classes.BUTTON}`)[0] as HTMLElement;
// without action, dismiss is first descendant button
const dismiss = document.querySelector(`.${Classes.TOAST} .${Classes.BUTTON}`) as HTMLElement;
dismiss.click();
assert.isTrue(handleDismiss.calledOnce);
});
Expand Down
2 changes: 1 addition & 1 deletion packages/core/test/tree/treeTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ describe("<Tree>", () => {

assert.strictEqual(
tree.getNodeContentElement(5),
ReactDOM.findDOMNode(tree).query(`.c5 > .${Classes.TREE_NODE_CONTENT}`),
ReactDOM.findDOMNode(tree).querySelector(`.c5 > .${Classes.TREE_NODE_CONTENT}`),
);
assert.isUndefined(tree.getNodeContentElement(100));

Expand Down
2 changes: 0 additions & 2 deletions packages/datetime/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,6 @@
"@blueprintjs/node-build-scripts": "^0.4.0",
"@blueprintjs/test-commons": "^0.4.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"es6-shim": "^0.35.3",
"karma": "^1.7.1",
"mocha": "^4.1.0",
"npm-run-all": "^4.1.2",
Expand Down
Loading