Time to introduce first UI tests code

[robinbisht20]

Reason/Context

Please try answering few of those questions

• Why we need this improvement?
• How will this change help?
• What is the motivation?

1. Why we need this improvement?

   We need to introduce UI tests to enhance the reliability and quality of our software. Manual testing is time-consuming and error-prone, making it difficult to catch every UI issue. Automation allows us to consistently validate the functionality and appearance of our application, reducing the risk of human error and ensuring that new changes don't introduce regressions.

2. How will this change help?

   Introducing UI tests will provide several benefits. It will improve the efficiency of our development process by quickly identifying UI-related bugs. This, in turn, reduces the cost of fixing issues that might slip through the cracks during manual testing. Additionally, UI tests will help us maintain a better user experience and build confidence in our software's stability, which is essential for user satisfaction and trust.

3. What is the motivation?

   The motivation behind implementing UI tests is to deliver a better user experience and to align with industry best practices. In a rapidly evolving software landscape, it's crucial to ensure that our application functions correctly across different platforms and browsers. By automating UI tests, we aim to catch issues early in the development process, allowing us to deliver high-quality software to our users while saving time and resources in the long run.

introduce your first UI tests, you can use a testing framework like Mocha or Jest in combination with Puppeteer for writing and running UI tests. Here's a basic structure for creating your first UI test using Mocha and Puppeteer:

1. Install Dependencies:

First, you need to install the necessary dependencies, Mocha, Puppeteer, and Chai for assertions (you can use other assertion libraries if you prefer):

npm install mocha puppeteer chai

2. Create Your First Test File:

Now, create a test file, e.g., test.js, and define your UI test within it.

const puppeteer = require('puppeteer');
const { expect } = require('chai');

describe('Your UI Tests', () => {
  let browser;
  let page;

  // Set up a headless browser before running the tests
  before(async () => {
    browser = await puppeteer.launch();
    page = await browser.newPage();
  });

  // Close the browser after all tests are done
  after(async () => {
    await browser.close();
  });

  it('Should check if specific elements exist on a page', async () => {
    // Navigate to the URL you want to test
    await page.goto('https://example.com');

    // List of element IDs to check
    const elementIds = ['element1', 'element2', 'element3'];

    // Check if each element with the given ID exists
    const results = await Promise.all(
      elementIds.map(async (id) => {
        const element = await page.$(`#${id}`);
        return {
          id,
          exists: !!element,
        };
      })
    );

    // Make assertions about the existence of elements
    results.forEach((result) => {
      expect(result.exists, `${result.id} should exist`).to.be.true;
    });
  });

  // Add more test cases as needed
});

3. Run Your Tests:

To run the tests, you can use Mocha. Create an npm script in your package.json:

"scripts": {
  "test": "mocha test.js"
}

Then, run the tests using:

npm test

This example test checks if specific elements with given IDs exist on a web page. You can add more test cases as needed to cover different UI scenarios. The setup and teardown functions ensure the browser is launched before running the tests and closed afterward.

Remember to adapt the code to your specific application, URLs, and element IDs. You may also need to handle async operations, user interactions, and other UI testing scenarios as per your application's requirements.

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[sambhavgupta0705]

@robinbisht20 I think this feature has been added during GSOC 2023

[robinbisht20]

So I want to join your team

[sambhavgupta0705]

For that you can suggest some improvements in the current UI and workflows and raise an issue regarding it.
For UI tests it is better to approach @reachaadrika

[akshatnema]

@robinbisht20 This issue has been completed under GSoC 2023 by @reachaadrika. The issue is still open because the README PR has not been merged till now. So, kindly contribute to the existing issues related to tests.

Closing this issue.