Performance testing components

[MI6-255]

Summary

Explore how we can performance test ICDS components

💬 Description

This spike should explore how we can performance test our components, which will be relevant for all components, but especially the larger components such as data table.

The outcome should be a set of issues of how we progress with performance testing in terms of technology and what we'll test. It would be worth trying out the options.

💰 Use value

To ensure what ICDS release will not cause any bottlenecks in teams ability to release or use apps efficiently.

Additional information

• Previous issues with memory leaks may be relevant here as it will feed into this ticket
• The slight flicker of components may factor into this

[jd239]

Initial thoughts on performance testing is that there will be a page with multiple instances of a component so this will not be achievable using with the component testing setup. For example, this page has multiple instances of the Ionic button: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/button/test/perf/index.html.

The idea is to run a performance tests against the page. It's worth looking at how Ionic are able to do the performance testing.

[j212122]

Following from the above comment, I was unable to recreate this scenario. Attempted to configure Cypress e2e tests with the aim of testing a component in storybook (as per iconic example- 100+ of a single component on a page) using Cypress lighthouse plugin. I was unable to run lighthouse tests using Edge, and could not get Cypress to recognise Chrome was installed.

Thoughts: It is possible to generate a lighthouse HTML report which may give specific details relating to performance so we can pinpoint where there may be issues.

https://github.com/mi6/ic-ui-kit/tree/test/perfomance-testing ^ branch has the required config for anyone wanting to attempt the above.

[MI6-286]

I have been able to get the Lighthouse plugin to work using the E2E Cypress configuration and Chrome to test the Storybook example that is mentioned in the previous comment. However, the performance scores are very low, so this would require further investigation.

The required config is on this branch: https://github.com/mi6/ic-ui-kit/tree/1119-performance-testing

Further investigation has been carried out on this branch: https://github.com/mi6/ic-ui-kit/tree/1119-performance-testing-2

[MI6-255]

Is this completed?