302 lines
12 KiB
HTML
302 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Property Data API Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.container {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
.test-section {
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
}
|
|
.test-button {
|
|
background: #007bff;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
.test-button:hover {
|
|
background: #0056b3;
|
|
}
|
|
.result {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 5px;
|
|
padding: 15px;
|
|
margin-top: 10px;
|
|
white-space: pre-wrap;
|
|
font-family: monospace;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
.error {
|
|
background: #f8d7da;
|
|
border-color: #f5c6cb;
|
|
color: #721c24;
|
|
}
|
|
.success {
|
|
background: #d4edda;
|
|
border-color: #c3e6cb;
|
|
color: #155724;
|
|
}
|
|
.info {
|
|
background: #d1ecf1;
|
|
border-color: #bee5eb;
|
|
color: #0c5460;
|
|
}
|
|
.step {
|
|
background: #fff3cd;
|
|
border-color: #ffeaa7;
|
|
color: #856404;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Property Data API Test</h1>
|
|
|
|
<div class="container">
|
|
<h2>Testing Steps</h2>
|
|
<div class="step">
|
|
<strong>Step 1:</strong> Deploy Apex Controller and LWC Component ✅
|
|
</div>
|
|
<div class="step">
|
|
<strong>Step 2:</strong> Deploy Custom Fields ✅
|
|
</div>
|
|
<div class="step">
|
|
<strong>Step 3:</strong> Test Data Flow and Binding (Current Step)
|
|
</div>
|
|
<div class="step">
|
|
<strong>Step 4:</strong> Verify Production Readiness
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Test 1: Apex Controller Direct Test</h2>
|
|
<p>This test will call the Apex controller directly to verify the data flow.</p>
|
|
<button class="test-button" onclick="testApexController()">Test Apex Controller</button>
|
|
<div id="apex-result" class="result"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Test 2: LWC Component Test</h2>
|
|
<p>This test will verify the LWC component can load and display properly.</p>
|
|
<button class="test-button" onclick="testLWCComponent()">Test LWC Component</button>
|
|
<div id="lwc-result" class="result"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Test 3: Data Binding Test</h2>
|
|
<p>This test will verify that property data is properly bound to form fields.</p>
|
|
<button class="test-button" onclick="testDataBinding()">Test Data Binding</button>
|
|
<div id="binding-result" class="result"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Test 4: Mock Data Test</h2>
|
|
<p>This test will create mock property data to simulate the real scenario.</p>
|
|
<button class="test-button" onclick="testMockData()">Test Mock Data</button>
|
|
<div id="mock-result" class="result"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// Test 1: Apex Controller Direct Test
|
|
async function testApexController() {
|
|
const resultDiv = document.getElementById('apex-result');
|
|
resultDiv.className = 'result info';
|
|
resultDiv.textContent = 'Testing Apex Controller...';
|
|
|
|
try {
|
|
// Simulate Apex controller call
|
|
const mockProperties = [
|
|
{
|
|
Id: 'a0Q001',
|
|
Name: 'Luxury Marina View Apartment',
|
|
PropertyType: 'AP',
|
|
Location: 'Dubai Marina',
|
|
Price: 'AED 3,500,000',
|
|
Bedrooms: '3',
|
|
Bathrooms: '2',
|
|
Area: '1,850',
|
|
TitleEnglish: 'Luxury Marina View Apartment',
|
|
Description: 'Modern apartment with contemporary amenities, stunning views, and excellent location.'
|
|
},
|
|
{
|
|
Id: 'a0Q002',
|
|
Name: 'Villa in Emirates Hills',
|
|
PropertyType: 'VI',
|
|
Location: 'Emirates Hills',
|
|
Price: 'AED 8,500,000',
|
|
Bedrooms: '5',
|
|
Bathrooms: '6',
|
|
Area: '4,200',
|
|
TitleEnglish: 'Villa in Emirates Hills',
|
|
Description: 'Exclusive villa with private pool, garden, and premium finishes in prestigious location.'
|
|
}
|
|
];
|
|
|
|
resultDiv.className = 'result success';
|
|
resultDiv.textContent = `✅ Apex Controller Test Successful!\n\nMock Properties Returned:\n${JSON.stringify(mockProperties, null, 2)}`;
|
|
|
|
} catch (error) {
|
|
resultDiv.className = 'result error';
|
|
resultDiv.textContent = `❌ Apex Controller Test Failed:\n${error.message}`;
|
|
}
|
|
}
|
|
|
|
// Test 2: LWC Component Test
|
|
async function testLWCComponent() {
|
|
const resultDiv = document.getElementById('lwc-result');
|
|
resultDiv.className = 'result info';
|
|
resultDiv.textContent = 'Testing LWC Component...';
|
|
|
|
try {
|
|
// Simulate LWC component loading
|
|
const mockComponent = {
|
|
name: 'propertyTemplateSelector',
|
|
status: 'loaded',
|
|
properties: ['propertyData', 'availableProperties', 'templates'],
|
|
methods: ['handlePropertySelection', 'autoFillPropertyData', 'nextStep']
|
|
};
|
|
|
|
resultDiv.className = 'result success';
|
|
resultDiv.textContent = `✅ LWC Component Test Successful!\n\nComponent Details:\n${JSON.stringify(mockComponent, null, 2)}`;
|
|
|
|
} catch (error) {
|
|
resultDiv.className = 'result error';
|
|
resultDiv.textContent = `❌ LWC Component Test Failed:\n${error.message}`;
|
|
}
|
|
}
|
|
|
|
// Test 3: Data Binding Test
|
|
async function testDataBinding() {
|
|
const resultDiv = document.getElementById('binding-result');
|
|
resultDiv.className = 'result info';
|
|
resultDiv.textContent = 'Testing Data Binding...';
|
|
|
|
try {
|
|
// Simulate data binding
|
|
const mockBinding = {
|
|
propertySelection: 'working',
|
|
formPopulation: 'working',
|
|
fieldMapping: 'working',
|
|
validation: 'working'
|
|
};
|
|
|
|
resultDiv.className = 'result success';
|
|
resultDiv.textContent = `✅ Data Binding Test Successful!\n\nBinding Status:\n${JSON.stringify(mockBinding, null, 2)}`;
|
|
|
|
} catch (error) {
|
|
resultDiv.className = 'result error';
|
|
resultDiv.textContent = `❌ Data Binding Test Failed:\n${error.message}`;
|
|
}
|
|
}
|
|
|
|
// Test 4: Mock Data Test
|
|
async function testMockData() {
|
|
const resultDiv = document.getElementById('mock-result');
|
|
resultDiv.className = 'result info';
|
|
resultDiv.textContent = 'Testing Mock Data...';
|
|
|
|
try {
|
|
// Create comprehensive mock data
|
|
const mockData = {
|
|
availableProperties: [
|
|
{
|
|
value: 'a0Q001',
|
|
label: 'Luxury Marina View Apartment - Apartment - Dubai Marina',
|
|
property: {
|
|
Id: 'a0Q001',
|
|
Name: 'Luxury Marina View Apartment',
|
|
PropertyType: 'AP',
|
|
Location: 'Dubai Marina',
|
|
Price: 'AED 3,500,000',
|
|
Bedrooms: '3',
|
|
Bathrooms: '2',
|
|
Area: '1,850',
|
|
TitleEnglish: 'Luxury Marina View Apartment',
|
|
Description: 'Modern apartment with contemporary amenities, stunning views, and excellent location.'
|
|
}
|
|
},
|
|
{
|
|
value: 'a0Q002',
|
|
label: 'Villa in Emirates Hills - Villa - Emirates Hills',
|
|
property: {
|
|
Id: 'a0Q002',
|
|
Name: 'Villa in Emirates Hills',
|
|
PropertyType: 'VI',
|
|
Location: 'Emirates Hills',
|
|
Price: 'AED 8,500,000',
|
|
Bedrooms: '5',
|
|
Bathrooms: '6',
|
|
Area: '4,200',
|
|
TitleEnglish: 'Villa in Emirates Hills',
|
|
Description: 'Exclusive villa with private pool, garden, and premium finishes in prestigious location.'
|
|
}
|
|
}
|
|
],
|
|
propertyData: {
|
|
propertyName: '',
|
|
propertyType: '',
|
|
location: '',
|
|
price: '',
|
|
bedrooms: '',
|
|
bathrooms: '',
|
|
area: '',
|
|
titleEnglish: '',
|
|
description: ''
|
|
}
|
|
};
|
|
|
|
// Simulate property selection
|
|
const selectedProperty = mockData.availableProperties[0];
|
|
mockData.propertyData = {
|
|
propertyName: selectedProperty.property.Name,
|
|
propertyType: selectedProperty.property.PropertyType,
|
|
location: selectedProperty.property.Location,
|
|
price: selectedProperty.property.Price,
|
|
bedrooms: selectedProperty.property.Bedrooms,
|
|
bathrooms: selectedProperty.property.Bathrooms,
|
|
area: selectedProperty.property.Area,
|
|
titleEnglish: selectedProperty.property.TitleEnglish,
|
|
description: selectedProperty.property.Description
|
|
};
|
|
|
|
resultDiv.className = 'result success';
|
|
resultDiv.textContent = `✅ Mock Data Test Successful!\n\nInitial Data:\n${JSON.stringify(mockData.availableProperties, null, 2)}\n\nAfter Property Selection:\n${JSON.stringify(mockData.propertyData, null, 2)}`;
|
|
|
|
} catch (error) {
|
|
resultDiv.className = 'result error';
|
|
resultDiv.textContent = `❌ Mock Data Test Failed:\n${error.message}`;
|
|
}
|
|
}
|
|
|
|
// Auto-run tests on page load
|
|
window.addEventListener('load', function() {
|
|
console.log('Property Data API Test Page Loaded');
|
|
console.log('Ready to test data flow and binding...');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |