Wrapping Things Up | GSoC'23@Postman(AsyncAPI)

Overview

Google Summer of Code 2023 is coming to an end, and now it's time to wrap things up for the AsyncAPI Website. The web application is fully functional and provides new contributors with updates about the organization, documentation about various areas where AsyncAPI works, and various other features. This website proves to be valuable for both new and existing contributors of AsyncAPI.

As a result, having a well-defined and well-structured testing suite system for the website is essential. This system eliminates the need for maintainers to review each component for basic checks individually. Given the rapid addition of numerous new features and components to the website, a testing suite becomes crucial. It alleviates the workload for maintainers and new contributors alike.

My task involved creating a well-defined testing suite for the website, alongside performing additional code refactoring.

For more information, you can refer to the GitHub issue:

https://github.com/asyncapi/website/issues/1090

Work Report

The flow that I followed and discussed with my mentors for drafting the testing suite was as follows :

Draft and write tests for all the UI Components of the website, and check if they are rendered correctly, check additional functionalities for these components and the CSS properties for them.
The next stage was to write tests for the utilities folder of the website or the "lib" folder.
To move ahead, I started drafting integration tests for the UI components ( wherever required ) and completed the testing for the "Pages" folder.
Then, I started drafting tests for the "scripts" folder of the folder.

Problems Faced

One of the initial challenges I faced was identifying the areas in components that need to be tested and differentiating them from the areas that don't require testing. To overcome this I studied the codebase thoroughly, identified various edge cases, and drafted the tests for them and they tested for CSS properties.
While drafting test cases for components that used NextJs libraries for routing since Cypress has limited scope and can't access or utilize these libraries, to deal with this I created a MockRouter component, that mocked the functions provided by the NextJs library and wrapped the components within it.

For eg :
```
   <MockRouter> <BlogPostItem post={ post } /></MockRouter>
```

At the time I started drafting tests for the Pages folder, I encountered a problem where the components, here were not able to access the context, To overcome this problem as suggested by my mentors, I created a MockApp Component that replicated the original App.js file for the website and wrapped the Component under test within this component.

-Mock App Component :


  export default function MockApp({ children }) {
    return (
      <AppContext.Provider value={{ path: createRouter.asPath }}>
        <Head>
          <script async defer src="https://buttons.github.io/buttons.js"></script>
        </Head>
        <MDXProvider>
          <AlgoliaSearch>
            <div className="flex flex-col min-h-screen">
              <MockRouter pathname="/">
                <Layout>  {children} </Layout>
              </MockRouter>
            </div>
          </AlgoliaSearch>
        </MDXProvider>
      </AppContext.Provider>
    )
  }

Eg :

<MockApp><Index /></MockApp>

Current State

In the entire GSoc'23 period, I drafted and finished off with all the components of the website, With integration and unit testing, I finished off with the tests for the Pages folder and some significant chunks of the Scripts folder. The project is completed and is live inside the AsyncAPI website repository.

Contributions & Merged PR's

Repository Link: https://github.com/asyncapi/website

You can view all the issues created for GSoC'23 here.

View all the code that has been merged during this period here.

Code Under Review

The code currently under review can be viewed here.

What's Left to Do

Currently, the E2E tests for Tools as well as Case Studies scripts of the website are pending, for which a PR has been initiated and will be resolved in the coming time.

Here is the link for the same: PRs Under Review

Conclusion

Debugging issues in such a large codebase ( relative to what I have worked on till now ) was very hard, but the joy and excitement you get when you find the source.

By the end of this program, I with the guidance of my mentors was successfully able to add a new GitHub workflow to the website, which checks if all the tests are running or not on every pull request created by the contributor as well as makes it easier for maintainers to review the code.

Finally my mentors - Akshat Nema and Abir Pal, I can't thank them enough for all the support and guidance. They made a safe and friendly environment for me to ask for help without resistance. When I get stuck on something, they help me a lot to guide me to the solution. Their reviews on my pull requests helped me analyze and improve my coding style. Once again: Thank you so much!

I would like to thank the entire AsyncAPI Community for extending their support and creating a safe space for me to share my thoughts. I shall be an active contributor to AsyncAPI and keep contributing to the website

That's it I am concluding here with a smile on my face :)

Aadrika Bhargava