From d44b4c5f1da2b7e84ad86c73cfde05ca030595c1 Mon Sep 17 00:00:00 2001
From: Levi Harrison <git@leviharrison.dev>
Date: Wed, 9 Jun 2021 12:25:47 -0400
Subject: [PATCH] React UI: Starting Screen Progress Bar Should Start at 0
 (#8908)

* Removed min value

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Added tests

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Set min value

Signed-off-by: Levi Harrison <git@leviharrison.dev>
---
 .../src/pages/starting/Starting.test.tsx      | 45 +++++++++++++++++++
 .../react-app/src/pages/starting/Starting.tsx |  4 +-
 2 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 web/ui/react-app/src/pages/starting/Starting.test.tsx

diff --git a/web/ui/react-app/src/pages/starting/Starting.test.tsx b/web/ui/react-app/src/pages/starting/Starting.test.tsx
new file mode 100644
index 000000000..80fc81430
--- /dev/null
+++ b/web/ui/react-app/src/pages/starting/Starting.test.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { WALReplayData } from '../../types/types';
+import { StartingContent } from './Starting';
+import { Progress } from 'reactstrap';
+
+describe('Starting', () => {
+  describe('progress bar', () => {
+    it('does not show when replay not started', () => {
+      const status: WALReplayData = {
+        min: 0,
+        max: 0,
+        current: 0,
+      };
+      const starting = shallow(<StartingContent status={status} isUnexpected={false} />);
+      const progress = starting.find(Progress);
+      expect(progress).toHaveLength(0);
+    });
+
+    it('renders progress correctly', () => {
+      const status: WALReplayData = {
+        min: 0,
+        max: 20,
+        current: 1,
+      };
+      const starting = shallow(<StartingContent status={status} isUnexpected={false} />);
+      const progress = starting.find(Progress);
+      expect(progress.prop('value')).toBe(2);
+      expect(progress.prop('min')).toBe(0);
+      expect(progress.prop('max')).toBe(21);
+    });
+
+    it('shows done when replay done', () => {
+      const status: WALReplayData = {
+        min: 0,
+        max: 20,
+        current: 20,
+      };
+      const starting = shallow(<StartingContent status={status} isUnexpected={false} />);
+      const progress = starting.find(Progress);
+      expect(progress.prop('value')).toBe(21);
+      expect(progress.prop('color')).toBe('success');
+    });
+  });
+});
diff --git a/web/ui/react-app/src/pages/starting/Starting.tsx b/web/ui/react-app/src/pages/starting/Starting.tsx
index 24d45e1fb..936fea050 100644
--- a/web/ui/react-app/src/pages/starting/Starting.tsx
+++ b/web/ui/react-app/src/pages/starting/Starting.tsx
@@ -31,9 +31,9 @@ export const StartingContent: FC<StartingContentProps> = ({ status, isUnexpected
             </p>
             <Progress
               animated
-              value={status?.current}
+              value={status?.current! - status?.min! + 1}
               min={status?.min}
-              max={status?.max}
+              max={status?.max! - status?.min! + 1}
               color={status?.max === status?.current ? 'success' : undefined}
               style={{ width: '10%', margin: 'auto' }}
             />