Minor: Fix count formatting (#17968)

* Remove the count formatting for single digit count * Localization changes * Add and fix existing tests for new changes * fix TestCaseFeed unit test
2025-11-03 12:08:31 +00:00 · 2024-09-25 13:31:58 +05:30 · 2024-09-25 13:31:58 +05:30 · 6541704cea
commit 6541704cea
parent 30a091b466
20 changed files with 133 additions and 47 deletions
--- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts
@ -281,7 +281,7 @@ test.describe('Activity feed', () => {
      page.locator(
        '[data-testid="message-container"] .active [data-testid="reply-count"]'
      )
-    ).toContainText('04 Replies');
+    ).toContainText('4 Replies');

    // Deleting last 2 comments from the Feed
    const feedReplies = page.locator(
@ -305,7 +305,7 @@ test.describe('Activity feed', () => {
      page.locator(
        '[data-testid="message-container"] .active [data-testid="reply-count"]'
      )
-    ).toContainText('02 Replies');
+    ).toContainText('2 Replies');
  });

  test('Update Description Task on Columns', async ({ page }) => {
@ -581,7 +581,7 @@ test.describe('Activity feed', () => {

    expect(
      page.locator(`${FIRST_FEED_SELECTOR} [data-testid="reply-count"]`)
-    ).toContainText('01 Reply');
+    ).toContainText('1 Reply');
  });
 });

--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/TestCaseFeed/TestCaseFeed.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/TestCaseFeed/TestCaseFeed.test.tsx
@ -30,9 +30,9 @@ describe('Test TestCaseFeed Component', () => {

    expect(screen.getByText('TestSummaryGraph')).toBeInTheDocument();

-    expect(screen.getByTestId('test-Success-value')).toContainHTML('02');
-    expect(screen.getByTestId('test-Aborted-value')).toContainHTML('01');
-    expect(screen.getByTestId('test-Failed-value')).toContainHTML('01');
+    expect(screen.getByTestId('test-Success-value')).toContainHTML('2');
+    expect(screen.getByTestId('test-Aborted-value')).toContainHTML('1');
+    expect(screen.getByTestId('test-Failed-value')).toContainHTML('1');
  });

  it('Should not render TestSummaryGraph if all status is success', async () => {
@ -40,9 +40,9 @@ describe('Test TestCaseFeed Component', () => {

    expect(screen.getByText('label.test-suite-summary:')).toBeInTheDocument();

-    expect(screen.getByTestId('test-Success-value')).toContainHTML('04');
-    expect(screen.getByTestId('test-Aborted-value')).toContainHTML('00');
-    expect(screen.getByTestId('test-Failed-value')).toContainHTML('00');
+    expect(screen.getByTestId('test-Success-value')).toContainHTML('4');
+    expect(screen.getByTestId('test-Aborted-value')).toContainHTML('0');
+    expect(screen.getByTestId('test-Failed-value')).toContainHTML('0');

    expect(screen.queryByText('TestSummaryGraph')).not.toBeInTheDocument();
  });
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardFooter/FeedCardFooter.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardFooter/FeedCardFooter.tsx
@ -115,9 +115,7 @@ function FeedCardFooter({
              {postLength <= 1
                ? t('label.one-reply')
                : t('label.number-reply-plural', {
-                    number: postLength.toLocaleString(undefined, {
-                      minimumIntegerDigits: 2,
-                    }),
+                    number: postLength,
                  })}
            </Typography.Text>
            {latestReplyTimeStamp && (
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/TestSuiteSummaryWidget/TestSuiteSummaryWidget.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/TestSuiteSummaryWidget/TestSuiteSummaryWidget.component.tsx
@ -18,7 +18,6 @@ import {
  TestSummary,
 } from '../../../../generated/tests/testCase';
 import { getTestCaseExecutionSummary } from '../../../../rest/testAPI';
-import { formTwoDigitNumber } from '../../../../utils/CommonUtils';

 const TestSuiteSummaryWidget = ({
  testSuite,
@ -49,24 +48,24 @@ const TestSuiteSummaryWidget = ({
  }, [testSuite]);

  if (isLoading) {
-    return <Skeleton.Input active />;
+    return <Skeleton.Input active data-tesid="loader" />;
  }

  return (
    <div className="d-flex justify-end">
      <div className="profiler-item green" data-testid="test-passed">
        <div className="font-medium" data-testid="test-passed-value">
-          {formTwoDigitNumber(summary?.success ?? 0)}
+          {summary?.success ?? 0}
        </div>
      </div>
      <div className="profiler-item amber" data-testid="test-aborted">
        <div className="font-medium" data-testid="test-aborted-value">
-          {formTwoDigitNumber(summary?.aborted ?? 0)}
+          {summary?.aborted ?? 0}
        </div>
      </div>
      <div className="profiler-item red" data-testid="test-failed">
        <div className="font-medium" data-testid="test-failed-value">
-          {formTwoDigitNumber(summary?.failed ?? 0)}
+          {summary?.failed ?? 0}
        </div>
      </div>
    </div>
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/TestSuiteSummaryWidget/TestSuiteSummaryWidget.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/TestSuiteSummaryWidget/TestSuiteSummaryWidget.test.tsx
@ -0,0 +1,98 @@
+/*
+ *  Copyright 2024 Collate.
+ *  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 { act, render, screen } from '@testing-library/react';
+import React from 'react';
+import { getTestCaseExecutionSummary } from '../../../../rest/testAPI';
+import TestSuiteSummaryWidget from './TestSuiteSummaryWidget.component';
+
+const mockTestSuite = { id: 'example', type: 'testSuite' };
+
+jest.mock('antd', () => ({
+  ...jest.requireActual('antd'),
+  Skeleton: {
+    Input: jest.fn().mockImplementation(() => <div>Skeleton.Input</div>),
+  },
+}));
+
+jest.mock('../../../../rest/testAPI', () => ({
+  getTestCaseExecutionSummary: jest.fn().mockImplementation(() =>
+    Promise.resolve({
+      success: 5,
+      aborted: 1,
+      failed: 2,
+    })
+  ),
+}));
+
+describe('TestSuiteSummaryWidget', () => {
+  it('should show loader when fetching test suite summary', async () => {
+    await act(async () => {
+      render(<TestSuiteSummaryWidget testSuite={mockTestSuite} />);
+
+      expect(screen.getByText('Skeleton.Input')).toBeInTheDocument();
+
+      expect(screen.queryByTestId('test-passed-value')).toBeNull();
+      expect(screen.queryByTestId('test-aborted-value')).toBeNull();
+      expect(screen.queryByTestId('test-failed-value')).toBeNull();
+    });
+  });
+
+  it('should render correct status counts', async () => {
+    await act(async () => {
+      render(<TestSuiteSummaryWidget testSuite={mockTestSuite} />);
+    });
+
+    expect(screen.getByTestId('test-passed-value')).toHaveTextContent('5');
+    expect(screen.getByTestId('test-aborted-value')).toHaveTextContent('1');
+    expect(screen.getByTestId('test-failed-value')).toHaveTextContent('2');
+  });
+
+  it('should render 0 count if no testSuite is passed in prop', async () => {
+    await act(async () => {
+      render(<TestSuiteSummaryWidget />);
+    });
+
+    expect(screen.getByTestId('test-passed-value')).toHaveTextContent('0');
+    expect(screen.getByTestId('test-aborted-value')).toHaveTextContent('0');
+    expect(screen.getByTestId('test-failed-value')).toHaveTextContent('0');
+  });
+
+  it('should render 0 count if no value is returned for respective count', async () => {
+    (getTestCaseExecutionSummary as jest.Mock).mockImplementationOnce(() =>
+      Promise.resolve({})
+    );
+
+    await act(async () => {
+      render(<TestSuiteSummaryWidget testSuite={mockTestSuite} />);
+    });
+
+    expect(screen.getByTestId('test-passed-value')).toHaveTextContent('0');
+    expect(screen.getByTestId('test-aborted-value')).toHaveTextContent('0');
+    expect(screen.getByTestId('test-failed-value')).toHaveTextContent('0');
+  });
+
+  it('should render 0 count if getTestCaseExecutionSummary fails', async () => {
+    (getTestCaseExecutionSummary as jest.Mock).mockImplementationOnce(() =>
+      Promise.reject({})
+    );
+
+    await act(async () => {
+      render(<TestSuiteSummaryWidget testSuite={mockTestSuite} />);
+    });
+
+    expect(screen.getByTestId('test-passed-value')).toHaveTextContent('0');
+    expect(screen.getByTestId('test-aborted-value')).toHaveTextContent('0');
+    expect(screen.getByTestId('test-failed-value')).toHaveTextContent('0');
+  });
+});
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.component.tsx
@ -37,7 +37,6 @@ import useCustomLocation from '../../../../hooks/useCustomLocation/useCustomLoca
 import { getListTestCaseIncidentStatus } from '../../../../rest/incidentManagerAPI';
 import { getLatestTableProfileByFqn } from '../../../../rest/tableAPI';
 import { getTestCaseExecutionSummary } from '../../../../rest/testAPI';
-import { formTwoDigitNumber } from '../../../../utils/CommonUtils';
 import {
  getCurrentMillis,
  getEpochMillisForPastDays,
@ -161,7 +160,7 @@ function TableSummary({
          <div
            className="font-semibold text-lg"
            data-testid="test-passed-value">
-            {formTwoDigitNumber(testSuiteSummary?.success ?? 0)}
+            {testSuiteSummary?.success ?? 0}
          </div>
          <div className="text-xs text-grey-muted">{`${t(
            'label.test-plural'
@ -171,7 +170,7 @@ function TableSummary({
          <div
            className="font-semibold text-lg"
            data-testid="test-aborted-value">
-            {formTwoDigitNumber(testSuiteSummary?.aborted ?? 0)}
+            {testSuiteSummary?.aborted ?? 0}
          </div>
          <div className="text-xs text-grey-muted">{`${t(
            'label.test-plural'
@ -181,7 +180,7 @@ function TableSummary({
          <div
            className="font-semibold text-lg"
            data-testid="test-failed-value">
-            {formTwoDigitNumber(testSuiteSummary?.failed ?? 0)}
+            {testSuiteSummary?.failed ?? 0}
          </div>
          <div className="text-xs text-grey-muted">{`${t(
            'label.test-plural'
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.test.tsx
@ -193,9 +193,9 @@ describe('TableSummary component tests', () => {
    expect(testsPassedLabel).toBeInTheDocument();
    expect(testsAbortedLabel).toBeInTheDocument();
    expect(testsFailedLabel).toBeInTheDocument();
-    expect(testsPassedValue.textContent).toBe('00');
-    expect(testsAbortedValue.textContent).toBe('00');
-    expect(testsFailedValue.textContent).toBe('00');
+    expect(testsPassedValue.textContent).toBe('0');
+    expect(testsAbortedValue.textContent).toBe('0');
+    expect(testsFailedValue.textContent).toBe('0');
  });

  it('column test case count should appear', async () => {
@ -221,8 +221,8 @@ describe('TableSummary component tests', () => {
    const testsAbortedValue = screen.getByTestId('test-aborted-value');
    const testsFailedValue = screen.getByTestId('test-failed-value');

-    expect(testsPassedValue.textContent).toBe('03');
-    expect(testsAbortedValue.textContent).toBe('01');
-    expect(testsFailedValue.textContent).toBe('01');
+    expect(testsPassedValue.textContent).toBe('3');
+    expect(testsAbortedValue.textContent).toBe('1');
+    expect(testsFailedValue.textContent).toBe('1');
  });
 });
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json
@ -800,7 +800,7 @@
    "om-jwt-token": "OpenMetadata JWT-Token",
    "on-demand": "Auf Abruf",
    "on-lowercase": "auf",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
    "open": "Öffnen",
    "open-lowercase": "öffnen",
    "open-metadata": "OpenMetadata",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
@ -800,7 +800,7 @@
    "om-jwt-token": "OpenMetadata JWT Token",
    "on-demand": "On Demand",
    "on-lowercase": "on",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
    "open": "Open",
    "open-lowercase": "open",
    "open-metadata": "OpenMetadata",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
@ -800,7 +800,7 @@
    "om-jwt-token": "Token JWT de OpenMetadata",
    "on-demand": "Bajo Demanda",
    "on-lowercase": "en",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
    "open": "Abrir",
    "open-lowercase": "abrir",
    "open-metadata": "OpenMetadata",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
@ -800,7 +800,7 @@
    "om-jwt-token": "Jeton JWT OpenMetadata",
    "on-demand": "Sur Demande",
    "on-lowercase": "sur",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
    "open": "Ouvrir",
    "open-lowercase": "ouvrir",
    "open-metadata": "OpenMetadata",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/he-he.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/he-he.json
@ -800,7 +800,7 @@
    "om-jwt-token": "OpenMetadata JWT Token",
    "on-demand": "על פי דרישה",
    "on-lowercase": "על",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
    "open": "פתוח",
    "open-lowercase": "פתוח",
    "open-metadata": "OpenMetadata",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
@ -800,7 +800,7 @@
    "om-jwt-token": "OpenMetadata JWT Token",
    "on-demand": "On Demand",
    "on-lowercase": "の上の",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
    "open": "開く",
    "open-lowercase": "開く",
    "open-metadata": "OpenMetadata",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/nl-nl.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/nl-nl.json
@ -800,7 +800,7 @@
    "om-jwt-token": "OpenMetadata JWT-token",
    "on-demand": "Op verzoek",
    "on-lowercase": "op",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
    "open": "Open",
    "open-lowercase": "open",
    "open-metadata": "OpenMetadata",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pr-pr.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pr-pr.json
@ -800,7 +800,7 @@
    "om-jwt-token": "توکن JWT OpenMetadata",
    "on-demand": "درخواست‌شده",
    "on-lowercase": "روی",
-    "one-reply": "01 پاسخ",
+    "one-reply": "1 پاسخ",
    "open": "باز",
    "open-lowercase": "باز",
    "open-metadata": "متادیتای باز",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
@ -800,7 +800,7 @@
    "om-jwt-token": "Token JWT OpenMetadata",
    "on-demand": "Sob Demanda",
    "on-lowercase": "em",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
    "open": "Abrir",
    "open-lowercase": "abrir",
    "open-metadata": "OpenMetadata",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json
@ -800,7 +800,7 @@
    "om-jwt-token": "JWT-токен OpenMetadata",
    "on-demand": "По запросу",
    "on-lowercase": "на",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
    "open": "Открыто",
    "open-lowercase": "открыть",
    "open-metadata": "OpenMetadata",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
@ -800,7 +800,7 @@
    "om-jwt-token": "OpenMetadata JWT 令牌",
    "on-demand": "即时",
    "on-lowercase": "on",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
    "open": "打开",
    "open-lowercase": "打开",
    "open-metadata": "OpenMetadata",
--- a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
@ -591,13 +591,6 @@ export const getStatisticsDisplayValue = (
  return formatNumberWithComma(displayValue);
 };

-export const formTwoDigitNumber = (number: number) => {
-  return number.toLocaleString('en-US', {
-    minimumIntegerDigits: 2,
-    useGrouping: false,
-  });
-};
-
 export const digitFormatter = (value: number) => {
  // convert 1000 to 1k
  return Intl.NumberFormat('en', {
--- a/openmetadata-ui/src/main/resources/ui/src/utils/FeedUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/FeedUtils.tsx
@ -59,7 +59,6 @@ import {
 } from '../rest/feedsAPI';
 import { searchData } from '../rest/miscAPI';
 import {
-  formTwoDigitNumber,
  getEntityPlaceHolder,
  getPartialNameFromFQN,
  getPartialNameFromTableFQN,
@ -685,7 +684,7 @@ export const getTestCaseResultCount = (
    <Typography.Text
      className="font-medium text-md"
      data-testid={`test-${status}-value`}>
-      {formTwoDigitNumber(count)}
+      {count}
    </Typography.Text>
  </div>
 );