Skip to content
This repository has been archived by the owner on Jul 2, 2024. It is now read-only.

EVG-20833 Update modal to latest version #2039

Merged
merged 6 commits into from
Sep 15, 2023
Merged

EVG-20833 Update modal to latest version #2039

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b161419
Update modal
khelif96 Sep 14, 2023
28cf1e7
Fix cypress test
khelif96 Sep 14, 2023
6f32c74
Mock tabbable
khelif96 Sep 15, 2023
8a694a5
Remove unused dep
khelif96 Sep 15, 2023
f6c76ec
move focus-trap-react mock
khelif96 Sep 15, 2023
fe18c09
Merge branch 'main' into EVG-20833-2
khelif96 Sep 15, 2023
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
7 changes: 7 additions & 0 deletions __mocks__/focus-trap-react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
// Mock focus-trap-react to prevent errors in tests that use modals. focus-trap-react is a package used
// by LeafyGreen and is not a direct dependency of Spruce.
const lib = jest.requireActual("focus-trap-react");

lib.prototype.setupFocusTrap = () => null;

module.exports = lib;
16 changes: 16 additions & 0 deletions __mocks__/tabbable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
// https://github.com/focus-trap/tabbable#testing-in-jsdom
Copy link
Contributor

Choose a reason for hiding this comment

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

makes me so sad 😭 ... btw, do we want to try to consolidate it with the other focus-trap mock so they're in the same file?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

good call moved it to the mocks directory so they get picked up by jest

const lib = jest.requireActual("tabbable");

const tabbable = {
...lib,
tabbable: (node, options) =>
lib.tabbable(node, { ...options, displayCheck: "none" }),
focusable: (node, options) =>
lib.focusable(node, { ...options, displayCheck: "none" }),
isFocusable: (node, options) =>
lib.isFocusable(node, { ...options, displayCheck: "none" }),
isTabbable: (node, options) =>
lib.isTabbable(node, { ...options, displayCheck: "none" }),
};

module.exports = tabbable;
12 changes: 0 additions & 12 deletions config/jest/setupTests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,3 @@ window.crypto.randomUUID = (() => {
};
})();

// Mock focus-trap-react to prevent errors in tests that use modals. focus-trap-react is a package used
// by LeafyGreen and is not a direct dependency of Spruce.
jest.mock(
"focus-trap-react",
() => {
const focusTrap = jest.requireActual(
"focus-trap-react"
);
focusTrap.prototype.setupFocusTrap = () => null;
return focusTrap;
}
);
24 changes: 19 additions & 5 deletions cypress/integration/version/name_change_modal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@ describe("Name change modal", () => {
cy.contains(originalName);
cy.dataCy("name-change-modal-trigger").click();
const newName = "a different name";
cy.get("textarea").clear().type(newName);
Copy link
Contributor

Choose a reason for hiding this comment

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

ty for fixing these!

cy.get("textarea").clear();
cy.get("textarea").type(newName);
cy.contains("Confirm").click();
cy.get("textarea").should("not.exist");
cy.contains(newName);
cy.validateToast("success", "Patch name was successfully updated.", true);
// revert name change
cy.dataCy("name-change-modal-trigger").click();
cy.get("textarea").clear().type(originalName);
cy.get("textarea").clear();
cy.get("textarea").type(originalName);
cy.contains("Confirm").click();
cy.get("textarea").should("not.exist");
cy.validateToast("success", "Patch name was successfully updated.", true);
Expand All @@ -25,13 +27,25 @@ describe("Name change modal", () => {
it("The confirm button is disabled when the text area value is empty or greater than 300 characters", () => {
cy.dataCy("name-change-modal-trigger").click();
cy.get("textarea").clear();
cy.contains("button", "Confirm").should("be.disabled");
cy.contains("button", "Confirm").should(
"have.attr",
"aria-disabled",
"true"
);
cy.get("textarea").type("lol");
cy.contains("button", "Confirm").should("not.be.disabled");
cy.contains("button", "Confirm").should(
"have.attr",
"aria-disabled",
"false"
);
const over300Chars =
"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
cy.get("textarea").type(over300Chars);
cy.contains("button", "Confirm").should("be.disabled");
cy.contains("button", "Confirm").should(
"have.attr",
"aria-disabled",
"true"
);
cy.contains("Value cannot exceed 300 characters");
});
});
5 changes: 2 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"@leafygreen-ui/checkbox": "12.0.5",
"@leafygreen-ui/code": "14.0.1",
"@leafygreen-ui/combobox": "5.0.7",
"@leafygreen-ui/confirmation-modal": "4.0.3",
"@leafygreen-ui/confirmation-modal": "5.0.6",
"@leafygreen-ui/emotion": "4.0.3",
"@leafygreen-ui/expandable-card": "3.0.5",
"@leafygreen-ui/guide-cue": "3.0.0",
Expand All @@ -78,9 +78,8 @@
"@leafygreen-ui/interaction-ring": "7.0.2",
"@leafygreen-ui/leafygreen-provider": "3.1.0",
"@leafygreen-ui/loading-indicator": "2.0.5",
"@leafygreen-ui/marketing-modal": "^4.0.5",
"@leafygreen-ui/menu": "20.0.1",
"@leafygreen-ui/modal": "14.0.1",
"@leafygreen-ui/modal": "16.0.1",
"@leafygreen-ui/number-input": "1.0.4",
"@leafygreen-ui/pagination": "1.0.12",
"@leafygreen-ui/palette": "4.0.7",
Expand Down
1 change: 0 additions & 1 deletion src/components/WelcomeModal/WelcomeModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,6 @@ const WelcomeModal: React.FC<WelcomeModalProps> = ({
z-index: ${zIndex.max_do_not_use};
`}
size="large"
initialFocus=".slick-active"
>
{title && <CardTitle>{title}</CardTitle>}
<Carousel
Expand Down
Loading