Fix 0 handling in PriceCell

libs/react-helpers/src/lib/grid-cells/flash-cell.stories.tsx

@@ -0,0 +1,21 @@
+import { FlashCell } from './flash-cell';
+import { Meta, Story } from '@storybook/react';
+import * as React from 'react';
+
+export default {
+  title: 'Component/FlashCell',
+  argTypes: {
+    value: {
+      control: { type: 'range', min: -20, max: 20, step: 1 },
+    },
+  },
+} as Meta;
+
+const Template: Story<{ value: number }> = ({ value }) => (
+  <FlashCell value={value}>{value.toFixed(0)}</FlashCell>
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  value: 100,
+};

libs/react-helpers/src/lib/grid-cells/flash-cell.test.tsx

@@ -0,0 +1,34 @@
+import { findFirstDiffPos } from './flash-cell';
+
+describe('findFirstDiffPos', () => {
+  it('Returns -1 for matching strings', () => {
+    const a = 'test';
+    const b = 'test';
+
+    expect(findFirstDiffPos(a, b)).toEqual(-1);
+  });
+
+  it('Returns -1 if a string is undefined (just in case)', () => {
+    const a = 'test';
+    const b = undefined as any as string;
+
+    expect(findFirstDiffPos(a, b)).toEqual(-1);
+    expect(findFirstDiffPos(b, a)).toEqual(-1);
+  });
+
+  it('Returns -1 if one string is empty', () => {
+    const a = 'test';
+    const b = '';
+
+    expect(findFirstDiffPos(a, b)).toEqual(-1);
+    expect(findFirstDiffPos(b, a)).toEqual(-1);
+  });
+
+  it('Happy path', () => {
+    const a = 'test';
+
+    expect(findFirstDiffPos(a, 'test')).toEqual(-1);
+    expect(findFirstDiffPos(a, '!est')).toEqual(0);
+    expect(findFirstDiffPos(a, 't!st')).toEqual(1);
+  });
+});

libs/react-helpers/src/lib/grid-cells/price-cell.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import * as React from 'react';
+
+import { PriceCell } from './price-cell';
+
+describe('<PriceCell />', () => {
+  it('Displayes formatted value', () => {
+    render(<PriceCell value={100} valueFormatted="100.00" />);
+    expect(screen.getByTestId('price')).toHaveTextContent('100.00');
+  });
+  it('Displayes 0', () => {
+    render(<PriceCell value={0} valueFormatted="0.00" />);
+    expect(screen.getByTestId('price')).toHaveTextContent('0.00');
+  });
+
+  it('Displayes - if value is not a number', () => {
+    render(<PriceCell value={null} valueFormatted="" />);
+    expect(screen.getByTestId('price')).toHaveTextContent('-');
+  });
+});

libs/react-helpers/src/lib/grid-cells/price-cell.tsx

@@ -6,12 +6,11 @@ export interface IPriceCellProps {
 }
 
 export const PriceCell = ({ value, valueFormatted }: IPriceCellProps) => {
-  if (!value || isNaN(Number(value))) return <span>-</span>;
+  if ((!value && value !== 0) || isNaN(Number(value)))
+    return <span data-testid="price">-</span>;
   return (
-    <span className="font-mono">
-      <FlashCell value={Number(value)} data-testid="price">
-        {valueFormatted}
-      </FlashCell>
+    <span className="font-mono" data-testid="price">
+      <FlashCell value={Number(value)}>{valueFormatted}</FlashCell>
     </span>
   );
 };