Skip to content

Commit

Permalink
Merge pull request #471 from CBIIT/CRDCDH-1614
Browse files Browse the repository at this point in the history 
CRDCDH-1614 Misc. CLI Config File dialog updates
  • Loading branch information
@Alejandro-Vega
Alejandro-Vega authored Sep 23, 2024
2 parents eaf42bb + 7829a0f commit 01849b1
Show file tree
Hide file tree
Showing 4 changed files with 266 additions and 22 deletions.
71 changes: 67 additions & 4 deletions src/components/DataSubmissions/DataUpload.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,9 @@ describe("Basic Functionality", () => {
// Open the dialog
userEvent.click(getByTestId("uploader-cli-config-button"));

// Skip filling the fields and click the download button
userEvent.type(getByTestId("uploader-config-dialog-input-data-folder"), "test-folder");
userEvent.type(getByTestId("uploader-config-dialog-input-manifest"), "test-manifest");

userEvent.click(getByText("Download"));

await waitFor(() => {
Expand Down Expand Up @@ -185,7 +187,9 @@ describe("Basic Functionality", () => {
// Open the dialog
userEvent.click(getByTestId("uploader-cli-config-button"));

// Skip filling the fields and click the download button
userEvent.type(getByTestId("uploader-config-dialog-input-data-folder"), "test-folder");
userEvent.type(getByTestId("uploader-config-dialog-input-manifest"), "test-manifest");

userEvent.click(getByText("Download"));

await waitFor(() => {
Expand All @@ -197,6 +201,61 @@ describe("Basic Functionality", () => {
);
});
});

it("should hide the CLI Configuration dialog when onClose is called", async () => {
const { getByTestId, findAllByRole, queryByRole } = render(
<TestParent mocks={[]}>
<DataUpload
submission={{
...baseSubmission,
_id: "hide-config-dialog-on-close",
dataType: "Metadata and Data Files",
}}
/>
</TestParent>
);

// Open the dialog
userEvent.click(getByTestId("uploader-cli-config-button"));

const dialog = await findAllByRole("presentation");

expect(dialog[1]).toBeVisible();

// Close the dialog
userEvent.click(dialog[1]);

await waitFor(() => {
expect(queryByRole("dialog")).not.toBeInTheDocument();
});
});

it("should hide the Uploader CLI dialog when onClose is called", async () => {
const { getByTestId, findAllByRole, queryByRole } = render(
<TestParent mocks={[]}>
<DataUpload
submission={{
...baseSubmission,
_id: "hide-cli-dialog-on-close",
}}
/>
</TestParent>
);

// Open the dialog
userEvent.click(getByTestId("uploader-cli-download-button"));

const dialog = await findAllByRole("presentation");

expect(dialog[1]).toBeVisible();

// Close the dialog
userEvent.click(dialog[1]);

await waitFor(() => {
expect(queryByRole("dialog")).not.toBeInTheDocument();
});
});
});

describe("Implementation Requirements", () => {
Expand Down Expand Up @@ -334,7 +393,9 @@ describe("Implementation Requirements", () => {
userEvent.click(getByTestId("uploader-cli-config-button"));
});

// Skip filling the fields and click the download button
userEvent.type(getByTestId("uploader-config-dialog-input-data-folder"), "test-folder");
userEvent.type(getByTestId("uploader-config-dialog-input-manifest"), "test-manifest");

// eslint-disable-next-line testing-library/no-unnecessary-act -- RHF is throwing an error without act
await act(async () => {
userEvent.click(getByText("Download"));
Expand Down Expand Up @@ -380,7 +441,9 @@ describe("Implementation Requirements", () => {
// Open the dialog
userEvent.click(getByTestId("uploader-cli-config-button"));

// Skip filling the fields and click the download button
userEvent.type(getByTestId("uploader-config-dialog-input-data-folder"), "test-folder");
userEvent.type(getByTestId("uploader-config-dialog-input-manifest"), "test-manifest");

userEvent.click(getByText("Download"));

await waitFor(() => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/DataSubmissions/DataUpload.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export const DataUpload: FC<Props> = ({ submission }: Props) => {
};

const Actions: ReactElement = useMemo(() => {
if (submission?.dataType === "Metadata Only") {
if (submission?.dataType !== "Metadata and Data Files") {
return null;
}

Expand Down
150 changes: 149 additions & 1 deletion src/components/UploaderConfigDialog/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ describe("Basic Functionality", () => {
});
});

it("should call the onDownload function when the 'Download' button is clicked", async () => {
it("should call the onDownload function when the 'Download' button is clicked with a valid form", async () => {
const { getByTestId } = render(
<TestParent>
<UploaderConfigDialog open onDownload={mockDownload} onClose={mockOnClose} />
Expand All @@ -107,6 +107,9 @@ describe("Basic Functionality", () => {

expect(mockDownload).not.toHaveBeenCalled();

userEvent.type(getByTestId("uploader-config-dialog-input-data-folder"), "test-folder");
userEvent.type(getByTestId("uploader-config-dialog-input-manifest"), "test-manifest");

userEvent.click(getByTestId("uploader-config-dialog-download-button"));

await waitFor(() => {
Expand Down Expand Up @@ -154,4 +157,149 @@ describe("Basic Functionality", () => {
expect(manifestInput).toHaveValue("");
});
});

it("should trim whitespace from the input fields before submitting", async () => {
const { getByTestId } = render(
<TestParent>
<UploaderConfigDialog open onDownload={mockDownload} onClose={mockOnClose} />
</TestParent>
);

userEvent.type(
getByTestId("uploader-config-dialog-input-data-folder"),
"C:/Users/me/my-data-folder "
);
userEvent.type(
getByTestId("uploader-config-dialog-input-manifest"),
"C:/Users/me/my-manifest.tsv "
);

userEvent.click(getByTestId("uploader-config-dialog-download-button"));

await waitFor(() => {
expect(mockDownload).toHaveBeenCalledWith({
dataFolder: "C:/Users/me/my-data-folder",
manifest: "C:/Users/me/my-manifest.tsv",
});
});
});
});

describe("Implementation Requirements", () => {
const mockDownload = jest.fn();
const mockOnClose = jest.fn();

beforeEach(() => {
jest.resetAllMocks();
});

it("should not submit the form if any of the inputs are invalid", async () => {
const { getByTestId, queryAllByText } = render(
<TestParent>
<UploaderConfigDialog open onDownload={mockDownload} onClose={mockOnClose} />
</TestParent>
);

userEvent.click(getByTestId("uploader-config-dialog-download-button"));

await waitFor(() => {
expect(queryAllByText(/This field is required/)).toHaveLength(2);
});

expect(mockDownload).not.toHaveBeenCalled();
});

it("should not accept whitespace-only input for the Data Files Folder", async () => {
const { getByTestId } = render(
<TestParent>
<UploaderConfigDialog open onDownload={mockDownload} onClose={mockOnClose} />
</TestParent>
);

userEvent.type(getByTestId("uploader-config-dialog-input-data-folder"), " ".repeat(10));
userEvent.type(
getByTestId("uploader-config-dialog-input-manifest"),
"C:/someUser/someFolder/someManifest.tsv"
);

userEvent.click(getByTestId("uploader-config-dialog-download-button"));

await waitFor(() => {
expect(getByTestId("uploader-config-dialog-error-data-folder")).toBeVisible();
expect(getByTestId("uploader-config-dialog-error-data-folder")).toHaveTextContent(
/This field is required/
);
});

expect(mockDownload).not.toHaveBeenCalled();
});

it("should not accept whitespace-only input for the Manifest File", async () => {
const { getByTestId } = render(
<TestParent>
<UploaderConfigDialog open onDownload={mockDownload} onClose={mockOnClose} />
</TestParent>
);

userEvent.type(
getByTestId("uploader-config-dialog-input-data-folder"),
"C:/someUser/someFolder/someDataFolder"
);
userEvent.type(getByTestId("uploader-config-dialog-input-manifest"), " ".repeat(10));

userEvent.click(getByTestId("uploader-config-dialog-download-button"));

await waitFor(() => {
expect(getByTestId("uploader-config-dialog-error-manifest")).toBeVisible();
expect(getByTestId("uploader-config-dialog-error-manifest")).toHaveTextContent(
/This field is required/
);
});

expect(mockDownload).not.toHaveBeenCalled();
});

it("should have a tooltip on the Data Files Folder input", async () => {
const { getByTestId, findByRole } = render(
<TestParent>
<UploaderConfigDialog open onDownload={mockDownload} onClose={mockOnClose} />
</TestParent>
);

userEvent.hover(getByTestId("data-folder-input-tooltip"));

const tooltip = await findByRole("tooltip");
expect(tooltip).toBeInTheDocument();
expect(tooltip).toHaveTextContent(
"Enter the full path for the Data Files folder on your local machine or S3 bucket"
);

userEvent.unhover(getByTestId("data-folder-input-tooltip"));

await waitFor(() => {
expect(tooltip).not.toBeVisible();
});
});

it("should have a tooltip on the Manifest File input", async () => {
const { getByTestId, findByRole } = render(
<TestParent>
<UploaderConfigDialog open onDownload={mockDownload} onClose={mockOnClose} />
</TestParent>
);

userEvent.hover(getByTestId("manifest-input-tooltip"));

const tooltip = await findByRole("tooltip");
expect(tooltip).toBeInTheDocument();
expect(tooltip).toHaveTextContent(
"Enter the full path for the File Manifest on your local machine or S3 bucket"
);

userEvent.unhover(getByTestId("manifest-input-tooltip"));

await waitFor(() => {
expect(tooltip).not.toBeVisible();
});
});
});
Loading

0 comments on commit 01849b1

Please sign in to comment.