Mock Data Package (@schwab/mock-data)

Overview

The @schwab/mock-data package provides a comprehensive collection of mock data files used for testing, development, and prototyping across the Charles Schwab monorepo. It contains realistic sample data that mirrors production API responses, content structures, and component configurations, enabling developers to build and test features without requiring live data connections.

Architecture

Package Configuration

Structure and Exports

Package Configuration

{
  "name": "@schwab/mock-data",
  "description": "Mock Data for Testing",
  "exports": {
    "./*": "./src/*"
  }
}

Usage Pattern:

// Import specific mock data files
import personData from '@schwab/mock-data/person-all-components.json';
import navigationData from '@schwab/mock-data/meganav.json';
import branchData from '@schwab/mock-data/branches_list.json';

Core Data Categories

1. Content Components

Person Profile Data

Person Component Structure

// person-all-components.json
{
  "role": "person",
  "components": [
    {
      "role": "marquee",
      "styles": {
        "displayTitle": true,
        "hasMargin": false,
        "slotsLayout": "50%/50%",
        "width": "66"
      },
      "components": [
        {
          "role": "image",
          "styles": { "aspectRatio": "1_1" },
          "title": "Adams_Hayden_A101780_365x365.jpg",
          "altText": "Hayden Adams",
          "src": "https://education.dev-schwab.acsitefactory.com/...",
          "index": 1
        },
        {
          "role": "lockup-person",
          "certifications": [
            { "value": "Certified Public Accountant (CPA)" },
            { "value": "Certified Financial Planner (CFP®)" }
          ],
          "company": "Schwab Center for Financial Research",
          "jobTitle": "Director of Tax and Wealth Management",
          "name": "Hayden Adams",
          "email": "email@schwab.com"
        }
      ]
    }
  ]
}

Story Content Structure

Story Page Data

// story-all-components.json
{
  "role": "story",
  "meta": {
    "title": "Sample Story Title",
    "description": "Story meta description",
    "publishDate": "2024-01-15T00:00:00Z"
  },
  "components": [
    // Rich content components for stories
  ]
}

2. Navigation and Menu Data

Mega Navigation Structure

Navigation Data Files

// meganav.json - Main navigation structure
// advisorservice_meganav_raw.json - Advisor service navigation
// prospect_meganav_raw.json - Prospect-specific navigation
// cc_nav.json - Client center navigation

Features:

• Multi-level menu hierarchies
• Role-based navigation variants
• Responsive menu configurations
• Authentication-aware menu states

3. Financial Products and Services

Account Data

Account Mock Data

// cc_accounts.json - Client center account data
// cc_accounts2.json - Extended account information
// cc_tabs.json - Account tab configurations

Product Information:

• Investment accounts (IRA, 401k, Brokerage)
• Banking products and services
• Insurance and retirement planning
• Trading and research tools

4. Location and Branch Data

Branch Information

Branch Data Structure

// branches_list.json
{
  "branches": [
    {
      "id": "branch_001",
      "name": "Downtown Financial Center",
      "address": {
        "street": "123 Main Street",
        "city": "San Francisco",
        "state": "CA",
        "zip": "94105"
      },
      "coordinates": {
        "latitude": 37.7749,
        "longitude": -122.4194
      },
      "services": ["Investment Consulting", "Retirement Planning"],
      "hours": {
        "monday": "9:00 AM - 5:00 PM",
        "tuesday": "9:00 AM - 5:00 PM"
      }
    }
  ]
}

Consultant Data:

Consultant Information

// consulstants_list_lat_longtitude.json
{
  "consultants": [
    {
      "id": "consultant_001",
      "name": "John Smith",
      "title": "Senior Financial Consultant",
      "specializations": ["Retirement Planning", "Tax Strategies"],
      "location": {
        "branchId": "branch_001",
        "coordinates": {
          "latitude": 37.7749,
          "longitude": -122.4194
        }
      }
    }
  ]
}

API Response Mocking

1. Drupal/CMS API Responses

JSONAPI Format:

CMS API Mock Data

// jsonapi_11416.json - Standard JSONAPI response
// jsonapi_21.json - Alternative content structure
// jsonapi_ira.json - IRA-specific content
// NewIRA-jsonapi.json - New IRA product data

Content Types:

• Article pages and educational content
• Product landing pages
• Hub and category pages
• Personalized content variations

2. Financial Services APIs

Financial Data Mocks

// ira-new.json - IRA account creation flow
// ira-processed.json - Processed IRA data
// ira-new-segmented.json - Segmented IRA offerings
// retail.json - Retail banking products

3. Interactive Components

Form and Lead Generation:

Lead Generation Forms

// lead-gen-form.json
{
  "formConfig": {
    "fields": [
      {
        "type": "text",
        "name": "firstName",
        "label": "First Name",
        "required": true,
        "validation": {
          "minLength": 2,
          "maxLength": 50
        }
      },
      {
        "type": "email", 
        "name": "email",
        "label": "Email Address",
        "required": true
      }
    ],
    "submitEndpoint": "/api/leads",
    "tracking": {
      "category": "lead_generation",
      "action": "form_submit"
    }
  }
}

Component-Specific Mock Data

1. UI Component Libraries

Storybook Integration:

Component Mock Data

// hub-all-components.json - Hub page components
// mosaic-test.json - Mosaic layout testing
// table-test.json - Data table components  
// recursive-test.json - Nested component structures

2. Interactive Elements

Video and Media:

Media Component Data

// fxVideo.json - Foreign exchange video content
// fxDeckAndCard.json - FX trading interface components
// fxAccordion.json - Expandable content sections

Beacon and Alerts:

Alert and Notification Data

// beaconDeck.json - Alert and notification system
// bcnMarquee.json - Beacon marquee components

Development Workflows

1. Testing Integration

Jest Testing with Mock Data

import mockPersonData from '@schwab/mock-data/person-all-components.json';
import { render, screen } from '@testing-library/react';
import PersonComponent from '../PersonComponent';

describe('PersonComponent', () => {
  it('renders person information correctly', () => {
    render(<PersonComponent data={mockPersonData} />);
    
    expect(screen.getByText('Hayden Adams')).toBeInTheDocument();
    expect(screen.getByText('Director of Tax and Wealth Management')).toBeInTheDocument();
  });
});

2. Storybook Integration

Storybook Stories with Mock Data

import type { Meta, StoryObj } from '@storybook/react';
import navigationMock from '@schwab/mock-data/meganav.json';
import NavigationComponent from './Navigation';

const meta: Meta<typeof NavigationComponent> = {
  title: 'Components/Navigation',
  component: NavigationComponent,
};

export default meta;

export const Default: StoryObj = {
  args: {
    data: navigationMock
  }
};

export const AdvisorVariant: StoryObj = {
  args: {
    data: advisorNavigationMock
  }
};

3. Development Server Mocking

API Mocking for Development

// Mock API responses during development
import { setupWorker, rest } from 'msw';
import branchData from '@schwab/mock-data/branches_list.json';
import accountData from '@schwab/mock-data/cc_accounts.json';

export const worker = setupWorker(
  rest.get('/api/branches', (req, res, ctx) => {
    return res(ctx.json(branchData));
  }),
  
  rest.get('/api/accounts', (req, res, ctx) => {
    return res(ctx.json(accountData));
  })
);

Data Validation and Type Safety

1. Schema Validation

Mock Data Validation

import { z } from 'zod';
import mockData from '@schwab/mock-data/person-all-components.json';

const PersonSchema = z.object({
  role: z.literal('person'),
  components: z.array(z.object({
    role: z.string(),
    // ... component schema
  }))
});

// Validate mock data matches expected schema
const validatedData = PersonSchema.parse(mockData);

2. TypeScript Integration

Type-Safe Mock Data Usage

interface PersonMockData {
  role: 'person';
  components: ComponentData[];
}

// Ensure mock data matches TypeScript interfaces
const personMock: PersonMockData = mockPersonData;

Mock Data Categories

Content and Editorial

File	Description	Use Case
person-all-components.json	Complete person profile with all components	Person page testing
story-all-components.json	Full story page structure	Article/story development
hub-all-components.json	Hub page component collection	Hub page testing
storyPage.json	Story page configuration	Content management testing

Navigation and Menus

File	Description	Use Case
meganav.json	Main site navigation structure	Navigation component testing
advisorservice_meganav_raw.json	Advisor-specific navigation	Role-based navigation
prospect_meganav_raw.json	Prospect user navigation	User segmentation testing
cc_nav.json	Client center navigation	Authenticated user flows

Financial Data

File	Description	Use Case
ira-new.json	IRA account creation data	Account opening flows
cc_accounts.json	Client account information	Account dashboard testing
retail.json	Retail banking products	Product page development
NewIRA-jsonapi.json	New IRA JSONAPI response	API integration testing

Location and Services

File	Description	Use Case
branches_list.json	Branch location data	Branch locator testing
consulstants_list_lat_longtitude.json	Consultant location data	Advisor search functionality
redirects-from-cmap.json	URL redirect mappings	Redirect testing

Advanced Mock Data Patterns

1. Dynamic Mock Generation

Dynamic Mock Data Creation

export function createPersonMock(overrides: Partial<PersonData> = {}) {
  return {
    ...basePersonMock,
    ...overrides,
    components: [
      ...basePersonMock.components,
      ...(overrides.components || [])
    ]
  };
}

// Usage in tests
const customPersonMock = createPersonMock({
  name: 'Custom Name',
  jobTitle: 'Custom Title'
});

2. Realistic Data Generation

Faker.js Integration for Realistic Data

import { faker } from '@faker-js/faker';

export function generateRealisticBranchData(count: number = 10) {
  return Array.from({ length: count }, () => ({
    id: faker.datatype.uuid(),
    name: `${faker.address.city()} Financial Center`,
    address: {
      street: faker.address.streetAddress(),
      city: faker.address.city(),
      state: faker.address.stateAbbr(),
      zip: faker.address.zipCode()
    },
    coordinates: {
      latitude: faker.address.latitude(),
      longitude: faker.address.longitude()
    }
  }));
}

Performance Considerations

1. Lazy Loading Mock Data

Efficient Mock Data Loading

// Only load mock data when needed
export const getMockData = (mockName: string) => {
  return import(`@schwab/mock-data/${mockName}.json`)
    .then(module => module.default);
};

// Usage
const personData = await getMockData('person-all-components');

2. Mock Data Caching

Cache Mock Data for Performance

const mockDataCache = new Map();

export function getCachedMockData(filename: string) {
  if (!mockDataCache.has(filename)) {
    const data = require(`@schwab/mock-data/${filename}.json`);
    mockDataCache.set(filename, data);
  }
  return mockDataCache.get(filename);
}

Quality Assurance

1. Mock Data Validation

• Regular validation against production schemas
• Automated testing of mock data completeness
• Version control for mock data changes
• Documentation of mock data usage patterns

2. Maintenance Guidelines

Mock Data Maintenance

// Regular updates to keep mock data current
export const validateMockData = () => {
  // Validate all mock files against current schemas
  // Report missing or outdated mock data
  // Suggest updates based on API changes
};

Future Enhancements

Planned Improvements

1. Dynamic Mock Generation: AI-powered realistic data generation
2. Schema Synchronization: Automatic sync with API schemas
3. Versioning: Mock data versioning aligned with API versions
4. Interactive Builder: UI for creating and editing mock data
5. Performance Metrics: Analytics on mock data usage and performance

---

The Mock Data package provides essential testing and development infrastructure that enables rapid prototyping, comprehensive testing, and realistic development environments across the Charles Schwab monorepo. Its comprehensive coverage of all data types and scenarios ensures that applications can be developed and tested effectively without dependencies on live services.