NoriSte

name: Update React Native Storybook
on:
  push:
    branches:
      - main
  pull_request:
    types:
      - ready_for_review
    branches-ignore:
      - "dependabot-*"

NoriSte

	Pages Router	App Router	Improvement %
JS bundle size	1.2 MB	173 KB	85% less JS shipped
HTML response time (shows how fast the server generates and sends the HTML)	51.8 s	15.7 s	70% faster server execution
Web Vitals: FCP	5.8 s	1.9 s	65% better
Web Vitals: LCP	5.8 s	2.8 s	50% better
​​Web Vitals: INP	Most interactions: 80-100 ms	Most interactions: 30-40 ms	60% better

NoriSte

Change	INP before	INP after	Net improvement
Rewriting the Slider and Improving the Accordion components	~250 ms	~220 ms	-30 ms
Updating Usercentrics for the EU privacy policy banner	~220 ms	~180 ms	-40 ms
Migrating the Home page to the App router	~180 ms	~170 ms	-10 ms

NoriSte

Change	INP before	INP after	Net improvement
Upgrading React from 17 to 18	~460 ms	~320 ms	-140 ms
Virtualizing a long list	~320 ms	~280 ms	-40 ms
Debouncing keyboard events	~280 ms	~260 ms	-20 ms
Memoizing heavy components	~260 ms	~230 ms	-30 ms
Fixing state management non-EU privacy policy banner	~230 ms	~215 ms	-15 ms
Avoiding the tooltip to re-render the whole page	~215 ms	~205 ms	-10 ms
Updating Usercentrics for the EU privacy policy banner	~205 ms	~200 ms	-5 ms

NoriSte

Let's say you have a page with Main section and Footer. By default, rendering of the page looks something like this:

Build time:
    - nothing 🤷‍♂️

Request time:
    - Page rendering (in parallel):
        - Main:
 - Network requests are made

NoriSte

As part of Preply's PageSpeed INP project, the script adds all the DOM elements that the Country of Birth filter adds to the FiltersModal and measure how long it takes.

NoriSte

DS Coverage raw script

🚨🚨🚨 UPDATE: index.js is the original script while index.ts is the most updated one! 🚨🚨

Keep in mind the script is an experiment, I need to add types, refine it, make it readable, etc.

1. Open a Preply page (whatever environment)
2. Copy/paste it as is in the Chrome's console and press enter
3. Look at the logged result

NoriSte

/**
 * Ensure no requests hit the server, it's mostly a safe protection for the developers running
 * server-free tests that could miss some requests are actually hitting the real server, then
 * resulting in test flakiness because of partial server stubbing.
 */
export function blockServerRequests() {
  cy.log('**--- Prevent any requests to hit the real server**');
  cy.intercept('http://localhost:8080/**', { forceNetworkError: true });
}

NoriSte

As of Today, we cannot use the Storybook Test Runner in Hasura's Console codebase because on some machines some tests are flaky.

As a temporary workaround, if you really need it, you can apply the following changes (without committing them) to use it locally.

PLEASE NOTE: Due to the migration to Nx, these steps will not work for a long time, use them only if you benefit a lot from running all tyhe Storybook tests from the terminal!

1. Install "@storybook/test-runner": "0.6.2",
2. Add a new script "test-storybook": "test-storybook",
3. In console/.storybook, add a file called "test-runner-jest.config.js" with the following content

NoriSte

// ---------------------------------------------------------------
// CONTEXT
export type Context = {
  // The current status of OpenTelemetry
  status: 'enabled' | 'disabled';

  // Whether the current metadata contains the configuration or not
  metadataContainsConfig: boolean;

  // Whether the current form state contains valid configuration or not