-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #460 from CBIIT/CRDCDH-1584
CRDCDH-1584 Navbar UX QA
- Loading branch information
Showing
42 changed files
with
518 additions
and
513 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file was deleted.
Oops, something went wrong.
File renamed without changes
Binary file not shown.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
import { render } from "@testing-library/react"; | ||
import { axe } from "jest-axe"; | ||
import userEvent from "@testing-library/user-event"; | ||
import CopyAdornment from "./CopyAdornment"; | ||
|
||
const mockWriteText = jest.fn(); | ||
Object.assign(navigator, { | ||
clipboard: { | ||
writeText: mockWriteText, | ||
}, | ||
}); | ||
|
||
describe("Accessibility", () => { | ||
it("should not have any violations", async () => { | ||
const { container } = render(<CopyAdornment _id="abc-123-this-is-a-id" />); | ||
|
||
expect(await axe(container)).toHaveNoViolations(); | ||
}); | ||
|
||
it("should not have any violations (no _ID)", async () => { | ||
const { container } = render(<CopyAdornment _id={null} />); | ||
|
||
expect(await axe(container)).toHaveNoViolations(); | ||
}); | ||
}); | ||
|
||
describe("Implementation Requirements", () => { | ||
beforeEach(() => { | ||
jest.clearAllMocks(); | ||
}); | ||
|
||
it("should render the Submission ID and copy button", () => { | ||
const { getByTestId } = render(<CopyAdornment _id="abc-123-this-is-a-id" />); | ||
|
||
expect(getByTestId("data-submission-id-value")).toBeInTheDocument(); | ||
expect(getByTestId("data-submission-id-value")).toHaveTextContent("abc-123-this-is-a-id"); | ||
|
||
expect(getByTestId("data-submission-copy-id-button")).toBeInTheDocument(); | ||
expect(getByTestId("data-submission-copy-id-button")).toBeEnabled(); | ||
}); | ||
|
||
it("should copy the ID to the clipboard when clicking the copy button", () => { | ||
const { getByTestId } = render(<CopyAdornment _id="abc-123-this-is-a-id" />); | ||
|
||
userEvent.click(getByTestId("data-submission-copy-id-button")); | ||
|
||
expect(mockWriteText).toHaveBeenCalledWith("abc-123-this-is-a-id"); | ||
}); | ||
|
||
it("should not copy the ID to the clipboard when no _ID is provided", () => { | ||
const { getByTestId } = render(<CopyAdornment _id={null} />); | ||
|
||
userEvent.click(getByTestId("data-submission-copy-id-button"), null, { | ||
skipPointerEventsCheck: true, | ||
}); | ||
|
||
expect(mockWriteText).not.toHaveBeenCalled(); | ||
}); | ||
|
||
it("should disable the copy button when no _ID is provided", () => { | ||
const { getByTestId } = render(<CopyAdornment _id={null} />); | ||
|
||
expect(getByTestId("data-submission-copy-id-button")).toBeDisabled(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
import { FC, memo } from "react"; | ||
import { IconButton, Stack, styled, Typography } from "@mui/material"; | ||
import { isEqual } from "lodash"; | ||
import { ReactComponent as CopyIconSvg } from "../../assets/icons/copy_icon_2.svg"; | ||
|
||
const StyledCopyWrapper = styled(Stack)({ | ||
height: "42px", | ||
width: "fit-content", | ||
minWidth: "508px", | ||
padding: "11px 20px", | ||
borderRadius: "8px 8px 0px 0px", | ||
border: "1.25px solid #6DADDB", | ||
borderBottom: 0, | ||
background: "#fff", | ||
color: "#125868", | ||
}); | ||
|
||
const StyledCopyLabel = styled(Typography)({ | ||
fontFamily: "'Nunito', 'Rubik', sans-serif", | ||
fontSize: "12px", | ||
fontStyle: "normal", | ||
fontWeight: 800, | ||
lineHeight: "19.6px", | ||
letterSpacing: "0.24px", | ||
textTransform: "uppercase", | ||
userSelect: "none", | ||
}); | ||
|
||
const StyledCopyValue = styled(Typography)({ | ||
fontFamily: "'Nunito', 'Rubik', sans-serif", | ||
fontSize: "16px", | ||
fontStyle: "normal", | ||
fontWeight: 400, | ||
lineHeight: "19.6px", | ||
letterSpacing: "0.32px", | ||
userSelect: "all", | ||
}); | ||
|
||
const StyledCopyIDButton = styled(IconButton)({ | ||
padding: 0, | ||
"&.MuiIconButton-root.Mui-disabled": { | ||
color: "#B0B0B0", | ||
}, | ||
marginLeft: "auto !important", | ||
}); | ||
|
||
type Props = { | ||
/** | ||
* The Data Submission ID | ||
* | ||
* @note This is passed as a prop instead of using the SubmissionContext to prevent a delay in displaying the ID | ||
*/ | ||
_id: string; | ||
}; | ||
|
||
/** | ||
* Provides Data Submission ID display and copy functionality | ||
* | ||
* @returns {React.FC} | ||
*/ | ||
const CopyAdornment: FC<Props> = ({ _id }) => { | ||
const handleCopyID = () => { | ||
if (!_id) { | ||
return; | ||
} | ||
|
||
navigator.clipboard.writeText(_id); | ||
}; | ||
|
||
return ( | ||
<StyledCopyWrapper direction="row" spacing={1.625} alignItems="center"> | ||
<StyledCopyLabel data-testid="data-submission-id-label" variant="body1"> | ||
SUBMISSION ID: | ||
</StyledCopyLabel> | ||
<StyledCopyValue data-testid="data-submission-id-value" variant="body1"> | ||
{_id} | ||
</StyledCopyValue> | ||
<StyledCopyIDButton | ||
data-testid="data-submission-copy-id-button" | ||
aria-label="Copy ID" | ||
onClick={handleCopyID} | ||
disabled={!_id} | ||
> | ||
<CopyIconSvg /> | ||
</StyledCopyIDButton> | ||
</StyledCopyWrapper> | ||
); | ||
}; | ||
|
||
export default memo(CopyAdornment, isEqual); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.