feat(e2e): using stackblitzSDK to open templates (#663)

shopware · Mar 4, 2024 · faf5fd0 · faf5fd0
1 parent a3419f2
commit faf5fd0
Show file tree

Hide file tree

Showing 11 changed files with 840 additions and 691 deletions.
diff --git a/.github/workflows/check-stackblitz-templates.yml b/.github/workflows/check-stackblitz-templates.yml
@@ -0,0 +1,28 @@
+name: Stackblitz templates
+run-name: Playwright stackblitz templates 🚀
+on: 
+  workflow_dispatch:
+  schedule:
+    - cron: '59 23 * * *'
+jobs:
+  run-code_examples-tests:
+    runs-on: ubuntu-latest
+    name: Playwright testing stackblitz templates
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - name: Install dependencies
+        run: npm ci
+      - name: Install playwright browsers
+        run: npx playwright install --with-deps
+      - name: Run tests
+        run: npx playwright test checkStackblitzTemplates.spec.ts --project=chromium
+      - name: try zip the test result folder
+        if: failure()
+        run: zip -r playwright-report.zip playwright-report/
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report zip
+          path: playwright-report.zip
+          retention-days: 7
diff --git a/.github/workflows/vue-blank.yml b/.github/workflows/vue-blank.yml
diff --git a/.github/workflows/vue-demo-store.yml b/.github/workflows/vue-demo-store.yml
diff --git a/.github/workflows/vue-vite-blank.yml b/.github/workflows/vue-vite-blank.yml
diff --git a/apps/e2e-tests/env.d.ts b/apps/e2e-tests/env.d.ts
@@ -0,0 +1,5 @@
+interface Window {
+  StackBlitzSDK: typeof import("@stackblitz/sdk").default;
+}
+
+type StackBlitzSDK = typeof import("@stackblitz/sdk").default;
diff --git a/apps/e2e-tests/package.json b/apps/e2e-tests/package.json
@@ -5,12 +5,15 @@
   "description": "",
   "scripts": {
     "test:e2e": "playwright test e2e",
-    "test:examples": "playwright test -c examples.config.ts checkCodeExamples.spec.ts"
+    "test:examples": "playwright test -c examples.config.ts checkCodeExamples.spec.ts",
+    "start": "npx http-server"
   },
   "devDependencies": {
     "@playwright/test": "1.41.2"
   },
   "dependencies": {
-    "dotenv": "16.4.5"
+    "@stackblitz/sdk": "1.9.0",
+    "dotenv": "16.4.5",
+    "http-server": "14.1.1"
   }
 }
diff --git a/apps/e2e-tests/pages/blank.html b/apps/e2e-tests/pages/blank.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>@stackblitz/sdk</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <script type="module" crossorigin src="./index.js"></script>
+    <style>
+      html {
+        font-family: system-ui, sans-serif;
+        color: black;
+        background-color: white;
+      }
+      body {
+        margin: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="embed"></div>
+  </body>
+</html>
diff --git a/apps/e2e-tests/pages/index.js b/apps/e2e-tests/pages/index.js
@@ -0,0 +1,3 @@
+import StackBlitzSDK from "https://unpkg.com/@stackblitz/sdk@1/bundles/sdk.m.js";
+
+window.StackBlitzSDK = StackBlitzSDK;
diff --git a/apps/e2e-tests/playwright.config.ts b/apps/e2e-tests/playwright.config.ts
@@ -13,7 +13,7 @@ require("dotenv").config({ path: findEnv() });
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
-const newLocal = "http://localhost:3000";
+const newLocal = "http://127.0.0.1:8080";
 const baseURL = process.env.BASE_E2E_URL || newLocal;
 
 console.log("Running tests for: ", baseURL);
@@ -83,6 +83,13 @@ const config: PlaywrightTestConfig = {
     //   },
     // },
   ],
+  webServer: {
+    command: "npm start",
+    url: "http://127.0.0.1:8080",
+    reuseExistingServer: !process.env.CI,
+    stdout: "ignore",
+    stderr: "pipe",
+  },
 };
 
 export default config;
diff --git a/apps/e2e-tests/tests/checkStackblitzTemplates.spec.ts b/apps/e2e-tests/tests/checkStackblitzTemplates.spec.ts
@@ -1,26 +1,35 @@
 import { test, expect } from "@playwright/test";
-import { HomePage } from "../page-objects/HomePage";
+import fs from "fs";
+import path from "path";
 
-test("Verify stackblitz template", async ({ page }) => {
-  test.setTimeout(200000);
-  let homePage: HomePage;
-  const response = await page.goto("");
-  homePage = new HomePage(page);
-  await page.waitForLoadState();
-  await page.waitForSelector("text=Open in New Tab");
-  await page.waitForLoadState("domcontentloaded");
-  await homePage.wait(10000);
+const directoryPath = path.join(__dirname, "../../../templates/");
 
-  const consoleLogs = [];
-  page.on("console", (msg) => {
-    if (msg.type() == "error") {
-      console.log(msg.text());
-      consoleLogs.push(msg.text());
-    }
-    expect(msg.type()).not.toBe("error");
-  });
+fs.readdirSync(directoryPath).forEach((template) => {
+  test(`Open ${template}`, async ({ page }) => {
+    test.setTimeout(90000);
+    await page.goto("/pages/blank.html");
+    await Promise.all([
+      page.waitForLoadState("load"),
+      page.evaluate((template) => {
+        window.StackBlitzSDK.openGithubProject(
+          `shopware/frontends/tree/main/templates/${template}`,
+          {
+            clickToLoad: false,
+            newWindow: false,
+            origin: "https://stackblitz.com/",
+          },
+        );
+      }, template),
+    ]);
+    await page.waitForRequest(
+      "https://demo-frontends.shopware.store/store-api/context",
+    ),
+      await expect(page).toHaveURL(
+        `https://stackblitz.com/github/shopware/frontends/tree/main/templates/${template}?file=README.md`,
+      );
 
-  page.on("response", (response) => {
-    expect(response.status()).toBe(200);
+    page.on("response", (response) => {
+      expect(response.status()).not.toBe(500);
+    });
   });
 });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import StackBlitzSDK from "https://unpkg.com/@stackblitz/sdk@1/bundles/sdk.m.js";

		window.StackBlitzSDK = StackBlitzSDK;