diff --git a/packages/core/components/Buttons/BaseButton.tsx b/packages/core/components/Buttons/BaseButton.tsx index 5dd608af..14227678 100644 --- a/packages/core/components/Buttons/BaseButton.tsx +++ b/packages/core/components/Buttons/BaseButton.tsx @@ -17,7 +17,9 @@ interface Props { menuItems?: IContextualMenuItem[]; onClick?: () => void; text?: string; - title: string; + // title is only required if tooltip would be different from button text + // or if button does not have text (e.g., icon only) + title?: string; } /** @@ -60,7 +62,7 @@ export default function BaseButton(props: Props) { [styles.disabled]: props.disabled, [styles.selected]: props.isSelected, })} - data-testid={`base-button-${props.title}`} + data-testid={`base-button-${props.id}`} ariaLabel={props.title} disabled={props.disabled} id={props.id} diff --git a/packages/core/components/Buttons/PrimaryButton.tsx b/packages/core/components/Buttons/PrimaryButton.tsx index 20f82c30..ea4a26df 100644 --- a/packages/core/components/Buttons/PrimaryButton.tsx +++ b/packages/core/components/Buttons/PrimaryButton.tsx @@ -15,7 +15,7 @@ interface Props { menuItems?: IContextualMenuItem[]; onClick?: () => void; text?: string; - title: string; + title?: string; } /** diff --git a/packages/core/components/Buttons/SecondaryButton.tsx b/packages/core/components/Buttons/SecondaryButton.tsx index dc5454c2..ee41422f 100644 --- a/packages/core/components/Buttons/SecondaryButton.tsx +++ b/packages/core/components/Buttons/SecondaryButton.tsx @@ -15,7 +15,7 @@ interface Props { menuItems?: IContextualMenuItem[]; onClick?: () => void; text?: string; - title: string; + title?: string; } /** diff --git a/packages/core/components/Buttons/test/BaseButton.test.tsx b/packages/core/components/Buttons/test/BaseButton.test.tsx index b7aa99eb..a6d125a3 100644 --- a/packages/core/components/Buttons/test/BaseButton.test.tsx +++ b/packages/core/components/Buttons/test/BaseButton.test.tsx @@ -8,20 +8,21 @@ describe("", () => { it("does not perform click when disabled", () => { // Arrange const title = "Mock"; + const testId = "mock-id"; let wasClicked = false; const onClick = () => { wasClicked = true; }; const { getByTestId } = render( - + ); // (sanity-check) no click expect(wasClicked).to.be.false; // Act - fireEvent.click(getByTestId(`base-button-${title}`)); + fireEvent.click(getByTestId(`base-button-${testId}`)); // Assert expect(wasClicked).to.be.false; @@ -30,20 +31,21 @@ describe("", () => { it("performs click when not disabled", () => { // Arrange const title = "Mock"; + const testId = "mock-id"; let wasClicked = false; const onClick = () => { wasClicked = true; }; const { getByTestId } = render( - + ); // (sanity-check) no click expect(wasClicked).to.be.false; // Act - fireEvent.click(getByTestId(`base-button-${title}`)); + fireEvent.click(getByTestId(`base-button-${testId}`)); // Assert expect(wasClicked).to.be.true; diff --git a/packages/core/components/DataSourcePrompt/FilePrompt.tsx b/packages/core/components/DataSourcePrompt/FilePrompt.tsx index 6c4639d2..108cf9f5 100644 --- a/packages/core/components/DataSourcePrompt/FilePrompt.tsx +++ b/packages/core/components/DataSourcePrompt/FilePrompt.tsx @@ -74,13 +74,12 @@ export default function FilePrompt(props: Props) {
)}
- {props.hideTitle && ( - onDismiss()} /> - )} + {props.hideTitle && onDismiss()} />} dataSource && onSubmit(dataSource, metadataSource)} /> diff --git a/packages/core/components/DateRangePicker/index.tsx b/packages/core/components/DateRangePicker/index.tsx index dad0ce4b..a48b3ebc 100644 --- a/packages/core/components/DateRangePicker/index.tsx +++ b/packages/core/components/DateRangePicker/index.tsx @@ -99,6 +99,7 @@ export default function DateRangePicker(props: DateRangePickerProps) { iconName="Clear" onClick={onReset} title="Reset" + id="reset-date" />
diff --git a/packages/core/components/DateRangePicker/test/DateRangePicker.test.tsx b/packages/core/components/DateRangePicker/test/DateRangePicker.test.tsx index 8944400d..80a47f14 100644 --- a/packages/core/components/DateRangePicker/test/DateRangePicker.test.tsx +++ b/packages/core/components/DateRangePicker/test/DateRangePicker.test.tsx @@ -63,7 +63,7 @@ describe("", () => { // Hit reset expect(onReset.called).to.equal(false); - fireEvent.click(getByTestId("base-button-Reset")); + fireEvent.click(getByTestId("base-button-reset-date")); expect(onReset.called).to.equal(true); }); }); diff --git a/packages/core/components/FileDetails/index.tsx b/packages/core/components/FileDetails/index.tsx index 50fac2f6..ba01e557 100644 --- a/packages/core/components/FileDetails/index.tsx +++ b/packages/core/components/FileDetails/index.tsx @@ -181,7 +181,7 @@ export default function FileDetails(props: Props) { disabled={isDownloadDisabled} iconName="Download" text="Download" - title="Download" + title="Download file to local system" onClick={onDownload} /> @@ -190,7 +190,7 @@ export default function FileDetails(props: Props) { className={styles.primaryButton} iconName="OpenInNewWindow" text="Open file" - title="Open file" + title="Open file by selected method" menuItems={openWithMenuItems} /> diff --git a/packages/core/components/Modal/BaseModal/index.tsx b/packages/core/components/Modal/BaseModal/index.tsx index 7ac78773..3d15e492 100644 --- a/packages/core/components/Modal/BaseModal/index.tsx +++ b/packages/core/components/Modal/BaseModal/index.tsx @@ -8,6 +8,7 @@ import { TertiaryButton } from "../../Buttons"; interface BaseModalProps { body: React.ReactNode; footer?: React.ReactNode; + isDraggable?: boolean; onDismiss?: () => void; title?: string; } @@ -23,7 +24,7 @@ const DRAG_OPTIONS: IDragOptions = { * for plugging content into. */ export default function BaseModal(props: BaseModalProps) { - const { body, footer, title, onDismiss } = props; + const { body, footer, isDraggable, title, onDismiss } = props; const titleId = "base-modal-title"; return ( @@ -31,7 +32,7 @@ export default function BaseModal(props: BaseModalProps) { isOpen onDismiss={onDismiss} containerClassName={styles.container} - dragOptions={DRAG_OPTIONS} + dragOptions={isDraggable ? DRAG_OPTIONS : undefined} titleAriaId={titleId} overlay={{ className: styles.overlay }} > diff --git a/packages/core/components/Modal/CodeSnippet/index.tsx b/packages/core/components/Modal/CodeSnippet/index.tsx index a8c3c409..dec11ee2 100644 --- a/packages/core/components/Modal/CodeSnippet/index.tsx +++ b/packages/core/components/Modal/CodeSnippet/index.tsx @@ -108,5 +108,5 @@ export default function CodeSnippet({ onDismiss }: ModalProps) { ); - return ; + return ; } diff --git a/packages/core/components/Modal/CopyFileManifest/index.tsx b/packages/core/components/Modal/CopyFileManifest/index.tsx index 058764bd..7bb5a449 100644 --- a/packages/core/components/Modal/CopyFileManifest/index.tsx +++ b/packages/core/components/Modal/CopyFileManifest/index.tsx @@ -182,14 +182,12 @@ export default function CopyFileManifest({ onDismiss }: ModalProps) { className={styles.cancelButton} onClick={onDismiss} text="CANCEL" - title="" /> } diff --git a/packages/core/components/Modal/MetadataManifest/index.tsx b/packages/core/components/Modal/MetadataManifest/index.tsx index 38420323..cd29499b 100644 --- a/packages/core/components/Modal/MetadataManifest/index.tsx +++ b/packages/core/components/Modal/MetadataManifest/index.tsx @@ -64,7 +64,6 @@ export default function MetadataManifest({ onDismiss }: ModalProps) { iconName="Download" onClick={onDownload} text="DOWNLOAD" - title="Download" /> } diff --git a/packages/core/components/Modal/SmallScreenWarning/index.tsx b/packages/core/components/Modal/SmallScreenWarning/index.tsx index a0eeeadf..b48fd22b 100644 --- a/packages/core/components/Modal/SmallScreenWarning/index.tsx +++ b/packages/core/components/Modal/SmallScreenWarning/index.tsx @@ -37,8 +37,8 @@ export default function SmallScreenWarning({ onDismiss }: ModalProps) { } onDismiss={_onDismiss} diff --git a/packages/core/components/Modal/SmallScreenWarning/test/SmallScreenWarning.test.tsx b/packages/core/components/Modal/SmallScreenWarning/test/SmallScreenWarning.test.tsx index ce446e63..2d250431 100644 --- a/packages/core/components/Modal/SmallScreenWarning/test/SmallScreenWarning.test.tsx +++ b/packages/core/components/Modal/SmallScreenWarning/test/SmallScreenWarning.test.tsx @@ -45,7 +45,7 @@ describe("", () => { fireEvent.click(checkbox); await logicMiddleware.whenComplete(); - const closeButton = await findByTestId("base-button-OK"); + const closeButton = await findByTestId("base-button-small-screen-ok"); fireEvent.click(closeButton); await logicMiddleware.whenComplete(); @@ -76,7 +76,7 @@ describe("", () => { fireEvent.click(checkbox); // uncheck await logicMiddleware.whenComplete(); - const closeButton = await findByTestId("base-button-OK"); + const closeButton = await findByTestId("base-button-small-screen-ok"); fireEvent.click(closeButton); await logicMiddleware.whenComplete(); diff --git a/packages/core/components/NumberRangePicker/index.tsx b/packages/core/components/NumberRangePicker/index.tsx index 40da2ff0..fe603a12 100644 --- a/packages/core/components/NumberRangePicker/index.tsx +++ b/packages/core/components/NumberRangePicker/index.tsx @@ -143,6 +143,7 @@ export default function NumberRangePicker(props: NumberRangePickerProps) { title="Reset filter" onClick={onResetSearch} iconName="Clear" + id="reset-filter" /> diff --git a/packages/core/components/NumberRangePicker/test/NumberRangePicker.test.tsx b/packages/core/components/NumberRangePicker/test/NumberRangePicker.test.tsx index f8830c19..bb243b82 100644 --- a/packages/core/components/NumberRangePicker/test/NumberRangePicker.test.tsx +++ b/packages/core/components/NumberRangePicker/test/NumberRangePicker.test.tsx @@ -64,7 +64,7 @@ describe("", () => { // Hit reset expect(onSearch.called).to.equal(false); - fireEvent.click(getByTestId("base-button-Reset filter")); + fireEvent.click(getByTestId("base-button-reset-filter")); expect(onSearch.called).to.equal(true); // Should reset to min and max values diff --git a/packages/core/components/StatusMessage/index.tsx b/packages/core/components/StatusMessage/index.tsx index 0fc3501e..f2416614 100644 --- a/packages/core/components/StatusMessage/index.tsx +++ b/packages/core/components/StatusMessage/index.tsx @@ -58,12 +58,7 @@ export default function StatusMessage() { let cancelButton; if (onCancel) { cancelButton = ( - + ); } else onDismiss = () => diff --git a/packages/core/components/TutorialTooltip/index.tsx b/packages/core/components/TutorialTooltip/index.tsx index b3bb5406..7fa1b97c 100644 --- a/packages/core/components/TutorialTooltip/index.tsx +++ b/packages/core/components/TutorialTooltip/index.tsx @@ -79,6 +79,7 @@ export default function TutorialTooltip() { iconName="CaretSolidLeft" onClick={() => setTutorialStepIndex(previousStepIndex)} title="Previous step" + id="tutorial-prev" /> diff --git a/packages/core/components/TutorialTooltip/test/TutorialTooltip.test.tsx b/packages/core/components/TutorialTooltip/test/TutorialTooltip.test.tsx index 714d66ae..19c68c47 100644 --- a/packages/core/components/TutorialTooltip/test/TutorialTooltip.test.tsx +++ b/packages/core/components/TutorialTooltip/test/TutorialTooltip.test.tsx @@ -42,14 +42,14 @@ describe("", () => { expect(() => getByText(stepTwoMessage)).to.throw(); // Act - fireEvent.click(getByTestId("base-button-Next step")); + fireEvent.click(getByTestId("base-button-tutorial-next")); // Assert expect(getByText(stepTwoMessage)).to.exist; expect(() => getByText(stepOneMessage)).to.throw(); // Act - fireEvent.click(getByTestId("base-button-Previous step")); + fireEvent.click(getByTestId("base-button-tutorial-prev")); // Assert expect(getByText(stepOneMessage)).to.exist; @@ -86,7 +86,7 @@ describe("", () => { expect(getByText(formattedTutorial)).to.exist; // Act - fireEvent.click(getByTestId("base-button-Finished")); + fireEvent.click(getByTestId("base-button-tutorial-next")); // Assert expect(() => getByText(formattedTutorial)).to.throw(); diff --git a/packages/web/src/components/DatasetDetails/index.tsx b/packages/web/src/components/DatasetDetails/index.tsx index cf9f6150..0afffcc0 100644 --- a/packages/web/src/components/DatasetDetails/index.tsx +++ b/packages/web/src/components/DatasetDetails/index.tsx @@ -106,7 +106,7 @@ export default function DatasetDetails(props: DatasetDetailsProps) { props.onLoadDataset(datasetDetails)} /> diff --git a/packages/web/src/components/DatasetDetails/test/DatasetDetails.test.tsx b/packages/web/src/components/DatasetDetails/test/DatasetDetails.test.tsx index d8f45cf4..9922e0e5 100644 --- a/packages/web/src/components/DatasetDetails/test/DatasetDetails.test.tsx +++ b/packages/web/src/components/DatasetDetails/test/DatasetDetails.test.tsx @@ -253,11 +253,11 @@ describe("", () => { ); // consistency checks, button exists & no actions fired - expect(getByLabelText("Load dataset")).to.exist; + expect(getByLabelText(/^Load dataset/)).to.exist; expect(onLoadDataset.called).to.equal(false); // Act - fireEvent.click(getByLabelText("Load dataset")); + fireEvent.click(getByLabelText(/^Load dataset/)); // Assert expect(onLoadDataset.called).to.equal(true); diff --git a/packages/web/src/components/Header/index.tsx b/packages/web/src/components/Header/index.tsx index 7a27124e..6e04b0a5 100644 --- a/packages/web/src/components/Header/index.tsx +++ b/packages/web/src/components/Header/index.tsx @@ -63,7 +63,7 @@ export default function Header() { diff --git a/packages/web/src/components/Home/index.tsx b/packages/web/src/components/Home/index.tsx index 017a38de..cc699eaa 100644 --- a/packages/web/src/components/Home/index.tsx +++ b/packages/web/src/components/Home/index.tsx @@ -26,7 +26,7 @@ export default function Home() { @@ -41,7 +41,7 @@ export default function Home() {