@appsemble/e2e 0.34.21 → 0.35.3-test.0

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

@@ -1,11 +1,20 @@
+import { readFile } from 'node:fs/promises';
 import { expect, test } from '../../index.js';
+let appId;
+let organizationId;
 test.describe('Notes', () => {
-    test.beforeAll(async ({ getAppId, giveAppConsent }) => {
-        const appId = await getAppId('notes');
+    test.beforeAll(async ({ createApp, createOrganization, giveAppConsent, randomTestId }) => {
+        const appDefinition = await readFile('../../apps/notes/app-definition.yaml', 'utf8');
+        organizationId = (await createOrganization({ id: randomTestId() })).id;
+        appId = (await createApp(organizationId, appDefinition)).id;
         await giveAppConsent(appId);
     });
+    test.afterAll(async ({ deleteApp, deleteOrganization }) => {
+        await deleteApp(appId);
+        await deleteOrganization(organizationId);
+    });
     test.beforeEach(async ({ loginAppAppsembleOAuth, page, visitApp }) => {
-        await visitApp('notes');
+        await visitApp(appId);
         await loginAppAppsembleOAuth();
         await page.waitForURL('**/notes');
     });

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

@@ -1,7 +1,21 @@
+import { readFile } from 'node:fs/promises';
 import { expect, test } from '../../index.js';
+let appId;
+let organizationId;
 test.describe('Person', () => {
+    test.beforeAll(async ({ createApp, createOrganization, randomTestId, uploadAppMessages }) => {
+        const appDefinition = await readFile('../../apps/person/app-definition.yaml', 'utf8');
+        const englishTranslations = JSON.parse(await readFile('../../apps/person/i18n/en.json', 'utf8'));
+        organizationId = (await createOrganization({ id: randomTestId() })).id;
+        appId = (await createApp(organizationId, appDefinition)).id;
+        await uploadAppMessages(appId, 'en', englishTranslations);
+    });
+    test.afterAll(async ({ deleteApp, deleteOrganization }) => {
+        await deleteApp(appId);
+        await deleteOrganization(organizationId);
+    });
     test.beforeEach(async ({ page, visitApp }) => {
-        await visitApp('person');
+        await visitApp(appId);
         await page.waitForURL('**/person-registration-form');
     });
     test('should submit a new person and view it', async ({ page }) => {

package/tests/static-ui/apps.spec.js

@@ -0,0 +1,37 @@
+import { expect, test } from '../../index.js';
+const { BOT_ACCOUNT_EMAIL, BOT_ACCOUNT_PASSWORD } = process.env;
+test.describe('Apps', () => {
+    // Prevent worker from being logged in automatically
+    test.use({ storageState: { cookies: [], origins: [] } });
+    test.beforeEach(async ({ page }) => {
+        await page.route('**/apps?language=en', async (route) => {
+            await route.fulfill({ path: 'mock-data/app-list.json' });
+        });
+        await page.route('**/api/apps/0?language=en', async (route) => {
+            await route.fulfill({ path: 'mock-data/test-app-details.json' });
+        });
+        await page.goto('/en/apps');
+    });
+    test('should show the page header', async ({ page }) => {
+        await expect(page.getByRole('heading', { name: 'All Apps', exact: true })).toBeVisible();
+    });
+    test('should display “My Apps” when logged in', async ({ loginUser, page }) => {
+        expect(BOT_ACCOUNT_EMAIL && BOT_ACCOUNT_PASSWORD).not.toBeUndefined();
+        await loginUser(BOT_ACCOUNT_EMAIL, BOT_ACCOUNT_PASSWORD);
+        await expect(page.getByRole('heading', { name: 'My Apps', exact: true })).toBeVisible();
+    });
+    test('should render list of apps', async ({ page }) => {
+        await expect(page.getByRole('link', { name: 'Test app Test org' }).first())
+            .toMatchAriaSnapshot(`
+  - link "Test app Test org":
+    - figure: 
+    - heading "Test app" [level=3]
+    - heading "Test org" [level=6]
+`);
+    });
+    test('should link to app details', async ({ page }) => {
+        await page.getByRole('link', { name: 'Test app Test org' }).first().click();
+        await expect(page.getByText('Test app description')).toBeVisible();
+    });
+});
+//# sourceMappingURL=apps.spec.js.map

package/tests/static-ui/blocks.spec.js

@@ -0,0 +1,35 @@
+import { expect, test } from '../../index.js';
+test.describe('Blocks', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.route('**/api/blocks', async (route) => {
+            await route.fulfill({ path: 'mock-data/block-list.json' });
+        });
+        await page.route('**/api/blocks/@test-org/test-block/versions/0.0.0', async (route) => {
+            await route.fulfill({ path: 'mock-data/test-block-details.json' });
+        });
+        await page.route('**/api/blocks/@test-org/test-block/versions/list', async (route) => {
+            await route.fulfill({ json: ['0.0.0'] });
+        });
+        await page.goto('/en/blocks');
+    });
+    test('should render a list of blocks', async ({ page }) => {
+        await expect(page.getByTitle('@test-org/test-block')).toMatchAriaSnapshot(`
+    - banner:
+      - figure: 
+      - heading "test-block" [level=5]
+      - heading "@test-org" [level=6]:
+        - link "@test-org"
+      - text: 0.0.0
+    - text: A test block
+    - contentinfo:
+      - link "View details"
+    `);
+    });
+    test('should link to block details', async ({ page }) => {
+        await page.getByTitle('@test-org/test-block').getByText('View details').click();
+        await expect(page.getByRole('heading', { name: 'Parameters', exact: true })).toBeVisible();
+        await expect(page.getByRole('heading', { name: 'Actions', exact: true })).toBeVisible();
+        await expect(page.getByRole('heading', { name: 'Events', exact: true })).toBeVisible();
+    });
+});
+//# sourceMappingURL=blocks.spec.js.map

package/tests/static-ui/individual-app.spec.js

@@ -0,0 +1,69 @@
+import { expect, test } from '../../index.js';
+const { BOT_ACCOUNT_EMAIL, BOT_ACCOUNT_PASSWORD } = process.env;
+let page;
+test.describe('Individual app', () => {
+    test.beforeAll(async ({ browser, loginUserOnPage }) => {
+        page = await browser.newPage({ storageState: undefined });
+        expect(BOT_ACCOUNT_EMAIL && BOT_ACCOUNT_PASSWORD).not.toBeUndefined();
+        await loginUserOnPage(BOT_ACCOUNT_EMAIL, BOT_ACCOUNT_PASSWORD, page);
+    });
+    test.afterAll(async () => {
+        await page.close();
+    });
+    test.beforeEach(async () => {
+        await page.route('**/api/apps/0?language=en', async (route) => {
+            await route.fulfill({ path: 'mock-data/test-app-details.json' });
+        });
+        await page.route('**/api/users/current', async (route) => {
+            await route.fulfill({ path: 'mock-data/user-info.json' });
+        });
+        await page.route('**/api/users/current/organizations', async (route) => {
+            await route.fulfill({ path: 'mock-data/organization-list.json' });
+        });
+        await page.route('**/api/apps/0/resources/test-resource', async (route) => {
+            await route.fulfill({ json: [] });
+        });
+        await page.route('**/api/apps/0/snapshots', async (route) => {
+            await route.fulfill({ path: 'mock-data/snapshot-list.json' });
+        });
+        await page.goto('/en/apps/0/test-app');
+    });
+    test('should show the app name in the side menu', async () => {
+        await expect(page.getByTestId('studio-app-side-menu-name')).toHaveText('test app');
+    });
+    test('should link to the asset viewer', async ({ clickAppSideMenuItemOnPage }) => {
+        await clickAppSideMenuItemOnPage('Assets', page);
+        await expect(page.getByText('Upload new asset')).toBeVisible();
+    });
+    test('should link to resources', async ({ clickAppSideMenuItemOnPage }) => {
+        await clickAppSideMenuItemOnPage('Resources', page);
+        await expect(page.getByText('This app has the following resources')).toBeVisible();
+    });
+    test('should link to a specific resource', async ({ clickAppSideMenuItemOnPage }) => {
+        await clickAppSideMenuItemOnPage('Resources', page);
+        await page.click('li :has-text("Test resource")');
+        await expect(page.getByText('Resource: Test resource')).toBeVisible();
+    });
+    test('should link to the translator tool', async ({ clickAppSideMenuItemOnPage }) => {
+        await clickAppSideMenuItemOnPage('Translations', page);
+        await expect(page.getByText('Selected language')).toBeVisible();
+    });
+    test('should link to the notification sender', async ({ clickAppSideMenuItemOnPage }) => {
+        await clickAppSideMenuItemOnPage('Notifications', page);
+        await expect(page.getByText('Push notifications are currently not enabled in this app.')).toBeVisible();
+    });
+    test('should link to the snapshots page', async ({ clickAppSideMenuItemOnPage }) => {
+        await clickAppSideMenuItemOnPage('Snapshots', page);
+        await expect(page.getByRole('heading', { name: 'Snapshots' })).toBeVisible();
+        await expect(page.getByRole('listitem').filter({ has: page.getByRole('heading', { name: 'Appsemble' }) })).toBeVisible();
+    });
+    test('should link to the app settings', async ({ clickAppSideMenuItemOnPage }) => {
+        await clickAppSideMenuItemOnPage('Settings', page);
+        await expect(page.getByRole('heading', { name: 'App lock' })).toBeVisible();
+    });
+    test('should link to the app secrets', async ({ clickAppSideMenuItemOnPage }) => {
+        await clickAppSideMenuItemOnPage('Secrets', page);
+        await expect(page.getByRole('heading', { name: 'Appsemble Login' })).toBeVisible();
+    });
+});
+//# sourceMappingURL=individual-app.spec.js.map

package/tests/static-ui/organizations.spec.js

@@ -0,0 +1,41 @@
+import { expect, test } from '../../index.js';
+test.describe('Organizations', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.route('**/api/organizations', async (route) => {
+            await route.fulfill({ path: 'mock-data/organization-list.json' });
+        });
+        await page.route('**/api/organizations/test-org', async (route) => {
+            await route.fulfill({ path: 'mock-data/test-organization-details.json' });
+        });
+        await page.route('**/api/organizations/test-org/apps?language=en', async (route) => {
+            await route.fulfill({ path: 'mock-data/app-list.json' });
+        });
+        await page.route('**/api/organizations/test-org/blocks', async (route) => {
+            await route.fulfill({ path: 'mock-data/block-list.json' });
+        });
+    });
+    test('should render a list of organizations', async ({ page }) => {
+        await page.goto('/en/organizations');
+        await expect(page.getByRole('link', { name: 'Test org test-org', exact: true })).toBeVisible();
+    });
+    test('should link to organization details from organization list', async ({ page }) => {
+        await page.goto('/en/organizations');
+        await page.getByRole('link', { name: 'Test org test-org', exact: true }).click();
+        await expect(page.locator('.card > div').first()).toMatchAriaSnapshot(`
+      - banner:
+        - heading "Test org" [level=1]
+        - heading "test-org" [level=6]
+      - paragraph: Organization description
+      - link "appsemble.com"
+      - link "support@appsemble.com"
+  `);
+    });
+    test('should show lists of apps and blocks that are by the organization', async ({ page }) => {
+        await page.goto('/en/organizations/test-org');
+        await expect(page.getByRole('heading', { name: 'Apps', exact: true })).toBeVisible();
+        await expect(page.getByRole('link', { name: 'Test app Test org' })).toBeVisible();
+        await expect(page.getByRole('heading', { name: 'Blocks', exact: true })).toBeVisible();
+        await expect(page.getByTitle('@test-org/test-block')).toBeVisible();
+    });
+});
+//# sourceMappingURL=organizations.spec.js.map

package/tests/static-ui/training.spec.js

@@ -0,0 +1,39 @@
+import { expect, test } from '../../fixtures/index.js';
+test.describe('Training', () => {
+    // Prevent worker from being logged in automatically
+    test.use({ storageState: { cookies: [], origins: [] } });
+    test.beforeEach(async ({ page }) => {
+        await page.goto('/en/trainings');
+    });
+    test("should show 'Training' in breadcrumbs", async ({ page }) => {
+        await expect(page.getByLabel('Breadcrumbs').getByRole('listitem').filter({ hasText: 'Training' })).toBeVisible();
+    });
+    test('should render first chapter in training tree', async ({ page }) => {
+        await expect(page.getByTestId('rf__node-introduction')).toBeVisible();
+    });
+    test('should show banner if user is not logged in', async ({ page }) => {
+        await expect(page.getByText('Warning: You are currently not logged in. While logged out you can access all trainings, but progress will not be saved')).toBeVisible();
+    });
+    test('should have all trainings unlocked if user is not logged in', async ({ page }) => {
+        // Wait for initialization since locator.all() does not wait for elements to be visible
+        await page.getByTestId('rf__node-introduction').waitFor({ state: 'visible' });
+        const trainingNodes = await page.locator('.react-flow__node').all();
+        expect(trainingNodes.length).toBeGreaterThan(0);
+        for (const node of trainingNodes) {
+            await expect(node).toHaveChapterStatus('available');
+        }
+        const blockedNodeTitles = await page.getByTestId('node-title-blocked').all();
+        expect(blockedNodeTitles.length).toBe(0);
+    });
+    test('should navigate to training once the link is clicked', async ({ page }) => {
+        await page.getByTestId('rf__node-what-is-appsemble').getByRole('link').click();
+        await expect(page.getByRole('heading', { name: 'Appsemble Introduction ' })).toBeVisible();
+    });
+    test('should allow user to click through chapter trainings', async ({ page }) => {
+        await page.getByTestId('rf__node-what-is-appsemble').getByRole('link').click();
+        await page.getByRole('button', { name: 'Click to complete' }).click();
+        await page.getByRole('button', { name: 'To "Get familiar with the studio"' }).click();
+        await expect(page.getByRole('heading', { name: 'Get familiar with the studio' })).toBeVisible();
+    });
+});
+//# sourceMappingURL=training.spec.js.map

package/tests/studio/app-collections/app-collections.spec.js

@@ -1,55 +1,71 @@
 import { expect, test } from '../../../index.js';
-const organizationId = 'appsemble';
+let organizationId;
 let appCollectionName;
+let appCollectionId;
 test.describe('App Collections', () => {
-    test.beforeEach(async ({ page }) => {
-        await page.goto(`/en/organizations/${organizationId}/collections`);
+    test.beforeAll(async ({ createOrganization, randomTestId }) => {
+        organizationId = (await createOrganization({ id: randomTestId() })).id;
+    });
+    test.beforeEach(({ randomTestId }) => {
+        appCollectionName = randomTestId(1);
     });
     test.afterEach(async ({ deleteAppCollection }) => {
-        if (appCollectionName !== undefined) {
-            await deleteAppCollection(organizationId, appCollectionName);
+        if (appCollectionId !== undefined) {
+            await deleteAppCollection(appCollectionId);
+            appCollectionId = undefined;
         }
     });
-    test('should create an app collection', async ({ browserName, createAppCollection, page }) => {
-        appCollectionName = `Create test ${browserName.slice(0, 8)}`;
+    test.afterAll(async ({ deleteOrganization }) => {
+        await deleteOrganization(organizationId);
+    });
+    test('should create an app collection', async ({ page }) => {
         await page.route('/test-assets/side.png', (route) => {
             route.fulfill({ path: 'mock-data/tux.png' });
         });
-        await createAppCollection(organizationId, appCollectionName, 'John Doe', 'Lorem ipsum\n\n**text in bold**\n\n![side image](/test-assets/side.png)', 'mock-data/retail.png', 'mock-data/tux.png', false);
-        await page.getByRole('link', { name: appCollectionName }).click();
+        page.on('response', async (response) => {
+            if (response.request().method() === 'POST' &&
+                /\/api\/organizations\/\d+\/app-collections$/.test(response.url())) {
+                appCollectionId = (await response.json()).id;
+            }
+        });
+        await page.goto(`/en/organizations/${organizationId}/collections`);
+        await page.getByRole('button', { name: 'Create new app collection' }).click();
+        await test.step('Fill in app collection details', async () => {
+            await page.getByLabel('Name', { exact: true }).fill(appCollectionName);
+            await page.getByLabel('Header image').setInputFiles('mock-data/retail.png');
+            await page.getByLabel('Expert name').fill('John Doe');
+            await page
+                .getByLabel('Expert description')
+                .fill('Lorem ipsum\n\n**text in bold**\n\n![side image](/test-assets/side.png)');
+            await page.getByLabel('Expert photo').setInputFiles('mock-data/tux.png');
+            // Avatar editor
+            await page.getByRole('button', { name: 'Save' }).click();
+        });
+        await page.getByRole('button', { name: 'Create app collection' }).click();
+        await page.getByRole('link', { name: `${appCollectionName} John Doe` }).click();
         await expect(page.getByLabel('Breadcrumbs').locator('li:nth-child(2)')).toHaveText(appCollectionName);
-        await expect(page.locator('header.has-background-primary.is-flex.is-flex-wrap-wrap')).toHaveScreenshot({
-            timeout: 5000,
+        await expect(page.locator('header.has-background-primary.is-flex.is-flex-wrap-wrap')).toHaveScreenshot('collection-header.png', {
             maxDiffPixelRatio: 0.02,
+            mask: [page.getByText(appCollectionName)],
         });
+        await expect(page.getByRole('heading', { name: appCollectionName })).toBeVisible();
         await page.getByRole('link', { name: 'Expert' }).click();
         await page.getByRole('img', { name: 'side image' }).waitFor({ state: 'visible' });
-        // TODO: Make sure this doesn't die in CI
-        await expect(page.locator('section:has(div)')).toHaveScreenshot({
-            timeout: 5000,
+        await expect(page.locator('section:has(div)')).toHaveScreenshot('expert-page.png', {
             maxDiffPixelRatio: 0.02,
         });
     });
-    test('should create a private app collection', async ({ browser, browserName, createAppCollection, page, }) => {
-        appCollectionName = `Private test ${browserName.slice(0, 8)}`;
-        await createAppCollection(organizationId, appCollectionName, 'John Doe', 'Lorem ipsum', 'mock-data/retail.png', 'mock-data/tux.png', true);
-        await page.goto('/en/collections');
-        await page.getByRole('heading', { name: 'App collections' }).waitFor({ state: 'visible' });
-        await expect(page.getByRole('link', { name: appCollectionName })).toBeVisible({
-            timeout: 5000,
-        });
+    test('should hide a private app collection if user is not in organization', async ({ browser, createAppCollection, page, }) => {
+        appCollectionId = (await createAppCollection(organizationId, appCollectionName, 'private', 'John Doe', 'mock-data/retail.png', 'mock-data/tux.png', 'Lorem ipsum')).id;
+        await page.goto(`/en/organizations/${organizationId}/collections`);
+        await expect(page.getByRole('link', { name: appCollectionName })).toBeVisible();
         const loggedOutPage = await browser.newPage({ storageState: undefined });
-        await loggedOutPage.goto('/en/collections');
-        await loggedOutPage
-            .getByRole('heading', { name: 'App collections' })
-            .waitFor({ state: 'visible' });
-        await expect(loggedOutPage.getByRole('link', { name: appCollectionName })).toBeHidden({
-            timeout: 5000,
-        });
+        await loggedOutPage.goto(`/en/organizations/${organizationId}/collections`);
+        await expect(loggedOutPage.getByRole('link', { name: appCollectionName })).toBeHidden();
     });
-    test('should edit an app collection', async ({ browserName, createAppCollection, page }) => {
-        appCollectionName = `Edit test ${browserName.slice(0, 8)}`;
-        await createAppCollection(organizationId, appCollectionName, 'John Doe', 'Lorem ipsum', 'mock-data/retail.png', 'mock-data/tux.png', false);
+    test('should edit an app collection', async ({ createAppCollection, page }) => {
+        appCollectionId = (await createAppCollection(organizationId, appCollectionName, 'public', 'John Doe', 'mock-data/retail.png', 'mock-data/tux.png', 'Lorem ipsum')).id;
+        await page.goto(`/en/organizations/${organizationId}/collections`);
         await page.getByRole('link', { name: appCollectionName }).click();
         await page.getByRole('link', { name: 'Settings' }).click();
         const oldName = appCollectionName;
@@ -58,101 +74,109 @@ test.describe('App Collections', () => {
         await page.getByLabel('Expert name').fill('Jane Doe');
         await page.getByLabel('Expert description').fill('Hello world');
         await page.getByRole('button', { name: 'Save' }).click();
-        await page.getByRole('link', { name: /Apps$/ }).click();
+        await page.getByRole('link', { name: ' Apps' }).click();
         await expect(page.getByRole('heading', { name: oldName })).toBeHidden();
-        await expect(page.getByRole('heading', { name: appCollectionName })).toBeVisible();
         await page.getByRole('link', { name: 'Expert Jane Doe' }).click();
         await expect(page.locator('h1').filter({ hasText: 'Jane Doe' })).toBeVisible();
     });
-    test('should delete an app collection', async ({ browserName, createAppCollection, page }) => {
-        appCollectionName = `Delete test ${browserName.slice(0, 8)}`;
-        await createAppCollection(organizationId, appCollectionName, 'John Doe', 'Lorem ipsum', 'mock-data/retail.png', 'mock-data/tux.png', false);
-        await page.getByRole('link', { name: `${appCollectionName} John Doe` }).click();
+    test('should delete an app collection', async ({ createAppCollection, page }) => {
+        appCollectionId = (await createAppCollection(organizationId, appCollectionName, 'public', 'John Doe', 'mock-data/retail.png', 'mock-data/tux.png', 'Lorem ipsum')).id;
+        await page.goto(`/en/organizations/${organizationId}/collections`);
+        await page.getByRole('link', { name: appCollectionName }).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 page.getByRole('heading', { name: 'App collections' }).waitFor({ state: 'visible' });
-        await expect(page.getByRole('link', { name: appCollectionName })).toBeHidden({
-            timeout: 5000,
-        });
-        // Set to undefined so the afterEach doesn't try to delete a non-existent collection
-        appCollectionName = undefined;
+        await expect(page.getByText('Successfully deleted app')).toBeVisible();
+        await expect(page.getByRole('link', { name: appCollectionName })).toBeHidden();
+        // Make sure the afterEach hook doesn't try to delete the already deleted collection
+        appCollectionId = undefined;
     });
-    test('should add an app to an app collection', async ({ browserName, createAppCollection, page, }) => {
-        appCollectionName = `Add app test ${browserName.slice(0, 8)}`;
-        await createAppCollection(organizationId, appCollectionName, 'John Doe', 'Lorem ipsum', 'mock-data/retail.png', 'mock-data/tux.png', false);
-        await page.getByRole('link', { name: 'App store' }).click();
-        await page.getByRole('link', { name: 'Empty' }).first().click();
+    test('should add an app to an app collection', async ({ createApp, createAppCollection, deleteApp, page, randomTestId, }) => {
+        appCollectionId = (await createAppCollection(organizationId, appCollectionName, 'public', 'John Doe', 'mock-data/retail.png', 'mock-data/tux.png', 'Lorem ipsum')).id;
+        const appName = `Test app ${randomTestId()}`;
+        const { id } = await createApp(organizationId, `
+      name: ${appName}
+      defaultPage: Test Page
+      pages:
+        - name: Test Page
+          blocks:
+            - type: data-loader
+              version: 0.34.15
+      `);
+        await page.goto(`/en/apps/${id}`);
         await page.click('#app-options-menu');
         await page.getByRole('button', { name: 'Add to collection' }).click();
-        await page.locator('#collectionId').selectOption({ label: appCollectionName });
-        await page
-            .locator('.modal-card-foot')
-            .getByRole('button', { name: 'Add to collection' })
-            .click();
-        await page.goto('/en/collections');
-        await page.getByRole('link', { name: appCollectionName }).click();
-        await expect(page.getByRole('link', { name: 'Empty' })).toBeVisible();
+        await page.getByRole('combobox').selectOption({ label: appCollectionName });
+        await page.locator('form').getByRole('button', { name: 'Add to collection' }).click();
+        await page.goto(`/en/collections/${appCollectionId}`);
+        await expect(page.getByRole('link', { name: appName })).toBeVisible();
+        await deleteApp(id);
     });
-    test('should remove an app from an app collection', async ({ browserName, createAppCollection, page, }) => {
-        appCollectionName = `Rm app test ${browserName.slice(0, 8)}`;
-        await createAppCollection(organizationId, appCollectionName, 'John Doe', 'Lorem ipsum', 'mock-data/retail.png', 'mock-data/tux.png', false);
-        await page.getByRole('link', { name: 'App store' }).click();
-        await page.getByRole('link', { name: 'Empty' }).first().click();
-        await page.click('#app-options-menu');
-        await page.getByRole('button', { name: 'Add to collection' }).click();
-        await page.locator('#collectionId').selectOption({ label: appCollectionName });
-        await page
-            .locator('.modal-card-foot')
-            .getByRole('button', { name: 'Add to collection' })
-            .click();
-        await page.goto('/en/collections');
-        await page.getByRole('link', { name: appCollectionName }).click();
+    test('should remove an app from an app collection', async ({ addAppToAppCollection, createApp, createAppCollection, deleteApp, page, randomTestId, }) => {
+        appCollectionId = (await createAppCollection(organizationId, appCollectionName, 'public', 'John Doe', 'mock-data/retail.png', 'mock-data/tux.png', 'Lorem ipsum')).id;
+        const appName = `Test app ${randomTestId()}`;
+        const { id } = await createApp(organizationId, `
+      name: ${appName}
+      defaultPage: Test Page
+      pages:
+        - name: Test Page
+          blocks:
+            - type: data-loader
+              version: 0.34.15
+      `);
+        await addAppToAppCollection(appCollectionId, id);
+        await page.goto(`/en/collections/${appCollectionId}`);
         await page.getByRole('button', { name: 'Edit' }).click();
         await page
-            .locator('div', { has: page.getByRole('link', { name: 'Empty' }) })
-            .locator('button[title="Delete app from collection"]')
+            .locator('div', { has: page.getByRole('link', { name: appName }) })
+            .getByTitle('Delete app from collection')
             .click();
         await page.getByRole('button', { name: 'Confirm' }).click();
-        await expect(page.getByRole('link', { name: 'Empty' })).toBeHidden();
+        await expect(page.getByRole('link', { name: appName })).toBeHidden();
+        await deleteApp(id);
     });
-    test('should pin an app to an app collection', async ({ browserName, createAppCollection, page, }) => {
-        appCollectionName = `Pin app test ${browserName.slice(0, 8)}`;
-        await createAppCollection(organizationId, appCollectionName, 'John Doe', 'Lorem ipsum', 'mock-data/retail.png', 'mock-data/tux.png', false);
-        await page.getByRole('link', { name: 'App store' }).click();
-        await page.getByRole('link', { name: 'Empty' }).first().click();
-        await page.click('#app-options-menu');
-        await page.getByRole('button', { name: 'Add to collection' }).click();
-        await page.locator('#collectionId').selectOption({ label: appCollectionName });
-        await page
-            .locator('.modal-card-foot')
-            .getByRole('button', { name: 'Add to collection' })
-            .click();
-        await page.goBack();
-        await page.getByRole('link', { name: 'Person' }).first().click();
-        await page.click('#app-options-menu');
-        await page.getByRole('button', { name: 'Add to collection' }).click();
-        await page.locator('#collectionId').selectOption({ label: appCollectionName });
-        await page
-            .locator('.modal-card-foot')
-            .getByRole('button', { name: 'Add to collection' })
-            .click();
-        await page.goto('/en/collections');
-        await page.getByRole('link', { name: appCollectionName }).click();
+    test('should pin an app to an app collection', async ({ addAppToAppCollection, createApp, createAppCollection, deleteApp, page, randomTestId, }) => {
+        appCollectionId = (await createAppCollection(organizationId, appCollectionName, 'public', 'John Doe', 'mock-data/retail.png', 'mock-data/tux.png', 'Lorem ipsum')).id;
+        const app1 = await createApp(organizationId, `
+      name: Test app ${randomTestId()}
+      defaultPage: Test Page
+      pages:
+        - name: Test Page
+          blocks:
+            - type: data-loader
+              version: 0.34.15
+      `);
+        const app2 = await createApp(organizationId, `
+      name: Test app ${randomTestId()}
+      defaultPage: Test Page
+      pages:
+        - name: Test Page
+          blocks:
+            - type: data-loader
+              version: 0.34.15
+      `);
+        await addAppToAppCollection(appCollectionId, app1.id);
+        await addAppToAppCollection(appCollectionId, app2.id);
+        await page.goto(`/en/collections/${appCollectionId}`);
         await page.getByRole('button', { name: 'Edit' }).click();
         await page
             .locator('div', {
-            has: page.getByRole('link', { name: 'Person' }),
-            hasNot: page.getByRole('link', { name: 'Empty' }),
+            has: page.getByRole('link', { name: app1.definition.name }),
+            hasNot: page.getByRole('link', { name: app2.definition.name }),
         })
-            .locator('button[title="Pin app to top of collection"]')
+            .getByTitle('Pin app to top of collection')
             .click();
         await page.getByRole('button', { name: 'Stop editing' }).click();
-        // TODO make sure this doesn't die in CI either
-        await expect(page.getByRole('main')).toHaveScreenshot({
-            timeout: 5000,
+        await expect(page.getByRole('main')).toHaveScreenshot('collection-apps-with-pinned.png', {
             maxDiffPixelRatio: 0.02,
+            mask: [
+                page.getByRole('heading', { name: app1.definition.name }),
+                page.getByRole('heading', { name: app2.definition.name }),
+                page.getByRole('heading', { name: organizationId }),
+            ],
         });
+        await deleteApp(app1.id);
+        await deleteApp(app2.id);
     });
 });
 //# sourceMappingURL=app-collections.spec.js.map

package/tests/studio/individual-app.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/tests/studio/individual-app.spec.js

@@ -0,0 +1,51 @@
+import { readFile } from 'node:fs/promises';
+import { expect, test } from '../../index.js';
+let appId;
+test.describe('Individual app', () => {
+    test.beforeAll(async ({ createApp, createOrganization, randomTestId }) => {
+        const { yaml } = JSON.parse(await readFile('mock-data/test-app-details.json', 'utf8'));
+        const organizationId = (await createOrganization({ id: randomTestId() })).id;
+        appId = (await createApp(organizationId, yaml)).id;
+    });
+    test.afterAll(async ({ deleteApp }) => {
+        await deleteApp(appId);
+    });
+    test.beforeEach(async ({ page }) => {
+        await page.goto(`/en/apps/${appId}`);
+    });
+    test('should prompt when user has unsaved changes', async ({ clickAppSideMenuItem, page }) => {
+        await clickAppSideMenuItem('Editor');
+        page.on('dialog', (alert) => {
+            expect(alert.type()).toBe('confirm');
+            expect(alert.message()).toBe('You have unsaved changes. Do you wish to continue?');
+            alert.dismiss();
+        });
+        await expect(page.getByRole('button', { name: 'Publish' })).toBeDisabled();
+        const codeEditor = page.getByRole('code');
+        await codeEditor.getByText('name: test app').click();
+        await codeEditor.getByText('name: test app').press('End');
+        await codeEditor.getByText('name: test app').press('Backspace');
+        await codeEditor.getByText('name: test ap').press('p');
+        await expect(page.getByRole('button', { name: 'Publish' })).toBeEnabled();
+        await page.getByRole('link', { name: 'Details' }).click();
+        await expect(page.getByText('Clone App')).toBeHidden();
+    });
+    test('should not prompt when user has saved their changes', async ({ clickAppSideMenuItem, page, }) => {
+        await clickAppSideMenuItem('Editor');
+        page.on('dialog', (alert) => {
+            // If a dialog comes up at all, the test should fail
+            expect(alert).toBeNull();
+        });
+        await expect(page.getByRole('button', { name: 'Publish' })).toBeDisabled();
+        const codeEditor = page.getByRole('code');
+        await codeEditor.getByText('name: test app').click();
+        await codeEditor.getByText('name: test app').press('End');
+        await codeEditor.getByText('name: test app').press('Backspace');
+        await codeEditor.getByText('name: test ap').press('p');
+        await page.getByRole('button', { name: 'Publish' }).click();
+        await expect(page.getByText('Successfully updated app definition')).toBeVisible();
+        await page.getByRole('link', { name: 'Details' }).click();
+        await expect(page.getByText('Clone App')).toBeVisible();
+    });
+});
+//# sourceMappingURL=individual-app.spec.js.map