monkeytype/e2e-tests/page-load.spec.ts

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

test.describe("Monkeytype Page Load and Words Generation", () => {
  test("should load the page and generate words in the #words element", async ({
    page,
  }) => {
    // Navigate to the homepage
    await page.goto("/");

    // Wait for the page to be fully loaded
    await page.waitForLoadState("networkidle");

    // Check if the page title is correct
    await expect(page).toHaveTitle(/monkeytype/i);

    // Wait for the app container to be visible
    await expect(page.locator("#app")).toBeVisible();

    // Check if the test page is accessible (it should be the default page)
    const testPage = page.locator(".pageTest");
    await expect(testPage).toBeVisible();

    // Wait for the words container to be visible
    const wordsContainer = page.locator("#words");
    await expect(wordsContainer).toBeVisible();

    // Wait for words to be generated and displayed
    // Give it more time as the words might take a moment to load
    await page.waitForTimeout(2000);

    // Check that there are actual word elements inside the words container
    // Monkeytype typically generates words as spans or divs inside the #words container
    const wordElements = wordsContainer.locator("*");
    await expect(wordElements.first()).toBeVisible();

    // Verify that the words container has some text content
    const wordsText = await wordsContainer.textContent();
    expect(wordsText).toBeTruthy();
    expect(wordsText!.trim().length).toBeGreaterThan(0);

    // Log the actual content for debugging
    console.log(`Generated words content: "${wordsText}"`);
    console.log(`Word count: ${wordsText!.trim().split(/\s+/).length}`);

    // Check that there is meaningful content (at least some characters)
    // We'll be more lenient about the word count since the structure might be different
    expect(wordsText!.trim().length).toBeGreaterThan(10);
  });

  test("should have essential typing elements present", async ({ page }) => {
    await page.goto("/");
    await page.waitForLoadState("networkidle");

    // Wait a bit for the page to fully initialize
    await page.waitForTimeout(2000);

    // Handle cookies modal if present
    const cookiesModal = page.locator("#cookiesModal");
    if (await cookiesModal.isVisible()) {
      const acceptButton = page.locator("#cookiesModal button").first();
      if (await acceptButton.isVisible()) {
        await acceptButton.click();
        await page.waitForTimeout(500);
      }
    }

    // Check if the input field is present
    const wordsInput = page.locator("#wordsInput");
    await expect(wordsInput).toBeVisible();

    // Check if the caret is visible (indicates the test is ready)
    const caret = page.locator("#caret");
    await expect(caret).toBeVisible();

    // Verify the typing test words wrapper is ready (not the replay one)
    const wordsWrapper = page.locator("#typingTest #wordsWrapper");
    await expect(wordsWrapper).toBeVisible();
  });

  test("should display test configuration options", async ({ page }) => {
    await page.goto("/");
    await page.waitForLoadState("networkidle");

    // Handle cookies modal if present
    const cookiesModal = page.locator("#cookiesModal");
    if (await cookiesModal.isVisible()) {
      const acceptButton = page.locator("#cookiesModal button").first();
      if (await acceptButton.isVisible()) {
        await acceptButton.click();
        await page.waitForTimeout(500);
      }
    }

    // Check if test configuration is visible
    const testConfig = page.locator("#testConfig");
    await expect(testConfig).toBeVisible();

    // Check for mode buttons (time, words, quote, etc.)
    await expect(page.locator('button[mode="time"]')).toBeVisible();
    await expect(page.locator('button[mode="words"]')).toBeVisible();
    await expect(page.locator('button[mode="quote"]')).toBeVisible();

    // Check for time configuration buttons
    await expect(page.locator('button[timeConfig="15"]')).toBeVisible();
    await expect(page.locator('button[timeConfig="30"]')).toBeVisible();
    await expect(page.locator('button[timeConfig="60"]')).toBeVisible();
  });

  test("should allow basic typing interaction", async ({ page }) => {
    await page.goto("/");
    await page.waitForLoadState("networkidle");

    // Wait for initialization
    await page.waitForTimeout(2000);

    // Handle cookies modal if present
    const cookiesModal = page.locator("#cookiesModal");
    if (await cookiesModal.isVisible()) {
      const acceptButton = page.locator("#cookiesModal button").first();
      if (await acceptButton.isVisible()) {
        await acceptButton.click();
        await page.waitForTimeout(500);
      }
    }

    // Verify that the typing interface is ready
    const wordsInput = page.locator("#wordsInput");
    await expect(wordsInput).toBeVisible();

    // Type a simple character to test basic functionality
    await page.keyboard.type("a");
    await page.keyboard.type("s");
    await page.keyboard.type("d");
    await page.keyboard.type("f");

    //expect (wordsInput).toHaveValue("asdf")
    await expect(wordsInput).toHaveValue(" asdf");

    // The fact that we got here without errors means basic typing setup is working
    // We don't need to verify the exact input value as that depends on the app's logic
    console.log("Basic typing interaction test completed successfully");
  });
});