fix: use field instead of state, add test

Shopify · Sep 21, 2023 · 0692df3 · 0692df3
1 parent dd932d2
commit 0692df3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/src/components/DiscountAppStrategyCard/DiscountAppStrategyCard.tsx b/src/components/DiscountAppStrategyCard/DiscountAppStrategyCard.tsx
@@ -1,14 +1,14 @@
-import React, {useCallback, useState} from 'react';
+import React from 'react';
 import {Box, Card, ChoiceList, Text, VerticalStack} from '@shopify/polaris';
 import {useI18n} from '@shopify/react-i18n';
 
-import {DiscountApplicationStrategy} from '../../types';
+import {DiscountApplicationStrategy, Field} from '../../types';
 
 export interface DiscountAppStrategyProps {
   /**
    * The discount application strategy.
    */
-  strategy: DiscountApplicationStrategy;
+  strategy: Field<DiscountApplicationStrategy>;
 }
 
 const I18N_SCOPE = {
@@ -17,9 +17,9 @@ const I18N_SCOPE = {
 
 export function DiscountAppStrategyCard({strategy}: DiscountAppStrategyProps) {
   const [i18n] = useI18n();
-  const [selected, setSelected] = useState<string[]>([strategy]);
 
-  const handleChange = useCallback((value: string[]) => setSelected(value), []);
+  const handleChange = (strategies: DiscountApplicationStrategy[]) =>
+    strategy.onChange(strategies[0]);
 
   return (
     <Box paddingBlockEnd="4">
@@ -43,7 +43,7 @@ export function DiscountAppStrategyCard({strategy}: DiscountAppStrategyProps) {
                 helpText: i18n.translate('maximum.helpText', I18N_SCOPE),
               },
             ]}
-            selected={selected}
+            selected={[strategy.value]}
             onChange={handleChange}
           />
         </VerticalStack>

diff --git a/src/components/DiscountAppStrategyCard/tests/DiscountAppStrategyCard.test.tsx b/src/components/DiscountAppStrategyCard/tests/DiscountAppStrategyCard.test.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import {TextField} from '@shopify/polaris';
-import {mountWithApp} from 'tests/utilities';
+import {ChoiceList, TextField} from '@shopify/polaris';
+import {mockField, mountWithApp} from 'tests/utilities';
 
 import {DiscountAppStrategyCard} from '../DiscountAppStrategyCard';
 import {DiscountApplicationStrategy} from '../../../types';
 
 describe('<DiscountAppStrategyCard />', () => {
   const mockProps = {
-    strategy: DiscountApplicationStrategy.First,
+    strategy: mockField(DiscountApplicationStrategy.First),
   };
 
   afterEach(() => {
@@ -21,4 +21,16 @@ describe('<DiscountAppStrategyCard />', () => {
       label: 'Title',
     });
   });
+
+  it('calls onChange when the strategy is changed', () => {
+    const methodCard = mountWithApp(<DiscountAppStrategyCard {...mockProps} />);
+
+    methodCard
+      .find(ChoiceList)
+      ?.trigger('onChange', [DiscountApplicationStrategy.Maximum]);
+
+    expect(mockProps.strategy.onChange).toHaveBeenCalledWith(
+      DiscountApplicationStrategy.Maximum,
+    );
+  });
 });