Fix FormulaWidgetUI render when data is zero (#128)

When data was 0, a render was not happening, leaving the widget with the previous value, causing a bug Co-authored-by: AdriSolid <biotekgis@gmail.com>
CartoDB · Mar 22, 2021 · 5d22bd1 · 5d22bd1
1 parent ae96f11
commit 5d22bd1
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Not released
 
+- Fix FormulaWidgetUI render when data is zero [#128](https://github.com/CartoDB/carto-react/pull/128)
+
 ## 1.0.0-rc.2 (2021-03-19)
 
 - Fix material-ui warnings due to wrong styles in theme [#124](https://github.com/CartoDB/carto-react/pull/124)

diff --git a/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js b/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js
@@ -3,15 +3,6 @@ import { render, screen } from '@testing-library/react';
 import FormulaWidgetUI from '../../src/widgets/FormulaWidgetUI';
 import { currencyFormatter } from './testUtils';
 
-// Mock animations
-jest.mock('../../src/widgets/utils/animations');
-// eslint-disable-next-line import/first
-import { animateValue } from '../../src/widgets/utils/animations';
-
-animateValue.mockImplementation(({ end, drawFrame }) => {
-  drawFrame(end); // draw final step, no intermediate ones
-});
-
 describe('FormulaWidgetUI', () => {
   test('empty', () => {
     render(<FormulaWidgetUI />);
@@ -36,6 +27,12 @@ describe('FormulaWidgetUI', () => {
     expect(await screen.findByText(DATA.value)).toBeInTheDocument();
   });
 
+  test('should render the current value', async () => {
+    const { rerender } = render(<FormulaWidgetUI data={1234} />);
+    rerender(<FormulaWidgetUI data={0} />);
+    expect(await screen.findByText(0)).toBeInTheDocument();
+  });
+
   test('with currency formatter', () => {
     const DATA = '1234';
     render(<FormulaWidgetUI data={DATA} formatter={currencyFormatter} />);

diff --git a/packages/react-ui/src/widgets/utils/animations.js b/packages/react-ui/src/widgets/utils/animations.js
@@ -2,7 +2,11 @@
  * Animate one value from start to end, storing the current request in requestRef hook
  */
 export function animateValue({ start, end, duration, drawFrame, requestRef }) {
-  if (start === end) return;
+  const startAndEndZero = start === 0 && end === 0; // must ensure 1 render
+
+  if (start === end && !startAndEndZero) {
+    return;
+  }
 
   const range = end - start;
   let current = start;
@@ -28,9 +32,7 @@ export function animateValues({ start, end, duration, drawFrame, requestRef }) {
   if (isEqual) return;
 
   let currentValues = end.map((elem, i) =>
-    start[i] && start[i].name === elem.name
-      ? { ...elem, value: start[i].value }
-      : elem
+    start[i] && start[i].name === elem.name ? { ...elem, value: start[i].value } : elem
   );
   let currentFrame = 0;
 

diff --git a/packages/react-widgets/src/widgets/FormulaWidget.js b/packages/react-widgets/src/widgets/FormulaWidget.js
@@ -54,7 +54,7 @@ function FormulaWidget(props) {
         })
         .finally(() => setIsLoading(false));
     } else {
-      setFormulaData(undefined);
+      setFormulaData(null);
     }
 
     return function cleanup() {