File Upload Progress Indicator

Overview

Build a React application that displays a simulated file upload interface with an automatic progress indicator at the top of the page. The loading indicator should automatically progress while the upload is in progress, and allow manual completion when the upload finishes.

Requirements

Component Structure

Create a component called FileUploadDemo that:

1. Displays a "Start Upload" button
2. Shows an automatic loading indicator at the top of the page when upload begins
3. Simulates a file upload that takes 5 seconds
4. Displays the text "Uploading file..." while the upload is in progress
5. Shows "Upload Complete!" when finished
6. Provides a "Reset" button after completion to try again

Loading Indicator Behavior

The top loading bar should:

1. Start automatically when the upload button is clicked
2. Progress continuously and automatically (not require manual updates)
3. Never reach 100% on its own - it should keep animating until manually completed
4. Complete and reach 100% when the simulated upload finishes (after 5 seconds)
5. Be positioned at the very top of the page

Interaction Flow

1. Initially, only the "Start Upload" button is visible
2. When clicked, the loading bar starts progressing automatically
3. The text "Uploading file..." appears
4. After 5 seconds, the upload completes automatically
5. The loading bar should reach 100% and hide
6. The text changes to "Upload Complete!"
7. A "Reset" button appears to restart the demo

Implementation Files

Create the following files:

• FileUploadDemo.jsx - Main component implementation
• FileUploadDemo.test.js - Test suite

Dependencies { .dependencies }

react { .dependency }

Provides the UI framework.

react-top-loading-bar { .dependency }

Provides the loading indicator component.

@testing-library/react { .dependency }

Provides testing utilities for React components.

Test Cases

Test 1: Loading bar starts automatically @test

test('loading bar starts automatically when upload begins', () => {
  render(<FileUploadDemo />);

  const startButton = screen.getByText('Start Upload');
  fireEvent.click(startButton);

  // The loading bar should be present and animating
  expect(screen.getByText('Uploading file...')).toBeInTheDocument();
});

Test 2: Upload completes after delay @test

test('upload completes after 5 seconds', async () => {
  jest.useFakeTimers();
  render(<FileUploadDemo />);

  const startButton = screen.getByText('Start Upload');
  fireEvent.click(startButton);

  expect(screen.getByText('Uploading file...')).toBeInTheDocument();

  act(() => {
    jest.advanceTimersByTime(5000);
  });

  await waitFor(() => {
    expect(screen.getByText('Upload Complete!')).toBeInTheDocument();
  });

  jest.useRealTimers();
});

Test 3: Reset functionality works @test

test('reset button appears after completion and restarts demo', async () => {
  jest.useFakeTimers();
  render(<FileUploadDemo />);

  // Start upload
  fireEvent.click(screen.getByText('Start Upload'));

  // Complete upload
  act(() => {
    jest.advanceTimersByTime(5000);
  });

  await waitFor(() => {
    expect(screen.getByText('Reset')).toBeInTheDocument();
  });

  // Click reset
  fireEvent.click(screen.getByText('Reset'));

  expect(screen.getByText('Start Upload')).toBeInTheDocument();

  jest.useRealTimers();
});

Success Criteria

The implementation should:

• Use an automatic, self-progressing loading indicator
• Start the loading indicator when the upload begins
• Allow the loading bar to progress on its own without manual intervention
• Manually trigger completion when the upload finishes
• Provide a smooth user experience with appropriate state transitions