Cisco Internship Summer 2022

New Momentum components

Cisco uses the Momentum Design System. This is a UX spec which we implement in React in Momentum React v2 library.

The library contains a number of legacy components that we are in the process of migrating to modern ones. Legacy components use JavaScript instead of TypeScript and use class based components instead of functional ones.

The first task I was assigned to was swapping out the legacy checkbox component in the web app with the modern implementation. This was a great introductory exercise as it allowed me to get familiar with the technologies we used and different parts of the codebase.

After this I worked on a new radio group component in momentum. For this I had to learn how to use storybook for the documentation.

Legacy Component	My Implementation

The legacy component implemented a radio button whereas I implemented a radio group. This helps to keep the downstream usage of the component closer to the spec and give it better accessability.

I then updated the web app to use this new component in several places. This is where I discovered issues with adaptive cards in dark mode. I implemented some quick fixes for this particular case as seen below.

Using Legacy Component	Using My Component

Fixing Adaptive Card styling

The way that we were implementing adaptive cards was using the provided Microsoft library and passing some of our own components to it. Our components were responsive to the app’s theme but the cards were not as they had hardcoded colour values. This resulted in the cards containing white text on a white background. There were also some issues with our components not integrating correctly.

This can best be seen when using input components as they were all custom.

I explored using my own implementation for this, however I found that I could fix the usage of the Microsoft library by passing in CSS variables as the colours. THis means that the colours of the card would match the theme along with the rest of the app. Other than this, I had to replace some of the input components and style some of the built in ones.

Broken Adaptive Cards	Fixed Adaptive Cards

Improving end-to-end testing with visual regression testing

To make sure that a bug like this doesn’t happen again I implemented visual regression testing. Normal unit tests and end-to-end tests only rely on the structure and functionality of the page and ignore the styling. Since we were already using Playwright for end-to-end test this was not too difficult. I configured playwright to run these tests and any others tagged in all available themes. This is not important for most tests as they should just be using the CSS variables we set for the theme.

I tested our implementation over a number of example of adaptive cards. Some of the screenshots produced by the tests can be seen below:

Name	Light Theme	Dark Theme
Flight Details
Food Order
Image Gallery
Stock Update

Carrying on from this, I added visual regression tests for some of the commonly visited pages of the application and the meeting join flow. Some examples of this are shown below.

Name	Screenshot
Messaging Page
Calling Toast
Interstitial Page

Optimising test pipeline and developer experience

As I was implementing more end-to-end tests, I had to keep running our testing pipeline. This was taking about 25 mins per run. A breakdown of which steps were taking the longest can be seen below.

I tried to improve the unit test speed by upgrading jest from v26 to v28 but found that there were a lot of issues with the fake timers. The next longest step was the build.

We currently use webpack which is written in JS. As this is a sizable project the development server start currently takes 3 mins. I investigated using Vite which is usually quite a lot faster. This uses Rollup underneath which is written in JavaScript so is still not very fast. Building with vite took 1 min 50 sec so an improvement but not large enough to make it worthwhile.

ESBuild is written in Go and is significantly faster. My experimental branch builds in just under 4 seconds. This is a great improvement and hopefully will be able to increase developer productivity in the future. I got this working on the second to last day of my internship and it still has some issues (icons not being loaded, wrong components being animated).