feat(client): completion modal progress bar (#37775)

* feat: add progress bar to completion modal * feat: add stuff * feat: finalize-layout-and-make-responsive * feat: add feature to all challenge templates * git test * fix: remove challenge title + enlarge top message * fix: move graphql query to completion modal * fix: remove some previous additions * fix: optimize functions * fix: removed isRequired flag * feat: add animation * feat: add interval to state + clear on unmount * fix: change around interval function * feat: make bar fill non-linearly * Update client/src/templates/Challenges/components/CompletionModal.js Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update client/src/templates/Challenges/components/CompletionModal.js Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update client/src/templates/Challenges/components/CompletionModal.js Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update client/src/templates/Challenges/redux/index.js Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update client/src/templates/Challenges/redux/index.js Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update client/src/templates/Challenges/redux/index.js Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update client/src/templates/Challenges/redux/index.js Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update client/src/templates/Challenges/components/CompletionModalBody.js Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update client/src/templates/Challenges/components/CompletionModalBody.js Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update client/src/templates/Challenges/components/CompletionModalBody.js Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: remove bracket * fix: tweak animation + change to pure component * fix: remove comment * Update client/src/templates/Challenges/components/CompletionModalBody.js Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update client/src/templates/Challenges/components/CompletionModalBody.js Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: remove animateProgress * feat: add tests for progress bar * feat: add working tests Co-authored-by: ojeytonwilliams <ojeytonwilliams@gmail.com> * fix: add formatting * fix: use content selectors where possible * fix: make progress bar show 0 for unauthed users
2019-11-26 09:15:59 -06:00
parent 989bbfa8c6
commit a8928739dd
12 changed files with 512 additions and 17 deletions
--- a/client/src/templates/Challenges/components/CompletionModal.test.js
+++ b/client/src/templates/Challenges/components/CompletionModal.test.js
@@ -0,0 +1,47 @@
+/* global expect */
+
+import '@testing-library/jest-dom/extend-expect';
+
+import { getCompletedPercent } from './CompletionModal';
+
+const completedChallengesIds = ['1', '3', '5'],
+  currentBlockIds = ['1', '3', '5', '7'],
+  id = '7',
+  fakeId = '12345',
+  fakeCompletedChallengesIds = ['1', '3', '5', '7', '8'];
+
+describe('<CompletionModal />', () => {
+  describe('getCompletedPercent', () => {
+    it('returns 0 if no challenges have been completed', () => {
+      expect(getCompletedPercent([], currentBlockIds, fakeId)).toBe(0);
+    });
+
+    it('returns 25 if one out of four challenges are complete', () => {
+      expect(getCompletedPercent([], currentBlockIds, currentBlockIds[1])).toBe(
+        25
+      );
+    });
+
+    it('returns 75 if three out of four challenges are complete', () => {
+      expect(
+        getCompletedPercent(
+          completedChallengesIds,
+          currentBlockIds,
+          completedChallengesIds[0]
+        )
+      ).toBe(75);
+    });
+
+    it('returns 100 if all challenges have been completed', () => {
+      expect(
+        getCompletedPercent(completedChallengesIds, currentBlockIds, id)
+      ).toBe(100);
+    });
+
+    it('returns 100 if more challenges have been complete than exist', () => {
+      expect(
+        getCompletedPercent(fakeCompletedChallengesIds, currentBlockIds, id)
+      ).toBe(100);
+    });
+  });
+});