Add tests for LinearProgressWithLabel & a test id for it

Signed-off-by: Erik Engervall <erik.engervall@gmail.com>

plugins/github-release-manager/src/components/ResponseStepDialog/LinearProgressWithLabel.test.tsx

@@ -0,0 +1,104 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { LinearProgressWithLabel, testables } from './LinearProgressWithLabel';
+import { TEST_IDS } from '../../test-helpers/test-ids';
+
+const { ICONS } = testables;
+
+describe('LinearProgressWithLabel', () => {
+  it('should render 50% progress without CompletionEmoji', () => {
+    const progress = 50;
+
+    const { container, getByTestId } = render(
+      <LinearProgressWithLabel
+        progress={progress}
+        responseSteps={[
+          { message: 'mock_response_step_message', icon: 'success' },
+        ]}
+      />,
+    );
+
+    expect(
+      getByTestId(TEST_IDS.components.linearProgressWithLabel).getAttribute(
+        'style',
+      ),
+    ).toContain(`font-size: 141%`);
+    expect(container.innerHTML).toContain(`${progress}%`);
+    expect(container.innerHTML).not.toContain(ICONS.SUCCESS);
+    expect(container.innerHTML).not.toContain(ICONS.FAILURE);
+  });
+
+  it('should render 100% progress with CompletionEmoji for success', () => {
+    const progress = 100;
+
+    const { container, getByTestId } = render(
+      <LinearProgressWithLabel
+        progress={progress}
+        responseSteps={[
+          { message: 'mock_response_step_message', icon: 'success' },
+        ]}
+      />,
+    );
+
+    expect(
+      getByTestId(TEST_IDS.components.linearProgressWithLabel).getAttribute(
+        'style',
+      ),
+    ).toContain(`font-size: 157%`);
+    expect(container.innerHTML).toContain(`${progress}%`);
+    expect(container.innerHTML).toContain(ICONS.SUCCESS);
+    expect(container.innerHTML).not.toContain(ICONS.FAILURE);
+  });
+
+  it('should render 100% progress with CompletionEmoji for failure if at least one failed response step is present', () => {
+    const progress = 100;
+
+    const { container } = render(
+      <LinearProgressWithLabel
+        progress={progress}
+        responseSteps={[
+          { message: 'does not matter', icon: 'success' },
+          { message: 'mock_response_step_message', icon: 'failure' },
+          { message: 'does not matter', icon: 'success' },
+        ]}
+      />,
+    );
+
+    expect(container.innerHTML).toContain(`${progress}%`);
+    expect(container.innerHTML).toContain(ICONS.FAILURE);
+    expect(container.innerHTML).not.toContain(ICONS.SUCCESS);
+  });
+
+  it('should round > 100 progress to 100', () => {
+    const progress = 101;
+
+    const { container } = render(
+      <LinearProgressWithLabel
+        progress={progress}
+        responseSteps={[{ message: 'mock_response_step_message' }]}
+      />,
+    );
+
+    expect(container.innerHTML).toContain('100%');
+    expect(container.innerHTML).toContain(ICONS.SUCCESS);
+    expect(container.innerHTML).not.toContain(ICONS.FAILURE);
+    expect(container.innerHTML).not.toContain(`${progress}%`);
+  });
+});

plugins/github-release-manager/src/components/ResponseStepDialog/LinearProgressWithLabel.tsx

@@ -18,6 +18,7 @@ import React from 'react';
 import { Box, LinearProgress, Typography } from '@material-ui/core';
 
 import { ResponseStep } from '../../types/types';
+import { TEST_IDS } from '../../test-helpers/test-ids';
 
 const STATUSES = {
   FAILURE: 'FAILURE',
@@ -25,6 +26,13 @@ const STATUSES = {
   SUCCESS: 'SUCCESS',
 } as const;
 
+const ICONS = {
+  SUCCESS: '🚀',
+  FAILURE: '🔥',
+};
+
+const getFontSize = (progress: number) => 125 + Math.ceil(progress / Math.PI);
+
 export function LinearProgressWithLabel(props: {
   progress: number;
   responseSteps: ResponseStep[];
@@ -42,8 +50,8 @@ export function LinearProgressWithLabel(props: {
 
   const CompletionEmoji = () => {
     if (status === STATUSES.ONGOING) return null;
-    if (status === STATUSES.FAILURE) return <span>{' 🔥 '}</span>;
-    return <span>{' 🚀 '}</span>;
+    if (status === STATUSES.FAILURE) return <span>{` ${ICONS.FAILURE} `}</span>;
+    return <span>{` ${ICONS.SUCCESS} `}</span>;
   };
 
   return (
@@ -61,12 +69,14 @@ export function LinearProgressWithLabel(props: {
       <Box>
         <Typography
           variant="body2"
+          data-testid={TEST_IDS.components.linearProgressWithLabel}
           style={{
             marginTop: 8,
             minWidth: 35,
             color: failure ? '#ff0033' : '#1DB954',
             fontWeight: 'bold',
-            fontSize: `${125 + Math.ceil(progress / 3)}%`,
+            fontSize: `${getFontSize(progress)}%`,
+            transition: 'font-size 250ms ease',
           }}
         >
           <CompletionEmoji />
@@ -77,3 +87,7 @@ export function LinearProgressWithLabel(props: {
     </Box>
   );
 }
+
+export const testables = {
+  ICONS,
+};

plugins/github-release-manager/src/test-helpers/test-ids.test.ts

@@ -35,6 +35,7 @@ describe('test-ids', () => {
               "next": "grm--differ-next",
             },
             "divider": "grm--divider",
+            "linearProgressWithLabel": "grm--linear-progress-with-label",
             "noLatestRelease": "grm--no-latest-release",
             "responseStepListDialogContent": "grm--response-step-list--dialog-content",
             "responseStepListItem": "grm--response-step-list-item",

plugins/github-release-manager/src/test-helpers/test-ids.ts

@@ -77,5 +77,6 @@ export const TEST_IDS = {
         versioning: 'grm--differ--icons--versioning',
       },
     },
+    linearProgressWithLabel: 'grm--linear-progress-with-label',
   },
 };