# IndustryJsonLd Component - Testing Guide

## Quick Test Checklist

### 1. Component Compilation Test

```bash
cd mawidi-site
npm run build
# Should compile without errors
```

### 2. Browser Test (Development)

```bash
cd mawidi-site
npm run dev
# Visit: http://localhost:9000/en/industries/health-care
```

Then open browser DevTools Console and run:

```javascript
// Check for schema scripts
const schemas = document.querySelectorAll('script[type="application/ld+json"]');
console.log(`Found ${schemas.length} schema(s)`);

// Parse and display schemas
Array.from(schemas).forEach((script, i) => {
  console.log(`\n=== Schema ${i + 1} ===`);
  const data = JSON.parse(script.textContent);
  console.log("Type:", data["@type"]);
  console.log("Name:", data.name);
  if (data["@type"] === "SoftwareApplication") {
    console.log("Category:", data.applicationCategory);
    console.log("Features:", data.featureList);
  }
  if (data["@type"] === "FAQPage") {
    console.log("Questions:", data.mainEntity.length);
  }
});
```

Expected output:

```
Found 2 schema(s)

=== Schema 1 ===
Type: SoftwareApplication
Name: Mawidi for Healthcare
Category: HealthApplication
Features: WhatsApp Patient Booking, Automated Appointment Reminders, ...

=== Schema 2 ===
Type: FAQPage
Questions: 5
```

### 3. Google Rich Results Test

**Test URL**: https://search.google.com/test/rich-results

**Steps**:

1. Build and deploy to staging or production
2. Enter URL: `https://mawidi.com/en/industries/health-care`
3. Click "Test URL"
4. Wait for results

**Expected Results**:

- ✅ SoftwareApplication detected
- ✅ FAQPage detected (if FAQs provided)
- ✅ No errors
- ✅ All required properties present

**Screenshot**: Look for:

- "Software Application" in detected items
- "FAQ" in detected items
- Green checkmarks

### 4. Schema.org Validator Test

**Test URL**: https://validator.schema.org/

**Steps**:

1. View page source (Ctrl/Cmd + U)
2. Find `<script type="application/ld+json">` tags
3. Copy entire JSON-LD content
4. Paste into validator
5. Click "Run Test"

**Expected Results**:

- ✅ Valid Schema.org markup
- ✅ No warnings
- ✅ All properties recognized

### 5. Manual Visual Test

Check that page loads correctly and schema doesn't break layout:

```bash
# English version
http://localhost:9000/en/industries/health-care
http://localhost:9000/en/industries/beauty-wellness
http://localhost:9000/en/industries/education

# Arabic version
http://localhost:9000/ar/industries/health-care
http://localhost:9000/ar/industries/beauty-wellness
http://localhost:9000/ar/industries/education
```

Verify:

- [ ] Page renders normally
- [ ] No console errors
- [ ] Schema scripts in HTML (view source)
- [ ] Both language versions work

### 6. TypeScript Type Check

```bash
cd mawidi-site
npm run type-check
# Should pass with no errors
```

### 7. All Industries Test Script

Create this test script: `test-all-industries.sh`

```bash
#!/bin/bash

INDUSTRIES=(
  "health-care"
  "beauty-wellness"
  "education"
  "sports-academies"
  "retail-services"
  "food-leisure"
  "events-venues"
  "property-facilities"
  "hotels-accommodation"
  "home-services-trades"
  "pet-services"
  "public-sector"
  "nonprofit-community"
  "mobility-industry"
  "vehicle-rental-chauffeur"
)

BASE_URL="http://localhost:9000"

echo "Testing all industry schemas..."
echo "================================"

for industry in "${INDUSTRIES[@]}"; do
  echo "Testing: $industry"

  # Check English
  EN_COUNT=$(curl -s "$BASE_URL/en/industries/$industry" | grep -c 'application/ld+json')
  echo "  EN schemas: $EN_COUNT"

  # Check Arabic
  AR_COUNT=$(curl -s "$BASE_URL/ar/industries/$industry" | grep -c 'application/ld+json')
  echo "  AR schemas: $AR_COUNT"

  if [ $EN_COUNT -eq 0 ] || [ $AR_COUNT -eq 0 ]; then
    echo "  ⚠️  WARNING: Missing schema!"
  else
    echo "  ✅ OK"
  fi

  echo ""
done

echo "================================"
echo "Test complete!"
```

Run:

```bash
chmod +x test-all-industries.sh
./test-all-industries.sh
```

### 8. JSON-LD Extraction Test

Extract and validate all schemas:

```javascript
// paste-in-browser-console.js
const extractSchemas = () => {
  const schemas = Array.from(
    document.querySelectorAll('script[type="application/ld+json"]'),
  );

  const results = schemas.map((script, i) => {
    try {
      const data = JSON.parse(script.textContent);
      return {
        index: i + 1,
        type: data["@type"],
        valid: true,
        data: data,
      };
    } catch (e) {
      return {
        index: i + 1,
        type: "ERROR",
        valid: false,
        error: e.message,
      };
    }
  });

  console.table(
    results.map((r) => ({
      "Schema #": r.index,
      Type: r.type,
      Valid: r.valid ? "✅" : "❌",
    })),
  );

  results.forEach((r) => {
    if (!r.valid) {
      console.error(`Schema ${r.index} ERROR:`, r.error);
    }
  });

  return results;
};

extractSchemas();
```

### 9. Search Console Test (Post-Deployment)

After deploying to production:

1. **Wait 3-5 days** for Google to crawl
2. Go to Google Search Console
3. Navigate to **Enhancements**

**Check Software Application**:

- URL: Search Console > Enhancements > Software Application
- Look for: 15 valid pages (all industries)
- Status: Should be "Valid"

**Check FAQ**:

- URL: Search Console > Enhancements > FAQ
- Look for: Pages with FAQs (variable count)
- Status: Should be "Valid"

**Inspect URL**:

- Pick one industry page
- Click "URL Inspection"
- Check "Enhancement" section
- Should show detected schemas

### 10. Lighthouse SEO Test

```bash
# Install lighthouse CLI
npm install -g lighthouse

# Test an industry page
lighthouse http://localhost:9000/en/industries/health-care \
  --only-categories=seo \
  --output=html \
  --output-path=./lighthouse-seo-report.html

# Open report
open lighthouse-seo-report.html
```

Look for:

- ✅ Structured data is valid
- ✅ No structured data errors

## Common Issues & Fixes

### Issue 1: Schema not appearing

**Symptom**: No `<script type="application/ld+json">` in page source

**Fix**:

```tsx
// Make sure component is imported
import IndustryJsonLd from "@/components/IndustryJsonLd";

// Make sure it's used in JSX
<IndustryJsonLd industry="health-care" lang={params.lang} />;
```

### Issue 2: Invalid JSON

**Symptom**: Google Rich Results Test shows "Invalid JSON-LD"

**Fix**:

- Check for trailing commas in arrays
- Verify all strings are properly quoted
- Ensure no special characters break JSON

### Issue 3: Wrong industry slug

**Symptom**: Component throws error or shows wrong data

**Valid slugs**:

```typescript
type IndustrySlug =
  | "health-care"
  | "beauty-wellness"
  | "education"
  | "sports-academies"
  | "retail-services"
  | "food-leisure"
  | "events-venues"
  | "property-facilities"
  | "hotels-accommodation"
  | "home-services-trades"
  | "pet-services"
  | "public-sector"
  | "nonprofit-community"
  | "mobility-industry"
  | "vehicle-rental-chauffeur";
```

### Issue 4: FAQs not matching

**Symptom**: Google Search Console shows "Content mismatch"

**Fix**:

- Ensure FAQ schema questions match visible FAQ questions exactly
- Use same text from UI[lang].t translations
- Keep question/answer pairs synchronized

### Issue 5: TypeScript errors

**Symptom**: Build fails with type errors

**Fix**:

```tsx
// Ensure proper typing for FAQs
const faqs: Array<{ question: string; answer: string }> = [
  { question: t.faqQ1, answer: t.faqA1 },
];

// Or use the simpler format
const faqs = [{ question: t.faqQ1, answer: t.faqA1 }];
```

## Automated Testing Script

Create `test-industry-schemas.js`:

```javascript
const https = require("https");

const industries = [
  "health-care",
  "beauty-wellness",
  "education",
  "sports-academies",
  "retail-services",
  "food-leisure",
  "events-venues",
  "property-facilities",
  "hotels-accommodation",
  "home-services-trades",
  "pet-services",
  "public-sector",
  "nonprofit-community",
  "mobility-industry",
  "vehicle-rental-chauffeur",
];

const testIndustry = (industry, lang) => {
  return new Promise((resolve, reject) => {
    const url = `https://mawidi.com/${lang}/industries/${industry}`;

    https
      .get(url, (res) => {
        let data = "";

        res.on("data", (chunk) => {
          data += chunk;
        });

        res.on("end", () => {
          const schemaCount = (data.match(/application\/ld\+json/g) || [])
            .length;
          const hasSoftwareApp =
            data.includes('"@type":"SoftwareApplication"') ||
            data.includes('"@type": "SoftwareApplication"');
          const hasFAQ =
            data.includes('"@type":"FAQPage"') ||
            data.includes('"@type": "FAQPage"');

          resolve({
            industry,
            lang,
            schemas: schemaCount,
            hasSoftwareApp,
            hasFAQ,
            status: schemaCount > 0 ? "OK" : "MISSING",
          });
        });
      })
      .on("error", reject);
  });
};

(async () => {
  console.log("Testing all industry schemas...\n");

  for (const industry of industries) {
    const enResult = await testIndustry(industry, "en");
    const arResult = await testIndustry(industry, "ar");

    console.log(`${industry}:`);
    console.log(
      `  EN: ${enResult.schemas} schemas (App: ${enResult.hasSoftwareApp ? "✅" : "❌"}, FAQ: ${enResult.hasFAQ ? "✅" : "❌"})`,
    );
    console.log(
      `  AR: ${arResult.schemas} schemas (App: ${arResult.hasSoftwareApp ? "✅" : "❌"}, FAQ: ${arResult.hasFAQ ? "✅" : "❌"})`,
    );
    console.log("");
  }

  console.log("Test complete!");
})();
```

Run:

```bash
node test-industry-schemas.js
```

## Success Criteria

All tests should show:

- [ ] Component compiles without errors
- [ ] TypeScript type check passes
- [ ] Schemas appear in page source
- [ ] Google Rich Results Test passes
- [ ] Schema.org validator passes
- [ ] Both EN and AR versions work
- [ ] All 15 industries have schemas
- [ ] FAQ schemas match visible content
- [ ] No console errors
- [ ] No layout breaking
- [ ] Lighthouse SEO score maintained/improved
- [ ] Search Console (after deployment) shows valid schemas

## Performance Benchmarks

Expected results:

- **Page load time**: No change (static JSON)
- **HTML size**: +2-3KB per page
- **Render time**: No change
- **SEO score**: +5-10 points (Lighthouse)
- **Schema validation**: 100% pass rate

## Next Steps After Testing

1. **If all tests pass**: Deploy to production
2. **If tests fail**: Review errors, fix, re-test
3. **After deployment**: Monitor Search Console for 2-4 weeks
4. **Track metrics**: CTR, impressions, rich results appearance
5. **Iterate**: Update schemas based on performance data