| 1 |
/** |
| 2 |
* Component Test - Site Identity Integration |
| 3 |
* |
| 4 |
* Test implementation to verify shared components work correctly |
| 5 |
* with existing Site Identity implementation and maintain backward compatibility. |
| 6 |
* |
| 7 |
* This file demonstrates how to integrate OptimizationButton and SettingsCard |
| 8 |
* with the existing Site Identity patterns. |
| 9 |
* |
| 10 |
* @package ThinkRank |
| 11 |
* @since 1.0.0 |
| 12 |
*/ |
| 13 |
|
| 14 |
import { useState } from '@wordpress/element'; |
| 15 |
import { __ } from '@wordpress/i18n'; |
| 16 |
import OptimizationButton from './OptimizationButton'; |
| 17 |
import SettingsCard from './SettingsCard'; |
| 18 |
import useTabSettings from '../hooks/useTabSettings'; |
| 19 |
|
| 20 |
/** |
| 21 |
* Test Component showing Site Identity integration |
| 22 |
*/ |
| 23 |
const ComponentTest = () => { |
| 24 |
// Test the useTabSettings hook with Site Identity patterns |
| 25 |
const { |
| 26 |
settings, |
| 27 |
hasChanges, |
| 28 |
notice, |
| 29 |
isLoading, |
| 30 |
isSaving, |
| 31 |
isOptimizing, |
| 32 |
isValidating, |
| 33 |
handleSettingChange, |
| 34 |
saveSettings, |
| 35 |
runOptimization, |
| 36 |
runValidation, |
| 37 |
clearNotice |
| 38 |
} = useTabSettings('site-identity', { |
| 39 |
enabled: true, |
| 40 |
site_name: '', |
| 41 |
site_description: '', |
| 42 |
tagline: '' |
| 43 |
}); |
| 44 |
|
| 45 |
// Test state for different optimization types |
| 46 |
const [isAiOptimizing, setIsAiOptimizing] = useState(false); |
| 47 |
const [activeSubSection, setActiveSubSection] = useState('basic-info'); |
| 48 |
|
| 49 |
/** |
| 50 |
* Test AI optimization function (mimics Site Identity optimizeBasicInfo) |
| 51 |
*/ |
| 52 |
const testAiOptimization = async () => { |
| 53 |
setIsAiOptimizing(true); |
| 54 |
try { |
| 55 |
// Simulate AI optimization |
| 56 |
await new Promise(resolve => setTimeout(resolve, 2000)); |
| 57 |
console.log('AI optimization completed'); |
| 58 |
} catch (error) { |
| 59 |
console.error('AI optimization failed:', error); |
| 60 |
} finally { |
| 61 |
setIsAiOptimizing(false); |
| 62 |
} |
| 63 |
}; |
| 64 |
|
| 65 |
/** |
| 66 |
* Test rule-based optimization function (mimics Site Identity optimizeIdentity) |
| 67 |
*/ |
| 68 |
const testRuleOptimization = async () => { |
| 69 |
await runOptimization('rule', { |
| 70 |
identity_data: settings, |
| 71 |
options: { focus: 'title_formats' } |
| 72 |
}); |
| 73 |
}; |
| 74 |
|
| 75 |
/** |
| 76 |
* Test validation function (mimics Site Identity validateSettings) |
| 77 |
*/ |
| 78 |
const testValidation = async () => { |
| 79 |
await runValidation('settings', { |
| 80 |
settings: settings |
| 81 |
}); |
| 82 |
}; |
| 83 |
|
| 84 |
/** |
| 85 |
* Get optimization button configuration (mimics Site Identity getOptimizationButtonConfig) |
| 86 |
*/ |
| 87 |
const getOptimizationButtonConfig = () => { |
| 88 |
switch (activeSubSection) { |
| 89 |
case 'basic-info': |
| 90 |
return { |
| 91 |
type: 'ai', |
| 92 |
onClick: testAiOptimization, |
| 93 |
isBusy: isAiOptimizing, |
| 94 |
disabled: !settings.enabled || isAiOptimizing |
| 95 |
}; |
| 96 |
case 'title-formats': |
| 97 |
return { |
| 98 |
type: 'rule', |
| 99 |
label: __('Validate & Optimize Titles', 'thinkrank'), |
| 100 |
onClick: testRuleOptimization, |
| 101 |
isBusy: isOptimizing, |
| 102 |
disabled: !settings.enabled || isOptimizing |
| 103 |
}; |
| 104 |
case 'validation-test': |
| 105 |
return { |
| 106 |
type: 'validate', |
| 107 |
onClick: testValidation, |
| 108 |
isBusy: isValidating, |
| 109 |
disabled: !settings.enabled || isValidating |
| 110 |
}; |
| 111 |
default: |
| 112 |
return { |
| 113 |
type: 'rule', |
| 114 |
onClick: testRuleOptimization, |
| 115 |
isBusy: isOptimizing, |
| 116 |
disabled: !settings.enabled || isOptimizing |
| 117 |
}; |
| 118 |
} |
| 119 |
}; |
| 120 |
|
| 121 |
if (isLoading) { |
| 122 |
return <div>Loading...</div>; |
| 123 |
} |
| 124 |
|
| 125 |
const buttonConfig = getOptimizationButtonConfig(); |
| 126 |
|
| 127 |
return ( |
| 128 |
<div className="thinkrank-component-test"> |
| 129 |
<h2>{__('Component Integration Test', 'thinkrank')}</h2> |
| 130 |
|
| 131 |
{/* Test section selector */} |
| 132 |
<div style={{ marginBottom: '20px' }}> |
| 133 |
<label>{__('Test Section:', 'thinkrank')}</label> |
| 134 |
<select |
| 135 |
value={activeSubSection} |
| 136 |
onChange={(e) => setActiveSubSection(e.target.value)} |
| 137 |
style={{ marginLeft: '10px' }} |
| 138 |
> |
| 139 |
<option value="basic-info">{__('Basic Info (AI)', 'thinkrank')}</option> |
| 140 |
<option value="title-formats">{__('Title Formats (Rule)', 'thinkrank')}</option> |
| 141 |
<option value="validation-test">{__('Validation Test', 'thinkrank')}</option> |
| 142 |
</select> |
| 143 |
</div> |
| 144 |
|
| 145 |
{/* Test SettingsCard component with Site Identity patterns */} |
| 146 |
<SettingsCard |
| 147 |
title={__('Site Identity Settings Test', 'thinkrank')} |
| 148 |
enabled={settings.enabled} |
| 149 |
onToggle={(value) => handleSettingChange('enabled', value)} |
| 150 |
toggleLabel={__('Enable Site Identity', 'thinkrank')} |
| 151 |
optimizationButtons={[ |
| 152 |
// Test validation button (only for basic-info) |
| 153 |
activeSubSection === 'basic-info' && ( |
| 154 |
<OptimizationButton |
| 155 |
key="validate" |
| 156 |
type="validate" |
| 157 |
onClick={testValidation} |
| 158 |
isBusy={isValidating} |
| 159 |
disabled={!settings.enabled || isValidating} |
| 160 |
/> |
| 161 |
), |
| 162 |
// Test main optimization button |
| 163 |
<OptimizationButton |
| 164 |
key="optimize" |
| 165 |
type={buttonConfig.type} |
| 166 |
label={buttonConfig.label} |
| 167 |
onClick={buttonConfig.onClick} |
| 168 |
isBusy={buttonConfig.isBusy} |
| 169 |
disabled={buttonConfig.disabled} |
| 170 |
/> |
| 171 |
].filter(Boolean)} |
| 172 |
notice={notice} |
| 173 |
onNoticeRemove={clearNotice} |
| 174 |
showDisabledWarning={true} |
| 175 |
disabledWarningMessage={__('Site identity features are disabled. Enable to configure title formats, breadcrumbs, and robots.txt.', 'thinkrank')} |
| 176 |
> |
| 177 |
{/* Test content that mimics Site Identity structure */} |
| 178 |
<div className="tab-content"> |
| 179 |
<p>{__('Current section:', 'thinkrank')} <strong>{activeSubSection}</strong></p> |
| 180 |
<p>{__('Settings enabled:', 'thinkrank')} <strong>{settings.enabled ? 'Yes' : 'No'}</strong></p> |
| 181 |
<p>{__('Has changes:', 'thinkrank')} <strong>{hasChanges ? 'Yes' : 'No'}</strong></p> |
| 182 |
|
| 183 |
{/* Test save button */} |
| 184 |
<div style={{ marginTop: '20px', textAlign: 'right' }}> |
| 185 |
<button |
| 186 |
onClick={saveSettings} |
| 187 |
disabled={!hasChanges || isSaving} |
| 188 |
style={{ |
| 189 |
padding: '8px 16px', |
| 190 |
backgroundColor: hasChanges ? '#0073aa' : '#ccc', |
| 191 |
color: 'white', |
| 192 |
border: 'none', |
| 193 |
borderRadius: '4px', |
| 194 |
cursor: hasChanges ? 'pointer' : 'not-allowed' |
| 195 |
}} |
| 196 |
> |
| 197 |
{isSaving ? __('Saving...', 'thinkrank') : __('Save Settings', 'thinkrank')} |
| 198 |
</button> |
| 199 |
</div> |
| 200 |
</div> |
| 201 |
</SettingsCard> |
| 202 |
|
| 203 |
{/* Test individual OptimizationButton components */} |
| 204 |
<div style={{ marginTop: '30px' }}> |
| 205 |
<h3>{__('Individual Button Tests', 'thinkrank')}</h3> |
| 206 |
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}> |
| 207 |
<OptimizationButton type="ai" onClick={() => console.log('AI clicked')} /> |
| 208 |
<OptimizationButton type="rule" onClick={() => console.log('Rule clicked')} /> |
| 209 |
<OptimizationButton type="validate" onClick={() => console.log('Validate clicked')} /> |
| 210 |
<OptimizationButton type="test" onClick={() => console.log('Test clicked')} /> |
| 211 |
<OptimizationButton type="generate" onClick={() => console.log('Generate clicked')} /> |
| 212 |
</div> |
| 213 |
</div> |
| 214 |
|
| 215 |
{/* Test loading states */} |
| 216 |
<div style={{ marginTop: '20px' }}> |
| 217 |
<h3>{__('Loading State Tests', 'thinkrank')}</h3> |
| 218 |
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}> |
| 219 |
<OptimizationButton type="ai" isBusy={true} onClick={() => {}} /> |
| 220 |
<OptimizationButton type="rule" isBusy={true} onClick={() => {}} /> |
| 221 |
<OptimizationButton type="validate" isBusy={true} onClick={() => {}} /> |
| 222 |
</div> |
| 223 |
</div> |
| 224 |
</div> |
| 225 |
); |
| 226 |
}; |
| 227 |
|
| 228 |
export default ComponentTest; |
| 229 |
|
