pie/packages/components/pie-cookie-banner/test/component/pie-cookie-banner-locale.spec.ts at 7350510c63d5e22675508308679d4c43e0db64f4 · justeattakeaway/pie · 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/playwright-fixtures.ts';
import { CookieBannerComponent } from 'test/helpers/page-object/pie-cookie-banner.page.ts';
import { Language, Country } from '@justeattakeaway/pie-cookie-banner/src/defs.ts';

function stripTags (str: string) {
    return str.replace(/<\/?[^>]+(>|$)/g, '');
}

const defaultLocale = 'en';
let pieCookieBannerComponent: CookieBannerComponent;

test.describe('PieCookieBanner - Country and Language Properties', () => {
    test.beforeEach(async ({ page }) => {
        pieCookieBannerComponent = new CookieBannerComponent(page);
    });

    test('should render text in the default language-country \'en-gb\' when unset', async () => {
        // Arrange
        const expectedLocale = (await import(`@justeattakeaway/pie-cookie-banner/locales/${defaultLocale}.js`)).default;
        await pieCookieBannerComponent.load();

        // Act
        const acceptAllButtonText = await pieCookieBannerComponent.getAcceptAllTextContent();
        const necessaryOnlyButtonText = await pieCookieBannerComponent.getNecessaryOnlyTextContent();
        const managePreferencesButtonText = await pieCookieBannerComponent.getManagePreferencesTextContent();
        const componentDescriptionText = await pieCookieBannerComponent.getComponentDescriptionTextContent();
        const modalDescriptionText = await pieCookieBannerComponent.modalComponent.getDescriptionTextContent();

        // Assert
        expect(acceptAllButtonText).toBe(expectedLocale.banner.cta.acceptAll);
        expect(necessaryOnlyButtonText).toBe(expectedLocale.banner.cta.necessaryOnly);
        expect(managePreferencesButtonText).toBe(expectedLocale.banner.cta.managePreferences);
        expect(componentDescriptionText).toBe(stripTags(expectedLocale.banner.description));
        expect(modalDescriptionText).toBe(stripTags(expectedLocale.preferencesManagement.description));
    });

    test('should not update the locale if country and language properties are unchanged', async () => {
        // Arrange
        const expectedLocale = (await import(`@justeattakeaway/pie-cookie-banner/locales/${defaultLocale}.js`)).default;
        await pieCookieBannerComponent.load();

        // Act
        await pieCookieBannerComponent.setProperty('country', Country.GREAT_BRITAIN);
        await pieCookieBannerComponent.setProperty('language', Language.ENGLISH);
        await pieCookieBannerComponent.waitForLocaleUpdate();

        const acceptAllButtonText = await pieCookieBannerComponent.getAcceptAllTextContent();
        const necessaryOnlyButtonText = await pieCookieBannerComponent.getNecessaryOnlyTextContent();
        const managePreferencesButtonText = await pieCookieBannerComponent.getManagePreferencesTextContent();
        const componentDescriptionText = await pieCookieBannerComponent.getComponentDescriptionTextContent();
        const modalDescriptionText = await pieCookieBannerComponent.modalComponent.getDescriptionTextContent();

        // Assert
        expect(acceptAllButtonText).toBe(expectedLocale.banner.cta.acceptAll);
        expect(necessaryOnlyButtonText).toBe(expectedLocale.banner.cta.necessaryOnly);
        expect(managePreferencesButtonText).toBe(expectedLocale.banner.cta.managePreferences);
        expect(componentDescriptionText).toBe(stripTags(expectedLocale.banner.description));
        expect(modalDescriptionText).toBe(stripTags(expectedLocale.preferencesManagement.description));
    });

    [
        { language: Language.FRENCH, country: Country.FRANCE, expectedLocale: 'fr-fr' }, // Test for exact/bespoke translations
        { language: Language.ENGLISH, country: Country.FRANCE, expectedLocale: 'en-fr' }, // Test for exact/bespoke translations
        { language: 'invalid', country: 'invalid', expectedLocale: 'en' }, // Test for invalid settings
        { language: Language.SPANISH, country: 'invalid', expectedLocale: 'es' }, // Test for invalid settings
        { language: 'invalid', country: Country.SPAIN, expectedLocale: 'es' }, // Test for invalid settings
        { language: Language.SLOVAK, country: Country.SLOVAKIA, expectedLocale: 'sk' },
        { language: Language.ENGLISH, country: Country.GERMANY, expectedLocale: 'en' }, // Test for alternative language in country
        { language: Language.GERMAN, country: Country.GERMANY, expectedLocale: 'de' },
        { language: Language.DANISH, country: Country.DENMARK, expectedLocale: 'da' },
        { language: Language.ENGLISH, country: Country.CANADA, expectedLocale: 'en-ca' },
        { language: Language.FRENCH, country: Country.CANADA, expectedLocale: 'fr-ca' },
        { language: Language.ITALIAN, country: Country.ITALY, expectedLocale: 'it' },
        { language: Language.SPANISH, country: Country.SPAIN, expectedLocale: 'es' },
        { language: Language.DUTCH, country: Country.BELGIUM, expectedLocale: 'nl' },
        { language: Language.FRENCH, country: Country.LUXEMBOURG, expectedLocale: 'fr' },
        { language: 'CA', country: 'es', expectedLocale: 'ca' }, // Test case-insensitivity
        { language: 'ca', country: 'ES', expectedLocale: 'ca' }, // Test case-insensitivity
        { language: 'ca', country: 'es', expectedLocale: 'ca' }, // Test case-insensitivity
        { language: 'CA', country: 'ES', expectedLocale: 'ca' }, // Test case-insensitivity
        { language: 'pt', country: Country.SPAIN, expectedLocale: 'es' }, // Test for unsupported language
        { language: 'ru', country: Country.FRANCE, expectedLocale: 'fr-fr' }, // Test for unsupported language
        { language: 'es', country: 'pt', expectedLocale: 'es' }, // Test for unspported country
        { language: 'fr', country: 'ru', expectedLocale: 'fr' }, // Test for unspported country
    ].forEach((obj) => {
        test(`should load the correct locale [${obj.expectedLocale}] given language [${obj.language}] & country [${obj.country}]`, async () => {
            // Arrange
            const expectedLocale = (await import(`@justeattakeaway/pie-cookie-banner/locales/${obj.expectedLocale}.js`)).default;
            await pieCookieBannerComponent.load({ country: obj.country, language: obj.language });

            // Act
            const acceptAllButtonText = await pieCookieBannerComponent.getAcceptAllTextContent();
            const necessaryOnlyButtonText = await pieCookieBannerComponent.getNecessaryOnlyTextContent();
            const managePreferencesButtonText = await pieCookieBannerComponent.getManagePreferencesTextContent();
            const componentDescriptionText = await pieCookieBannerComponent.getComponentDescriptionTextContent();
            const modalDescriptionText = await pieCookieBannerComponent.modalComponent.getDescriptionTextContent();

            // Assert
            expect(acceptAllButtonText).toBe(expectedLocale.banner.cta.acceptAll);
            expect(necessaryOnlyButtonText).toBe(expectedLocale.banner.cta.necessaryOnly);
            expect(managePreferencesButtonText).toBe(expectedLocale.banner.cta.managePreferences);
            expect(componentDescriptionText).toBe(stripTags(expectedLocale.banner.description));
            expect(modalDescriptionText).toBe(stripTags(expectedLocale.preferencesManagement.description));
        });
    });
});