fix/bug-snowflake-key-pair-auth-private-key-does-not-get-removed-upon…

app/client/src/components/formControls/FilePickerControl.test.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Provider } from "react-redux";
+import { combineReducers, createStore } from "redux";
+import { ThemeProvider } from "styled-components";
+import { reducer as formReducer } from "redux-form";
+import { theme } from "constants/DefaultTheme"; // Adjust the path as necessary
+import { BrowserRouter as Router } from "react-router-dom";
+import FilePickerControl, { RenderFilePicker } from "./FilePickerControl"; // Adjust the path as necessary
+import { Field, reduxForm } from "redux-form";
+
+const rootReducer = combineReducers({
+ form: formReducer,
+});
+
+const mockStore = createStore(rootReducer);
+
+const mockInput = {
+ value: {},
+ onChange: jest.fn(),
+};
+
+const mockProps = {
+ input: mockInput,
+ meta: {},
+ disabled: false,
+ onChange: jest.fn(),
+};
+
+const TestForm = reduxForm({ form: "testForm" })(() => (
+ <Field component={RenderFilePicker} name="filePicker" {...mockProps} />
+));
+
+const renderComponent = () =>
+ render(
+ <Provider store={mockStore}>
+ <Router>
+ <ThemeProvider theme={theme}>
+ <TestForm />
+ </ThemeProvider>
+ </Router>
+ </Provider>
+ );
+
+describe("FilePickerControl Component", () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ test("renders the component", () => {
+ renderComponent();
+ expect(screen.getByText("Select")).toBeInTheDocument();
+ });
+
+ test("selects a file and triggers onChange", async () => {
+ renderComponent();
+
+ const file = new File(["file contents"], "example.txt", {
+ type: "text/plain",
+ });
+
+ userEvent.click(screen.getByText("Select"));
+ userEvent.click(screen.getByText("Browse"));
+
+ const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+
+ await act(async () => {
+ if (fileInput) {
+ console.log('File input found, uploading file...');
+ await userEvent.upload(fileInput, file);
+ console.log('File uploaded.');
+ } else {
+ throw new Error("File input not found");
+ }
+ });
+
+ await waitFor(() => {
+ console.log('Waiting for file name to appear...');
+ expect(screen.getByText("example.txt")).toBeInTheDocument();
+ });
+
+ });
+});

app/client/src/components/formControls/FilePickerControl.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useState } from "react";
+import { useState, useEffect, useCallback } from "react";
 import styled from "styled-components";
 import type { ControlProps } from "./BaseControl";
 import BaseControl from "./BaseControl";
@@ -8,7 +8,6 @@ import type { SetProgress } from "@appsmith/ads-old";
 import { FilePickerV2, FileType } from "@appsmith/ads-old";
 import type { WrappedFieldInputProps, WrappedFieldMetaProps } from "redux-form";
 import { Field } from "redux-form";
-import { useEffect, useCallback } from "react";
 import { replayHighlightClass } from "globalStyles/portals";
 import { Button, Modal, ModalBody, ModalContent } from "@appsmith/ads";
 
@@ -48,7 +47,7 @@ type RenderFilePickerProps = FilePickerControlProps & {
  onChange: (event: any) => void;
 };
 
-function RenderFilePicker(props: RenderFilePickerProps) {
+export function RenderFilePicker(props: RenderFilePickerProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [appFileToBeUploaded, setAppFileToBeUploaded] = useState<{
  file: File;
@@ -84,6 +83,9 @@ function RenderFilePicker(props: RenderFilePickerProps) {
  });
  };
  }
+ else{
+ props.input?.onChange("");
+ }
  }, [appFileToBeUploaded]);
 
  return (