# Testing Analytics Audience Feature

## Quick Browser Console Test

After the page loads with GrowthStack, open browser console and run:

### 1. Check if feature is available

```javascript
console.log(window.growthstack.analyticsAudience);
```

**Expected output**: Object with all the API methods
```javascript
{
  AudienceWidgetFill: ƒ,
  AudienceWidgetSlot: ƒ,
  registerAudienceWidget: ƒ,
  getRegisteredAudienceWidgets: ƒ,
  AudienceWidgetsRenderer: ƒ,
  hasAudienceWidgets: ƒ,
  getAudienceWidgetCount: ƒ
}
```

### 2. Check initial state (no widgets registered yet)

```javascript
console.log('Has widgets?', window.growthstack.analyticsAudience.hasAudienceWidgets());
console.log('Widget count:', window.growthstack.analyticsAudience.getAudienceWidgetCount());
```

**Expected output**:
```
Has widgets? false
Widget count: 0
```

### 3. Create and register a test widget

```javascript
// Create a simple test widget component
const TestWidget = () => {
  const { AudienceWidgetFill } = window.growthstack.analyticsAudience;
  return React.createElement(
    AudienceWidgetFill,
    null,
    React.createElement('div', {
      style: { 
        padding: '20px', 
        border: '2px solid blue', 
        margin: '10px',
        background: 'white'
      }
    }, 
      React.createElement('h3', null, 'Test Audience Widget'),
      React.createElement('p', null, 'This widget was registered via console!')
    )
  );
};

// Register it
window.growthstack.analyticsAudience.registerAudienceWidget(TestWidget);
console.log('✅ Test widget registered!');
```

### 4. Verify registration

```javascript
console.log('Has widgets?', window.growthstack.analyticsAudience.hasAudienceWidgets());
console.log('Widget count:', window.growthstack.analyticsAudience.getAudienceWidgetCount());
console.log('All widgets:', window.growthstack.analyticsAudience.getRegisteredAudienceWidgets());
```

**Expected output**:
```
Has widgets? true
Widget count: 1
All widgets: [ƒ TestWidget()]
```

### 5. Register multiple widgets

```javascript
// Register a second widget
const StatsWidget = () => {
  const { AudienceWidgetFill } = window.growthstack.analyticsAudience;
  return React.createElement(
    AudienceWidgetFill,
    null,
    React.createElement('div', {
      style: { 
        padding: '20px', 
        border: '2px solid green', 
        margin: '10px',
        background: 'white'
      }
    }, 
      React.createElement('h3', null, 'Visitor Stats'),
      React.createElement('ul', null,
        React.createElement('li', null, 'Total: 1,234'),
        React.createElement('li', null, 'New: 456'),
        React.createElement('li', null, 'Returning: 778')
      )
    )
  );
};

window.growthstack.analyticsAudience.registerAudienceWidget(StatsWidget);
console.log('✅ Second widget registered!');

console.log('Widget count:', window.growthstack.analyticsAudience.getAudienceWidgetCount());
```

**Expected output**:
```
✅ Second widget registered!
Widget count: 2
```

## Testing with Pro Plugin

If you have the Pro plugin active:

```javascript
// Pro plugin should register its own widgets
// Check the console for Pro plugin registration messages

// Count all widgets (free + pro)
console.log('Total widgets:', window.growthstack.analyticsAudience.getAudienceWidgetCount());
```

## Full Example Script

Copy and paste this entire script into console:

```javascript
(function testAnalyticsAudience() {
  const api = window.growthstack.analyticsAudience;
  
  console.group('🧪 Analytics Audience API Test');
  
  // Initial state
  console.log('1️⃣ Initial state:');
  console.log('   Has widgets?', api.hasAudienceWidgets());
  console.log('   Count:', api.getAudienceWidgetCount());
  
  // Create test widget
  const TestWidget = () => {
    return React.createElement(
      api.AudienceWidgetFill,
      null,
      React.createElement('div', {
        style: { 
          padding: '20px', 
          border: '3px solid #4CAF50', 
          borderRadius: '8px',
          margin: '10px',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: 'white',
          boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
        }
      },
        React.createElement('h3', { style: { margin: '0 0 10px 0' } }, '✅ Test Widget Active'),
        React.createElement('p', { style: { margin: 0 } }, 'Successfully registered via console!')
      )
    );
  };
  
  // Register
  api.registerAudienceWidget(TestWidget);
  console.log('2️⃣ Registered test widget');
  
  // Verify
  console.log('3️⃣ After registration:');
  console.log('   Has widgets?', api.hasAudienceWidgets());
  console.log('   Count:', api.getAudienceWidgetCount());
  console.log('   Widgets:', api.getRegisteredAudienceWidgets());
  
  console.log('✅ Test complete!');
  console.groupEnd();
})();
```

## Expected Results

✅ **Success indicators:**
- `hasAudienceWidgets()` returns `true` after registration
- `getAudienceWidgetCount()` returns correct number (1, 2, 3, etc.)
- `getRegisteredAudienceWidgets()` returns array of components
- Console shows debug messages: `[GrowthStack AnalyticsAudience] Fill registered. Total fills: X`

❌ **Failure indicators:**
- `window.growthstack.analyticsAudience` is `undefined` → Feature not loaded
- Count stays at 0 after registration → Registry not working
- Console errors → Check webpack externals configuration

## Real Usage Example

To actually render the widgets on a page, you would:

1. Import the renderer in your component:
```javascript
import { AudienceWidgetsRenderer, hasAudienceWidgets } from 'growthstack/extendable/analytics-audience';
```

2. Use it in your JSX:
```javascript
{hasAudienceWidgets() && (
  <div className="audience-widgets">
    <AudienceWidgetsRenderer />
  </div>
)}
```

This will automatically render all registered widgets!