playwright

2gis · Sep 21, 2024 · 7ce6bb2 · 7ce6bb2
1 parent 9fca0c3
commit 7ce6bb2
Show file tree

Hide file tree

Showing 19 changed files with 248 additions and 82 deletions.
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/index.html b/index.html
@@ -10,6 +10,6 @@
   </head>
   <body>
     <div id="map"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/src/demo.ts"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,8 @@
   },
   "devDependencies": {
     "@2gis/mapgl": "^1.50.1",
+    "@playwright/test": "^1.47.2",
+    "@types/node": "^22.5.5",
     "typescript": "^5.5.3",
     "vite": "^5.4.1"
   }

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -0,0 +1,58 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:5173',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { 
+        ...devices['Desktop Chrome'] ,
+        contextOptions: {
+          permissions: ['clipboard-read', 'clipboard-write'],
+        },
+      },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { 
+        ...devices['Desktop Safari'],
+        contextOptions: {
+          permissions: ['clipboard-read'],
+        },
+       },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+  },
+});
diff --git a/src/main.ts → src/demo.ts b/src/main.ts → src/demo.ts
@@ -9,9 +9,24 @@ load().then(mapgl => {
 
   const params = url.searchParams.get('m')?.split(/\//g);
 
+  let style: any = url.searchParams.get('s') ?? 'eb10e2c3-3c28-4b81-b74b-859c9c4cf47e';
+  let disableRandom = style === 'test';
+
+  if (style === 'test') {
+    style = {
+      version: 0,
+      name: 'empty',
+      background: {
+          color: '#f5f2e0',
+      },
+      icons: {},
+      layers: [],
+    }
+  }
+
   const map = new mapgl.Map(document.querySelector<HTMLDivElement>('#map')!, {
     key: MAPGL_JS_API_KEY,
-    style: 'eb10e2c3-3c28-4b81-b74b-859c9c4cf47e',
+    style,
     center: params ? params[0].split(',').map(Number) : [0,0],
     zoom: params ? +params[1] : 2, 
     pitch: params ? +params[3] : 0, 
@@ -27,7 +42,7 @@ load().then(mapgl => {
     locale: navigator.language,
     urlMaker: (center, zoom, rotation, pitch) => `${self.origin}${location.pathname}?m=${encodeURIComponent(`${center.toString()}/${zoom}/p/${pitch}/r/${rotation}`)}`,
     mapCodeMaker: (center, zoom, rotation, pitch) => {
-      const id =`map-${Math.trunc(Math.random() * 10**9)}`;      
+      const id =`map-${disableRandom ? '0' : Math.trunc(Math.random() * 10**9)}`;      
       return `<div id="${id}" style="width:540px;height:340px;"></div>
       <script src="https://mapgl.2gis.com/api/js/v1"></script>
       <script>
@@ -37,6 +52,7 @@ load().then(mapgl => {
           zoom: ${zoom}, 
           pitch: ${pitch}, 
           rotation: ${rotation},
+          style: ${style},
           styleState: {
             immersiveRoadsOn: true
           }

diff --git a/src/index.d.ts b/src/index.d.ts
diff --git a/src/index.ts b/src/index.ts
@@ -180,14 +180,14 @@ export class ShareControl {
                 <p style="display: ${urlMaker ? 'block' : 'none'}">
                     <label>${l('%linkLabel%', this.locale)}</label>
                     <input id="${cssPrefix}-url-field" class="${cssPrefix}-input">
-                    <button class="${cssPrefix}-copy" data-action="copy">${l('%copyButton%', this.locale)}</button>
+                    <button id="${cssPrefix}-link-copy" class="${cssPrefix}-copy" data-action="copy">${l('%copyButton%', this.locale)}</button>
                 </p>
 
                 <p style="display: ${mapCodeMaker ? 'block' : 'none'}">
                     <label>${l('%embedLabel%', this.locale)}</label>
                     <input id="${cssPrefix}-code-field" class="${cssPrefix}-input">
-                    <button class="${cssPrefix}-copy" data-action="copy">${l('%copyButton%', this.locale)}</button>
-                    <button class="${cssPrefix}-preview" data-action="preview">${l('%previewButton%', this.locale)}</button>
+                    <button id="${cssPrefix}-embed-copy" class="${cssPrefix}-copy" data-action="copy">${l('%copyButton%', this.locale)}</button>
+                    <button id="${cssPrefix}-preview" data-action="preview">${l('%previewButton%', this.locale)}</button>
                 </p>
 
                 <iframe style="display: none;" width="560" height="360" id="${cssPrefix}-preview-placeholder"></iframe>