bdy 1.8.3-dev → 1.8.4-dev

package/distTs/src/visualTest/context.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.debug = exports.browserPath = exports.commitDetails = exports.invokerId = exports.executionId = exports.actionId = exports.pipelineId = exports.baseCommit = exports.commit = exports.branch = exports.ci = exports.buildId = exports.token = exports.parallel = exports.skipDiscovery = exports.oneByOne = exports.cliVersion = void 0;
+exports.setOptions = setOptions;
+exports.setBrowserPath = setBrowserPath;
+exports.setCiAndCommitInfo = setCiAndCommitInfo;
+const uuid_1 = require("uuid");
+const ciInfo_js_1 = require("../types/ciInfo.js");
+const utils_1 = require("../utils");
+exports.cliVersion = (0, utils_1.getVersion)();
+exports.oneByOne = false;
+exports.skipDiscovery = false;
+exports.parallel = false;
+exports.token = process.env.SNAPSHOTS_TOKEN || '';
+exports.buildId = process.env.SNAPSHOTS_BUILD_ID || (0, uuid_1.v4)();
+exports.ci = ciInfo_js_1.CI.NONE;
+exports.debug = (process.env.SNAPSHOTS_DEBUG || '').toLowerCase() === 'true';
+function setOptions(options) {
+    if (options.oneByOne) {
+        exports.oneByOne = true;
+    }
+    if (options.skipDiscovery) {
+        exports.skipDiscovery = true;
+    }
+    if (options.parallel) {
+        exports.parallel = true;
+    }
+}
+function setBrowserPath(path) {
+    exports.browserPath = path;
+}
+function setCiAndCommitInfo(ciInfo) {
+    exports.ci = ciInfo.ci;
+    exports.branch = ciInfo.branch;
+    exports.commit = ciInfo.commit;
+    exports.baseCommit = ciInfo.baseCommit;
+    exports.commitDetails = ciInfo.commitDetails;
+    if (ciInfo.ci === ciInfo_js_1.CI.BUDDY) {
+        exports.pipelineId = ciInfo.pipelineId;
+        exports.actionId = ciInfo.actionId;
+        exports.executionId = ciInfo.executionId;
+        exports.invokerId = ciInfo.invokerId;
+    }
+}

package/distTs/src/visualTest/exec.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.testExec = testExec;
+exports.gitExec = gitExec;
+const cross_spawn_1 = require("cross-spawn");
+const output_1 = __importDefault(require("../output"));
+const texts_1 = require("../texts");
+function testExec(command, arguments_) {
+    return new Promise((resolve, reject) => {
+        const process = (0, cross_spawn_1.spawn)(command, arguments_, { stdio: 'inherit' });
+        let processError;
+        process.on('error', (error) => {
+            output_1.default.error(texts_1.ERR_TEST_EXECUTION);
+            processError = error;
+        });
+        process.on('close', (code) => {
+            if (processError) {
+                reject(processError);
+            }
+            else {
+                resolve(code || 0);
+            }
+        });
+    });
+}
+function gitExec(arguments_) {
+    return new Promise((resolve, reject) => {
+        const process = (0, cross_spawn_1.spawn)('git', arguments_, {
+            stdio: ['ignore', 'pipe', 'pipe'],
+        });
+        let errorOutput = '';
+        let output = '';
+        process.stdout.on('data', (message) => {
+            output += message;
+        });
+        process.stderr.on('data', (message) => {
+            errorOutput += message;
+        });
+        process.on('close', (code) => {
+            if (code === 0) {
+                resolve(output);
+            }
+            else {
+                reject(errorOutput);
+            }
+        });
+    });
+}

package/distTs/src/visualTest/queue.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addToQueue = addToQueue;
+exports.isQueueEmpty = isQueueEmpty;
+const queue = [];
+const observers = [];
+let processing = false;
+function addToQueue(job) {
+    queue.push(job);
+    if (!processing) {
+        processQueue();
+    }
+}
+function processQueue() {
+    const task = queue.shift();
+    if (task) {
+        processing = true;
+        task().then(() => {
+            if (queue.length > 0) {
+                processQueue();
+            }
+            else {
+                processing = false;
+                signalStopProcessing();
+            }
+        });
+    }
+}
+function subscribeToStopProcessing(function_) {
+    observers.push(function_);
+}
+function signalStopProcessing() {
+    for (const observer of observers) {
+        observer();
+    }
+}
+async function isQueueEmpty() {
+    return new Promise((resolve) => {
+        subscribeToStopProcessing(() => {
+            resolve(true);
+        });
+    });
+}

package/distTs/src/visualTest/requests.js

@@ -0,0 +1,197 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendSnapshot = sendSnapshot;
+exports.sendSnapshots = sendSnapshots;
+exports.closeSession = closeSession;
+exports.getDefaultSettings = getDefaultSettings;
+exports.sendStorybook = sendStorybook;
+const context_js_1 = require("./context.js");
+const undici_1 = require("undici");
+const uuid_1 = require("uuid");
+const node_fs_1 = require("node:fs");
+const output_1 = __importDefault(require("../output"));
+const texts_1 = require("../texts");
+const serviceUrl = process.env.SNAPSHOTS_SERVICE_URL || 'http://localhost:3000';
+function filterSnapshotPlugin(snapshot) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { resourceDiscoveryTimeout, cookies, ...filteredSnapshot } = snapshot;
+    return filteredSnapshot;
+}
+function convertTextToBlob(text, headers) {
+    if (headers['content-type']?.includes('image')) {
+        const buffer = Buffer.from(text, 'base64');
+        return new Blob([buffer]);
+    }
+    else {
+        return new Blob([text]);
+    }
+}
+function prepareSnapshot(snapshot, files) {
+    return {
+        ...filterSnapshotPlugin(snapshot),
+        resources: snapshot.resources.map((resource) => {
+            const { body, headers, ...rest } = resource;
+            if (body) {
+                const id = (0, uuid_1.v4)();
+                const preparedBody = typeof body === 'string' ? convertTextToBlob(body, headers) : body;
+                files.push({ id, body: preparedBody });
+                return { ...rest, headers, id };
+            }
+            return resource;
+        }),
+    };
+}
+function createFormData(info, files) {
+    const formData = new undici_1.FormData();
+    formData.append('info', JSON.stringify(info));
+    for (const { id, body } of files) {
+        formData.append(id, body);
+    }
+    return formData;
+}
+async function sendSnapshot(snapshot) {
+    const files = [];
+    const preparedSnapshot = prepareSnapshot(snapshot, files);
+    const info = {
+        snapshot: preparedSnapshot,
+        token: context_js_1.token,
+        buildId: context_js_1.buildId,
+        cliVersion: context_js_1.cliVersion,
+        parallel: context_js_1.parallel,
+        ci: context_js_1.ci,
+        branch: context_js_1.branch,
+        commit: context_js_1.commit,
+        baseCommit: context_js_1.baseCommit,
+        pipelineId: context_js_1.pipelineId,
+        actionId: context_js_1.actionId,
+        executionId: context_js_1.executionId,
+        invokerId: context_js_1.invokerId,
+        commitDetails: context_js_1.commitDetails,
+    };
+    const formData = createFormData(info, files);
+    const [message] = await sendRequest({
+        url: '/snapshot',
+        payload: formData,
+        multipart: true,
+    });
+    if (!message) {
+        throw new Error(texts_1.ERR_INVALID_SNAPSHOT_RESPONSE);
+    }
+    return message;
+}
+async function sendSnapshots(snapshots) {
+    const files = [];
+    const preparedSnapshots = snapshots.map((snapshot) => prepareSnapshot(snapshot, files));
+    const info = {
+        snapshots: preparedSnapshots,
+        token: context_js_1.token,
+        buildId: context_js_1.buildId,
+        cliVersion: context_js_1.cliVersion,
+        parallel: context_js_1.parallel,
+        ci: context_js_1.ci,
+        branch: context_js_1.branch,
+        commit: context_js_1.commit,
+        baseCommit: context_js_1.baseCommit,
+        pipelineId: context_js_1.pipelineId,
+        actionId: context_js_1.actionId,
+        executionId: context_js_1.executionId,
+        invokerId: context_js_1.invokerId,
+        commitDetails: context_js_1.commitDetails,
+    };
+    const formData = createFormData(info, files);
+    const [message] = await sendRequest({
+        url: '/snapshots',
+        payload: formData,
+        multipart: true,
+    });
+    if (!message) {
+        throw new Error(texts_1.ERR_INVALID_SNAPSHOTS_RESPONSE);
+    }
+    return message;
+}
+async function closeSession() {
+    const payload = {
+        token: context_js_1.token,
+        buildId: context_js_1.buildId,
+    };
+    const [message] = await sendRequest({ url: '/close', payload });
+    if (!message) {
+        throw new Error(texts_1.ERR_INVALID_CLOSE_SESSION_RESPONSE);
+    }
+    return message;
+}
+async function getDefaultSettings() {
+    const [message, response] = await sendRequest({
+        url: `/defaultSettings?token=${context_js_1.token}`,
+    });
+    if (message) {
+        throw new Error(message);
+    }
+    if (!response) {
+        throw new Error(texts_1.ERR_INVALID_DEFAULT_SETTINGS_RESPONSE);
+    }
+    return response;
+}
+async function sendStorybook(snapshots, filePaths) {
+    const info = {
+        snapshots,
+        token: context_js_1.token,
+        buildId: context_js_1.buildId,
+        cliVersion: context_js_1.cliVersion,
+        ci: context_js_1.ci,
+        branch: context_js_1.branch,
+        commit: context_js_1.commit,
+        baseCommit: context_js_1.baseCommit,
+        pipelineId: context_js_1.pipelineId,
+        actionId: context_js_1.actionId,
+        executionId: context_js_1.executionId,
+        invokerId: context_js_1.invokerId,
+        commitDetails: context_js_1.commitDetails,
+    };
+    const files = filePaths.map((file) => ({
+        id: file,
+        body: new Blob([(0, node_fs_1.readFileSync)(file)]),
+    }));
+    const formData = createFormData(info, files);
+    const [message] = await sendRequest({
+        url: '/storybook',
+        payload: formData,
+        multipart: true,
+    });
+    if (!message) {
+        throw new Error(texts_1.ERR_INVALID_STORYBOOK_RESPONSE);
+    }
+    return message;
+}
+async function sendRequest({ url, payload, multipart, }) {
+    output_1.default.normal((0, texts_1.LOG_SENDING_REQUEST)(`${serviceUrl}${url}`));
+    const init = {
+        method: 'GET',
+        redirect: 'follow',
+    };
+    if (payload && !multipart) {
+        init.method = 'POST';
+        init.headers = { 'Content-Type': 'application/json' };
+        init.body = JSON.stringify(payload);
+    }
+    if (multipart) {
+        init.method = 'POST';
+        init.body = payload;
+    }
+    const response = await (0, undici_1.fetch)(`${serviceUrl}${url}`, init);
+    const contentType = response.headers.get('content-type');
+    if (contentType && contentType.includes('application/json')) {
+        try {
+            const json = (await response.json());
+            return [undefined, json];
+        }
+        catch {
+            throw new Error(texts_1.ERR_INVALID_JSON);
+        }
+    }
+    const text = await response.text();
+    return [text, undefined];
+}

package/distTs/src/visualTest/resources.js

@@ -0,0 +1,195 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collectResources = collectResources;
+const puppeteer_core_1 = __importDefault(require("puppeteer-core"));
+const context_js_1 = require("./context.js");
+const output_1 = __importDefault(require("../output"));
+const texts_1 = require("../texts");
+const scrapedUrls = new Map();
+const scrapedResources = new Map();
+async function collectResources({ url, widths = [1280], resourceDiscoveryTimeout = 0, height = 1024, cookies, scaleRatio, }) {
+    const scrapedUrl = scrapedUrls.get(url);
+    const missingWidths = scrapedUrl
+        ? widths.filter((width) => !scrapedUrl.widths.includes(width))
+        : [];
+    if (scrapedUrl && missingWidths.length === 0) {
+        return getResourceUrlsData({
+            duplicatedResourcesUrls: scrapedUrl.resources,
+        });
+    }
+    else if (scrapedUrl && missingWidths.length > 0) {
+        const { scrapedResourcesUrls, duplicatedResourcesUrls } = await output_1.default.debug((0, texts_1.DEBUG_RESOURCE_SCRAPPING_URL)(url), scrapeResources({
+            url,
+            widths: missingWidths,
+            height,
+            resourceDiscoveryTimeout,
+            cookies,
+            scaleRatio,
+        }));
+        const duplicatedScrapedResourceUrls = [...scrapedUrl.resources];
+        scrapedUrls.set(url, {
+            widths: [...scrapedUrl.widths, ...missingWidths],
+            resources: [
+                ...new Set([
+                    ...scrapedUrl.resources,
+                    ...scrapedResourcesUrls,
+                    ...duplicatedResourcesUrls,
+                ]),
+            ],
+        });
+        return getResourceUrlsData({
+            resourcesUrls: scrapedResourcesUrls,
+            duplicatedResourcesUrls: [
+                ...new Set([
+                    ...duplicatedResourcesUrls,
+                    ...duplicatedScrapedResourceUrls,
+                ]),
+            ],
+        });
+    }
+    else {
+        const { scrapedResourcesUrls, duplicatedResourcesUrls } = await output_1.default.debug((0, texts_1.DEBUG_RESOURCE_SCRAPPING_URL)(url), scrapeResources({
+            url,
+            widths,
+            height,
+            resourceDiscoveryTimeout,
+            cookies,
+            scaleRatio,
+        }));
+        scrapedUrls.set(url, {
+            widths,
+            resources: [...scrapedResourcesUrls, ...duplicatedResourcesUrls],
+        });
+        return getResourceUrlsData({
+            resourcesUrls: scrapedResourcesUrls,
+            duplicatedResourcesUrls,
+        });
+    }
+}
+function getResourceUrlsData({ resourcesUrls = [], duplicatedResourcesUrls = [], }) {
+    const resources = [];
+    for (const resourceUrl of resourcesUrls) {
+        const scrapedResource = scrapedResources.get(resourceUrl);
+        if (scrapedResource) {
+            resources.push({
+                url: resourceUrl,
+                status: scrapedResource.status,
+                headers: scrapedResource.headers,
+                body: scrapedResource.body,
+            });
+        }
+        else {
+            throw new Error((0, texts_1.ERR_RESOURCE_NOT_FOUND)(resourceUrl));
+        }
+    }
+    for (const resourceUrl of duplicatedResourcesUrls) {
+        const scrapedResource = scrapedResources.get(resourceUrl);
+        if (scrapedResource) {
+            resources.push({
+                url: resourceUrl,
+                status: scrapedResource.status,
+                headers: scrapedResource.headers,
+                duplicate: true,
+            });
+        }
+        else {
+            throw new Error((0, texts_1.ERR_RESOURCE_NOT_FOUND)(resourceUrl));
+        }
+    }
+    return resources;
+}
+async function scrapeResources({ url, widths, height, resourceDiscoveryTimeout, cookies = [], scaleRatio, }) {
+    const scrapedResourcesUrls = [];
+    const duplicatedResourcesUrls = [];
+    const launchOptions = {
+        headless: 'shell',
+        args: ['--no-sandbox'],
+        acceptInsecureCerts: true,
+        timeout: 120_000,
+        executablePath: context_js_1.browserPath,
+    };
+    const browser = await puppeteer_core_1.default.launch(launchOptions);
+    const page = await browser.newPage();
+    const initWidth = widths[0];
+    await page.setViewport({
+        width: initWidth,
+        height,
+        deviceScaleFactor: scaleRatio,
+    });
+    await page.setCookie(...cookies);
+    page.on('response', async (response) => {
+        const request = response.request();
+        const requestUrl = request.url();
+        const isCollected = scrapedResources.has(requestUrl);
+        if (isCollected && !scrapedResourcesUrls.includes(requestUrl)) {
+            duplicatedResourcesUrls.push(requestUrl);
+        }
+        else {
+            let responseError;
+            let body;
+            const requestUrl = request.url();
+            const headers = response.headers();
+            const contentType = headers['content-type'];
+            const status = response.status();
+            try {
+                if ((status < 300 || status > 399) &&
+                    !contentType.startsWith('text/html')) {
+                    body = new Blob([await response.buffer()]);
+                }
+            }
+            catch (error) {
+                responseError = error;
+            }
+            if (!responseError && body) {
+                scrapedResourcesUrls.push(requestUrl);
+                scrapedResources.set(requestUrl, {
+                    status,
+                    headers: { 'content-type': contentType },
+                    body,
+                });
+            }
+        }
+    });
+    await page.goto(url);
+    await output_1.default.debug(texts_1.DEBUG_AUTO_SCROLL, autoScroll(page));
+    await output_1.default.debug(texts_1.DEBUG_AUTO_WIDTH, autoWidths(page, widths, height));
+    if (resourceDiscoveryTimeout > 0) {
+        await new Promise((resolve) => setTimeout(resolve, resourceDiscoveryTimeout));
+        if (context_js_1.debug) {
+            output_1.default.warning((0, texts_1.DEBUG_RESOURCE_DISCOVERY_TIMEOUT)(resourceDiscoveryTimeout));
+        }
+    }
+    await output_1.default.debug(texts_1.DEBUG_WAIT_FOR_IDLE, page.waitForNetworkIdle());
+    await browser.close();
+    return { scrapedResourcesUrls, duplicatedResourcesUrls };
+}
+async function autoScroll(page) {
+    await page.evaluate(async () => {
+        await new Promise((resolve) => {
+            const resourceDiscoveryMaxHeight = 30_000;
+            let totalHeight = 0;
+            const distance = 100;
+            const timer = setInterval(() => {
+                const scrollHeight = document.body.scrollHeight;
+                window.scrollBy(0, distance);
+                totalHeight += distance;
+                if (totalHeight >=
+                    (scrollHeight - window.innerHeight || resourceDiscoveryMaxHeight)) {
+                    clearInterval(timer);
+                    resolve('');
+                }
+            }, 10);
+        });
+    });
+}
+async function autoWidths(page, widths, height) {
+    for (const width of widths) {
+        if (width !== widths[0]) {
+            await page.setViewport({ width, height, deviceScaleFactor: 2 });
+            await new Promise((resolve) => setTimeout(resolve, 100));
+        }
+    }
+}

package/distTs/src/visualTest/server.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createServer = createServer;
+const fastify_1 = __importDefault(require("fastify"));
+const cors_1 = __importDefault(require("@fastify/cors"));
+const snapshots_js_1 = require("./snapshots.js");
+// File will be imported as source text;
+// @ts-ignore
+const parseDom_js_1 = __importDefault(require("./utils/parseDom.js"));
+const port = 1337;
+async function createServer() {
+    const app = (0, fastify_1.default)({
+        // logger: true,
+        bodyLimit: 50 * 1024 * 1024, //50 MB,
+    });
+    app.register(cors_1.default);
+    app.get('/parseDom.js', async (request, reply) => {
+        reply.type('text/js').send(parseDom_js_1.default);
+    });
+    app.post('/snapshot', async (request, reply) => {
+        const data = request.body;
+        (0, snapshots_js_1.addSnapshot)(data);
+        reply.send('Snapshot received');
+    });
+    app.get('*', (request, reply) => {
+        reply.send('Wrong path');
+    });
+    await app.listen({ port });
+    return app;
+}

package/distTs/src/visualTest/snapshots.js

@@ -0,0 +1,109 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setDefaultSettings = setDefaultSettings;
+exports.addSnapshot = addSnapshot;
+exports.finishProcessingSnapshots = finishProcessingSnapshots;
+const resources_js_1 = require("./resources.js");
+const context_js_1 = require("./context.js");
+const requests_js_1 = require("./requests.js");
+const queue_js_1 = require("./queue.js");
+const output_1 = __importDefault(require("../output"));
+const texts_1 = require("../texts");
+const snapshots = [];
+let defaultWidths = [];
+let defaultScaleRatio = 1;
+function setDefaultSettings({ defaultWidths: width, defaultScaleRatio: scaleRatio, }) {
+    defaultWidths = width;
+    defaultScaleRatio = scaleRatio;
+}
+function addSnapshot(snapshot) {
+    const preparedSnapshots = {
+        ...snapshot,
+        widths: snapshot.widths.length > 0 ? snapshot.widths : defaultWidths,
+        scaleRatio: defaultScaleRatio,
+    };
+    if (context_js_1.oneByOne) {
+        (0, queue_js_1.addToQueue)(() => processSnapshot(preparedSnapshots));
+    }
+    else {
+        snapshots.push(preparedSnapshots);
+    }
+}
+async function finishProcessingSnapshots(spawnedProcessExitCode) {
+    if (context_js_1.oneByOne) {
+        return await (0, queue_js_1.isQueueEmpty)();
+    }
+    if (spawnedProcessExitCode === 0) {
+        return await processSnapshots();
+    }
+}
+async function processSnapshot(snapshot) {
+    let t1;
+    if (context_js_1.debug) {
+        t1 = performance.now();
+    }
+    const preparedSnapshot = context_js_1.skipDiscovery
+        ? snapshot
+        : await getSnapshotWithResources(snapshot);
+    try {
+        const response = await (0, requests_js_1.sendSnapshot)(preparedSnapshot);
+        output_1.default.normal(response);
+    }
+    catch (error) {
+        output_1.default.error(`${error}`);
+    }
+    if (context_js_1.debug && t1) {
+        const t2 = performance.now();
+        output_1.default.normal((0, texts_1.DEBUG_SNAPSHOT_PROCESSING)(snapshot.name, t2 - t1));
+    }
+}
+async function processSnapshots() {
+    let t1;
+    if (context_js_1.debug) {
+        t1 = performance.now();
+    }
+    output_1.default.normal((0, texts_1.LOG_PROCESSING_SNAPSHOTS)(snapshots.length));
+    const preparedSnapshots = context_js_1.skipDiscovery
+        ? snapshots
+        : await getSnapshotsWithResources(snapshots);
+    try {
+        const response = await (0, requests_js_1.sendSnapshots)(preparedSnapshots);
+        output_1.default.normal(response);
+    }
+    catch (error) {
+        output_1.default.error(`${error}`);
+    }
+    if (context_js_1.debug && t1) {
+        const t2 = performance.now();
+        output_1.default.normal((0, texts_1.DEBUG_SNAPSHOTS_PROCESSING)(t2 - t1));
+    }
+}
+async function getSnapshotWithResources(snapshot) {
+    const { url, widths, resourceDiscoveryTimeout, cookies, scaleRatio } = snapshot;
+    const resources = await (0, resources_js_1.collectResources)({
+        url,
+        widths,
+        resourceDiscoveryTimeout,
+        cookies,
+        scaleRatio,
+    });
+    return {
+        ...snapshot,
+        resources: [...snapshot.resources, ...resources],
+    };
+}
+async function getSnapshotsWithResources(snapshots) {
+    const snapshotsWithResources = [];
+    const prepareSnapshots = filterDuplicates(snapshots);
+    for (const snapshot of prepareSnapshots) {
+        const snapshotWithResources = await getSnapshotWithResources(snapshot);
+        snapshotsWithResources.push(snapshotWithResources);
+    }
+    return snapshotsWithResources;
+}
+function filterDuplicates(snapshots) {
+    return snapshots.filter((snapshot, index) => snapshots.findIndex((item) => item.name === snapshot.name) === index);
+}