@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/test-utils/index.tsx

@@ -1,341 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,197 +0,0 @@
-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;
-};