pie-aperture/nuxt-app/test/visual/nuxt.spec.js at 6407212e9198d052277c44d2fd67a10a64415d22 · justeattakeaway/pie-aperture · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
const { waitUntilPageLoad } = require('../../../webdriver-helpers/wait-helper.js');
const { percyScreenshot } = require('@percy/selenium-webdriver');

describe('Nuxt Aperture App', () => {
    const pages = [
        { url: '/', name: 'PIE Aperture' },
        { url: '/components/accordion', name: 'Accordion' },
        { url: '/components/assistive-text', name: 'Assistive Text' },
        { url: '/components/avatar', name: 'Avatar' },
        { url: '/components/button', name: 'Button' },
        { url: '/components/breadcrumb', name: 'Breadcrumb' },
        { url: '/components/card', name: 'Card' },
        { url: '/components/checkbox', name: 'Checkbox' },
        { url: '/components/checkbox-group', name: 'Checkbox Group' },
        { url: '/components/chip', name: 'Chip' },
        { url: '/components/cookie-banner', name: 'Cookie Banner' },
        { url: '/components/custom-tag', name: 'Custom Tag' },
        { url: '/components/divider', name: 'Divider' },
        { url: '/integrations/css-only-button', name: 'CSS Only Button' },
        { url: '/integrations/css-only-radio', name: 'CSS Only Radio' },
        { url: '/integrations/form', name: 'Form' },
        { url: '/integrations/typography-classes', name: 'Typography Demo (CSS Classes)' },
        { url: '/integrations/typography-mixins', name: 'Typography Demo (Mixins)' },
        { url: '/components/form-label', name: 'Form Label' },
        { url: '/components/icon', name: 'Icon' },
        { url: '/components/icon-button', name: 'Icon Button' },
        { url: '/components/link', name: 'Link' },
        { url: '/components/list', name: 'List' },
        { url: '/components/lottie-player', name: 'Lottie Player', pauseBeforeScreenshot: true },
        { url: '/components/modal', name: 'Modal' },
        { url: '/components/notification', name: 'Notification' },
        { url: '/components/radio', name: 'Radio' },
        { url: '/components/radio-group', name: 'Radio Group' },
        { url: '/components/list-item-radio-selection', name: 'List Item Radio Selection' },
        { url: '/components/spinner', name: 'Spinner' },
        { url: '/components/switch', name: 'Switch' },
        { url: '/components/select', name: 'Select' },
        { url: '/components/tag', name: 'Tag' },
        { url: '/components/text-input', name: 'Text Input' },
        { url: '/components/textarea', name: 'Textarea' },
        { url: '/components/toast', name: 'Toast' },
        { url: '/components/thumbnail', name: 'Thumbnail' }
    ];

    pages.forEach((page) => {
        it(`should navigate to the ${page.name} page.`, async () => {
            await browser.url(`${page.url}?PERCY=true`);
            await waitUntilPageLoad();
            // Some components might require extra time to mount and load its dependencies.
            // Delaying the screenshot helps to avoid false negatives in diffs.
            if (page.pauseBeforeScreenshot) await browser.pause(5000);
            await percyScreenshot(page.name, { fullPage: true });
        });
    });
});