tests/layout.test.js - master - ncit/studiosite

tests/layout.test.js
156 строк6 KB
ncit
Update case studies, HR assets, add tests and config
09 июн 2026, 11:24
09 июн 2026, 11:24b01411d
const assert = require('assert');

describe('Homepage layout — cross-device', () => {
    beforeEach(async () => {
        await browser.url('/');
        // Wait for page to fully load
        await browser.waitUntil(
            async () => (await browser.execute(() => document.readyState)) === 'complete',
            { timeout: 15000 }
        );
    });

    it('page has no horizontal overflow', async () => {
        const result = await browser.execute(() => {
            return {
                scrollWidth: document.documentElement.scrollWidth,
                clientWidth: document.documentElement.clientWidth,
            };
        });
        assert.ok(
            result.scrollWidth <= result.clientWidth + 1,
            `Horizontal overflow detected: scrollWidth=${result.scrollWidth}, clientWidth=${result.clientWidth}`
        );
    });

    it('hero heading fits within its container', async () => {
        const h1 = await $('h1');
        await h1.waitForExist({ timeout: 10000 });

        const result = await browser.execute((el) => {
            const rect = el.getBoundingClientRect();
            const parent = el.closest('.bento-card');
            const parentRect = parent.getBoundingClientRect();
            return {
                h1Right: rect.right,
                parentRight: parentRect.right,
                h1Left: rect.left,
                parentLeft: parentRect.left,
            };
        }, h1);

        assert.ok(
            result.h1Right <= result.parentRight + 1,
            `Heading overflows right: h1.right=${result.h1Right}, card.right=${result.parentRight}`
        );
        assert.ok(
            result.h1Left >= result.parentLeft - 1,
            `Heading overflows left: h1.left=${result.h1Left}, card.left=${result.parentLeft}`
        );
    });

    it('"масштабируется" text is not clipped', async () => {
        const span = await $('h1 span');
        await span.waitForExist({ timeout: 10000 });

        const isClipped = await browser.execute((el) => {
            const rect = el.getBoundingClientRect();
            const parent = el.closest('.bento-card');
            const parentRect = parent.getBoundingClientRect();
            // Check if the text extends beyond the visible card area
            return rect.right > parentRect.right + 2;
        }, span);

        assert.ok(!isClipped, '"масштабируется" text is clipped / overflows the card');
    });

    it('"Инженерный подход" label is fully visible', async () => {
        const label = await $('p=Инженерный подход');
        await label.waitForExist({ timeout: 10000 });

        const result = await browser.execute((el) => {
            const rect = el.getBoundingClientRect();
            const card = el.closest('.bento-card');
            const cardRect = card.getBoundingClientRect();
            return {
                labelLeft: rect.left,
                cardLeft: cardRect.left,
                labelRight: rect.right,
                cardRight: cardRect.right,
                labelBottom: rect.bottom,
                cardBottom: cardRect.bottom,
            };
        }, label);

        assert.ok(
            result.labelLeft >= result.cardLeft - 1,
            `Label clipped on left: label.left=${result.labelLeft}, card.left=${result.cardLeft}`
        );
        assert.ok(
            result.labelRight <= result.cardRight + 1,
            `Label clipped on right: label.right=${result.labelRight}, card.right=${result.cardRight}`
        );
        assert.ok(
            result.labelBottom <= result.cardBottom + 1,
            `Label clipped on bottom: label.bottom=${result.labelBottom}, card.bottom=${result.cardBottom}`
        );
    });

    it('navigation bar is visible and centered', async () => {
        const nav = await $('nav');
        await nav.waitForExist({ timeout: 10000 });

        const result = await browser.execute((el) => {
            const rect = el.getBoundingClientRect();
            return {
                left: rect.left,
                right: rect.right,
                viewportWidth: window.innerWidth,
                isVisible: rect.top >= 0 && rect.left >= 0 && rect.right <= window.innerWidth,
            };
        }, nav);

        assert.ok(result.isVisible, `Nav bar extends beyond viewport: left=${result.left}, right=${result.right}, viewport=${result.viewportWidth}`);
    });

    it('service tags row does not overflow', async () => {
        const tags = await $$('.rounded-full.bg-gray-100');
        assert.ok(tags.length > 0, 'Service tags not found');

        const result = await browser.execute(() => {
            const tags = document.querySelectorAll('.rounded-full.bg-gray-100');
            const card = tags[0]?.closest('.bento-card');
            if (!card) return { ok: true };
            const cardRect = card.getBoundingClientRect();
            for (const tag of tags) {
                const r = tag.getBoundingClientRect();
                if (r.right > cardRect.right + 2) {
                    return { ok: false, tagRight: r.right, cardRight: cardRect.right };
                }
            }
            return { ok: true };
        });

        assert.ok(result.ok, `Tag overflows card: tag.right=${result.tagRight}, card.right=${result.cardRight}`);
    });

    it('all bento cards fit within viewport width', async () => {
        const result = await browser.execute(() => {
            const cards = document.querySelectorAll('.bento-card');
            const vw = window.innerWidth;
            const overflows = [];
            cards.forEach((card, i) => {
                const rect = card.getBoundingClientRect();
                if (rect.right > vw + 2 || rect.left < -2) {
                    overflows.push({ index: i, left: rect.left, right: rect.right });
                }
            });
            return { vw, overflows };
        });

        assert.ok(
            result.overflows.length === 0,
            `${result.overflows.length} card(s) overflow viewport (${result.vw}px): ${JSON.stringify(result.overflows)}`
        );
    });
});