@appsemble/e2e 0.34.2 → 0.34.4

package/README.md

@@ -1,17 +1,45 @@
-# ![](https://gitlab.com/appsemble/appsemble/-/raw/0.34.2/config/assets/logo.svg) Appsemble End 2 End Tests
+# ![](https://gitlab.com/appsemble/appsemble/-/raw/0.34.4/config/assets/logo.svg) Appsemble End 2 End Tests
 
-> Run end 2 end tests on an Appsemble environment
+> Run end 2 end tests on an Appsemble environment and provide Appsemble fixtures
 
-[![GitLab CI](https://gitlab.com/appsemble/appsemble/badges/0.34.2/pipeline.svg)](https://gitlab.com/appsemble/appsemble/-/releases/0.34.2)
+[![GitLab CI](https://gitlab.com/appsemble/appsemble/badges/0.34.4/pipeline.svg)](https://gitlab.com/appsemble/appsemble/-/releases/0.34.4)
 [![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io)
 
 ## Table of Contents
 
+- [How to install](#how-to-install)
 - [Usage](#usage)
+- [Appsemble end-to-end tests](#appsemble-end-to-end-tests)
+- [Authentication](#authentication)
+- [Contribution](#contributing)
 - [License](#license)
 
+## How to install
+
+You can install the package by running the following at the root of your project:
+
+```sh
+npm install @appsemble/e2e
+```
+
 ## Usage
 
+To use the fixtures in your tests, you can import `expect` or `test` at the top of the file.
+
+These fixtures can be added to any test by specifying them in the test declaration. Matchers don't
+need to be manually added.
+
+```ts
+import { expect, test } from '@appsemble/e2e';
+
+test('should navigate to app', async ({ visitApp }) => {
+  await visitApp('Example app');
+  await expect(page.getByText('Example app')).toBeVisible();
+});
+```
+
+## Appsemble end-to-end tests
+
 To run end to end tests, run:
 
 ```sh
@@ -23,6 +51,11 @@ The tests use [Playwright](https://playwright.dev/).
 After each test a video will be saved in the `packages/e2e/test-results/{name-test}` directory for
 further inspection.
 
+On the first retry of a failed job, its trace will be uploaded to the same directory. This trace can
+be viewed locally, or it can be uploaded to the
+[online trace viewer](https://trace.playwright.dev/). This shows you step-by-step whawt happened
+during the test as if you ran it using `ui mode`.
+
 The end to end tests use the following environment variables:
 
 - `BOT_ACCOUNT_EMAIL` — The email address used to login.
@@ -32,13 +65,7 @@ The end to end tests use the following environment variables:
   request review environment instead.
 - `ACCESS_TOKEN` — The access token of the account that's logged in.
 
-### Fixtures
-
-Common end-to-end fixtures are defined under the `fixtures` directory. These are exported for other
-packages to use, like client apps. This can be done by installing this package and importing `test`
-or `expect`.
-
-### Authentication
+## Authentication
 
 Some fixtures call the Appsemble API using the Playwright `request` object. This expects you to have
 set an access token as environment variable with the name **ACCESS_TOKEN** beforehand. The easiest
@@ -60,5 +87,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.2/LICENSE.md) ©
+[LGPL-3.0-only](https://gitlab.com/appsemble/appsemble/-/blob/0.34.4/LICENSE.md) ©
 [Appsemble](https://appsemble.com)

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

@@ -1,9 +1,20 @@
-import { type App } from '@appsemble/types';
+import { type App, type CreateAppOptions, type PatchAppOptions } from '@appsemble/types';
 export interface AppFixtures {
     /**
-     * Create an app.
+     * 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
+     */
+    createApp: (organizationId: string, yaml: string, options?: CreateAppOptions) => Promise<App>;
+    /**
+     * Patches the given app with the provided options
+     *
+     * @param appId ID of the app to patch
+     * @param options What to patch in the app
      */
-    createApp: (organization: string, yaml: string) => Promise<App>;
+    patchApp: (appId: number, options: PatchAppOptions) => Promise<App>;
     /**
      * Set the role of the user.
      *

package/fixtures/test/app/index.js

@@ -3,12 +3,19 @@ import stripIndent from 'strip-indent';
 import { expect } from '../../expect/index.js';
 export const test = base.extend({
     async createApp({ request }, use) {
-        await use(async (organization, yaml) => {
+        await use(async (organizationId, yaml, options) => {
             const formData = new FormData();
-            formData.append('OrganizationId', organization.toLowerCase());
+            formData.append('OrganizationId', organizationId);
             formData.append('yaml', stripIndent(yaml));
+            if (options) {
+                for (const [option, value] of Object.entries(options)) {
+                    if (value !== undefined) {
+                        formData.append(option, String(value));
+                    }
+                }
+            }
             const response = await request.post('/api/apps', {
-                data: formData,
+                multipart: formData,
                 headers: {
                     Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
                 },
@@ -19,6 +26,26 @@ export const test = base.extend({
             return app;
         });
     },
+    async patchApp({ request }, use) {
+        await use(async (appId, options) => {
+            const formData = new FormData();
+            for (const [option, value] of Object.entries(options)) {
+                if (value !== undefined) {
+                    formData.append(option, String(value));
+                }
+            }
+            const response = await request.patch(`/api/apps/${appId}`, {
+                multipart: formData,
+                headers: {
+                    Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
+                },
+            });
+            expect(response.status()).toBe(200);
+            const app = (await response.json());
+            expect(app).not.toBeNull();
+            return app;
+        });
+    },
     async changeAppMemberRole({ browser }, use) {
         await use(async (appId, role) => {
             const page = await browser.newPage();

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

@@ -6,10 +6,12 @@ export interface DemoAppFixtures {
      */
     reseedDemoApp: (appId: number) => Promise<void>;
     /**
-     * Login to an Appsemble demo app.
+     * Creates a new demo account with the given role and logs into the app with that account.
      *
-     * @param role The role to login in as.
+     * > **Warning**: Expects you to be in the login screen of a demo app
+     *
+     * @param role The role to of the account to create
      */
-    loginDemoApp: (role: string) => Promise<void>;
+    createAndLoginDemoAppMember: (role: string) => Promise<void>;
 }
 export declare const test: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & DemoAppFixtures, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions>;

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

@@ -1,4 +1,4 @@
-import { test as base } from '@playwright/test';
+import { test as base, expect } from '@playwright/test';
 export const test = base.extend({
     async reseedDemoApp({ browser }, use) {
         await use(async (appId) => {
@@ -9,13 +9,11 @@ export const test = base.extend({
             await page.close();
         });
     },
-    async loginDemoApp({ page }, use) {
+    async createAndLoginDemoAppMember({ page }, use) {
         await use(async (role) => {
-            const btn = page.getByTestId('create-account');
-            if (await btn.isVisible()) {
-                await page.getByTestId('app-role').selectOption(role);
-                await btn.click();
-            }
+            await page.getByTestId('app-role').selectOption(role);
+            await page.getByTestId('create-account').click();
+            await expect(page.getByText('Login failed')).toBeHidden();
         });
     },
 });

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("./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("./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

@@ -6,6 +6,7 @@ import { test as groupFixtures } from './group/index.js';
 import { test as liveAppFixtures } from './live-app/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, trainingFixtures);
+export const test = mergeTests(appFixtures, appCollectionFixtures, demoAppFixtures, groupFixtures, liveAppFixtures, resourceFixtures, studioFixtures, testUtilsFixtures, trainingFixtures);
 //# sourceMappingURL=index.js.map

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

@@ -9,6 +9,16 @@ export interface LiveAppFixtures {
      * Login to an app with the Appsemble OAuth2 flow.
      */
     loginAppAppsembleOAuth: () => Promise<void>;
+    /**
+     * Logs into an app using the 'Appsemble Login' flow with the provided App Member credentials
+     *
+     * > **Warning:** Expects the test to be at the login screen of an app that has the "Display
+     * Appsemble login method" option enabled.
+     *
+     * @param email Email of the App Member to log in as
+     * @param password Password of the App Member to log in as
+     */
+    loginAppAppsembleLogin: (email: string, password: string) => Promise<void>;
     /**
      * Gives the app consent to perform actions on the app member's behalf
      *

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

@@ -16,9 +16,21 @@ export const test = base.extend({
             const params = new URLSearchParams(page.url().split('Login?')[1]);
             const redirect = params.get('redirect');
             await page.getByTestId('login-with-appsemble').click();
+            if (!redirect) {
+                return;
+            }
             await page.waitForURL(`**${redirect}`);
         });
     },
+    async loginAppAppsembleLogin({ page }, use) {
+        await use(async (email, password) => {
+            await page.waitForURL('**/Login**');
+            await page.getByTestId('email').fill(email);
+            await page.getByTestId('password').fill(password);
+            await page.getByTestId('login').click();
+            await expect(page.getByText('Login failed')).toBeHidden();
+        });
+    },
     async giveAppConsent({ getLiveAppURL, request }, use) {
         await use(async (appId) => {
             const url = await getLiveAppURL(appId);

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

@@ -1,13 +1,15 @@
 import { type Resource } from '@appsemble/types';
 export interface ResourceFixtures {
     /**
-     * Create resource(s) from JSON input.
+     * Create resource from JSON input.
      *
      * @param appId The ID of the app.
      * @param type The resource type.
      * @param input The resource JSON input.
+     * @param assets Any assets that need to be linked to a field
+     * @returns The created resource
      */
-    createResource: (appId: number, type: string, input: unknown) => Promise<Resource>;
+    createResource: (appId: number, type: string, input: unknown, assets?: Blob[]) => Promise<Resource>;
     /**
      * Delete all resources from an app.
      *

package/fixtures/test/resource/index.js

@@ -2,9 +2,16 @@ import { test as base } from '@playwright/test';
 import { expect } from '../../expect/index.js';
 export const test = base.extend({
     async createResource({ request }, use) {
-        await use(async (appId, type, input) => {
+        await use(async (appId, type, input, assets) => {
+            const formData = new FormData();
+            formData.append('resource', JSON.stringify(input));
+            if (assets) {
+                for (const asset of assets) {
+                    formData.append('assets', asset);
+                }
+            }
             const response = await request.post(`/api/apps/${appId}/resources/${type}`, {
-                data: JSON.stringify(input),
+                multipart: formData,
                 headers: {
                     Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
                 },

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

@@ -0,0 +1,10 @@
+export interface TestUtilsFixtures {
+    /**
+     * Generates a random test ID based on details of the current test
+     *
+     * @returns Randomized test ID
+     * @example '[chrome][index=1][retry=3]-123456'
+     */
+    randomTestId: () => 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

@@ -0,0 +1,7 @@
+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)}`);
+    },
+});
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appsemble/e2e",
-  "version": "0.34.2",
+  "version": "0.34.4",
   "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.2",
-    "@appsemble/types": "0.34.2",
-    "@appsemble/lang-sdk": "0.34.2",
+    "@appsemble/utils": "0.34.4",
+    "@appsemble/types": "0.34.4",
+    "@appsemble/lang-sdk": "0.34.4",
     "jwt-decode": "^4.0.0",
     "@fortawesome/fontawesome-free": "^6.0.0",
     "@playwright/test": "1.51.1",