Merge pull request #46 from shopware/move-theme-compilation

fix: move the theme compilation into the StorefrontPage fixture

playwright.config.ts

@@ -17,6 +17,7 @@ export default defineConfig({
   testDir: './tests',
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
+  timeout: 60000,
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : 1,
   reporter: process.env.CI ? [

src/fixtures/DefaultSalesChannel.ts

@@ -12,7 +12,6 @@ import {
     getSnippetSetId,
     getThemeId,
 } from '../services/ShopwareDataHelpers';
-import { isSaaSInstance, isThemeCompiled } from '../services/ShopInfo';
 
 interface StoreBaseConfig {
     storefrontTypeId: string;
@@ -154,6 +153,8 @@ export const test = base.extend<NonNullable<unknown>, FixtureTypes>({
                 }
             }
 
+            // await AdminApiContext.delete(`./sales-channel/${uuid}`);
+
             const syncResp = await AdminApiContext.post('./_action/sync', {
                 data: {
                     'write-sales-channel': {
@@ -270,36 +271,4 @@ export const test = base.extend<NonNullable<unknown>, FixtureTypes>({
         },
         { scope: 'worker' },
     ],
-
-    DefaultStorefront: [
-        async ({ browser, AdminApiContext, DefaultSalesChannel, SalesChannelBaseConfig }, use) => {
-            const { id: uuid } = DefaultSalesChannel.salesChannel;
-            const isSaasInstance = await isSaaSInstance(AdminApiContext);
-
-            const tmpContext = await browser.newContext({
-                baseURL: DefaultSalesChannel.url,
-            });
-            const tmpPage = await tmpContext.newPage();
-
-            if (!await isThemeCompiled(tmpPage)) {
-                base.slow();
-
-                await AdminApiContext.post(
-                    `./_action/theme/${SalesChannelBaseConfig.defaultThemeId}/assign/${uuid}`
-                );
-
-                if (isSaasInstance) {
-                    while (!await isThemeCompiled(tmpPage)) {
-                        // eslint-disable-next-line playwright/no-wait-for-timeout
-                        await tmpPage.waitForTimeout(2000);
-                    }
-                }
-            }
-
-            await use({
-                ...DefaultSalesChannel,
-            });
-        },
-        { scope: 'worker' },
-    ],
 });

src/fixtures/HelperFixtures.ts

@@ -1,11 +1,11 @@
-import { test as base, expect } from '@playwright/test';
+import { Page, test as base, expect } from '@playwright/test';
 import { IdProvider } from '../services/IdProvider';
 import { isSaaSInstance } from '../services/ShopInfo';
 import type { FixtureTypes } from '../types/FixtureTypes';
 
 export interface HelperFixtureTypes {
     IdProvider: IdProvider;
-    SaaSInstanceSetup: () => Promise<void>,
+    SaaSInstanceSetup: (page: Page) => Promise<void>,
 }
 
 export const test = base.extend<NonNullable<unknown>, FixtureTypes>({
@@ -20,8 +20,8 @@ export const test = base.extend<NonNullable<unknown>, FixtureTypes>({
     ],
 
     SaaSInstanceSetup: [
-        async ({ AdminApiContext, browser }, use) => {
-            const SetupInstance = async function SetupInstance() {
+        async ({ AdminApiContext }, use) => {
+            const SetupInstance = async function SetupInstance(page: Page) {
                 // eslint-disable-next-line playwright/no-skipped-test
                 await test.skip(!(await isSaaSInstance(AdminApiContext)), 'Skipping SaaS setup, could not detect SaaS instance');
 
@@ -34,9 +34,7 @@ export const test = base.extend<NonNullable<unknown>, FixtureTypes>({
                 // eslint-disable-next-line playwright/no-skipped-test
                 await test.skip((await AdminApiContext.get(`${process.env.APP_URL}constructionmode`, { maxRedirects: 0 })).status() > 204, 'Instance already setup');
 
-                const page = await browser.newPage({ baseURL: process.env.ADMIN_URL });
-
-                await page.goto('./set-up-shop');
+                await page.goto(`${process.env.ADMIN_URL}set-up-shop`);
                 await page.getByRole('button', { name: 'Next' }).click();
 
                 await expect(page.getByRole('heading', { name: 'Everything finished!' })).toBeVisible();
@@ -48,6 +46,8 @@ export const test = base.extend<NonNullable<unknown>, FixtureTypes>({
                 await page.getByRole('button', { name: 'Log in' }).click();
 
                 await page.getByRole('button', { name: 'Launch your business' }).click();
+
+                await expect(page.getByRole('button', { name: 'Launch your business' })).toBeHidden();
             };
 
             await use(SetupInstance);

src/fixtures/PageContexts.ts

@@ -1,6 +1,7 @@
 import { test as base, expect, Page } from '@playwright/test';
 import type { FixtureTypes } from '../types/FixtureTypes';
 import { mockApiCalls } from '../services/ApiMocks';
+import { isSaaSInstance, isThemeCompiled } from '../services/ShopInfo';
 
 export interface PageContextTypes {
     AdminPage: Page;
@@ -76,18 +77,34 @@ export const test = base.extend<FixtureTypes>({
         await context.close();
 
         // Cleanup created user
-        const cleanupResponse = await AdminApiContext.delete(`user/${uuid}`);
-        expect(cleanupResponse.ok()).toBeTruthy();
+        await AdminApiContext.delete(`user/${uuid}`);
     },
 
-    StorefrontPage: async ({ DefaultStorefront, browser }, use) => {
-        const { url } = DefaultStorefront;
+    StorefrontPage: async ({ DefaultSalesChannel, SalesChannelBaseConfig, browser, AdminApiContext }, use) => {
+        const { url, salesChannel } = DefaultSalesChannel;
 
         const context = await browser.newContext({
             baseURL: url,
         });
         const page = await context.newPage();
 
+        const isSaasInstance = await isSaaSInstance(AdminApiContext);
+
+        if (!await isThemeCompiled(AdminApiContext, DefaultSalesChannel.url)) {
+            base.slow();
+
+            await AdminApiContext.post(
+                `./_action/theme/${SalesChannelBaseConfig.defaultThemeId}/assign/${salesChannel.id}`
+            );
+
+            if (isSaasInstance) {
+                while (!await isThemeCompiled(AdminApiContext, DefaultSalesChannel.url)) {
+                    // eslint-disable-next-line playwright/no-wait-for-timeout
+                    await page.waitForTimeout(4000);
+                }
+            }
+        }
+
         await page.goto('./', { waitUntil: 'load' });
 
         await use(page);

src/services/ShopInfo.ts

@@ -1,27 +1,23 @@
-import { Page, Request } from 'playwright-core';
 import { type AdminApiContext } from './AdminApiContext';
 
 export const isSaaSInstance = async (adminApiContext: AdminApiContext): Promise<boolean> => {
     const instanceFeatures = await adminApiContext.get('./instance/features');
     return instanceFeatures.ok();
 };
 
-export const isThemeCompiled = async (page: Page): Promise<boolean> => {
-    let allCSSFound = false;
+export const isThemeCompiled = async (context: AdminApiContext, storefrontUrl: string): Promise<boolean> => {
+    const response = await context.get(storefrontUrl);
 
-    const listener = (request: Request) => {
-        if (request.url().includes('all.css')) {
-            allCSSFound = true;
-        }
-    };
+    const body = (await response.body()).toString();
 
-    /**
-     * We request the storefront index and see if a all.css is loaded. 
-     * If that does not happen, the theme is not assigned/compiled
-     */
-    page.on('request', listener);
-    await page.goto('./', { waitUntil: 'load' });
-    page.off('request', listener);
+    const matches = body.match(/.*"(https:\/\/.*all\.css[^"]*)".*/);
+    if (matches && matches?.length > 1) {
+        const allCssUrl = matches[1];
 
-    return allCSSFound;
+        const allCssResponse = await context.get(allCssUrl);
+
+        return allCssResponse.status() < 400;
+    }
+
+    return false;
 };