mapml-extension/test/e2e/basics/preferred-content.test.js at 34afd51a5dd0333e737b0d9e46d0ff71b718a810 · prushforth/mapml-extension · 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
107
108
109
110
111
import { test, expect, chromium } from '@playwright/test';

test.describe("Preferred content test", () => {
    let page;
    let context;
    test.beforeAll(async () => {
        context = await chromium.launchPersistentContext('');
        page = context.pages().find((page) => page.url() === 'about:blank') || await context.newPage();

        let [background] = context.serviceWorkers();
        if (!background)
            background = await context.waitForEvent("serviceworker");

        const id = background.url().split("/")[2];
        await page.goto('chrome-extension://' + id +'/popup.html');
    });

    test.afterAll(async () => {
        await context.close();
    });

    test("Default map content type preference", async ()=>{
        let newPage = await context.newPage();
        await newPage.goto("test/e2e/basics/preferred-content.html", { waitUntil: "domcontentloaded" });
        await newPage.waitForTimeout(500);

        const layer = newPage.getByTestId('test-layer');
        const label = await layer.evaluate((l) => l._layerControlLabel.textContent);
        expect(label).toEqual('Image content');

        await newPage.close();
    });

    test("User prefers feature content type", async () => {
        // "page" is the extension popup, hasn't been closed so still open in a
        // browser tab somewhere...
        await page.bringToFront();
        await page.keyboard.press("Tab");
        await page.keyboard.press("Tab");
        await page.keyboard.press("Tab");
        await page.keyboard.press("Tab");
        await page.keyboard.press("Tab");
        await page.keyboard.press("Tab");
        await page.keyboard.press("Tab"); // tab to the content preference select
        await page.keyboard.press("ArrowDown");
        await page.keyboard.press("ArrowDown");
        await page.keyboard.press("ArrowDown"); // features is third in the list

        // "newPage" is the user / test page

        let newPage = await context.newPage();
        await newPage.goto("test/e2e/basics/preferred-content.html", { waitUntil: "domcontentloaded" });
        await newPage.waitForTimeout(1000);

        const layer = newPage.getByTestId('test-layer2');
        const label = await layer.evaluate((l) => l._layerControlLabel.textContent);
        expect(label).toEqual('Feature content');
    });

    test("Multiple preferences can be expressed by user", async () => {
      await page.bringToFront();
      await page.keyboard.press("Tab");
      await page.keyboard.press("Tab");
      await page.keyboard.press("Tab");
      await page.keyboard.press("Tab");
      await page.keyboard.press("Tab");
      await page.keyboard.press("Tab");
      await page.keyboard.press("Tab");
      await page.keyboard.press("Tab");
      // features is currently selected, so need a tricky set of key presses
      await page.keyboard.press("ArrowUp");
      await page.keyboard.press("ArrowUp");
      await page.keyboard.press("Shift+ArrowDown");
      await page.keyboard.press("Shift+ArrowDown");
      await page.keyboard.press("Shift+ArrowDown");
      let newPage = await context.newPage();
      await newPage.goto("test/e2e/basics/preferred-content.html", { waitUntil: "domcontentloaded" });
      await newPage.waitForTimeout(1000);
      let map = newPage.getByTestId('viewer');
      const matches = await map.evaluate((map)=>{
        return map.matchMedia('(prefers-map-content: image) and (prefers-map-content: tile) and (prefers-map-content: feature) and (prefers-map-content: table)').matches;
      });
      expect(matches).toBe(true);
    });
    test("Multiple disjoint preferences can be expressed by user", async () => {
      await page.bringToFront();
      await page.keyboard.press("Tab");
      await page.keyboard.press("Tab");
      await page.keyboard.press("Tab");
      await page.keyboard.press("Tab");
      await page.keyboard.press("Tab");
      await page.keyboard.press("Tab");
      await page.keyboard.press("Tab");
      await page.keyboard.press("Tab");
      await page.keyboard.press("ArrowUp");
      await page.keyboard.press("ArrowUp");
      await page.keyboard.press(" "); // select tiles option
      await page.keyboard.press("Control+ArrowDown");
      await page.keyboard.press("Control+ArrowDown");
      await page.keyboard.press(" "); // select tables option
      let newPage = await context.newPage();
      await newPage.goto("test/e2e/basics/preferred-content.html", { waitUntil: "domcontentloaded" });
      await newPage.waitForTimeout(1000);
      let map = newPage.getByTestId('viewer');
      const matches = await map.evaluate((map)=>{
        return map.matchMedia('(not (prefers-map-content: image)) and (prefers-map-content: tile) and (not (prefers-map-content: feature)) and (prefers-map-content: table)').matches;
      });
      expect(matches).toBe(true);
    });

});