towerops/e2e/tests/mikrotik-backup-compare.spec.ts

import { test, expect } from '@playwright/test';

test.describe('MikroTik Backup Comparison', () => {
  test('can access backups from device page', async ({ page }) => {
    await page.goto('/devices');

    // Find first device
    const firstDevice = page.locator('a[href*="/devices/"]:not([href*="/devices/new"])').first();

    if (await firstDevice.isVisible({ timeout: 2000 }).catch(() => false)) {
      await firstDevice.click();
      await page.waitForTimeout(500);

      // Look for backups tab or link
      const backupsLink = page.locator(
        'a[href*="backups"], button:has-text("Backups"), :has-text("Backups")'
      ).first();

      if (await backupsLink.isVisible({ timeout: 2000 }).catch(() => false)) {
        await backupsLink.click();
        await page.waitForTimeout(500);
      }
    }
  });

  test('shows list of backups for device', async ({ page }) => {
    await page.goto('/backups');

    // Look for backup entries
    const backupEntry = page.locator('[data-backup], tr, [role="listitem"]').first();

    if (await backupEntry.isVisible({ timeout: 2000 }).catch(() => false)) {
      await expect(backupEntry).toBeVisible();
    }
  });

  test('can select backups for comparison', async ({ page }) => {
    await page.goto('/backups');

    // Look for compare functionality
    const compareButton = page.locator(
      'button:has-text("Compare"), a:has-text("Compare")'
    ).first();

    if (await compareButton.isVisible({ timeout: 2000 }).catch(() => false)) {
      await expect(compareButton).toBeVisible();
    }
  });

  test('shows backup comparison view', async ({ page }) => {
    await page.goto('/devices');

    // Navigate to first device
    const firstDevice = page.locator('a[href*="/devices/"]:not([href*="/devices/new"])').first();

    if (await firstDevice.isVisible({ timeout: 2000 }).catch(() => false)) {
      const deviceHref = await firstDevice.getAttribute('href');

      if (deviceHref) {
        // Try to access compare page directly (if device ID is available)
        const deviceId = deviceHref.split('/').pop();

        if (deviceId && !deviceId.includes('#')) {
          await page.goto(`/devices/${deviceId}/backups/compare`);
          await page.waitForTimeout(500);

          // Check if compare page loaded
          if ((await page.url()).includes('/backups/compare')) {
            await expect(page.locator('body')).toBeVisible();
          }
        }
      }
    }
  });

  test('shows side-by-side diff view', async ({ page }) => {
    await page.goto('/devices');

    const firstDevice = page.locator('a[href*="/devices/"]:not([href*="/devices/new"])').first();

    if (await firstDevice.isVisible({ timeout: 2000 }).catch(() => false)) {
      const deviceHref = await firstDevice.getAttribute('href');

      if (deviceHref) {
        const deviceId = deviceHref.split('/').pop();

        if (deviceId && !deviceId.includes('#')) {
          await page.goto(`/devices/${deviceId}/backups/compare`);
          await page.waitForTimeout(500);

          // Look for diff view
          const diffView = page.locator(
            '[data-diff], .diff-view, code, pre'
          ).first();

          if (await diffView.isVisible({ timeout: 2000 }).catch(() => false)) {
            await expect(diffView).toBeVisible();
          }
        }
      }
    }
  });

  test('highlights changes in diff', async ({ page }) => {
    await page.goto('/devices');

    const firstDevice = page.locator('a[href*="/devices/"]:not([href*="/devices/new"])').first();

    if (await firstDevice.isVisible({ timeout: 2000 }).catch(() => false)) {
      const deviceHref = await firstDevice.getAttribute('href');

      if (deviceHref) {
        const deviceId = deviceHref.split('/').pop();

        if (deviceId && !deviceId.includes('#')) {
          await page.goto(`/devices/${deviceId}/backups/compare`);
          await page.waitForTimeout(500);

          // Look for highlighted changes (additions/deletions)
          const highlighted = page.locator(
            '.diff-added, .diff-removed, [data-change], .addition, .deletion'
          ).first();

          if (await highlighted.isVisible({ timeout: 2000 }).catch(() => false)) {
            await expect(highlighted).toBeVisible();
          }
        }
      }
    }
  });

  test('can select different backups to compare', async ({ page }) => {
    await page.goto('/devices');

    const firstDevice = page.locator('a[href*="/devices/"]:not([href*="/devices/new"])').first();

    if (await firstDevice.isVisible({ timeout: 2000 }).catch(() => false)) {
      const deviceHref = await firstDevice.getAttribute('href');

      if (deviceHref) {
        const deviceId = deviceHref.split('/').pop();

        if (deviceId && !deviceId.includes('#')) {
          await page.goto(`/devices/${deviceId}/backups/compare`);
          await page.waitForTimeout(500);

          // Look for backup selectors
          const backupSelector = page.locator('select, [data-backup-selector]').first();

          if (await backupSelector.isVisible({ timeout: 2000 }).catch(() => false)) {
            await expect(backupSelector).toBeVisible();
          }
        }
      }
    }
  });
});