@telefonica/mistica 16.58.0-beta.2 → 16.59.0-beta.1

package/src/test-utils/index.tsx

@@ -0,0 +1,341 @@
+import path from 'path';
+import fs from 'fs';
+import os from 'os';
+import {openPage, serverHostName, screen, getGlobalPage, PageApi} from '@telefonica/acceptance-testing';
+import {MOVISTAR_NEW_SKIN} from '../skins/constants';
+import {kebabCase} from 'lodash';
+
+import type {TestViewport} from '@telefonica/acceptance-testing';
+
+export type {ElementHandle} from '@telefonica/acceptance-testing';
+
+export {screen, PageApi};
+
+export type StoryArgs = {[key: string]: string | number | boolean};
+
+const MOBILE_DEVICE_IOS_SMALL = 'MOBILE_IOS_SMALL';
+const MOBILE_DEVICE_IOS_INSET = 'MOBILE_IOS_INSET';
+const MOBILE_DEVICE_IOS = 'MOBILE_IOS';
+const MOBILE_DEVICE_ANDROID = 'MOBILE_ANDROID';
+const TABLET_DEVICE = 'TABLET';
+const DESKTOP_DEVICE = 'DESKTOP';
+const LARGE_DESKTOP_DEVICE = 'LARGE_DESKTOP';
+const EXTRA_LARGE_DESKTOP_DEVICE = 'EXTRA_LARGE_DESKTOP';
+
+export type Device =
+    | typeof MOBILE_DEVICE_IOS_SMALL
+    | typeof MOBILE_DEVICE_IOS_INSET
+    | typeof MOBILE_DEVICE_IOS
+    | typeof MOBILE_DEVICE_ANDROID
+    | typeof TABLET_DEVICE
+    | typeof DESKTOP_DEVICE
+    | typeof LARGE_DESKTOP_DEVICE
+    | typeof EXTRA_LARGE_DESKTOP_DEVICE;
+
+type DeviceCollection = Record<
+    Device,
+    {
+        platform?: string;
+        userAgent?: string;
+        viewport: TestViewport;
+    }
+>;
+
+const DEVICES: DeviceCollection = {
+    [MOBILE_DEVICE_IOS_SMALL]: {
+        userAgent:
+            'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
+        platform: 'ios',
+        viewport: {
+            width: 320,
+            height: 480,
+            deviceScaleFactor: 2,
+            isMobile: true,
+            hasTouch: true,
+            isLandscape: false,
+        },
+    },
+    [MOBILE_DEVICE_IOS]: {
+        userAgent:
+            'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
+        platform: 'ios',
+        viewport: {
+            width: 375,
+            height: 667,
+            deviceScaleFactor: 2,
+            isMobile: true,
+            hasTouch: true,
+            isLandscape: false,
+        },
+    },
+    [MOBILE_DEVICE_IOS_INSET]: {
+        userAgent:
+            'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
+        platform: 'ios',
+        viewport: {
+            width: 375,
+            height: 667,
+            deviceScaleFactor: 2,
+            isMobile: true,
+            hasTouch: true,
+            isLandscape: false,
+            safeAreaInset: {
+                // smallest iPhone's bottom inset height on vertical position (iPhone 13 mini)
+                bottom: '34px',
+            },
+        },
+    },
+    [MOBILE_DEVICE_ANDROID]: {
+        userAgent:
+            'Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Mobile Safari/537.36',
+        platform: 'android',
+        viewport: {
+            width: 411,
+            height: 731,
+            deviceScaleFactor: 2,
+            isMobile: true,
+            hasTouch: true,
+            isLandscape: false,
+        },
+    },
+    [TABLET_DEVICE]: {
+        // Use default platform
+        platform: undefined,
+        viewport: {
+            width: 800,
+            height: 600,
+            deviceScaleFactor: 1,
+            isMobile: true,
+            hasTouch: true,
+            isLandscape: false,
+        },
+        userAgent: '',
+    },
+    [DESKTOP_DEVICE]: {
+        // Use default platform
+        platform: undefined,
+        viewport: {
+            width: 1280,
+            height: 800,
+            deviceScaleFactor: 1,
+            isMobile: false,
+            hasTouch: false,
+            isLandscape: false,
+        },
+    },
+    [LARGE_DESKTOP_DEVICE]: {
+        platform: undefined,
+        viewport: {
+            width: 1600,
+            height: 900,
+            deviceScaleFactor: 1,
+            isMobile: false,
+            hasTouch: false,
+            isLandscape: false,
+        },
+    },
+    [EXTRA_LARGE_DESKTOP_DEVICE]: {
+        platform: undefined,
+        viewport: {
+            width: 1920,
+            height: 1080,
+            deviceScaleFactor: 1,
+            isMobile: false,
+            hasTouch: false,
+            isLandscape: false,
+        },
+    },
+};
+
+const buildStoryPath = (id: string, skin?: string, platform?: string, args?: StoryArgs) => {
+    const params = new URLSearchParams();
+
+    params.set('id', id);
+
+    params.set('viewMode', 'story');
+
+    if (skin) {
+        params.set('skin', skin);
+    }
+
+    if (platform) {
+        params.set('platform', platform);
+    }
+
+    if (args) {
+        params.set(
+            'args',
+            Object.entries(args)
+                .map(([key, value]) => `${key}:${value}`)
+                .join(';')
+        );
+    }
+
+    return `/iframe.html?${params.toString()}`;
+};
+
+export const openStoryPage = ({
+    id,
+    device = TABLET_DEVICE,
+    viewport,
+    skin = 'Movistar-new',
+    args,
+    isDarkMode,
+}: {
+    id: string;
+    device?: Device;
+    viewport?: TestViewport;
+    skin?:
+        | 'Movistar'
+        | 'Movistar-new'
+        | 'Vivo'
+        | 'Vivo-new'
+        | 'O2'
+        | 'O2-new'
+        | 'Telefonica'
+        | 'Blau'
+        | 'Tu'
+        | 'Esimflag';
+    args?: StoryArgs;
+    isDarkMode?: boolean;
+}): Promise<PageApi> =>
+    openPage({
+        path: buildStoryPath(id, skin, DEVICES[device].platform, args),
+        userAgent: DEVICES[device].userAgent,
+        viewport: viewport ?? DEVICES[device].viewport,
+        isDarkMode,
+    });
+
+const hydrateSSRPage = async (page: PageApi): Promise<void> => {
+    await page.evaluate(() => {
+        // @ts-expect-error this executes in the browser, see ssr.tsx
+        window.hydrate();
+    });
+};
+
+const checkHydrationMismatch = async (page: PageApi): Promise<void> => {
+    const {testPath, currentTestName} = expect.getState();
+    const tmpdir = os.tmpdir();
+    const snapshotId = kebabCase(`${path.basename(testPath)}-${currentTestName}-snap`);
+    const baselineImagePath = path.join(tmpdir, `${snapshotId}.png`);
+    await page.screenshot({path: baselineImagePath});
+
+    await hydrateSSRPage(page);
+    const hydrateImage = await page.screenshot();
+
+    try {
+        expect(hydrateImage).toMatchImageSnapshot({
+            // use the saved ssr snapshot as the baseline
+            customSnapshotsDir: tmpdir,
+            customSnapshotIdentifier: snapshotId,
+            customDiffDir: path.join(
+                __dirname,
+                '..',
+                '__acceptance_tests__',
+                '__image_snapshots__',
+                '__diff_output__'
+            ),
+        });
+    } catch (error: any) {
+        Error.captureStackTrace(error, checkHydrationMismatch);
+        throw error;
+    } finally {
+        fs.unlinkSync(baselineImagePath);
+    }
+};
+
+/**
+ * Renders a page with a React component in the server and opens it in the browser, where it's hydrated client side.
+ * `name` is the name (without extension) of a file in the __ssr_pages__ folder. This file exports the component to be rendered.
+ */
+export const openSSRPage = async ({
+    name,
+    device = TABLET_DEVICE,
+    skin = MOVISTAR_NEW_SKIN,
+    checkHidrationVisualMismatch = true,
+    prefersColorScheme,
+    waitUntil,
+}: {
+    name: string;
+    device?: Device;
+    skin?: string;
+    checkHidrationVisualMismatch?: boolean;
+    prefersColorScheme?: 'light' | 'dark';
+    waitUntil?: 'load' | 'domcontentloaded' | 'networkidle0' | 'networkidle2';
+}): Promise<PageApi> => {
+    const globalPage = getGlobalPage();
+    const port = (global as any)['__SSR_SERVER__'].address().port;
+
+    // Capture browser console.error and console.warn calls that React could trigger when calling hydrate()
+    globalPage.on('console', async (msg) => {
+        const type = msg.type();
+        const args = [...(await Promise.all(msg.args().map((h: any) => h.jsonValue())))];
+        if (args.length === 0) {
+            args.push(msg.text());
+        }
+        if (type === 'error') {
+            console.error(...args);
+        }
+        if (type === 'warning') {
+            console.warn(...args);
+        }
+    });
+
+    const page = await openPage({
+        url: `http://${serverHostName}:${port}/${name}?skin=${skin}`,
+        userAgent: DEVICES[device].userAgent,
+        viewport: DEVICES[device].viewport,
+        waitUntil,
+    });
+
+    if (prefersColorScheme) {
+        await page.emulateMediaFeatures([{name: 'prefers-color-scheme', value: prefersColorScheme}]);
+    }
+
+    if (checkHidrationVisualMismatch) {
+        await checkHydrationMismatch(page);
+    } else {
+        await hydrateSSRPage(page);
+    }
+
+    return page;
+};
+
+export const setRootFontSize = (px: number): Promise<void> =>
+    page.$eval('html', (e, px) => e.setAttribute('style', `font-size: ${px}px;`), px);
+
+export const waitFor = <T,>(
+    expectation: () => Promise<T> | T,
+    timeout = 10000,
+    interval = 50
+): Promise<T> => {
+    const startTime = Date.now();
+    return new Promise((resolve, reject) => {
+        const rejectOrRerun = (error: unknown) => {
+            if (Date.now() - startTime >= timeout) {
+                reject(error);
+                return;
+            }
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            setTimeout(runExpectation, interval);
+        };
+        const runExpectation = () => {
+            try {
+                Promise.resolve(expectation())
+                    .then((r) => resolve(r))
+                    .catch(rejectOrRerun);
+            } catch (error: any) {
+                rejectOrRerun(error);
+            }
+        };
+        setTimeout(runExpectation, 0);
+    });
+};
+
+// about SSIM: https://github.com/americanexpress/jest-image-snapshot#%EF%B8%8F-api
+// We use this config for screenshot tests that tend to be flaky in CI because of subtle differences in the rendering
+export const ssimScreenshotConfig = {
+    comparisonMethod: 'ssim',
+    failureThreshold: 0.001,
+    failureThresholdType: 'percent',
+} as const;

package/src/test-utils/setup-ssr-test-env.tsx

@@ -0,0 +1,13 @@
+import './fail-test-on-console-error';
+import {createServer} from './ssr';
+
+process.env.SSR_TEST = 'true';
+
+beforeAll(() => {
+    (global as any)['__SSR_SERVER__'] = createServer();
+    (global as any)['__SSR_SERVER__'].listen(0); // use any free port
+});
+
+afterAll(() => {
+    (global as any)['__SSR_SERVER__'].close();
+});

package/src/test-utils/ssr.tsx

@@ -0,0 +1,197 @@
+import * as React from 'react';
+import * as url from 'url';
+import ReactDomServer from 'react-dom/server';
+import path from 'path';
+import webpack from 'webpack';
+import http from 'http';
+import fs from 'fs';
+import {ThemeContextProvider, MOVISTAR_SKIN, getSkinByName, type KnownSkinName} from '../..';
+import {execSync} from 'child_process';
+
+const createWebpackEntries = (): {[entryName: string]: string} => {
+    const entries: {[entryName: string]: string} = {};
+
+    // create an entry for each .tsx file in __ssr_pages__ folder
+    const files = fs
+        .readdirSync(path.join(__dirname, '..', '__acceptance_tests__/__ssr_pages__'))
+        .filter((f) => f.endsWith('.tsx'));
+
+    files.forEach((f) => {
+        const moduleName = f.replace('.tsx', ''); // remove file extension
+
+        // create a temporary file for the entry, it'll be removed after webpack compilation
+        const clientSideEntryFile = path.join(__dirname, `temporary-file-do-not-commit-${f}`);
+        fs.writeFileSync(
+            clientSideEntryFile,
+            `
+            import * as React from 'react';
+            import { hydrateRoot } from 'react-dom/client';
+            import Component from '../__acceptance_tests__/__ssr_pages__/${moduleName}';
+            import {ThemeContextProvider, getSkinByName} from '../..';
+
+            const skin = new URL(location).searchParams.get('skin');
+
+            window.hydrate = () => {
+                hydrateRoot(
+                    document.getElementById('root'),
+                    <ThemeContextProvider
+                        theme={{
+                            skin: getSkinByName(skin || 'Movistar'),
+                            i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'}
+                        }}
+                    >
+                        <Component />
+                    </ThemeContextProvider>
+                );
+            };`
+        );
+
+        entries[moduleName] = clientSideEntryFile;
+    });
+
+    return entries;
+};
+
+export const compileSsrClient = ({build = true}: {build: boolean}): Promise<webpack.Stats> => {
+    if (build) {
+        execSync('yarn compile', {stdio: 'inherit'});
+    }
+    const entries = createWebpackEntries();
+    const webpackConfig: webpack.Configuration = {
+        mode: 'development',
+        // While testing NODE_ENV will get evaluated to test on the server, so it should be the same on the browser bundles.
+        optimization: {
+            nodeEnv: 'test',
+        },
+        entry: entries,
+        output: {
+            path: path.resolve(__dirname, '..', '..', 'public', 'ssr'),
+            filename: '[name].js',
+            publicPath: '',
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.tsx?$/,
+                    use: {
+                        loader: 'swc-loader',
+                    },
+                    exclude: [/node_modules/],
+                },
+            ],
+        },
+        resolve: {
+            extensions: ['.tsx', '.ts', '.js', '.json', '.wasm', '.mjs', '*'],
+        },
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.SSR_TEST': JSON.stringify(true),
+            }),
+        ],
+    };
+
+    const stats = new Promise<webpack.Stats>((resolve, reject) => {
+        const compiler = webpack(webpackConfig);
+        compiler.run((err, stats: any) => {
+            if (err || stats.hasErrors()) {
+                reject(stats.compilation.errors);
+            }
+            resolve(stats);
+        });
+    }).finally(() => {
+        // remove all temporary entry files
+        Object.values(entries).forEach((file) => {
+            fs.unlinkSync(file);
+        });
+    });
+
+    return stats;
+};
+
+export const createServer = (): http.Server => {
+    const server = http.createServer((req, res) => {
+        const parsedUrl = url.parse(req.url || '', true);
+        const pathParts = (parsedUrl.pathname || '').split('/');
+        const moduleName = pathParts[pathParts.length - 1];
+
+        if (moduleName === 'favicon.ico') {
+            res.end();
+            return;
+        }
+
+        const serveFileInPath = (path: string) => {
+            fs.readFile(path, (err, data) => {
+                if (err) {
+                    throw err;
+                }
+                res.writeHead(200);
+                res.end(data);
+            });
+        };
+
+        if (moduleName.endsWith('.woff2')) {
+            serveFileInPath(path.join(__dirname, '..', '..', '.storybook', 'css', parsedUrl.path as string));
+            return;
+        }
+
+        if (moduleName.endsWith('.jpg') || moduleName.endsWith('.png')) {
+            serveFileInPath(path.join(__dirname, '..', '__stories__', 'images', parsedUrl.path as string));
+            return;
+        }
+
+        if (moduleName.endsWith('.css')) {
+            serveFileInPath(path.join(__dirname, '..', '..', 'css', parsedUrl.path as string));
+            return;
+        }
+
+        let Component;
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            Component = require('../__acceptance_tests__/__ssr_pages__/' + moduleName).default;
+        } catch (e) {
+            res.writeHead(404);
+            res.end();
+            return;
+        }
+
+        const userAgent = req.headers['user-agent'];
+
+        const renderedComponent = ReactDomServer.renderToString(
+            <ThemeContextProvider
+                theme={{
+                    skin: getSkinByName(String(parsedUrl.query.skin || MOVISTAR_SKIN) as KnownSkinName),
+                    i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'},
+                    platformOverrides: {
+                        userAgent,
+                    },
+                }}
+            >
+                <Component />
+            </ThemeContextProvider>
+        );
+
+        const clientCode = fs.readFileSync(
+            path.join(__dirname, '..', '..', 'public', 'ssr', `${moduleName}.js`)
+        );
+
+        res.writeHead(200);
+
+        res.end(`
+            <!DOCTYPE html>
+            <html>
+                <head>
+                    <meta charset="UTF-8">
+                    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover">
+                    <link rel="stylesheet" href="reset.css">
+                    <link rel="stylesheet" href="roboto.css">
+                    <link rel="stylesheet" href="mistica.css">
+                </head>
+                <body>
+                    <div id="root">${renderedComponent}</div>
+                    <script>${clientCode}</script>
+                </body>
+            </html>`);
+    });
+
+    return server;
+};