put the ReactJS project within the frontend directory

.github/workflows/deploy.yml

@@ -1,48 +1,51 @@
 name: Deploy React App
 
 on:
-    push:
-        branches:
-            - dev # Adjust this to your main branch
+  push:
+    branches:
+      - dev # Adjust this to your main branch
 
 jobs:
-    deploy:
-        runs-on: dev
+  deploy:
+    runs-on: dev
+    defaults:
+      run:
+        working-directory: ./frontend
 
-        steps:
-            - name: Checkout repository
-              uses: actions/checkout@v2
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
 
-            - name: Set up Node.js
-              uses: actions/setup-node@v2
-              with:
-                  node-version: '18.17.1' # Adjust this to your required Node version
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "18.17.1" # Adjust this to your required Node version
 
-            - name: Install Pnpm
-              run: npm install -g pnpm
+      - name: Install Pnpm
+        run: npm install -g pnpm
 
-            - name: Install dependencies
-              run: pnpm install
+      - name: Install dependencies
+        run: pnpm install
 
-            - name: Format code
-              run: pnpm format
+      - name: Format code
+        run: pnpm format
 
-            - name: Lint code
-              run: pnpm oxlint
+      - name: Lint code
+        run: pnpm oxlint
 
-            - name: Run tests
-              run: pnpm run test
+      - name: Run tests
+        run: pnpm run test
 
-            - name: Build project
-              env:
-                  SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-              run: NODE_OPTIONS="--max-old-space-size=4096" pnpm run build
+      - name: Build project
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: NODE_OPTIONS="--max-old-space-size=4096" pnpm run build
 
-            - name: Postbuild project
-              run: pnpm run postbuild
+      - name: Postbuild project
+        run: pnpm run postbuild
 
-            - name: Deploy to server
-              run: |
-                  rm -rf /var/www/INSIGHTS/dist/*
-                  cp -r ./dist/* /var/www/INSIGHTS/dist
-                  sudo systemctl restart nginx
+      - name: Deploy to server
+        run: |
+          rm -rf /var/www/INSIGHTS/frontend/dist/*
+          cp -r ./frontend/dist/* /var/www/INSIGHTS/frontend/dist
+          sudo systemctl restart nginx

.gitignore

@@ -61,3 +61,6 @@ backup*
 
 # Coverage files
 .coverage
+
+stats.html
+start.sh

frontend/.prettierignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/

package.json → frontend/package.json

@@ -51,6 +51,7 @@
         "@testing-library/user-event": "^14.5.2",
         "@types/react": "^18.3.5",
         "@vitejs/plugin-react": "^4.3.1",
+        "@vitest/ui": "^2.1.1",
         "jsdom": "^25.0.0",
         "oxlint": "^0.9.5",
         "prettier": "^3.3.3",

src/__test__/AddImagesCarouselDialog.test.jsx → frontend/src/__test__/AddImagesCarouselDialog.test.jsx

@@ -53,34 +53,42 @@ describe('AddImagesCarouselDialog Component', () => {
         expect(screen.getByText('Actualizar')).toBeInTheDocument();
     });
 
-    it('handles form submission with valid data', async () => {
+    it('handles form submission with valid data using mocked FilePond', async () => {
         getApiUrl.mockReturnValue({ apiUrl: 'http://localhost/' });
         handleError.mockResolvedValue();
 
-        screen.debug();
+        // Render your component
         render(<AddImagesCarouselDialog {...defaultProps} />);
 
-        // Simulate opening the dropdown
+        // Simulate opening the dropdown (for "position" field)
         const positionInput = screen.getByLabelText(/Posición/i);
-        fireEvent.mouseDown(positionInput);
 
+        fireEvent.mouseDown(positionInput); // Open the dropdown
+
+        // Find the dropdown list within the document
         const listbox = within(screen.getByRole('listbox'));
+
+        // Select the first option (e.g., value "1")
         const firstOption = listbox.getByText('1');
-        fireEvent.click(firstOption);
 
-        // Directly access the input using container.querySelector
-        const fileInput = screen.getByTestId('filepond-input'); // Use testid from the mock
+        fireEvent.click(firstOption);
 
+        // Now, add the file using the mocked FilePond input
+        const fileInput = screen.getByTestId('filepond-input');
         const file = new File(['dummy content'], 'example.png', {
             type: 'image/png',
         });
-
         fireEvent.change(fileInput, { target: { files: [file] } });
 
+        // Add a console log to inspect the form elements
+        const form = screen.getByRole('form');
+        console.log(form);
+
         // Submit the form
         const submitButton = screen.getByText('Actualizar');
         fireEvent.click(submitButton);
 
+        // Assert form submission behavior
         expect(mockSetOpenAddDialog).toHaveBeenCalledWith(false);
     });