diff --git a/frontend/features/verification/__tests__/spv-step.test.tsx b/frontend/features/verification/__tests__/spv-step.test.tsx
index 74c36b0..ab446a2 100644
--- a/frontend/features/verification/__tests__/spv-step.test.tsx
+++ b/frontend/features/verification/__tests__/spv-step.test.tsx
@@ -1,68 +1,72 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import SPVStep from '../spv-step'; // Adjust path to your component
-import { useVerificationStore } from '@/store/verificationStore'; // Adjust path to your Zustand store
+import SPVPrivacyStep from '../components/steps/SPVPrivacyStep';
+import { useWizardStore } from '../store/wizard.store';
-// 1. Mock the Zustand store
-jest.mock('@/store/verificationStore', () => ({
- useVerificationStore: jest.fn(),
+// 1. Mock the specific Wizard Zustand store
+jest.mock('../store/wizard.store', () => ({
+ useWizardStore: jest.fn(),
}));
-describe('SPVStep Component', () => {
- const mockSetPrivacyOption = jest.fn();
+describe('SPVPrivacyStep Component', () => {
+ const mockSetEncryptionEnabled = jest.fn();
beforeEach(() => {
jest.clearAllMocks();
- // Set up the default mock return value for the Zustand store hook
- (useVerificationStore as unknown as jest.Mock).mockReturnValue({
- privacyOption: null, // Initial state
- setPrivacyOption: mockSetPrivacyOption,
+ // Set up default store mock state (KMS Encrypted / true by default)
+ (useWizardStore as unknown as jest.Mock).mockReturnValue({
+ formData: {
+ content: {
+ encryptionEnabled: true,
+ }
+ },
+ setEncryptionEnabled: mockSetEncryptionEnabled,
});
});
it('renders the SPV privacy options correctly', () => {
- render();
+ render();
- // Adjust these queries based on your actual UI text/roles
expect(screen.getByText(/Privacy Options/i)).toBeInTheDocument();
- // Assuming you have buttons or radio inputs for the options
- const publicOption = screen.getByRole('button', { name: /Public/i });
- const privateOption = screen.getByRole('button', { name: /Private/i });
+ const publicOption = screen.getByText('Public');
+ const privateOption = screen.getByText('KMS Encrypted');
expect(publicOption).toBeInTheDocument();
expect(privateOption).toBeInTheDocument();
});
- it('updates the Zustand store when a privacy option is clicked', async () => {
+ it('calls setEncryptionEnabled with false when Public is clicked', async () => {
const user = userEvent.setup();
- render();
+ render();
- // Find the option element to interact with
- const privateOption = screen.getByRole('button', { name: /Private/i });
+ // Grab the interactive element (the div holding the Public option)
+ const publicOptionContainer = screen.getByText('Public').closest('div[role="button"]');
- // Simulate the user click event
- await user.click(privateOption);
+ await user.click(publicOptionContainer!);
- // Verify the store action was called with the expected value
- // Adjust 'private' to whatever value your state actually expects
- expect(mockSetPrivacyOption).toHaveBeenCalledTimes(1);
- expect(mockSetPrivacyOption).toHaveBeenCalledWith('private');
+ expect(mockSetEncryptionEnabled).toHaveBeenCalledTimes(1);
+ expect(mockSetEncryptionEnabled).toHaveBeenCalledWith(false);
});
- it('displays the correct active state based on the store value', () => {
- // Override the mock for this specific test to simulate an already selected option
- (useVerificationStore as unknown as jest.Mock).mockReturnValue({
- privacyOption: 'private',
- setPrivacyOption: mockSetPrivacyOption,
+ it('displays the correct active styling based on store boolean', () => {
+ // Override mock to test the Public (false) active state
+ (useWizardStore as unknown as jest.Mock).mockReturnValue({
+ formData: {
+ content: {
+ encryptionEnabled: false,
+ }
+ },
+ setEncryptionEnabled: mockSetEncryptionEnabled,
});
- render();
+ render();
- // Example assertion: Check if the selected button has a specific class or aria attribute
- // This depends heavily on how your UI library handles selected states
- const privateOption = screen.getByRole('button', { name: /Private/i });
- expect(privateOption).toHaveAttribute('aria-pressed', 'true');
+ const publicOptionContainer = screen.getByText('Public').closest('div[role="button"]');
+
+ // Check if the Tailwind active classes applied correctly
+ expect(publicOptionContainer).toHaveClass('bg-blue-50');
+ expect(publicOptionContainer).toHaveClass('border-blue-500');
});
});
\ No newline at end of file
diff --git a/frontend/features/verification/components/steps/SPVPrivacyStep.tsx b/frontend/features/verification/components/steps/SPVPrivacyStep.tsx
new file mode 100644
index 0000000..e508f00
--- /dev/null
+++ b/frontend/features/verification/components/steps/SPVPrivacyStep.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { Info } from 'lucide-react';
+import { useWizardStore } from '../../store/wizard.store';
+import clsx from 'clsx';
+
+const SPVPrivacyStep = () => {
+ const { formData, setEncryptionEnabled } = useWizardStore();
+
+ // Default to true as defined in your defaultContent store configuration
+ const isEncrypted = formData.content?.encryptionEnabled ?? true;
+
+ return (
+
+
+
Privacy Options
+
+ Select how your verification data is handled on the Stellar network.
+