Add E2E Tests

[westerandr]

• Install Playwright
• Add tests for H1 Title present, Refresh button, List Item of Govt site is present and if available or green, then latency text is present.

[RichardVaalotu685]

Government Sites Checker Test Suite

This test suite checks the functionality of the Government Sites Checker application. It uses Playwright, a Node.js library for automating Chromium, Firefox, and Web Kit browsers, to simulate user interactions and make assertions about the application's behavior.

Test Structure

The test suite consists of four tests, each checking a specific aspect of the web application:

1. H1 title is present: This test checks if the application's main heading ("Government Sites Checker") is present on the page.
2. Refresh button is present: This test checks if the "Refresh" button is present on the page.
3. List item of govt site is present: This test checks if a list item containing a government site is present on the page.
4. Latency text is present when site is available: This test checks if the latency text is present when a government site is available.

Running the Tests

To run the tests, follow these steps:

1. Make sure you have Node.js installed on your system.
2. Install Playwright by running npm install playwright in your terminal.
3. Save the test code as a file named test.js or any name you want uso.
4. Run the tests by running npm test in your terminal.

Test Code

// Import the necessary Playwright modules
const { chromium } = require('playwright');

// Define the test suite
describe('Government Sites Checker', () => {
  // Test if the H1 title is present
  test('H1 title is present', async () => {
    // Launch a new browser instance
    const browser = await chromium.launch();

    // Create a new browser context
    const context = await browser.newContext();

    // Create a new page
    const page = await context.newPage();

    // Navigate to the government sites checker page
    await page.goto('http://localhost:3000');

    // Test if the H1 title is present
    const h1Text = await page.textContent('h1');
    expect(h1Text).toContain('Government Sites Checker');

    // Close the browser
    await browser.close();
  });

  // Test if the Refresh button is present
  test('Refresh button is present', async () => {
    // Launch a new browser instance
    const browser = await chromium.launch();

    // Create a new browser context
    const context = await browser.newContext();

    // Create a new page
    const page = await context.newPage();

    // Navigate to the government sites checker page
    await page.goto('http://localhost:3000');

    // Test if the Refresh button is present
    const refreshButton = await page.$('#refresh-button');
    expect(refreshButton).not.toBeNull();

    // Close the browser
    await browser.close();
  });

  // Test if a list item of a govt site is present
  test('List item of govt site is present', async () => {
    // Launch a new browser instance
    const browser = await chromium.launch();

    // Create a new browser context
    const context = await browser.newContext();

    // Create a new page
    const page = await context.newPage();

    // Navigate to the government sites checker page
    await page.goto('http://localhost:3000');

    // Test if a list item of a govt site is present
    const listItem = await page.$('#sites-list li:nth-child(1)');
    expect(listItem).not.toBeNull();

    // Close the browser
    await browser.close();
  });

  // Test if latency text is present when site is available
  test('Latency text is present when site is available', async () => {
    // Launch a new browser instance
    const browser = await chromium.launch();

    // Create a new browser context
    const context = await browser.newContext();

    // Create a new page
    const page = await context.newPage();

    // Navigate to the government sites checker page
    await page.goto('http://localhost:3000');

    // Test if latency text is present when site is available
 const siteAvailability = await page.$('#sites-list li:nth-child(1) .site-availability');
    const latencyText = await page.textContent('#sites-list li:nth-child(1) .latency');
    if (siteAvailability.innerText() === 'Available') {
      expect(latencyText).not.toBeNull();
    }

    // Close the browser
    await browser.close();
  });
   //Modify as you want uso I tried this is run on my localhost so change accordingly that works for you but it works for me.

[westerandr]

Thanks for the help uso! I'm well aware of how to use playwright and writing tests 😂 the issue was for someone to fork and create a PR and contribute to the codebase 😄 If you've already made the changes locally and everything passes and works out, you able to create a PR please uso 🙏

[RichardVaalotu685]

seki uso will do sorry was just explaining what i did. Thought thats what you meant uso but seki good to know my first time also trying to contribute

[westerandr]

No worries bro @RichardVaalotu685 maybe just a misunderstanding 👍