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

test('has title', async ({ page }) => {
  await page.goto('http://localhost:8081/repos');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle("Repositories");
});

test('has links to repos and shows clone URL', async ({ page }) => {
  await page.goto('http://localhost:8081/repos');

  await expect(
    page.getByText('https://localhost:8080/repos/git-static-site-ui.git')
  ).toBeVisible();

  // Go to the first repo on the page
  await page.getByRole('link', { name: 'Go to site' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'git static site UI' })).toBeVisible();
});

test('the light mode/dark mode switch works', async ({ page }) => {
  await page.goto('http://localhost:8081/repos');

  // click light mode
  (await page.waitForSelector("#dark-mode-switch")).click();
  await page.getByRole('button', { name: /Light/ }).click();

  const body =  await page.locator('body');
  expect(body).toHaveCSS('background-color', "rgb(239, 242, 228)");

  // click dark mode
  (await page.waitForSelector("#dark-mode-switch")).click();
  await page.getByRole('button', { name: /Dark/ }).click();

  expect(body).toHaveCSS('background-color', "rgb(8, 15, 53)");
});