@sudobility/subscription-components-rn 1.0.1

package/src/__tests__/SegmentedControl.test.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { SegmentedControl, PeriodSelector } from '../SegmentedControl';
+
+const options = [
+  { value: 'monthly', label: 'Monthly' },
+  { value: 'yearly', label: 'Yearly' },
+];
+
+describe('SegmentedControl', () => {
+  it('renders all options', () => {
+    const onChange = jest.fn();
+    render(
+      <SegmentedControl options={options} value="monthly" onChange={onChange} />
+    );
+
+    expect(screen.getByText('Monthly')).toBeTruthy();
+    expect(screen.getByText('Yearly')).toBeTruthy();
+  });
+
+  it('marks the selected option with accessibilityState.selected', () => {
+    const onChange = jest.fn();
+    render(
+      <SegmentedControl options={options} value="monthly" onChange={onChange} />
+    );
+
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs[0].props.accessibilityState.selected).toBe(true);
+    expect(tabs[1].props.accessibilityState.selected).toBe(false);
+  });
+
+  it('calls onChange when an unselected option is pressed', () => {
+    const onChange = jest.fn();
+    render(
+      <SegmentedControl options={options} value="monthly" onChange={onChange} />
+    );
+
+    fireEvent.press(screen.getByText('Yearly'));
+    expect(onChange).toHaveBeenCalledWith('yearly');
+  });
+
+  it('does not call onChange when the entire control is disabled', () => {
+    const onChange = jest.fn();
+    render(
+      <SegmentedControl
+        options={options}
+        value="monthly"
+        onChange={onChange}
+        disabled
+      />
+    );
+
+    fireEvent.press(screen.getByText('Yearly'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('does not call onChange when an individual option is disabled', () => {
+    const onChange = jest.fn();
+    const optionsWithDisabled = [
+      { value: 'a', label: 'A' },
+      { value: 'b', label: 'B', disabled: true },
+    ];
+    render(
+      <SegmentedControl
+        options={optionsWithDisabled}
+        value="a"
+        onChange={onChange}
+      />
+    );
+
+    fireEvent.press(screen.getByText('B'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('renders badge text when option has a badge', () => {
+    const onChange = jest.fn();
+    const optionsWithBadge = [
+      { value: 'monthly', label: 'Monthly' },
+      { value: 'yearly', label: 'Yearly', badge: 'Save 20%' },
+    ];
+    render(
+      <SegmentedControl
+        options={optionsWithBadge}
+        value="monthly"
+        onChange={onChange}
+      />
+    );
+
+    expect(screen.getByText('Save 20%')).toBeTruthy();
+  });
+
+  it('includes badge in accessibility label', () => {
+    const onChange = jest.fn();
+    const optionsWithBadge = [
+      { value: 'monthly', label: 'Monthly' },
+      { value: 'yearly', label: 'Yearly', badge: 'Save 20%' },
+    ];
+    render(
+      <SegmentedControl
+        options={optionsWithBadge}
+        value="monthly"
+        onChange={onChange}
+      />
+    );
+
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs[1].props.accessibilityLabel).toBe('Yearly, Save 20%');
+  });
+
+  it('applies custom accessibilityLabel to the container', () => {
+    const onChange = jest.fn();
+    render(
+      <SegmentedControl
+        options={options}
+        value="monthly"
+        onChange={onChange}
+        accessibilityLabel="Period picker"
+      />
+    );
+
+    expect(screen.getByLabelText('Period picker')).toBeTruthy();
+  });
+});
+
+describe('PeriodSelector', () => {
+  it('renders Monthly and Yearly options with default labels', () => {
+    const onPeriodChange = jest.fn();
+    render(
+      <PeriodSelector period="monthly" onPeriodChange={onPeriodChange} />
+    );
+
+    expect(screen.getByText('Monthly')).toBeTruthy();
+    expect(screen.getByText('Yearly')).toBeTruthy();
+  });
+
+  it('uses custom labels', () => {
+    const onPeriodChange = jest.fn();
+    render(
+      <PeriodSelector
+        period="monthly"
+        onPeriodChange={onPeriodChange}
+        monthlyLabel="Mensuel"
+        yearlyLabel="Annuel"
+      />
+    );
+
+    expect(screen.getByText('Mensuel')).toBeTruthy();
+    expect(screen.getByText('Annuel')).toBeTruthy();
+  });
+
+  it('calls onPeriodChange when switching period', () => {
+    const onPeriodChange = jest.fn();
+    render(
+      <PeriodSelector period="monthly" onPeriodChange={onPeriodChange} />
+    );
+
+    fireEvent.press(screen.getByText('Yearly'));
+    expect(onPeriodChange).toHaveBeenCalledWith('yearly');
+  });
+
+  it('renders yearly savings badge when provided', () => {
+    const onPeriodChange = jest.fn();
+    render(
+      <PeriodSelector
+        period="monthly"
+        onPeriodChange={onPeriodChange}
+        yearlySavings="Save 20%"
+      />
+    );
+
+    expect(screen.getByText('Save 20%')).toBeTruthy();
+  });
+
+  it('has the billing period selector accessibility label', () => {
+    const onPeriodChange = jest.fn();
+    render(
+      <PeriodSelector period="monthly" onPeriodChange={onPeriodChange} />
+    );
+
+    expect(screen.getByLabelText('Billing period selector')).toBeTruthy();
+  });
+});

package/src/__tests__/SubscriptionLayout.test.tsx

@@ -0,0 +1,312 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import {
+  SubscriptionLayout,
+  SubscriptionDivider,
+  SubscriptionFooter,
+} from '../SubscriptionLayout';
+
+describe('SubscriptionLayout', () => {
+  it('renders title and children', () => {
+    render(
+      <SubscriptionLayout title="Choose a Plan">
+        <Text>Child content</Text>
+      </SubscriptionLayout>
+    );
+
+    expect(screen.getByText('Choose a Plan')).toBeTruthy();
+    expect(screen.getByText('Child content')).toBeTruthy();
+  });
+
+  it('displays error message when error prop is provided', () => {
+    render(
+      <SubscriptionLayout title="Plans" error="Something went wrong">
+        <Text>Content</Text>
+      </SubscriptionLayout>
+    );
+
+    expect(screen.getByText('Something went wrong')).toBeTruthy();
+  });
+
+  it('does not display error section when error is null', () => {
+    render(
+      <SubscriptionLayout title="Plans" error={null}>
+        <Text>Content</Text>
+      </SubscriptionLayout>
+    );
+
+    expect(screen.queryByText('Something went wrong')).toBeNull();
+  });
+
+  it('renders primary and secondary action buttons in selection variant', () => {
+    const onPrimary = jest.fn();
+    const onSecondary = jest.fn();
+    render(
+      <SubscriptionLayout
+        title="Plans"
+        variant="selection"
+        primaryAction={{ label: 'Subscribe Now', onPress: onPrimary }}
+        secondaryAction={{ label: 'Restore', onPress: onSecondary }}
+      >
+        <Text>Content</Text>
+      </SubscriptionLayout>
+    );
+
+    expect(screen.getByText('Subscribe Now')).toBeTruthy();
+    expect(screen.getByText('Restore')).toBeTruthy();
+
+    fireEvent.press(screen.getByText('Subscribe Now'));
+    expect(onPrimary).toHaveBeenCalledTimes(1);
+
+    fireEvent.press(screen.getByText('Restore'));
+    expect(onSecondary).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render action buttons in cta variant', () => {
+    const onPrimary = jest.fn();
+    render(
+      <SubscriptionLayout
+        title="Plans"
+        variant="cta"
+        primaryAction={{ label: 'Subscribe Now', onPress: onPrimary }}
+      >
+        <Text>Content</Text>
+      </SubscriptionLayout>
+    );
+
+    expect(screen.queryByText('Subscribe Now')).toBeNull();
+  });
+
+  it('renders active subscription status', () => {
+    render(
+      <SubscriptionLayout
+        title="Plans"
+        currentStatus={{
+          isActive: true,
+          activeContent: {
+            title: 'Pro Subscription',
+            fields: [
+              { label: 'Plan', value: 'Pro' },
+              { label: 'Expires', value: 'Jan 1, 2027' },
+            ],
+          },
+        }}
+      >
+        <Text>Content</Text>
+      </SubscriptionLayout>
+    );
+
+    expect(screen.getByText('Pro Subscription')).toBeTruthy();
+    expect(screen.getByText('Plan')).toBeTruthy();
+    expect(screen.getByText('Pro')).toBeTruthy();
+    expect(screen.getByText('Expires')).toBeTruthy();
+    expect(screen.getByText('Jan 1, 2027')).toBeTruthy();
+  });
+
+  it('renders inactive subscription status', () => {
+    render(
+      <SubscriptionLayout
+        title="Plans"
+        currentStatus={{
+          isActive: false,
+          inactiveContent: {
+            title: 'No Subscription',
+            message: 'Subscribe to unlock features',
+          },
+        }}
+      >
+        <Text>Content</Text>
+      </SubscriptionLayout>
+    );
+
+    expect(screen.getByText('No Subscription')).toBeTruthy();
+    expect(screen.getByText('Subscribe to unlock features')).toBeTruthy();
+  });
+
+  it('renders custom currentStatusLabel', () => {
+    render(
+      <SubscriptionLayout
+        title="Plans"
+        currentStatus={{ isActive: false }}
+        currentStatusLabel="Your Status"
+      >
+        <Text>Content</Text>
+      </SubscriptionLayout>
+    );
+
+    expect(screen.getByText('Your Status')).toBeTruthy();
+  });
+
+  it('renders free tile in cta variant when freeTileConfig is provided', () => {
+    render(
+      <SubscriptionLayout
+        title="Plans"
+        variant="cta"
+        freeTileConfig={{
+          title: 'Free',
+          price: '$0',
+          features: ['Basic access'],
+          ctaButton: { label: 'Get Started', onPress: jest.fn() },
+        }}
+      >
+        <Text>Paid tiles</Text>
+      </SubscriptionLayout>
+    );
+
+    expect(screen.getByText('Free')).toBeTruthy();
+    expect(screen.getByText('$0')).toBeTruthy();
+    expect(screen.getByText('Basic access')).toBeTruthy();
+    expect(screen.getByText('Get Started')).toBeTruthy();
+  });
+
+  it('does not render free tile in selection variant', () => {
+    render(
+      <SubscriptionLayout
+        title="Plans"
+        variant="selection"
+        freeTileConfig={{
+          title: 'Free',
+          price: '$0',
+          features: ['Basic access'],
+          ctaButton: { label: 'Get Started', onPress: jest.fn() },
+        }}
+      >
+        <Text>Paid tiles</Text>
+      </SubscriptionLayout>
+    );
+
+    // The free tile title won't appear since it's selection variant
+    // However "Plans" title uses Text, so check for the free-specific price
+    expect(screen.queryByText('$0')).toBeNull();
+  });
+
+  it('renders header and footer content', () => {
+    render(
+      <SubscriptionLayout
+        title="Plans"
+        headerContent={<Text>Header info</Text>}
+        footerContent={<Text>Footer info</Text>}
+      >
+        <Text>Content</Text>
+      </SubscriptionLayout>
+    );
+
+    expect(screen.getByText('Header info')).toBeTruthy();
+    expect(screen.getByText('Footer info')).toBeTruthy();
+  });
+
+  it('renders aboveProducts content', () => {
+    render(
+      <SubscriptionLayout
+        title="Plans"
+        aboveProducts={<Text>Billing period selector</Text>}
+      >
+        <Text>Content</Text>
+      </SubscriptionLayout>
+    );
+
+    expect(screen.getByText('Billing period selector')).toBeTruthy();
+  });
+
+  it('calls onTrack when primary action is pressed', () => {
+    const onTrack = jest.fn();
+    render(
+      <SubscriptionLayout
+        title="Plans"
+        variant="selection"
+        primaryAction={{ label: 'Go', onPress: jest.fn() }}
+        onTrack={onTrack}
+        trackingLabel="sub_layout"
+      >
+        <Text>Content</Text>
+      </SubscriptionLayout>
+    );
+
+    fireEvent.press(screen.getByText('Go'));
+    expect(onTrack).toHaveBeenCalledWith({
+      action: 'primary_action',
+      trackingLabel: 'sub_layout',
+      componentName: 'SubscriptionLayout',
+    });
+  });
+});
+
+describe('SubscriptionDivider', () => {
+  it('renders without label (simple divider)', () => {
+    const { toJSON } = render(<SubscriptionDivider />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('renders with label text', () => {
+    render(<SubscriptionDivider label="or" />);
+    expect(screen.getByText('or')).toBeTruthy();
+  });
+});
+
+describe('SubscriptionFooter', () => {
+  it('renders default link text', () => {
+    render(
+      <SubscriptionFooter
+        onRestore={jest.fn()}
+        onTermsPress={jest.fn()}
+        onPrivacyPress={jest.fn()}
+      />
+    );
+
+    expect(screen.getByText('Restore Purchases')).toBeTruthy();
+    expect(screen.getByText('Terms of Service')).toBeTruthy();
+    expect(screen.getByText('Privacy Policy')).toBeTruthy();
+  });
+
+  it('renders custom link text', () => {
+    render(
+      <SubscriptionFooter
+        restoreText="Restaurer"
+        termsText="Conditions"
+        privacyText="Confidentialite"
+        onRestore={jest.fn()}
+        onTermsPress={jest.fn()}
+        onPrivacyPress={jest.fn()}
+      />
+    );
+
+    expect(screen.getByText('Restaurer')).toBeTruthy();
+    expect(screen.getByText('Conditions')).toBeTruthy();
+    expect(screen.getByText('Confidentialite')).toBeTruthy();
+  });
+
+  it('calls onRestore when restore is pressed', () => {
+    const onRestore = jest.fn();
+    render(<SubscriptionFooter onRestore={onRestore} />);
+
+    fireEvent.press(screen.getByText('Restore Purchases'));
+    expect(onRestore).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render restore link when onRestore is not provided', () => {
+    render(<SubscriptionFooter />);
+    expect(screen.queryByText('Restore Purchases')).toBeNull();
+  });
+
+  it('renders disclaimer text', () => {
+    render(<SubscriptionFooter />);
+    expect(
+      screen.getByText(/Subscriptions will automatically renew/)
+    ).toBeTruthy();
+  });
+
+  it('calls onTermsPress and onPrivacyPress', () => {
+    const onTerms = jest.fn();
+    const onPrivacy = jest.fn();
+    render(
+      <SubscriptionFooter onTermsPress={onTerms} onPrivacyPress={onPrivacy} />
+    );
+
+    fireEvent.press(screen.getByText('Terms of Service'));
+    expect(onTerms).toHaveBeenCalledTimes(1);
+
+    fireEvent.press(screen.getByText('Privacy Policy'));
+    expect(onPrivacy).toHaveBeenCalledTimes(1);
+  });
+});

package/src/__tests__/SubscriptionProvider.test.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react-native';
+import { Text, Pressable } from 'react-native';
+import {
+  SubscriptionProvider,
+  useSubscriptionContext,
+} from '../SubscriptionProvider';
+
+// Helper component that exposes context values for testing
+function TestConsumer() {
+  const ctx = useSubscriptionContext();
+  return (
+    <>
+      <Text testID="loading">{ctx.isLoading ? 'true' : 'false'}</Text>
+      <Text testID="error">{ctx.error ?? 'none'}</Text>
+      <Text testID="subscription">
+        {ctx.currentSubscription ? 'active' : 'none'}
+      </Text>
+      <Pressable
+        testID="initialize"
+        onPress={() => {
+          ctx.initialize();
+        }}
+      />
+      <Pressable
+        testID="purchase"
+        onPress={() => {
+          ctx.purchase('test_product');
+        }}
+      />
+      <Pressable
+        testID="restore"
+        onPress={() => {
+          ctx.restore();
+        }}
+      />
+      <Pressable testID="clearError" onPress={() => ctx.clearError()} />
+    </>
+  );
+}
+
+describe('SubscriptionProvider', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('throws when useSubscriptionContext is used outside provider', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => render(<TestConsumer />)).toThrow(
+      'useSubscriptionContext must be used within a SubscriptionProvider'
+    );
+    spy.mockRestore();
+  });
+
+  it('provides initial state with no loading, no error, no subscription', () => {
+    render(
+      <SubscriptionProvider apiKey="test_key">
+        <TestConsumer />
+      </SubscriptionProvider>
+    );
+
+    expect(screen.getByTestId('loading').props.children).toBe('false');
+    expect(screen.getByTestId('error').props.children).toBe('none');
+    expect(screen.getByTestId('subscription').props.children).toBe('none');
+  });
+
+  it('initializes in development mode (no real API key)', async () => {
+    const onError = jest.fn();
+    render(
+      <SubscriptionProvider apiKey="" onError={onError}>
+        <TestConsumer />
+      </SubscriptionProvider>
+    );
+
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('initialize'));
+    });
+
+    expect(screen.getByTestId('loading').props.children).toBe('false');
+    expect(screen.getByTestId('error').props.children).toBe('none');
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it('purchase flow sets active subscription in dev mode', async () => {
+    const onPurchaseSuccess = jest.fn();
+    render(
+      <SubscriptionProvider apiKey="" onPurchaseSuccess={onPurchaseSuccess}>
+        <TestConsumer />
+      </SubscriptionProvider>
+    );
+
+    // Start purchase
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('purchase'));
+    });
+
+    // Advance past the 2000ms simulated delay
+    await act(async () => {
+      jest.advanceTimersByTime(2100);
+    });
+
+    expect(screen.getByTestId('subscription').props.children).toBe('active');
+    expect(onPurchaseSuccess).toHaveBeenCalledWith('test_product');
+  });
+
+  it('restore flow sets error "No previous purchases found" in dev mode', async () => {
+    render(
+      <SubscriptionProvider apiKey="">
+        <TestConsumer />
+      </SubscriptionProvider>
+    );
+
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('restore'));
+    });
+
+    await act(async () => {
+      jest.advanceTimersByTime(1100);
+    });
+
+    expect(screen.getByTestId('error').props.children).toBe(
+      'No previous purchases found'
+    );
+  });
+
+  it('clearError resets error to null', async () => {
+    render(
+      <SubscriptionProvider apiKey="">
+        <TestConsumer />
+      </SubscriptionProvider>
+    );
+
+    // Trigger restore to get an error
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('restore'));
+    });
+    await act(async () => {
+      jest.advanceTimersByTime(1100);
+    });
+
+    expect(screen.getByTestId('error').props.children).toBe(
+      'No previous purchases found'
+    );
+
+    // Clear it
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('clearError'));
+    });
+
+    expect(screen.getByTestId('error').props.children).toBe('none');
+  });
+
+  it('initialize only runs once (idempotent)', async () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    render(
+      <SubscriptionProvider apiKey="">
+        <TestConsumer />
+      </SubscriptionProvider>
+    );
+
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('initialize'));
+    });
+
+    warn.mockClear();
+
+    // Second call should be a no-op (isInitialized is true)
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('initialize'));
+    });
+
+    // The warning should not fire again because initialize returns early
+    expect(warn).not.toHaveBeenCalled();
+    warn.mockRestore();
+  });
+});