From 466f711a6cab86b1634bc39299a6dc6b99f2e91e Mon Sep 17 00:00:00 2001 From: bkspace Date: Tue, 1 Oct 2024 12:58:01 +0100 Subject: [PATCH] Seperate out limits and recurring --- .../UsageLimitsCard/UsageLimitsCard.tsx | 176 +++------ .../RecurringPayment/RecurringPayment.tsx | 2 +- .../UsageLimits/UsageLimits.scss} | 2 +- .../components/UsageLimits/UsageLimits.tsx | 135 +++++++ .../components/UsageLimits/index.ts | 1 + .../UsageLimits/tests/UsageLimits.test.tsx | 269 +++++++++++++ .../UsageLimitsCard/components/index.ts | 1 + .../tests/UsageLimitsCard.test.tsx | 364 ++---------------- .../UsageLimitsPattern/UsageLimitsPattern.tsx | 9 +- 9 files changed, 489 insertions(+), 470 deletions(-) rename src/components/UsageLimitsCard/{UsageLimitsCard.scss => components/UsageLimits/UsageLimits.scss} (62%) create mode 100644 src/components/UsageLimitsCard/components/UsageLimits/UsageLimits.tsx create mode 100644 src/components/UsageLimitsCard/components/UsageLimits/index.ts create mode 100644 src/components/UsageLimitsCard/components/UsageLimits/tests/UsageLimits.test.tsx diff --git a/src/components/UsageLimitsCard/UsageLimitsCard.tsx b/src/components/UsageLimitsCard/UsageLimitsCard.tsx index 6e0bce12..75071748 100644 --- a/src/components/UsageLimitsCard/UsageLimitsCard.tsx +++ b/src/components/UsageLimitsCard/UsageLimitsCard.tsx @@ -1,42 +1,21 @@ -import React, {useEffect, useState} from 'react'; -import { - Card, - ChoiceList, - TextField, - Text, - InlineError, - BlockStack, - Box, -} from '@shopify/polaris'; -import {useI18n} from '@shopify/react-i18n'; +import React from 'react'; +import {Card, BlockStack, Box} from '@shopify/polaris'; import type {Field, PositiveNumericString} from '../../types'; import type {RecurringPaymentType} from '../../constants'; -import {forcePositiveInteger} from '../../utilities/numbers'; -import {RecurringPayment} from './components'; -import styles from './UsageLimitsCard.scss'; - -export enum UsageLimitType { - TotalUsageLimit = 'TOTAL_USAGE_LIMIT', - OncePerCustomerLimit = 'ONCE_PER_CUSTOMER_LIMIT', -} +import {RecurringPayment, UsageLimits} from './components'; interface UsageLimitProps { /** - * The total number of times the discount can be used. - */ - totalUsageLimit: Field; - - /** - * When selected, the discount may be used at most once per customer + * (optional) When true, displays the "Recurring payments" section. (see {@interface UsageLimitsCardMultiplePaymentsProps}) */ - oncePerCustomer: Field; + isRecurring?: false; /** - * (optional) When true, displays the "Recurring payments" section. (see {@interface UsageLimitsCardMultiplePaymentsProps}) + * (optional) When true, displays the "Limits" section. (see {@interface UsageLimitsCardMultiplePaymentsProps}) */ - isRecurring?: false; + isLimited?: false; } interface UsageLimitsCardMultiplePaymentsProps @@ -57,118 +36,43 @@ interface UsageLimitsCardMultiplePaymentsProps recurringPaymentLimit: Field; } +interface UsageLimitsCardLimitsProps + extends Omit { + /** + * Displays the "Limits" section. + */ + isLimited: true; + + /** + * The total number of times the discount can be used. + */ + totalUsageLimit: Field; + + /** + * When selected, the discount may be used at most once per customer + */ + oncePerCustomer: Field; +} + export type UsageLimitsCardProps = | UsageLimitProps + | UsageLimitsCardLimitsProps | UsageLimitsCardMultiplePaymentsProps; -export const DISCOUNT_TOTAL_USAGE_LIMIT_FIELD = 'totalUsageLimit'; - export function UsageLimitsCard(props: UsageLimitsCardProps) { - const {totalUsageLimit, oncePerCustomer, isRecurring} = props; - - const [showUsageLimit, setShowUsageLimit] = useState( - totalUsageLimit.value !== null, - ); - - const [i18n] = useI18n(); - - useEffect( - () => setShowUsageLimit(totalUsageLimit.value !== null), - [totalUsageLimit.value], - ); - - const handleUsageLimitsChoicesChange = ( - selectedUsageLimitTypes: UsageLimitType[], - ) => { - const newOncePerCustomer = selectedUsageLimitTypes.includes( - UsageLimitType.OncePerCustomerLimit, - ); - - // When the checkbox is toggled, either set the totalUsageLimit value to null (null === checkbox off) or an empty string (non-null === checkbox on) - if (!selectedUsageLimitTypes.includes(UsageLimitType.TotalUsageLimit)) { - totalUsageLimit.onChange(null); - } else if (totalUsageLimit.value === null) { - totalUsageLimit.onChange(''); - } - - newOncePerCustomer !== oncePerCustomer.value && - oncePerCustomer.onChange(newOncePerCustomer); - }; - + if (!props.isLimited && !props.isRecurring) return null; return ( - - - {i18n.translate('DiscountAppComponents.UsageLimitsCard.title')} - - ( - - {isSelected && ( -
- { - totalUsageLimit.onChange( - forcePositiveInteger(nextValue), - ); - }} - onBlur={totalUsageLimit.onBlur} - error={Boolean(totalUsageLimit.error)} - /> -
- )} - {isRecurring && ( - - {i18n.translate( - 'DiscountAppComponents.UsageLimitsCard.totalUsageLimitHelpTextSubscription', - )} - - )} - {isSelected && totalUsageLimit.error && ( - - )} - - ), - }, - { - label: i18n.translate( - 'DiscountAppComponents.UsageLimitsCard.oncePerCustomerLimitLabel', - ), - value: UsageLimitType.OncePerCustomerLimit, - }, - ]} - onChange={handleUsageLimitsChoicesChange} - /> - - {isShowRecurringPaymentSection(props) && ( + {isLimitedSection(props) && ( + + + + )} + {isRecurringPaymentSection(props) && ( - + {i18n.translate('DiscountAppComponents.RecurringPayment.title')} ; + + /** + * When selected, the discount may be used at most once per customer + */ + oncePerCustomer: Field; +} + +export function UsageLimits({totalUsageLimit, oncePerCustomer}: Props) { + const [showUsageLimit, setShowUsageLimit] = useState( + totalUsageLimit.value !== null, + ); + + const [i18n] = useI18n(); + + useEffect( + () => setShowUsageLimit(totalUsageLimit.value !== null), + [totalUsageLimit.value], + ); + + const handleUsageLimitsChoicesChange = ( + selectedUsageLimitTypes: UsageLimitType[], + ) => { + const newOncePerCustomer = selectedUsageLimitTypes.includes( + UsageLimitType.OncePerCustomerLimit, + ); + + // When the checkbox is toggled, either set the totalUsageLimit value to null (null === checkbox off) or an empty string (non-null === checkbox on) + if (!selectedUsageLimitTypes.includes(UsageLimitType.TotalUsageLimit)) { + totalUsageLimit.onChange(null); + } else if (totalUsageLimit.value === null) { + totalUsageLimit.onChange(''); + } + + newOncePerCustomer !== oncePerCustomer.value && + oncePerCustomer.onChange(newOncePerCustomer); + }; + + return ( + + + {i18n.translate('DiscountAppComponents.UsageLimitsCard.title')} + + ( + + {isSelected && ( +
+ { + totalUsageLimit.onChange( + forcePositiveInteger(nextValue), + ); + }} + onBlur={totalUsageLimit.onBlur} + error={Boolean(totalUsageLimit.error)} + /> +
+ )} + {/* {isRecurring && ( + + {i18n.translate( + 'DiscountAppComponents.UsageLimitsCard.totalUsageLimitHelpTextSubscription', + )} + + )} */} + {isSelected && totalUsageLimit.error && ( + + )} + + ), + }, + { + label: i18n.translate( + 'DiscountAppComponents.UsageLimitsCard.oncePerCustomerLimitLabel', + ), + value: UsageLimitType.OncePerCustomerLimit, + }, + ]} + onChange={handleUsageLimitsChoicesChange} + /> + + ); +} diff --git a/src/components/UsageLimitsCard/components/UsageLimits/index.ts b/src/components/UsageLimitsCard/components/UsageLimits/index.ts new file mode 100644 index 00000000..b6abcd43 --- /dev/null +++ b/src/components/UsageLimitsCard/components/UsageLimits/index.ts @@ -0,0 +1 @@ +export {UsageLimits} from './UsageLimits'; diff --git a/src/components/UsageLimitsCard/components/UsageLimits/tests/UsageLimits.test.tsx b/src/components/UsageLimitsCard/components/UsageLimits/tests/UsageLimits.test.tsx new file mode 100644 index 00000000..f517061f --- /dev/null +++ b/src/components/UsageLimitsCard/components/UsageLimits/tests/UsageLimits.test.tsx @@ -0,0 +1,269 @@ +import React from 'react'; +import { + ChoiceList, + TextField, + InlineError, + BlockStack, + Text, +} from '@shopify/polaris'; +import {mockField, mountWithApp} from 'tests/utilities'; + +import { + DISCOUNT_TOTAL_USAGE_LIMIT_FIELD, + UsageLimits, + UsageLimitType, +} from '../UsageLimits'; +import {forcePositiveInteger} from '../../../../../utilities/numbers'; + +describe('UsageLimits', () => { + const defaultProps = { + totalUsageLimit: mockField(''), + oncePerCustomer: mockField(false), + }; + + it('renders Card with title', () => { + const usageLimits = mountWithApp(); + + expect(usageLimits).toContainReactComponent(Text, { + children: 'Maximum discount uses', + }); + }); + + describe('ChoiceList', () => { + it('renders ChoiceList', () => { + const usageLimits = mountWithApp(); + + expect(usageLimits).toContainReactComponent(ChoiceList); + }); + + it('renders ChoiceList with options in order', () => { + const usageLimits = mountWithApp(); + + expect(usageLimits).toContainReactComponent(ChoiceList, { + choices: expect.arrayContaining([ + expect.objectContaining({ + label: 'Limit number of times this discount can be used in total', + }), + expect.objectContaining({ + label: 'Limit to one use per customer', + }), + ]), + }); + }); + + it('renders ChoiceList with title and titleHidden props', () => { + const usageLimits = mountWithApp(); + + expect(usageLimits).toContainReactComponent(ChoiceList, { + title: 'Usage limit options', + titleHidden: true, + }); + }); + }); + + describe('total usage limit', () => { + it('total usage limit option is checked when totalUsageLimit is not null', () => { + const usageLimits = mountWithApp( + , + ); + + expect(usageLimits).toContainReactComponent(ChoiceList, { + selected: expect.arrayContaining([UsageLimitType.TotalUsageLimit]), + }); + }); + + it('total usage limit option is unchecked when totalUsageLimit is null', () => { + const usageLimits = mountWithApp( + , + ); + + expect(usageLimits).toContainReactComponent(ChoiceList, { + selected: expect.not.arrayContaining([UsageLimitType.TotalUsageLimit]), + }); + }); + + it('displays usage limit option in a stack', () => { + const usageLimits = mountWithApp(); + + expect(usageLimits).toContainReactComponent(BlockStack); + }); + + it('displays total usage limit text field when totalUsageLimit is a number', () => { + const totalUsageLimit = '4'; + const usageLimits = mountWithApp( + , + ); + + const stack = usageLimits.find(BlockStack); + + expect(stack).toContainReactComponent(TextField, { + value: totalUsageLimit, + }); + }); + + it('does not render help text when isRecurring is false', () => { + const usageLimits = mountWithApp(); + + expect(usageLimits).not.toContainReactComponent(Text, { + children: 'A subscription with many payments will count as one use.', + }); + }); + + it('sets totalUsageLimit to null when unselected', () => { + const totalUsageLimit = mockField('3'); + const usageLimits = mountWithApp( + , + ); + usageLimits.find(ChoiceList)!.trigger('onChange', []); + + expect(totalUsageLimit.onChange).toHaveBeenCalledWith(null); + }); + + it('sets hasUsageLimit to empty string when selected', () => { + const totalUsageLimit = mockField(null); + const usageLimits = mountWithApp( + , + ); + usageLimits + .find(ChoiceList)! + .trigger('onChange', [UsageLimitType.TotalUsageLimit]); + + expect(totalUsageLimit.onChange).toHaveBeenCalledWith(''); + }); + + it('emits total usage limit value when user updates TextField value', () => { + const totalUsageLimit = mockField('2'); + const nextTotalUsageLimitValue = '4'; + const usageLimits = mountWithApp( + , + ); + usageLimits + .find(TextField)! + .trigger('onChange', nextTotalUsageLimitValue); + + expect(totalUsageLimit.onChange).toHaveBeenCalledWith( + nextTotalUsageLimitValue, + ); + }); + + it('emits changes with valid integer values only', () => { + const totalUsageLimit = mockField('2'); + const invalidTotalUsageLimitValue = '-4.2'; + const usageLimits = mountWithApp( + , + ); + usageLimits + .find(TextField)! + .trigger('onChange', invalidTotalUsageLimitValue); + + expect(totalUsageLimit.onChange).toHaveBeenCalledWith( + forcePositiveInteger(invalidTotalUsageLimitValue), + ); + }); + + it('emits empty string with invalid integer entry', () => { + const totalUsageLimit = mockField('2'); + const invalidTotalUsageLimitValue = 'abc'; + const usageLimits = mountWithApp( + , + ); + usageLimits + .find(TextField)! + .trigger('onChange', invalidTotalUsageLimitValue); + + expect(totalUsageLimit.onChange).toHaveBeenCalledWith(''); + }); + + describe('error', () => { + it('sets error prop to true on usageLimits text field when an error is passed', () => { + const usageLimits = mountWithApp( + , + ); + + expect(usageLimits).toContainReactComponent(TextField, { + error: true, + }); + }); + + it('sets InlineError to the totalUsageLimit.error prop', () => { + const error = 'foo'; + const usageLimits = mountWithApp( + , + ); + + expect(usageLimits).toContainReactComponent(InlineError, { + fieldID: DISCOUNT_TOTAL_USAGE_LIMIT_FIELD, + message: 'foo', + }); + }); + }); + + it('changing oncePerCustomer value does not change the value of totalUsageLimit', () => { + const totalUsageLimit = mockField('100'); + const usageLimits = mountWithApp( + , + ); + + usageLimits + .find(ChoiceList)! + .trigger('onChange', [UsageLimitType.OncePerCustomerLimit]); + + expect(totalUsageLimit.onChange).not.toHaveBeenCalled(); + }); + }); + + describe('oncePerCustomer', () => { + it('does not select once per customer limit option in ChoiceList if oncePerCustomer is false', () => { + const usageLimits = mountWithApp( + , + ); + + expect(usageLimits).toContainReactComponent(ChoiceList, { + selected: expect.not.arrayContaining([ + UsageLimitType.OncePerCustomerLimit, + ]), + }); + }); + + it('selects once per customer limit option in ChoiceList if oncePerCustomer is true', () => { + const usageLimits = mountWithApp( + , + ); + + expect(usageLimits).toContainReactComponent(ChoiceList, { + selected: expect.arrayContaining([UsageLimitType.OncePerCustomerLimit]), + }); + }); + + it('emits true when once per customer limit option is selected', () => { + const oncePerCustomer = mockField(false); + const usageLimits = mountWithApp( + , + ); + usageLimits + .find(ChoiceList)! + .trigger('onChange', [UsageLimitType.OncePerCustomerLimit]); + + expect(oncePerCustomer.onChange).toHaveBeenCalledWith(true); + }); + + it('emits false when once per customer limit option is deselected', () => { + const oncePerCustomer = mockField(true); + const usageLimits = mountWithApp( + , + ); + usageLimits.find(ChoiceList)!.trigger('onChange', []); + + expect(oncePerCustomer.onChange).toHaveBeenCalledWith(false); + }); + }); +}); diff --git a/src/components/UsageLimitsCard/components/index.ts b/src/components/UsageLimitsCard/components/index.ts index b66b73f4..147d1dc2 100644 --- a/src/components/UsageLimitsCard/components/index.ts +++ b/src/components/UsageLimitsCard/components/index.ts @@ -1 +1,2 @@ export {RecurringPayment} from './RecurringPayment'; +export {UsageLimits} from './UsageLimits'; diff --git a/src/components/UsageLimitsCard/tests/UsageLimitsCard.test.tsx b/src/components/UsageLimitsCard/tests/UsageLimitsCard.test.tsx index 009ce213..aa49a2c2 100644 --- a/src/components/UsageLimitsCard/tests/UsageLimitsCard.test.tsx +++ b/src/components/UsageLimitsCard/tests/UsageLimitsCard.test.tsx @@ -1,31 +1,31 @@ import React from 'react'; -import { - ChoiceList, - TextField, - Card, - InlineError, - BlockStack, - Text, -} from '@shopify/polaris'; +import {Card, Text} from '@shopify/polaris'; import {mockField, mountWithApp} from 'tests/utilities'; -import { - DISCOUNT_TOTAL_USAGE_LIMIT_FIELD, - UsageLimitsCard, - UsageLimitType, -} from '../UsageLimitsCard'; -import {RecurringPayment} from '../components'; +import {UsageLimitsCard} from '../UsageLimitsCard'; import {RecurringPaymentType} from '../../../constants'; -import {forcePositiveInteger} from '../../../utilities/numbers'; describe('UsageLimitsCard', () => { - const defaultProps = { + const usageLimitProps = { + isLimited: true, totalUsageLimit: mockField(''), oncePerCustomer: mockField(false), }; - it('renders Card with title', () => { - const usageLimits = mountWithApp(); + const recurringProps = { + isRecurring: true, + recurringPaymentType: mockField(RecurringPaymentType.AllPayments), + recurringPaymentLimit: mockField('1'), + }; + + it('renders limited form', () => { + const usageLimits = mountWithApp( + , + ); expect(usageLimits).toContainReactComponent(Card); expect(usageLimits).toContainReactComponent(Text, { @@ -33,319 +33,29 @@ describe('UsageLimitsCard', () => { }); }); - describe('ChoiceList', () => { - it('renders ChoiceList', () => { - const usageLimits = mountWithApp(); - - expect(usageLimits).toContainReactComponent(ChoiceList); - }); - - it('renders ChoiceList with options in order', () => { - const usageLimits = mountWithApp(); - - expect(usageLimits).toContainReactComponent(ChoiceList, { - choices: expect.arrayContaining([ - expect.objectContaining({ - label: 'Limit number of times this discount can be used in total', - }), - expect.objectContaining({ - label: 'Limit to one use per customer', - }), - ]), - }); - }); - - it('renders ChoiceList with title and titleHidden props', () => { - const usageLimits = mountWithApp(); - - expect(usageLimits).toContainReactComponent(ChoiceList, { - title: 'Usage limit options', - titleHidden: true, - }); - }); - }); - - describe('total usage limit', () => { - it('total usage limit option is checked when totalUsageLimit is not null', () => { - const usageLimits = mountWithApp( - , - ); - - expect(usageLimits).toContainReactComponent(ChoiceList, { - selected: expect.arrayContaining([UsageLimitType.TotalUsageLimit]), - }); - }); - - it('total usage limit option is unchecked when totalUsageLimit is null', () => { - const usageLimits = mountWithApp( - , - ); - - expect(usageLimits).toContainReactComponent(ChoiceList, { - selected: expect.not.arrayContaining([UsageLimitType.TotalUsageLimit]), - }); - }); - - it('displays usage limit option in a stack', () => { - const usageLimits = mountWithApp(); - - expect(usageLimits).toContainReactComponent(BlockStack); - }); - - it('displays total usage limit text field when totalUsageLimit is a number', () => { - const totalUsageLimit = '4'; - const usageLimits = mountWithApp( - , - ); - - const stack = usageLimits.find(BlockStack); - - expect(stack).toContainReactComponent(TextField, { - value: totalUsageLimit, - }); - }); - - it('renders help text when isRecurring is true', () => { - const usageLimits = mountWithApp( - , - ); - - const stack = usageLimits.find(BlockStack); - - expect(stack).toContainReactComponent(Text, { - children: 'A subscription with many payments will count as one use.', - }); - }); - - it('does not render help text when isRecurring is false', () => { - const usageLimits = mountWithApp(); - - expect(usageLimits).not.toContainReactComponent(Text, { - children: 'A subscription with many payments will count as one use.', - }); - }); - - it('sets totalUsageLimit to null when unselected', () => { - const totalUsageLimit = mockField('3'); - const usageLimits = mountWithApp( - , - ); - usageLimits.find(ChoiceList)!.trigger('onChange', []); - - expect(totalUsageLimit.onChange).toHaveBeenCalledWith(null); - }); - - it('sets hasUsageLimit to empty string when selected', () => { - const totalUsageLimit = mockField(null); - const usageLimits = mountWithApp( - , - ); - usageLimits - .find(ChoiceList)! - .trigger('onChange', [UsageLimitType.TotalUsageLimit]); - - expect(totalUsageLimit.onChange).toHaveBeenCalledWith(''); - }); - - it('emits total usage limit value when user updates TextField value', () => { - const totalUsageLimit = mockField('2'); - const nextTotalUsageLimitValue = '4'; - const usageLimits = mountWithApp( - , - ); - usageLimits - .find(TextField)! - .trigger('onChange', nextTotalUsageLimitValue); - - expect(totalUsageLimit.onChange).toHaveBeenCalledWith( - nextTotalUsageLimitValue, - ); - }); - - it('emits changes with valid integer values only', () => { - const totalUsageLimit = mockField('2'); - const invalidTotalUsageLimitValue = '-4.2'; - const usageLimits = mountWithApp( - , - ); - usageLimits - .find(TextField)! - .trigger('onChange', invalidTotalUsageLimitValue); - - expect(totalUsageLimit.onChange).toHaveBeenCalledWith( - forcePositiveInteger(invalidTotalUsageLimitValue), - ); - }); - - it('emits empty string with invalid integer entry', () => { - const totalUsageLimit = mockField('2'); - const invalidTotalUsageLimitValue = 'abc'; - const usageLimits = mountWithApp( - , - ); - usageLimits - .find(TextField)! - .trigger('onChange', invalidTotalUsageLimitValue); - - expect(totalUsageLimit.onChange).toHaveBeenCalledWith(''); - }); - - describe('error', () => { - it('sets error prop to true on usageLimits text field when an error is passed', () => { - const usageLimits = mountWithApp( - , - ); - - expect(usageLimits).toContainReactComponent(TextField, { - error: true, - }); - }); - - it('sets InlineError to the totalUsageLimit.error prop', () => { - const error = 'foo'; - const usageLimits = mountWithApp( - , - ); - - expect(usageLimits).toContainReactComponent(InlineError, { - fieldID: DISCOUNT_TOTAL_USAGE_LIMIT_FIELD, - message: 'foo', - }); - }); - }); - - it('changing oncePerCustomer value does not change the value of totalUsageLimit', () => { - const totalUsageLimit = mockField('100'); - const usageLimits = mountWithApp( - , - ); - - usageLimits - .find(ChoiceList)! - .trigger('onChange', [UsageLimitType.OncePerCustomerLimit]); - - expect(totalUsageLimit.onChange).not.toHaveBeenCalled(); - }); - }); - - describe('oncePerCustomer', () => { - it('does not select once per customer limit option in ChoiceList if oncePerCustomer is false', () => { - const usageLimits = mountWithApp( - , - ); - - expect(usageLimits).toContainReactComponent(ChoiceList, { - selected: expect.not.arrayContaining([ - UsageLimitType.OncePerCustomerLimit, - ]), - }); - }); + it('renders recurring form', () => { + const usageLimits = mountWithApp( + , + ); - it('selects once per customer limit option in ChoiceList if oncePerCustomer is true', () => { - const usageLimits = mountWithApp( - , - ); - - expect(usageLimits).toContainReactComponent(ChoiceList, { - selected: expect.arrayContaining([UsageLimitType.OncePerCustomerLimit]), - }); - }); - - it('emits true when once per customer limit option is selected', () => { - const oncePerCustomer = mockField(false); - const usageLimits = mountWithApp( - , - ); - usageLimits - .find(ChoiceList)! - .trigger('onChange', [UsageLimitType.OncePerCustomerLimit]); - - expect(oncePerCustomer.onChange).toHaveBeenCalledWith(true); - }); - - it('emits false when once per customer limit option is deselected', () => { - const oncePerCustomer = mockField(true); - const usageLimits = mountWithApp( - , - ); - usageLimits.find(ChoiceList)!.trigger('onChange', []); - - expect(oncePerCustomer.onChange).toHaveBeenCalledWith(false); + expect(usageLimits).toContainReactComponent(Card); + expect(usageLimits).toContainReactComponent(Text, { + children: 'Recurring payments for subscriptions', }); }); - describe('subscription', () => { - it('renders RecurringPayment when isRecurring is true', () => { - const usageLimits = mountWithApp( - , - ); + it('renders neither', () => { + const usageLimits = mountWithApp( + , + ); - expect(usageLimits).toContainReactComponent(RecurringPayment); - }); - - it('does not render RecurringPayment when isRecurring is false', () => { - const usageLimits = mountWithApp( - , - ); - - expect(usageLimits).not.toContainReactComponent(RecurringPayment); - }); - - it('renders RecurringPayment with passed recurringPaymentType', () => { - const paymentTypeMock = mockField(RecurringPaymentType.AllPayments); - const usageLimits = mountWithApp( - , - ); - - expect(usageLimits).toContainReactComponent(RecurringPayment, { - recurringPaymentType: paymentTypeMock, - }); - }); - - it('renders RecurringPayment with passed recurringPaymentLimit', () => { - const recurringPaymentLimitMock = mockField('50'); - const usageLimits = mountWithApp( - , - ); - - expect(usageLimits).toContainReactComponent(RecurringPayment, { - recurringPaymentLimit: recurringPaymentLimitMock, - }); - }); + expect(usageLimits).not.toContainReactComponent(Card); + expect(usageLimits).not.toContainReactComponent(Text); }); }); diff --git a/src/stories/patterns/UsageLimitsPattern/UsageLimitsPattern.tsx b/src/stories/patterns/UsageLimitsPattern/UsageLimitsPattern.tsx index 467c2894..98eac8c7 100644 --- a/src/stories/patterns/UsageLimitsPattern/UsageLimitsPattern.tsx +++ b/src/stories/patterns/UsageLimitsPattern/UsageLimitsPattern.tsx @@ -15,6 +15,7 @@ export default function UsageLimitsPattern() { return (