@appsemble/e2e 0.34.21 → 0.35.3

package/README.md

@@ -1,8 +1,8 @@
-# ![](https://gitlab.com/appsemble/appsemble/-/raw/0.34.21/config/assets/logo.svg) Appsemble End 2 End Tests
+# ![](https://gitlab.com/appsemble/appsemble/-/raw/0.35.3/config/assets/logo.svg) Appsemble End 2 End Tests
 
 > Run end 2 end tests on an Appsemble environment and provide Appsemble fixtures
 
-[![GitLab CI](https://gitlab.com/appsemble/appsemble/badges/0.34.21/pipeline.svg)](https://gitlab.com/appsemble/appsemble/-/releases/0.34.21)
+[![GitLab CI](https://gitlab.com/appsemble/appsemble/badges/0.35.3/pipeline.svg)](https://gitlab.com/appsemble/appsemble/-/releases/0.35.3)
 [![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io)
 
 ## Table of Contents
@@ -91,5 +91,5 @@ When writing end-to-end tests, have a look at the
 
 ## License
 
-[LGPL-3.0-only](https://gitlab.com/appsemble/appsemble/-/blob/0.34.21/LICENSE.md) ©
+[LGPL-3.0-only](https://gitlab.com/appsemble/appsemble/-/blob/0.35.3/LICENSE.md) ©
 [Appsemble](https://appsemble.com)

package/fixtures/expect/training/index.js

@@ -1,5 +1,8 @@
 import { expect as base } from '@playwright/test';
-import { availableColor, blockedColor, completedColor, inProgressColor, } from '../../../tests/studio/trainings/constants.js';
+const availableColor = 'rgb(255, 255, 255)';
+const inProgressColor = 'rgb(255, 127, 39)';
+const completedColor = 'rgb(34, 177, 76)';
+const blockedColor = 'rgb(211, 211, 211)';
 export const expect = base.extend({
     async toHaveChapterStatus(trainingNode, status) {
         let backgroundColor = availableColor;

package/fixtures/test/app/index.d.ts

@@ -1,11 +1,11 @@
-import { type App, type CreateAppOptions, type PatchAppOptions } from '@appsemble/types';
+import { type App, type AppMessages, type AppsembleMessages, type CreateAppOptions, type PatchAppOptions } from '@appsemble/types';
 export interface AppFixtures {
     /**
      * Create a new app for the given organization with the provided options
      *
      * @param organizationId ID of the organization to create the app for
      * @param options Options to create the app with
-     * @returns The created app
+     * @returns Created app
      */
     createApp: (organizationId: string, yaml: string, options?: CreateAppOptions) => Promise<App>;
     /**
@@ -15,6 +15,12 @@ export interface AppFixtures {
      * @param options What to patch in the app
      */
     patchApp: (appId: number, options: PatchAppOptions) => Promise<App>;
+    /**
+     * Delete the given app
+     *
+     * @param appId ID of the app to delete
+     */
+    deleteApp: (appId: number) => Promise<void>;
     /**
      * Set the role of the user.
      *
@@ -31,5 +37,21 @@ export interface AppFixtures {
      * @returns ID of the app
      */
     getAppId: (appPath: string) => Promise<number>;
+    /**
+     * Uploads translations for the specified language to the app
+     *
+     * @param appId ID of the app
+     * @param language The language represented by these messages
+     * @param messages The messages available to the app
+     * @returns
+     */
+    uploadAppMessages: (appId: number, language: string, messages: AppsembleMessages) => Promise<AppMessages>;
+    /**
+     * Adds the domain of the app to the list of hosts so it can be reached in a docker environment
+     *
+     * @param appPath Path of the app
+     * @param organizationId ID of the organization that owns the app
+     */
+    aliasAppDomain: (appPath: string, organizationId: string) => Promise<void>;
 }
 export declare const test: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & AppFixtures, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions>;

package/fixtures/test/app/index.js

@@ -1,8 +1,10 @@
+import { execSync } from 'node:child_process';
+import { appendFile } from 'node:fs/promises';
 import { test as base } from '@playwright/test';
 import stripIndent from 'strip-indent';
 import { expect } from '../../expect/index.js';
 export const test = base.extend({
-    async createApp({ request }, use) {
+    async createApp({ aliasAppDomain, request }, use) {
         await use(async (organizationId, yaml, options) => {
             const formData = new FormData();
             formData.append('OrganizationId', organizationId);
@@ -22,6 +24,9 @@ export const test = base.extend({
             });
             expect(response.status()).toBe(201);
             const app = (await response.json());
+            if (process.env.CI) {
+                await aliasAppDomain(app.path, app.OrganizationId);
+            }
             expect(app).not.toBeNull();
             return app;
         });
@@ -46,6 +51,16 @@ export const test = base.extend({
             return app;
         });
     },
+    async deleteApp({ request }, use) {
+        await use(async (appId) => {
+            const response = await request.delete(`/api/apps/${appId}`, {
+                headers: {
+                    Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
+                },
+            });
+            expect(response.status()).toBe(204);
+        });
+    },
     async changeAppMemberRole({ browser }, use) {
         await use(async (appId, role) => {
             const page = await browser.newPage();
@@ -63,5 +78,29 @@ export const test = base.extend({
             return appId;
         });
     },
+    async uploadAppMessages({ request }, use) {
+        await use(async (appId, language, messages) => {
+            const appMessages = {
+                language,
+                messages,
+            };
+            const response = await request.post(`/api/apps/${appId}/messages`, {
+                data: appMessages,
+                headers: {
+                    Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
+                },
+            });
+            expect(response.status()).toBe(201);
+            return (await response.json());
+        });
+    },
+    async aliasAppDomain({ baseURL }, use) {
+        await use(async (appPath, organizationId) => {
+            const appsembleIp = String(execSync("getent hosts appsemble | awk '{ print $1 }'")).trim();
+            const baseUrl = new URL(baseURL);
+            const customAlias = `${appPath}.${organizationId}.${baseUrl.hostname}`;
+            await appendFile('/etc/hosts', `${appsembleIp} ${customAlias}\n`);
+        });
+    },
 });
 //# sourceMappingURL=index.js.map

package/fixtures/test/app-collection/index.d.ts

@@ -1,22 +1,29 @@
+import { type AppCollection, type AppCollectionVisibility } from '@appsemble/types';
 export interface AppCollectionFixtures {
     /**
      * Creates an app collection for the given organization
      *
      * @param organizationId ID of the organization to create the collection for
      * @param collectionName Name of the collection
+     * @param visibility Visibility of the collection
      * @param expertName Name of the expert
+     * @param expertPhotoPath Path of the photo that represents the expert
+     * @param headerImagePath Path of the image that will be placed as the header of the collection
      * @param expertDescription Description of the expert
-     * @param headerImage Image that will be placed as the header of the collection
-     * @param expertPhoto Photo that represents the expert
-     * @param isPrivate Whether the collection should be private or not
      */
-    createAppCollection: (organizationId: string, collectionName: string, expertName: string, expertDescription: string, headerImage: string, expertPhoto: string, isPrivate: boolean) => Promise<void>;
+    createAppCollection: (organizationId: string, collectionName: string, visibility: AppCollectionVisibility, expertName: string, expertPhotoPath: string, headerImagePath: string, expertDescription?: string) => Promise<AppCollection>;
     /**
      * Delete an existing app collection
      *
-     * @param organizationId ID of the organization which the collection belongs to
-     * @param collectionName Name of the collection
+     * @param collectionId ID of the collection to delete
+     */
+    deleteAppCollection: (collectionId: number) => Promise<void>;
+    /**
+     * Adds an app to an app collection
+     *
+     * @param collectionId ID of the app collection
+     * @param appId ID of the app to add
      */
-    deleteAppCollection: (organizationId: string, collectionName: string) => Promise<void>;
+    addAppToAppCollection: (collectionId: number, appId: number) => Promise<void>;
 }
 export declare const test: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & AppCollectionFixtures, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions>;

package/fixtures/test/app-collection/index.js

@@ -1,41 +1,55 @@
+import { openAsBlob } from 'node:fs';
 import { test as base } from '@playwright/test';
 import { expect } from '../../../index.js';
+async function getBlobFromPath(imagePath) {
+    const extension = imagePath.split('.').pop();
+    const blob = await openAsBlob(imagePath, { type: `image/${extension}` });
+    return blob;
+}
 export const test = base.extend({
-    async createAppCollection({ page }, use) {
-        await use(async (organizationId, collectionName, expertName, expertDescription, headerImage, expertPhoto, isPrivate) => {
-            await page.goto(`/en/organizations/${organizationId}/collections`);
-            await page.getByRole('link', { name: 'App collections' }).first().click();
-            await page.getByRole('button', { name: 'Create new app collection' }).click();
-            await page.getByLabel('Name', { exact: true }).fill(collectionName);
-            await page
-                .locator('span')
-                .filter({ hasText: 'Header image' })
-                .first()
-                .setInputFiles(headerImage);
-            if (isPrivate) {
-                await page.getByText('Hide this app collection from the public list').click();
+    async createAppCollection({ request }, use) {
+        await use(async (organizationId, collectionName, visibility, expertName, expertPhotoPath, headerImagePath, expertDescription) => {
+            const formData = new FormData();
+            formData.append('name', collectionName);
+            formData.append('visibility', visibility);
+            formData.append('expertName', expertName);
+            formData.append('expertProfileImage', await getBlobFromPath(expertPhotoPath));
+            formData.append('headerImage', await getBlobFromPath(headerImagePath));
+            if (expertDescription) {
+                formData.append('expertDescription', expertDescription);
             }
-            await page.getByLabel('Expert name').fill(expertName);
-            await page.getByLabel('Expert description').fill(expertDescription);
-            await page
-                .locator('span')
-                .filter({ hasText: 'Expert photo' })
-                .first()
-                .setInputFiles(expertPhoto);
-            // Avatar editor
-            await page.getByRole('button', { name: 'Save' }).click();
-            await page.getByRole('button', { name: 'Create app collection' }).click();
-            await expect(page.getByRole('heading', { name: collectionName })).toBeVisible();
+            const response = await request.post(`/api/organizations/${organizationId}/app-collections`, {
+                multipart: formData,
+                headers: {
+                    Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
+                },
+            });
+            expect(response.status()).toBe(201);
+            const appCollection = (await response.json());
+            return appCollection;
         });
     },
-    async deleteAppCollection({ page }, use) {
-        await use(async (organizationId, collectionName) => {
-            await page.goto(`/en/organizations/${organizationId}/collections`);
-            await page.getByRole('link', { name: collectionName }).click();
-            await page.getByRole('link', { name: 'Settings' }).click();
-            await page.getByRole('button', { name: 'Delete app collection' }).click();
-            await page.getByRole('button', { name: 'Delete app collection', exact: true }).click();
-            await expect(page.getByRole('heading', { name: collectionName })).toBeHidden();
+    async deleteAppCollection({ request }, use) {
+        await use(async (collectionId) => {
+            const response = await request.delete(`/api/app-collections/${collectionId}`, {
+                headers: {
+                    Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
+                },
+            });
+            expect(response.status()).toBe(204);
+        });
+    },
+    async addAppToAppCollection({ request }, use) {
+        await use(async (collectionId, appId) => {
+            const response = await request.post(`/api/app-collections/${collectionId}/apps`, {
+                data: {
+                    AppId: appId,
+                },
+                headers: {
+                    Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
+                },
+            });
+            expect(response.status()).toBe(204);
         });
     },
 });

package/fixtures/test/index.d.ts

@@ -1 +1 @@
-export declare const test: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & import("./app/index.js").AppFixtures & import("./app-collection/index.js").AppCollectionFixtures & import("./demo-app/index.js").DemoAppFixtures & import("./group/index.js").GroupFixtures & import("./live-app/index.js").LiveAppFixtures & import("./resource/index.js").ResourceFixtures & import("./studio/index.js").StudioFixtures & import("./test-utils/index.js").TestUtilsFixtures & import("./training/index.js").TrainingFixtures, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions>;
+export declare const test: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & import("./app/index.js").AppFixtures & import("./app-collection/index.js").AppCollectionFixtures & import("./demo-app/index.js").DemoAppFixtures & import("./group/index.js").GroupFixtures & import("./live-app/index.js").LiveAppFixtures & import("./organization/index.js").OrganizationFixtures & import("./resource/index.js").ResourceFixtures & import("./studio/index.js").StudioFixtures & import("./test-utils/index.js").TestUtilsFixtures & import("./training/index.js").TrainingFixtures, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions>;

package/fixtures/test/index.js

@@ -4,9 +4,10 @@ import { test as appCollectionFixtures } from './app-collection/index.js';
 import { test as demoAppFixtures } from './demo-app/index.js';
 import { test as groupFixtures } from './group/index.js';
 import { test as liveAppFixtures } from './live-app/index.js';
+import { test as organizationFixtures } from './organization/index.js';
 import { test as resourceFixtures } from './resource/index.js';
 import { test as studioFixtures } from './studio/index.js';
 import { test as testUtilsFixtures } from './test-utils/index.js';
 import { test as trainingFixtures } from './training/index.js';
-export const test = mergeTests(appFixtures, appCollectionFixtures, demoAppFixtures, groupFixtures, liveAppFixtures, resourceFixtures, studioFixtures, testUtilsFixtures, trainingFixtures);
+export const test = mergeTests(appFixtures, appCollectionFixtures, demoAppFixtures, groupFixtures, liveAppFixtures, organizationFixtures, resourceFixtures, studioFixtures, testUtilsFixtures, trainingFixtures);
 //# sourceMappingURL=index.js.map

package/fixtures/test/live-app/index.d.ts

@@ -2,9 +2,11 @@ export interface LiveAppFixtures {
     /**
      * Visit an app.
      *
-     * @param appId The app id.
+     * @param appIdentifier Used to find the app to visit.
+     *   Can be either the app's **ID** as number, or the app's **path** as string
+     * @returns URL of the live app
      */
-    visitApp: (appPath: string) => Promise<void>;
+    visitApp: (appIdentifier: number | string) => Promise<string>;
     /**
      * Login to an app with the Appsemble OAuth2 flow.
      */

package/fixtures/test/live-app/index.js

@@ -1,13 +1,19 @@
 import { test as base } from '@playwright/test';
 import { expect } from '../../expect/index.js';
+async function getAppId(appPath, request) {
+    const apps = await (await request.get('/api/apps')).json();
+    const appId = apps.find(({ path }) => path === appPath)?.id;
+    expect(appId).not.toBeUndefined();
+    return appId;
+}
 export const test = base.extend({
     async visitApp({ getLiveAppURL, page, request }, use) {
-        await use(async (appPath) => {
-            const apps = await (await request.get('/api/apps')).json();
-            const appId = apps.find(({ path }) => path === appPath)?.id;
-            expect(appId).not.toBeUndefined();
-            const url = await getLiveAppURL(appId);
+        await use(async (appIdentifier) => {
+            const url = await (typeof appIdentifier === 'number'
+                ? getLiveAppURL(appIdentifier)
+                : getLiveAppURL(await getAppId(appIdentifier, request)));
             await page.goto(url);
+            return url;
         });
     },
     async loginAppAppsembleOAuth({ page }, use) {

package/fixtures/test/organization/index.d.ts

@@ -0,0 +1,26 @@
+import { type Organization } from '@appsemble/types';
+interface OrganizationDetails {
+    id: string;
+    name?: string;
+    description?: string;
+    email?: string;
+    website?: string;
+    icon?: Blob;
+}
+export interface OrganizationFixtures {
+    /**
+     * Creates an organization
+     *
+     * @param details Organization details
+     * @returns Created organization
+     */
+    createOrganization: (details: OrganizationDetails) => Promise<Organization>;
+    /**
+     * Deletes the organization with the given ID
+     *
+     * @param id ID of the organization
+     */
+    deleteOrganization: (id: string) => Promise<void>;
+}
+export declare const test: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & OrganizationFixtures, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions>;
+export {};

package/fixtures/test/organization/index.js

@@ -0,0 +1,35 @@
+import { test as base } from '@playwright/test';
+import { expect } from '../../expect/index.js';
+export const test = base.extend({
+    async createOrganization({ request }, use) {
+        await use(async (details) => {
+            const { description, email, icon, id, name, website } = details;
+            const formData = new FormData();
+            formData.set('id', id);
+            formData.set('name', name ?? '');
+            formData.set('description', description ?? '');
+            formData.set('email', email ?? '');
+            formData.set('website', website ?? 'http');
+            formData.set('icon', icon ?? null);
+            const response = await request.post('/api/organizations', {
+                multipart: formData,
+                headers: {
+                    Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
+                },
+            });
+            expect(response.status()).toBe(201);
+            return response.json();
+        });
+    },
+    async deleteOrganization({ request }, use) {
+        await use(async (id) => {
+            const response = await request.delete(`/api/organizations/${id}`, {
+                headers: {
+                    Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
+                },
+            });
+            expect(response.status()).toBe(200);
+        });
+    },
+});
+//# sourceMappingURL=index.js.map

package/fixtures/test/studio/index.d.ts

@@ -1,3 +1,4 @@
+import { type Page } from '@playwright/test';
 export interface StudioFixtures {
     /**
      * Log into Appsemble studio as a user
@@ -9,9 +10,40 @@ export interface StudioFixtures {
      * @returns The user's access token
      */
     loginUser: (email: string, password: string, saveInStorageState?: boolean) => Promise<string>;
+    /**
+     * Log into Appsemble studio as a user using the given page
+     *
+     * @param email Email address of the account to log in with
+     * @param password Password of the account
+     * @param page Page to login with
+     * @param saveInStorageState Whether or not to save the authenticated state as reusable storage
+     *   state (see: https://playwright.dev/docs/auth#basic-shared-account-in-all-tests)
+     * @returns The user's access token
+     */
+    loginUserOnPage: (email: string, password: string, page: Page, saveInStorageState?: boolean) => Promise<string>;
     /**
      * Log the worker out of their current user account
      */
     logoutUser: () => Promise<void>;
+    /**
+     * Clicks on one of the items in the app side menu in the studio
+     *
+     * @param itemName Name of the menu item to click
+     */
+    clickAppSideMenuItem: (itemName: string) => Promise<void>;
+    /**
+     * Clicks on one of the items in the app side menu in the studio
+     *
+     * @param itemName Name of the menu item to click
+     * @param page Page to use
+     */
+    clickAppSideMenuItemOnPage: (itemName: string, page: Page) => Promise<void>;
 }
+/**
+ * Clicks on one of the items in the app side menu in the studio using the given page
+ *
+ * @param page Page on which to click
+ * @param itemName Name of the menu item to click
+ */
+export declare function clickAppSideMenuItem(page: Page, itemName: string): Promise<void>;
 export declare const test: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & StudioFixtures, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions>;

package/fixtures/test/studio/index.js

@@ -1,7 +1,22 @@
 import { test as base, expect } from '@playwright/test';
+/**
+ * Clicks on one of the items in the app side menu in the studio using the given page
+ *
+ * @param page Page on which to click
+ * @param itemName Name of the menu item to click
+ */
+export async function clickAppSideMenuItem(page, itemName) {
+    await page.getByTestId('studio-app-side-menu').getByRole('link', { name: itemName }).click();
+}
 export const test = base.extend({
-    async loginUser({ page }, use) {
+    async loginUser({ loginUserOnPage, page }, use) {
         await use(async (email, password, saveInStorageState = false) => {
+            const accessToken = await loginUserOnPage(email, password, page, saveInStorageState);
+            return accessToken;
+        });
+    },
+    async loginUserOnPage({}, use) {
+        await use(async (email, password, page, saveInStorageState = false) => {
             let accessToken = '';
             // Get the access token from the "login" response
             page.on('response', async (response) => {
@@ -29,5 +44,15 @@ export const test = base.extend({
             await page.getByRole('button', { name: 'Logout' }).click();
         });
     },
+    async clickAppSideMenuItem({ clickAppSideMenuItemOnPage, page }, use) {
+        await use(async (itemName) => {
+            await clickAppSideMenuItemOnPage(itemName, page);
+        });
+    },
+    async clickAppSideMenuItemOnPage({}, use) {
+        await use(async (itemName, page) => {
+            await page.getByTestId('studio-app-side-menu').getByRole('link', { name: itemName }).click();
+        });
+    },
 });
 //# sourceMappingURL=index.js.map

package/fixtures/test/test-utils/index.d.ts

@@ -2,9 +2,13 @@ export interface TestUtilsFixtures {
     /**
      * Generates a random test ID based on details of the current test
      *
+     * @param level The level of detail to add. Each level adds more detail\
+     *   1 = Browser name\
+     *   2 = Worker index\
+     *   3 = Retry count
      * @returns Randomized test ID
      * @example '[chrome][index=1][retry=3]-123456'
      */
-    randomTestId: () => string;
+    randomTestId: (level?: 1 | 2 | 3) => string;
 }
 export declare const test: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & TestUtilsFixtures, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions>;

package/fixtures/test/test-utils/index.js

@@ -1,7 +1,21 @@
 import { test as base } from '@playwright/test';
 export const test = base.extend({
     randomTestId({ browserName }, use, testInfo) {
-        use(() => `[${browserName}][index=${testInfo.workerIndex}][retry=${testInfo.retry}]-${Math.floor(100000 + Math.random() * 900000)}`);
+        use((level) => {
+            let prefix = '';
+            if (level) {
+                if (level >= 1) {
+                    prefix = prefix.concat(`[${browserName}]`);
+                }
+                if (level >= 2) {
+                    prefix = prefix.concat(`[index=${testInfo.workerIndex}]`);
+                }
+                if (level >= 3) {
+                    prefix = prefix.concat(`[retry=${testInfo.retry}]`);
+                }
+            }
+            return `${prefix}${prefix === '' ? '' : '-'}${Math.floor(100000 + Math.random() * 900000)}`;
+        });
     },
 });
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appsemble/e2e",
-  "version": "0.34.21",
+  "version": "0.35.3",
   "description": "End-to-end tests used for testing Appsemble apps in an existing environment.",
   "keywords": [
     "app",
@@ -38,9 +38,9 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@appsemble/utils": "0.34.21",
-    "@appsemble/types": "0.34.21",
-    "@appsemble/lang-sdk": "0.34.21",
+    "@appsemble/utils": "0.35.3",
+    "@appsemble/types": "0.35.3",
+    "@appsemble/lang-sdk": "0.35.3",
     "jwt-decode": "^4.0.0",
     "@fortawesome/fontawesome-free": "^6.0.0",
     "@playwright/test": "1.51.1",

package/playwright.config.js

@@ -11,10 +11,12 @@ export default defineConfig({
     forbidOnly: Boolean(CI),
     // Retry on CI only
     retries: CI ? 2 : 0,
-    // A lot of tests depend on the same pre-seeded apps, so more workers can introduce flakiness.
+    // Concurrent tests run better on CI in general
     workers: 1,
     // Reporter to use. See https://playwright.dev/docs/test-reporters
     reporter: [['junit', { outputFile: 'results.xml' }]],
+    // Prevent the pipeline from timing out
+    maxFailures: 6,
     // 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('/')`.
@@ -30,6 +32,24 @@ export default defineConfig({
     },
     // Configure projects for major browsers
     projects: [
+        {
+            name: 'static-chromium',
+            testDir: './tests/static-ui',
+            use: { ...devices['Desktop Chrome'] },
+            fullyParallel: true,
+        },
+        {
+            name: 'static-firefox',
+            testDir: './tests/static-ui',
+            use: { ...devices['Desktop Firefox'] },
+            fullyParallel: true,
+        },
+        {
+            name: 'static-safari',
+            testDir: './tests/static-ui',
+            use: { ...devices['Desktop Safari'] },
+            fullyParallel: true,
+        },
         { name: 'setup', testMatch: /.*\.setup\.ts/ },
         {
             name: 'chromium',

package/tests/demo-apps/empty.spec.js

@@ -0,0 +1,26 @@
+import { readFile } from 'node:fs/promises';
+import { expect, test } from '../../index.js';
+let appId;
+let organizationId;
+test.describe('Empty', () => {
+    test.beforeAll(async ({ createApp, createOrganization, randomTestId }) => {
+        const appDefinition = await readFile('../../apps/empty/app-definition.yaml', 'utf8');
+        organizationId = (await createOrganization({ id: randomTestId() })).id;
+        appId = (await createApp(organizationId, appDefinition)).id;
+    });
+    test.afterAll(async ({ deleteApp, deleteOrganization }) => {
+        await deleteApp(appId);
+        await deleteOrganization(organizationId);
+    });
+    test.beforeEach(async ({ page, visitApp }) => {
+        await visitApp(appId);
+        await page.waitForURL('**/example-page-a');
+    });
+    test('should navigate to the second page and back', async ({ page }) => {
+        await page.click('a.button');
+        await expect(page.getByRole('heading', { name: 'Example Page B' })).toBeVisible();
+        await page.click('a.button');
+        await expect(page.getByRole('heading', { name: 'Example Page A' })).toBeVisible();
+    });
+});
+//# sourceMappingURL=empty.spec.js.map

package/tests/{template-apps → demo-apps}/holidays.spec.js

@@ -1,5 +1,17 @@
+import { readFile } from 'node:fs/promises';
 import { expect, test } from '../../index.js';
+let appId;
+let organizationId;
 test.describe('Holidays', () => {
+    test.beforeAll(async ({ createApp, createOrganization, randomTestId }) => {
+        const appDefinition = await readFile('../../apps/holidays/app-definition.yaml', 'utf8');
+        organizationId = (await createOrganization({ id: randomTestId() })).id;
+        appId = (await createApp(organizationId, appDefinition)).id;
+    });
+    test.afterAll(async ({ deleteApp, deleteOrganization }) => {
+        await deleteApp(appId);
+        await deleteOrganization(organizationId);
+    });
     test.beforeEach(async ({ page, visitApp }) => {
         await page.route('/api/apps/*/actions/pages.0.tabs.0.blocks.0.actions.onLoad*', (route) => {
             route.fulfill({ path: 'mock-data/holidays-nl.json' });
@@ -10,7 +22,7 @@ test.describe('Holidays', () => {
         await page.route('/api/apps/*/actions/pages.1.tabs.0.blocks.0.actions.onLoad*', (route) => {
             route.fulfill({ path: 'mock-data/holidays-us.json' });
         });
-        await visitApp('holidays');
+        await visitApp(appId);
         await page.waitForURL('**/holidays-in-europe/netherlands');
     });
     test('should navigate to the second tab', async ({ page }) => {