From a32d221ab85197e23cfda1edc78c6d961e3a3801 Mon Sep 17 00:00:00 2001 From: Erik Engervall Date: Wed, 21 Apr 2021 22:19:06 +0200 Subject: [PATCH] Add tests for LinearProgressWithLabel & a test id for it Signed-off-by: Erik Engervall --- .../LinearProgressWithLabel.test.tsx | 104 ++++++++++++++++++ .../LinearProgressWithLabel.tsx | 20 +++- .../src/test-helpers/test-ids.test.ts | 1 + .../src/test-helpers/test-ids.ts | 1 + 4 files changed, 123 insertions(+), 3 deletions(-) create mode 100644 plugins/github-release-manager/src/components/ResponseStepDialog/LinearProgressWithLabel.test.tsx 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', }, };