More tests

backend/i18n/frontend_en.json

@@ -196,6 +196,7 @@
  "comments.follow": "Follow",
  "comments.title": "Comments",
  "common.actions": "Actions",
+ "common.add": "Add",
  "common.administration": "Administration",
  "common.administrationPageTitle": "Administration",
  "common.api": "API",

backend/i18n/frontend_fr.json

@@ -196,6 +196,7 @@
  "comments.follow": "Suivre",
  "comments.title": "commentaires",
  "common.actions": "Actions",
+ "common.add": "Add",
  "common.administration": "Administration",
  "common.administrationPageTitle": "Administration",
  "common.api": "API",

backend/i18n/frontend_it.json

@@ -196,6 +196,7 @@
  "comments.follow": "Segui",
  "comments.title": "Commenti",
  "common.actions": "Azioni",
+ "common.add": "Add",
  "common.administration": "Amministrazione",
  "common.administrationPageTitle": "Amministrazione",
  "common.api": "API",

backend/i18n/frontend_nl.json

@@ -196,6 +196,7 @@
  "comments.follow": "Volgen",
  "comments.title": "Reacties",
  "common.actions": "Acties",
+ "common.add": "Add",
  "common.administration": "Administratie",
  "common.administrationPageTitle": "Administratie",
  "common.api": "API",

backend/i18n/frontend_pt.json

@@ -196,6 +196,7 @@
  "comments.follow": "Seguir",
  "comments.title": "Comentários",
  "common.actions": "Ações",
+ "common.add": "Add",
  "common.administration": "Administração",
  "common.administrationPageTitle": "Administração",
  "common.api": "API",

backend/i18n/frontend_zh.json

@@ -196,6 +196,7 @@
  "comments.follow": "关注",
  "comments.title": "评论",
  "common.actions": "动作",
+ "common.add": "Add",
  "common.administration": "管理",
  "common.administrationPageTitle": "管理",
  "common.api": "API",

backend/i18n/source/frontend_en.json

@@ -196,6 +196,7 @@
  "comments.follow": "Follow",
  "comments.title": "Comments",
  "common.actions": "Actions",
+ "common.add": "Add",
  "common.administration": "Administration",
  "common.administrationPageTitle": "Administration",
  "common.api": "API",

frontend/src/app/features/settings/pages/settings/settings-page.component.html

@@ -25,7 +25,7 @@ <h5>{{ "appSettings.patterns.title" | sqxTranslate }}</h5>
  {{ "appSettings.patterns.description" | sqxTranslate }}
  </sqx-form-hint>
 
- <div class="card card-body mb-4">
+ <div class="card card-body mb-4" data-testid="patterns">
  <div class="content">
  @if (!isEditable && editForm.patternsControls.length === 0) {
  <div class="mt-4">
@@ -34,7 +34,7 @@ <h5>{{ "appSettings.patterns.title" | sqxTranslate }}</h5>
  }
 
  @for (form of editForm.patternsControls; track form; let i = $index) {
- <div class="form-group row gx-2" [formGroup]="form">
+ <div class="form-group row gx-2" attr.data-testid="pattern_{{ form.get('name')?.value }}" [formGroup]="form">
  <div class="col-3">
  <sqx-control-errors for="name"></sqx-control-errors>
  <input
@@ -62,6 +62,7 @@ <h5>{{ "appSettings.patterns.title" | sqxTranslate }}</h5>
  <div class="col-auto">
  <button
  class="btn btn-text-danger"
+ attr.aria-label="{{ 'common.delete' | sqxTranslate }}"
  confirmRememberKey="deletePattern"
  confirmText="i18n:appSettings.patterns.deleteConfirmText"
  confirmTitle="i18n:appSettings.patterns.deleteConfirmTitle"
@@ -86,7 +87,11 @@ <h5>{{ "appSettings.patterns.title" | sqxTranslate }}</h5>
  <div class="form-control preview">{{ "common.message" | sqxTranslate }}</div>
  </div>
  <div class="col-auto">
- <button class="btn btn-success" (click)="editForm.patterns.add()" type="button">
+ <button
+ class="btn btn-success"
+ attr.aria-label="{{ 'common.add' | sqxTranslate }}"
+ (click)="editForm.patterns.add()"
+ type="button">
  <i class="icon-add"></i>
  </button>
  </div>
@@ -102,7 +107,7 @@ <h5 class="mt-2">{{ "appSettings.editors.title" | sqxTranslate }}</h5>
  </sqx-form-hint>
 
  <div class="card card-body mb-4">
- <div class="content">
+ <div class="content" data-testid="pattern">
  @if (!isEditable && editForm.editorsControls.length === 0) {
  <div class="mt-4">
  {{ "appSettings.editors.empty" | sqxTranslate }}
@@ -130,6 +135,7 @@ <h5 class="mt-2">{{ "appSettings.editors.title" | sqxTranslate }}</h5>
  <div class="col-auto">
  <button
  class="btn btn-text-danger"
+ attr.aria-label="{{ 'common.delete' | sqxTranslate }}"
  confirmRememberKey="deleteEditor"
  confirmText="i18n:appSettings.editors.deleteConfirmText"
  confirmTitle="i18n:appSettings.editors.deleteConfirmTitle"
@@ -151,7 +157,11 @@ <h5 class="mt-2">{{ "appSettings.editors.title" | sqxTranslate }}</h5>
  <div class="form-control preview">{{ "common.url" | sqxTranslate }}</div>
  </div>
  <div class="col-auto">
- <button class="btn btn-success" (click)="editForm.editors.add()" type="button">
+ <button
+ class="btn btn-success"
+ attr.aria-label="{{ 'common.add' | sqxTranslate }}"
+ (click)="editForm.editors.add()"
+ type="button">
  <i class="icon-add"></i>
  </button>
  </div>

tools/e2e/tests/_fixture.ts

@@ -6,7 +6,7 @@
  */
 
 import { test as base } from '@playwright/test';
-import { AssetsPage, ClientsPage, ContentPage, ContentsPage, LanguagesPage, LoginPage, RulePage, RulesPage, SchemaPage, SchemasPage } from './pages';
+import { AssetsPage, ClientsPage, ContentPage, ContentsPage, LanguagesPage, LoginPage, RulePage, RulesPage, SchemaPage, SchemasPage, SettingsPage } from './pages';
 import { AppsPage } from './pages/apps';
 
 export type BaseFixture = {
@@ -21,6 +21,7 @@ export type BaseFixture = {
  rulesPage: RulesPage;
  schemaPage: SchemaPage;
  schemasPage: SchemasPage;
+ settingsPage: SettingsPage;
 };
 
 export const test = base.extend<BaseFixture>({
@@ -57,6 +58,9 @@ export const test = base.extend<BaseFixture>({
  schemasPage: async ({ page }, use) => {
  await use(new SchemasPage(page));
  },
+ settingsPage: async ({ page }, use) => {
+ await use(new SettingsPage(page));
+ },
 });
 
 export { expect } from '@playwright/test';

tools/e2e/tests/given-app/assets.spec.ts

@@ -15,6 +15,12 @@ test.beforeEach(async ({ appName, assetsPage }) => {
  await assetsPage.goto(appName);
 });
 
+test('has header', async ({ page }) => {
+ const header = page.getByRole('heading', { name: /Assets/ });
+
+ expect(header).toBeVisible();
+});
+
 test('upload asset', async ({ assetsPage }) => {
  const assetName = await uploadRandomAsset(assetsPage);
  const assetCard = await assetsPage.getAssetCard(assetName);

tools/e2e/tests/given-app/rules.spec.ts

@@ -10,6 +10,12 @@ test.beforeEach(async ({ appName, rulesPage }) => {
  await rulesPage.goto(appName);
 });
 
+test('has header', async ({ page }) => {
+ const header = page.getByRole('heading', { name: /Rules/ });
+
+ expect(header).toBeVisible();
+});
+
 test('create rule', async ({ rulesPage, rulePage }) => {
  const ruleName = await createRandomRule(rulesPage, rulePage);
  const ruleCard = await rulesPage.getRuleCard(ruleName);

tools/e2e/tests/given-app/schemas.spec.ts

@@ -13,6 +13,12 @@ test.beforeEach(async ({ appName, schemasPage }) => {
  await schemasPage.goto(appName);
 });
 
+test('has header', async ({ page }) => {
+ const header = page.getByRole('heading', { name: /Schemas/ });
+
+ expect(header).toBeVisible();
+});
+
 test('create schema', async ({ schemasPage }) => {
  const schemaName = await createRandomSchema(schemasPage);
  const schemaLink = await schemasPage.getSchemaLink(schemaName);

tools/e2e/tests/given-login/clients.spec.ts

@@ -22,6 +22,12 @@ test.beforeEach(async ({ context, appsPage, clientsPage }) => {
  await clientsPage.goto(appName);
 });
 
+test('has header', async ({ page }) => {
+ const header = page.getByRole('heading', { name: /Clients/ });
+
+ expect(header).toBeVisible();
+});
+
 test('add client', async ({ clientsPage }) => {
  const clientId = await createRandomClient(clientsPage);
  const clientCard = await clientsPage.getClientCard(clientId);

tools/e2e/tests/given-login/languages.spec.ts

@@ -20,6 +20,12 @@ test.beforeEach(async ({ languagesPage, appsPage }) => {
  await languagesPage.goto(appName);
 });
 
+test('has header', async ({ page }) => {
+ const header = page.getByRole('heading', { name: /Languages/ });
+
+ expect(header).toBeVisible();
+});
+
 test('add random language', async ({ languagesPage }) => {
  const randomName = `language-${getRandomId()}`;
 

tools/e2e/tests/given-login/settings.spec.ts

@@ -0,0 +1,48 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { expect, test } from '../_fixture';
+import { getRandomId } from '../utils';
+
+test.beforeEach(async ({ appsPage, settingsPage }) => {
+ const appName = `my-app-${getRandomId()}`;
+
+ await appsPage.goto();
+ const appDialog = await appsPage.openAppDialog();
+ await appDialog.enterName(appName);
+ await appDialog.save();
+
+ await settingsPage.goto(appName);
+});
+
+test('has header', async ({ page }) => {
+ const header = page.getByRole('heading', { name: /UI Settings/ });
+
+ expect(header).toBeVisible();
+});
+
+test('add pattern', async ({ settingsPage })=> {
+ const patternName = `name-${getRandomId()}`;
+ const patternRegex = `regex-${getRandomId()}`;
+
+ const newRow = await settingsPage.getPatternNewRow();
+ await newRow.enterName(patternName);
+ await newRow.enterRegex(patternRegex);
+ await settingsPage.save();
+
+ const patternRow = await settingsPage.getPatternRow(patternName);
+
+ expect(patternRow.root).toBeVisible();
+});
+
+test('delete pattern', async ({ settingsPage })=> {
+ const patternRow = await settingsPage.getPatternRow('Email');
+ await patternRow.delete();
+ await settingsPage.save();
+
+ expect(patternRow.root).not.toBeVisible();
+});

tools/e2e/tests/given-schema/contents.spec.ts

@@ -6,14 +6,20 @@
  */
 
 import { ContentPage, ContentsPage } from '../pages';
-import { getRandomId } from '../utils';
+import { escapeRegex, getRandomId } from '../utils';
 import { expect, test } from './_fixture';
 
 test.beforeEach(async ({ appName, schemaName, contentsPage }) => {
  await contentsPage.goto(appName, schemaName);
  await contentsPage.increasePageSize();
 });
 
+test('has header', async ({ page, schemaName }) => {
+ const header = page.getByRole('heading', { name: escapeRegex(schemaName) });
+
+ expect(header).toBeVisible();
+});
+
 test('create content and close', async ({ contentsPage, contentPage }) => {
  await contentsPage.addContent();
 

tools/e2e/tests/pages/index.ts

@@ -16,4 +16,5 @@ export * from './rule';
 export * from './rule';
 export * from './rules';
 export * from './schema';
-export * from './schemas';
+export * from './schemas';
+export * from './settings';

tools/e2e/tests/pages/settings.ts

@@ -0,0 +1,56 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Locator, Page } from '@playwright/test';
+
+export class SettingsPage {
+ constructor(private readonly page: Page) {}
+
+ public async goto(appName: string) {
+ await this.page.goto(`/app/${appName}/settings/settings`);
+ }
+
+ public async save() {
+ await this.page.getByRole('button', { name: 'Save' }).click();
+ }
+
+ public async getPatternRow(name: string) {
+ const locator = this.page.getByTestId(`pattern_${name}`);
+
+ return new PatternRow(this.page, locator);
+ }
+
+ public async getPatternNewRow() {
+ const locator = this.page.getByTestId(/pattern_/).last();
+
+ return new PatternRow(this.page, locator);
+ }
+
+ public async addPattern() {
+ await this.page.getByTestId('patterns').getByRole('button', { name: 'Add' }).click();
+ }
+}
+
+export class PatternRow {
+ constructor(private readonly page: Page,
+ public readonly root: Locator,
+ ) {
+ }
+
+ public async enterName(value: string) {
+ await this.root.getByPlaceholder('Name').fill(value);
+ }
+
+ public async enterRegex(value: string) {
+ await this.root.getByPlaceholder('Pattern').fill(value);
+ }
+
+ public async delete() {
+ await this.root.getByRole('button', { name: 'Delete' }).click();
+ await this.page.getByRole('button', { name: 'Yes' }).click();
+ }
+}