homeproz/tests/property-filters.spec.js

// @ts-check
const { test, expect } = require('@playwright/test');

test.describe('Property Filters AJAX', () => {
  test('should have homeprozAjax global defined', async ({ page }) => {
    await page.goto('/properties/');

    // Check if homeprozAjax is defined
    const hasAjaxGlobal = await page.evaluate(() => {
      return typeof window.homeprozAjax !== 'undefined';
    });

    console.log('homeprozAjax defined:', hasAjaxGlobal);

    if (hasAjaxGlobal) {
      const ajaxConfig = await page.evaluate(() => {
        return {
          ajaxUrl: window.homeprozAjax?.ajaxUrl,
          nonce: window.homeprozAjax?.nonce,
          archiveUrl: window.homeprozAjax?.archiveUrl
        };
      });
      console.log('AJAX Config:', ajaxConfig);
    }

    expect(hasAjaxGlobal).toBe(true);
  });

  test('should have jQuery loaded', async ({ page }) => {
    await page.goto('/properties/');

    const hasJquery = await page.evaluate(() => {
      return typeof window.jQuery !== 'undefined';
    });

    console.log('jQuery loaded:', hasJquery);
    expect(hasJquery).toBe(true);
  });

  test('should have filter form elements', async ({ page }) => {
    await page.goto('/properties/');

    // Check for form elements
    const filtersForm = page.locator('.filters-form');
    const propertyResults = page.locator('#property-results');

    await expect(filtersForm).toBeVisible();
    await expect(propertyResults).toBeVisible();

    // List all select elements
    const selects = await page.locator('.filters-form select').all();
    console.log('Number of select elements:', selects.length);

    for (const select of selects) {
      const name = await select.getAttribute('name');
      const options = await select.locator('option').count();
      console.log(`Select "${name}" has ${options} options`);
    }
  });

  test('should trigger AJAX on dropdown change', async ({ page }) => {
    // Listen for network requests
    const ajaxRequests = [];
    page.on('request', request => {
      if (request.url().includes('admin-ajax.php')) {
        ajaxRequests.push({
          url: request.url(),
          postData: request.postData()
        });
      }
    });

    const ajaxResponses = [];
    page.on('response', async response => {
      if (response.url().includes('admin-ajax.php')) {
        let body;
        try {
          body = await response.text();
        } catch (e) {
          body = 'Could not read body';
        }
        ajaxResponses.push({
          url: response.url(),
          status: response.status(),
          body: body.substring(0, 500)
        });
      }
    });

    // Listen for console errors
    const consoleErrors = [];
    page.on('console', msg => {
      if (msg.type() === 'error') {
        consoleErrors.push(msg.text());
      }
    });

    await page.goto('/properties/');

    // Wait for page to fully load
    await page.waitForLoadState('networkidle');

    // Get the sort dropdown (most likely to have multiple options)
    const sortSelect = page.locator('select[name="sort"]');

    if (await sortSelect.count() > 0) {
      console.log('Changing sort dropdown...');

      // Change the value
      await sortSelect.selectOption('price_low');

      // Wait a moment for AJAX
      await page.waitForTimeout(2000);

      console.log('AJAX Requests made:', ajaxRequests.length);
      console.log('AJAX Responses received:', ajaxResponses.length);

      if (ajaxRequests.length > 0) {
        console.log('Request details:', JSON.stringify(ajaxRequests, null, 2));
      }

      if (ajaxResponses.length > 0) {
        console.log('Response details:', JSON.stringify(ajaxResponses, null, 2));
      }

      if (consoleErrors.length > 0) {
        console.log('Console errors:', consoleErrors);
      }
    }

    // Check if any AJAX request was made
    expect(ajaxRequests.length).toBeGreaterThan(0);
  });

  test('should check for JavaScript errors on page load', async ({ page }) => {
    const jsErrors = [];

    page.on('pageerror', error => {
      jsErrors.push(error.message);
    });

    page.on('console', msg => {
      if (msg.type() === 'error') {
        jsErrors.push(msg.text());
      }
    });

    await page.goto('/properties/');
    await page.waitForLoadState('networkidle');

    console.log('JavaScript errors found:', jsErrors.length);
    if (jsErrors.length > 0) {
      console.log('Errors:', jsErrors);
    }

    // This test reports errors but doesn't fail - we want to see what's happening
    expect(true).toBe(true);
  });

  test('manual AJAX call test', async ({ page }) => {
    await page.goto('/properties/');
    await page.waitForLoadState('networkidle');

    // Try making a manual AJAX call to see what happens
    const result = await page.evaluate(async () => {
      if (typeof window.homeprozAjax === 'undefined') {
        return { error: 'homeprozAjax not defined' };
      }

      if (typeof window.jQuery === 'undefined') {
        return { error: 'jQuery not defined' };
      }

      return new Promise((resolve) => {
        window.jQuery.ajax({
          url: window.homeprozAjax.ajaxUrl,
          type: 'POST',
          data: {
            action: 'homeproz_filter_properties',
            nonce: window.homeprozAjax.nonce,
            property_type: '',
            property_status: '',
            property_location: '',
            min_price: '',
            max_price: '',
            beds: '',
            sort: 'newest',
            paged: 1
          },
          success: function(response) {
            resolve({ success: true, response: response });
          },
          error: function(xhr, status, error) {
            resolve({
              success: false,
              status: xhr.status,
              statusText: xhr.statusText,
              responseText: xhr.responseText?.substring(0, 500),
              error: error
            });
          }
        });
      });
    });

    console.log('Manual AJAX result:', JSON.stringify(result, null, 2));

    if (result.error) {
      console.log('ERROR:', result.error);
    }
  });
});