diff --git a/plugins/github-release-manager/src/components/ResponseStepDialog/LinearProgressWithLabel.test.tsx b/plugins/github-release-manager/src/components/ResponseStepDialog/LinearProgressWithLabel.test.tsx
new file mode 100644
index 0000000000..a043758209
--- /dev/null
+++ b/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(
+ ,
+ );
+
+ 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(
+ ,
+ );
+
+ 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(
+ ,
+ );
+
+ 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(
+ ,
+ );
+
+ expect(container.innerHTML).toContain('100%');
+ expect(container.innerHTML).toContain(ICONS.SUCCESS);
+ expect(container.innerHTML).not.toContain(ICONS.FAILURE);
+ expect(container.innerHTML).not.toContain(`${progress}%`);
+ });
+});
diff --git a/plugins/github-release-manager/src/components/ResponseStepDialog/LinearProgressWithLabel.tsx b/plugins/github-release-manager/src/components/ResponseStepDialog/LinearProgressWithLabel.tsx
index a5091021e7..62d14e771e 100644
--- a/plugins/github-release-manager/src/components/ResponseStepDialog/LinearProgressWithLabel.tsx
+++ b/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 {' 🔥 '};
- return {' 🚀 '};
+ if (status === STATUSES.FAILURE) return {` ${ICONS.FAILURE} `};
+ return {` ${ICONS.SUCCESS} `};
};
return (
@@ -61,12 +69,14 @@ export function LinearProgressWithLabel(props: {
@@ -77,3 +87,7 @@ export function LinearProgressWithLabel(props: {
);
}
+
+export const testables = {
+ ICONS,
+};
diff --git a/plugins/github-release-manager/src/test-helpers/test-ids.test.ts b/plugins/github-release-manager/src/test-helpers/test-ids.test.ts
index 091f2ccb90..5adcebc3d9 100644
--- a/plugins/github-release-manager/src/test-helpers/test-ids.test.ts
+++ b/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",
diff --git a/plugins/github-release-manager/src/test-helpers/test-ids.ts b/plugins/github-release-manager/src/test-helpers/test-ids.ts
index e7d3240a8b..1beb6aec10 100644
--- a/plugins/github-release-manager/src/test-helpers/test-ids.ts
+++ b/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',
},
};