Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

Merge pull request #13560 from appsmithorg/fix/colorpicker-tests

Browse Source 
fix: package issue with focus-trap causing jest test failure
This commit is contained in:
Aswath K 2022-05-05 23:36:09 +05:30 committed by GitHub
commit 9916315128
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 109 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/client/package.json
View File

@ -310,6 +310,7 @@
}
},
"resolutions": {
"react-error-overlay": "6.0.9"
"react-error-overlay": "6.0.9",
"focus-trap-react/**/tabbable": "5.2.1"
}
}

206
app/client/src/components/ads/ColorPickerComponentV2.test.tsx
View File

@ -78,131 +78,131 @@ describe("<ColorPicker /> - Keyboard Navigation", () => {
await waitForElementToBeRemoved(screen.queryByTestId("color-picker"));
});
// it("Pressing {Tab} should shift sections in the colorpicker", async () => {
// render(getTestComponent());
// userEvent.tab();
// userEvent.keyboard("{Enter}");
it("Pressing {Tab} should shift sections in the colorpicker", async () => {
render(getTestComponent());
userEvent.tab();
userEvent.keyboard("{Enter}");
// userEvent.tab();
// expect(
// document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[0],
// ).toHaveFocus();
userEvent.tab();
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[0],
).toHaveFocus();
// userEvent.tab();
// expect(
// document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
// ).toHaveFocus();
userEvent.tab();
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
).toHaveFocus();
// // Back to first color
// userEvent.tab();
// expect(
// document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[0],
// ).toHaveFocus();
// });
// Back to first color
userEvent.tab();
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[0],
).toHaveFocus();
});
// it("Pressing {ArrowRight} should shift focus to color to the right", () => {
// render(getTestComponent());
// userEvent.tab();
// userEvent.keyboard("{Enter}");
it("Pressing {ArrowRight} should shift focus to color to the right", () => {
render(getTestComponent());
userEvent.tab();
userEvent.keyboard("{Enter}");
// userEvent.tab();
// userEvent.tab();
userEvent.tab();
userEvent.tab();
// expect(
// document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
// ).toHaveFocus();
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
).toHaveFocus();
// userEvent.keyboard("{ArrowRight}");
userEvent.keyboard("{ArrowRight}");
// expect(
// document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
// .parentElement?.childNodes[1],
// ).toHaveFocus();
// });
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
.parentElement?.childNodes[1],
).toHaveFocus();
});
// it("Pressing {ArrowLeft} should shift focus to color to the left", () => {
// render(getTestComponent());
// userEvent.tab();
// userEvent.keyboard("{Enter}");
it("Pressing {ArrowLeft} should shift focus to color to the left", () => {
render(getTestComponent());
userEvent.tab();
userEvent.keyboard("{Enter}");
// userEvent.tab();
// userEvent.tab();
userEvent.tab();
userEvent.tab();
// expect(
// document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
// ).toHaveFocus();
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
).toHaveFocus();
// userEvent.keyboard("{ArrowRight}");
// userEvent.keyboard("{ArrowRight}");
userEvent.keyboard("{ArrowRight}");
userEvent.keyboard("{ArrowRight}");
// expect(
// document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
// .parentElement?.childNodes[2],
// ).toHaveFocus();
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
.parentElement?.childNodes[2],
).toHaveFocus();
// userEvent.keyboard("{ArrowLeft}");
// expect(
// document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
// .parentElement?.childNodes[1],
// ).toHaveFocus();
// });
userEvent.keyboard("{ArrowLeft}");
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
.parentElement?.childNodes[1],
).toHaveFocus();
});
// it("Pressing {ArrowDown} should shift focus to color to the bottom", () => {
// render(getTestComponent());
// userEvent.tab();
// userEvent.keyboard("{Enter}");
it("Pressing {ArrowDown} should shift focus to color to the bottom", () => {
render(getTestComponent());
userEvent.tab();
userEvent.keyboard("{Enter}");
// userEvent.tab();
// userEvent.tab();
userEvent.tab();
userEvent.tab();
// expect(
// document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
// ).toHaveFocus();
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
).toHaveFocus();
// userEvent.keyboard("{ArrowDown}");
// expect(
// document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
// .parentElement?.childNodes[10],
// ).toHaveFocus();
// });
userEvent.keyboard("{ArrowDown}");
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
.parentElement?.childNodes[10],
).toHaveFocus();
});
// it("Pressing {ArrowUp} should shift focus to color to the top", () => {
// render(getTestComponent());
// userEvent.tab();
// userEvent.keyboard("{Enter}");
it("Pressing {ArrowUp} should shift focus to color to the top", () => {
render(getTestComponent());
userEvent.tab();
userEvent.keyboard("{Enter}");
// userEvent.tab();
// userEvent.tab();
userEvent.tab();
userEvent.tab();
// expect(
// document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
// ).toHaveFocus();
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
).toHaveFocus();
// userEvent.keyboard("{ArrowRight}");
// userEvent.keyboard("{ArrowDown}");
// userEvent.keyboard("{ArrowDown}");
// expect(
// document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
// .parentElement?.childNodes[21],
// ).toHaveFocus();
userEvent.keyboard("{ArrowRight}");
userEvent.keyboard("{ArrowDown}");
userEvent.keyboard("{ArrowDown}");
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
.parentElement?.childNodes[21],
).toHaveFocus();
// userEvent.keyboard("{ArrowUp}");
// expect(
// document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
// .parentElement?.childNodes[11],
// ).toHaveFocus();
// });
userEvent.keyboard("{ArrowUp}");
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
.parentElement?.childNodes[11],
).toHaveFocus();
});
// it("Pressing {Enter} should select the color in focus", async () => {
// const onColorChange = jest.fn();
// render(getTestComponent(onColorChange));
// userEvent.tab();
// userEvent.keyboard("{Enter}");
// userEvent.tab();
// userEvent.tab();
// userEvent.keyboard("{ArrowRight}");
// userEvent.keyboard("{Enter}");
// expect(onColorChange).toBeCalled();
// await waitForElementToBeRemoved(screen.queryByTestId("color-picker"));
// });
it("Pressing {Enter} should select the color in focus", async () => {
const onColorChange = jest.fn();
render(getTestComponent(onColorChange));
userEvent.tab();
userEvent.keyboard("{Enter}");
userEvent.tab();
userEvent.tab();
userEvent.keyboard("{ArrowRight}");
userEvent.keyboard("{Enter}");
expect(onColorChange).toBeCalled();
await waitForElementToBeRemoved(screen.queryByTestId("color-picker"));
});
});

8
app/client/yarn.lock
View File

@ -16472,10 +16472,10 @@ symbol-tree@^3.2.4:
version "3.2.4"
resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"
tabbable@^5.3.1:
version "5.3.1"
resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.1.tgz#059f2a19b829efce2a0ec05785a47dd3bcd0a25b"
integrity sha512-NtO7I7eoAHR+JwwcNsi/PipamtAEebYDnur/k9wM6n238HHy/+1O4+7Zx7e/JaDAbKJPlIFYsfsV/6tPqTOQvg==
tabbable@5.2.1, tabbable@^5.3.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.2.1.tgz#e3fda7367ddbb172dcda9f871c0fdb36d1c4cd9c"
integrity sha512-40pEZ2mhjaZzK0BnI+QGNjJO8UYx9pP5v7BGe17SORTO0OEuuaAwQTkAp8whcZvqon44wKFOikD+Al11K3JICQ==
table@^5.2.3:
version "5.4.6"