-
);
diff --git a/frontend/packages/ux-editor-v3/src/components/Properties/ConditionalRendering.module.css b/frontend/packages/ux-editor-v3/src/components/Properties/ConditionalRendering.module.css
index f7caa7e6a63..2ac9bbfcd2b 100644
--- a/frontend/packages/ux-editor-v3/src/components/Properties/ConditionalRendering.module.css
+++ b/frontend/packages/ux-editor-v3/src/components/Properties/ConditionalRendering.module.css
@@ -15,3 +15,12 @@
.dynamicsVersionCheckBox {
z-index: 1;
}
+
+.alert {
+ border-top: var(--studio-border-divider);
+ padding-block: var(--fds-spacing-8);
+}
+
+.conditionalRenderingWrapper {
+ border-bottom: var(--studio-border-divider);
+}
diff --git a/frontend/packages/ux-editor-v3/src/components/Properties/ConditionalRendering.tsx b/frontend/packages/ux-editor-v3/src/components/Properties/ConditionalRendering.tsx
index 9b0eb183c21..994e72c8bed 100644
--- a/frontend/packages/ux-editor-v3/src/components/Properties/ConditionalRendering.tsx
+++ b/frontend/packages/ux-editor-v3/src/components/Properties/ConditionalRendering.tsx
@@ -2,7 +2,6 @@ import React from 'react';
import { Alert } from '@digdir/designsystemet-react';
import classes from './ConditionalRendering.module.css';
import { OldDynamicsInfo } from './OldDynamicsInfo';
-import { Divider } from 'app-shared/primitives';
import { Trans } from 'react-i18next';
import { altinnDocsUrl } from 'app-shared/ext-urls';
import { ConditionalRenderingModal } from '../toolbar/ConditionalRenderingModal';
@@ -10,10 +9,9 @@ import { ConditionalRenderingModal } from '../toolbar/ConditionalRenderingModal'
export const ConditionalRendering = () => {
return (
-
);
diff --git a/frontend/packages/ux-editor-v3/src/components/config/Expressions/ExpressionContent/ExpressionEditMode/SimpleExpression/SimpleExpression.tsx b/frontend/packages/ux-editor-v3/src/components/config/Expressions/ExpressionContent/ExpressionEditMode/SimpleExpression/SimpleExpression.tsx
index fdd531240b6..9a2e00c9d45 100644
--- a/frontend/packages/ux-editor-v3/src/components/config/Expressions/ExpressionContent/ExpressionEditMode/SimpleExpression/SimpleExpression.tsx
+++ b/frontend/packages/ux-editor-v3/src/components/config/Expressions/ExpressionContent/ExpressionEditMode/SimpleExpression/SimpleExpression.tsx
@@ -3,7 +3,6 @@ import type { Expression, SubExpression } from '../../../../../../types/Expressi
import { Operator } from '../../../../../../types/Expressions';
import { SubExpressionContent } from './SubExpressionContent';
import { useText } from '../../../../../../hooks';
-import { Divider } from 'app-shared/primitives';
import { ToggleGroup } from '@digdir/designsystemet-react';
export type SimpleExpressionProps = {
@@ -25,7 +24,6 @@ export const SimpleExpression = ({
{expression.subExpressions?.map((subExp: SubExpression, index: number) => {
return (
-
diff --git a/frontend/packages/ux-editor-v3/src/components/config/Expressions/ExpressionContent/ExpressionEditMode/SimpleExpression/SubExpressionContent.module.css b/frontend/packages/ux-editor-v3/src/components/config/Expressions/ExpressionContent/ExpressionEditMode/SimpleExpression/SubExpressionContent.module.css
index 80070e79369..4d19e3b525b 100644
--- a/frontend/packages/ux-editor-v3/src/components/config/Expressions/ExpressionContent/ExpressionEditMode/SimpleExpression/SubExpressionContent.module.css
+++ b/frontend/packages/ux-editor-v3/src/components/config/Expressions/ExpressionContent/ExpressionEditMode/SimpleExpression/SubExpressionContent.module.css
@@ -1,6 +1,7 @@
.subExpressionTop {
display: flex;
justify-content: space-between;
+ border-top: var(--studio-border-divider);
}
.subExpression {
From 22337dc64c301327352dd23c0260571b07bd0fd2 Mon Sep 17 00:00:00 2001
From: William Thorenfeldt <48119543+wrt95@users.noreply.github.com>
Date: Thu, 7 Nov 2024 15:56:47 +0100
Subject: [PATCH 2/2] refactor: Split ui-editor playwright tests into smaller
tests (#14008)
---
...ditor-data-model-binding-and-gitea.spec.ts | 161 +++++++++++-------
1 file changed, 100 insertions(+), 61 deletions(-)
diff --git a/frontend/testing/playwright/tests/ui-editor/ui-editor-data-model-binding-and-gitea.spec.ts b/frontend/testing/playwright/tests/ui-editor/ui-editor-data-model-binding-and-gitea.spec.ts
index ba23b332d07..82867f39665 100644
--- a/frontend/testing/playwright/tests/ui-editor/ui-editor-data-model-binding-and-gitea.spec.ts
+++ b/frontend/testing/playwright/tests/ui-editor/ui-editor-data-model-binding-and-gitea.spec.ts
@@ -10,21 +10,21 @@ import { Header } from '../../components/Header';
import { DataModelPage } from '../../pages/DataModelPage';
import { GiteaPage } from '../../pages/GiteaPage';
-const getAppTestName = (app: string) => `bindings-${app}`;
+// This line must be there to ensure that the tests do not run in parallell, and
+// that the before all call is being executed before we start the tests
+test.describe.configure({ mode: 'serial' });
// Before the tests starts, we need to create the data model app
test.beforeAll(async ({ testAppName, request, storageState }) => {
// Create a new app
- const designerApi = new DesignerApi({ app: getAppTestName(testAppName) });
+ const designerApi = new DesignerApi({ app: testAppName });
const response = await designerApi.createApp(request, storageState as StorageState);
expect(response.ok()).toBeTruthy();
});
test.afterAll(async ({ request, testAppName }) => {
const gitea = new Gitea();
- const response = await request.delete(
- gitea.getDeleteAppEndpoint({ app: getAppTestName(testAppName) }),
- );
+ const response = await request.delete(gitea.getDeleteAppEndpoint({ app: testAppName }));
expect(response.ok()).toBeTruthy();
});
@@ -41,31 +41,44 @@ const setupAndVerifyUiEditorPage = async (
localStorage.setItem('featureFlags', JSON.stringify(flag));
}, featureFlag);
}
+
+ await uiEditorPage.clickOnPageAccordion(pageName);
+ await uiEditorPage.verifyUiEditorPage(pageName);
+
return uiEditorPage;
};
-test('That it is possible to add a data model binding, and that the files are updated accordingly in Gitea', async ({
+test('That it is possible to drag in a new component, add a title to the newly added component and add a data model binding', async ({
page,
testAppName,
}): Promise => {
- const app = getAppTestName(testAppName);
- const header = new Header(page, { app });
- const dataModelPage = new DataModelPage(page, { app });
- const giteaPage = new GiteaPage(page, { app });
- const uiEditorPage = await setupAndVerifyUiEditorPage(page, app);
-
- const pageName: string = 'Side1';
- await openPageAccordionAndVerifyUpdatedUrl(uiEditorPage, pageName);
+ const uiEditorPage = await setupAndVerifyUiEditorPage(page, testAppName);
await uiEditorPage.verifyThatPageIsEmpty();
- const newInputLabel: string = 'Input Label 1';
await uiEditorPage.dragComponentIntoDroppableList(ComponentType.Input);
await uiEditorPage.waitForComponentTreeItemToBeVisibleInDroppableList(ComponentType.Input);
- await addNewLabelToTreeItemComponent(uiEditorPage, newInputLabel);
+
+ await uiEditorPage.clickOnComponentTextConfigAccordion();
+ await uiEditorPage.clickOnTitleTextButton();
+ await uiEditorPage.writeTitleTextInTextarea(newInputLabel);
+ await uiEditorPage.clickOnSaveNewLabelName();
+ await uiEditorPage.waitForTreeItemToGetNewLabel(newInputLabel);
+
+ await uiEditorPage.verifyThatTreeItemByNameIsNotVisibleInDroppableList(ComponentType.Input);
+ await uiEditorPage.verifyThatTreeItemByNameIsVisibleInDroppableList(newInputLabel);
await uiEditorPage.clickOnComponentDataModelBindingConfigAccordion();
await uiEditorPage.clickOnAddDataModelButton(ComponentType.Input);
await uiEditorPage.clickOnDataModelFieldBindingCombobox();
+});
+
+test('That it is possible to navigate to Gitea and that data model bindings are not present', async ({
+ page,
+ testAppName,
+}): Promise => {
+ const uiEditorPage = await setupAndVerifyUiEditorPage(page, testAppName);
+ const header = new Header(page, { app: testAppName });
+ const giteaPage = new GiteaPage(page, { app: testAppName });
await header.clickOnThreeDotsMenu();
await header.clickOnGoToGiteaRepository();
@@ -75,23 +88,34 @@ test('That it is possible to add a data model binding, and that the files are up
await giteaPage.goBackNPages(6); // 5 because of: Gitea -> App -> ui -> layoutsSet -> layouts -> page1.json
await uiEditorPage.verifyUiEditorPage(pageName);
+});
+
+test('That it is possible to navigate to datamodel page and create a new data model', async ({
+ page,
+ testAppName,
+}): Promise => {
+ await setupAndVerifyUiEditorPage(page, testAppName);
+ const header = new Header(page, { app: testAppName });
+ const dataModelPage = new DataModelPage(page, { app: testAppName });
await header.clickOnNavigateToPageInTopMenuHeader('data_model');
await dataModelPage.verifyDataModelPage();
- // Add data model
- await dataModelPage.clickOnCreateNewDataModelButton();
const dataModelName: string = 'testDataModel';
- await dataModelPage.typeDataModelName(dataModelName);
- await dataModelPage.clickOnCreateModelButton();
- await dataModelPage.waitForDataModelToAppear(dataModelName);
- await dataModelPage.clickOnGenerateDataModelButton();
- await dataModelPage.checkThatSuccessAlertIsVisibleOnScreen();
- await dataModelPage.waitForSuccessAlertToDisappear();
+ await createNewDataModel(dataModelPage, dataModelName);
+});
+
+test('That it is possible to navigate back to ui-editor page and add the data model', async ({
+ page,
+ testAppName,
+}): Promise => {
+ const uiEditorPage = await setupAndVerifyUiEditorPage(page, testAppName);
+ const header = new Header(page, { app: testAppName });
await header.clickOnNavigateToPageInTopMenuHeader('create');
await uiEditorPage.verifyUiEditorPage();
- await openPageAccordionAndVerifyUpdatedUrl(uiEditorPage, pageName);
+ await uiEditorPage.clickOnPageAccordion(pageName);
+ await uiEditorPage.verifyUiEditorPage(pageName);
await uiEditorPage.clickOnTreeItem(newInputLabel);
await uiEditorPage.clickOnComponentDataModelBindingConfigAccordion();
@@ -99,10 +123,18 @@ test('That it is possible to add a data model binding, and that the files are up
await uiEditorPage.clickOnDataModelFieldBindingCombobox();
await uiEditorPage.verifyThatThereAreOptionsInTheDataModelFieldList();
- const dataModelBindingName = 'property1';
await uiEditorPage.clickOnDataModelFieldPropertyOption(dataModelBindingName);
await uiEditorPage.clickOnSaveDataModel();
await uiEditorPage.waitForDataModelToBeSelected();
+});
+
+test('That it is possible to upload the changes to Gitea and view the changes in Gitea', async ({
+ page,
+ testAppName,
+}): Promise => {
+ await setupAndVerifyUiEditorPage(page, testAppName);
+ const header = new Header(page, { app: testAppName });
+ const giteaPage = new GiteaPage(page, { app: testAppName });
await header.clickOnUploadLocalChangesButton();
await header.clickOnValidateChanges();
@@ -117,31 +149,31 @@ test('That it is possible to add a data model binding, and that the files are up
);
});
-test('That is possible to select a different data model binding, and that the files are updated accordingly in Gitea', async ({
+test('That it is possible to navigate to data model page and create another data model', async ({
page,
testAppName,
}): Promise => {
- const app = getAppTestName(testAppName);
- const header = new Header(page, { app });
- const dataModelPage = new DataModelPage(page, { app });
- const uiEditorPage = await setupAndVerifyUiEditorPage(page, app, ['multipleDataModelsPerTask']);
- const pageName: string = 'Side1';
- const giteaPage = new GiteaPage(page, { app });
+ await setupAndVerifyUiEditorPage(page, testAppName, ['multipleDataModelsPerTask']);
+ const header = new Header(page, { app: testAppName });
+ const dataModelPage = new DataModelPage(page, { app: testAppName });
await header.clickOnNavigateToPageInTopMenuHeader('data_model');
+ await createNewDataModel(dataModelPage, newDataModel);
+});
- const newDataModel = 'testDataModel2';
- await dataModelPage.clickOnCreateNewDataModelButton();
- await dataModelPage.typeDataModelName(newDataModel);
- await dataModelPage.clickOnCreateModelButton();
- await dataModelPage.waitForDataModelToAppear(newDataModel);
- await dataModelPage.clickOnGenerateDataModelButton();
- await dataModelPage.checkThatSuccessAlertIsVisibleOnScreen();
- await dataModelPage.waitForSuccessAlertToDisappear();
+test('That it is possible to navigate back to ui-editor page and add the newly added data model using data model binding combobox', async ({
+ page,
+ testAppName,
+}): Promise => {
+ const uiEditorPage = await setupAndVerifyUiEditorPage(page, testAppName, [
+ 'multipleDataModelsPerTask',
+ ]);
+ const header = new Header(page, { app: testAppName });
await header.clickOnNavigateToPageInTopMenuHeader('create');
await uiEditorPage.verifyUiEditorPage();
- await openPageAccordionAndVerifyUpdatedUrl(uiEditorPage, pageName);
+ await uiEditorPage.clickOnPageAccordion(pageName);
+ await uiEditorPage.verifyUiEditorPage(pageName);
await uiEditorPage.dragComponentIntoDroppableList(ComponentType.Input);
await uiEditorPage.waitForComponentTreeItemToBeVisibleInDroppableList(ComponentType.Input);
@@ -152,6 +184,15 @@ test('That is possible to select a different data model binding, and that the fi
await uiEditorPage.clickOnDataModelPropertyOption(newDataModel);
await uiEditorPage.clickOnSaveDataModel();
await uiEditorPage.waitForDataModelToBeSelected();
+});
+
+test('That it is possible to upload to Gitea and that files are updated correctly', async ({
+ page,
+ testAppName,
+}): Promise => {
+ await setupAndVerifyUiEditorPage(page, testAppName);
+ const header = new Header(page, { app: testAppName });
+ const giteaPage = new GiteaPage(page, { app: testAppName });
await header.clickOnUploadLocalChangesButton();
await header.clickOnValidateChanges();
@@ -166,6 +207,13 @@ test('That is possible to select a different data model binding, and that the fi
);
});
+// Shared variables
+const pageName: string = 'Side1';
+const newInputLabel: string = 'Input Label 1';
+const dataModelBindingName: string = 'property1';
+const newDataModel: string = 'testDataModel2';
+
+// Helper functions
const navigateInToLayoutJsonFile = async (giteaPage: GiteaPage, layoutName: string) => {
await giteaPage.verifyGiteaPage();
await giteaPage.clickOnAppFilesButton();
@@ -175,24 +223,15 @@ const navigateInToLayoutJsonFile = async (giteaPage: GiteaPage, layoutName: stri
await giteaPage.clickOnLayoutJsonFile(layoutName);
};
-const addNewLabelToTreeItemComponent = async (
- uiEditorPage: UiEditorPage,
- newInputLabel: string,
-) => {
- await uiEditorPage.clickOnComponentTextConfigAccordion();
- await uiEditorPage.clickOnTitleTextButton();
- await uiEditorPage.writeTitleTextInTextarea(newInputLabel);
- await uiEditorPage.clickOnSaveNewLabelName();
- await uiEditorPage.waitForTreeItemToGetNewLabel(newInputLabel);
-
- await uiEditorPage.verifyThatTreeItemByNameIsNotVisibleInDroppableList(ComponentType.Input);
- await uiEditorPage.verifyThatTreeItemByNameIsVisibleInDroppableList(newInputLabel);
-};
-
-const openPageAccordionAndVerifyUpdatedUrl = async (
- uiEditorPage: UiEditorPage,
- pageName: string,
+const createNewDataModel = async (
+ dataModelPage: DataModelPage,
+ dataModelName: string,
): Promise => {
- await uiEditorPage.clickOnPageAccordion(pageName);
- await uiEditorPage.verifyUiEditorPage(pageName); // When clicking the page, the url is updated to include the layout
+ await dataModelPage.clickOnCreateNewDataModelButton();
+ await dataModelPage.typeDataModelName(dataModelName);
+ await dataModelPage.clickOnCreateModelButton();
+ await dataModelPage.waitForDataModelToAppear(dataModelName);
+ await dataModelPage.clickOnGenerateDataModelButton();
+ await dataModelPage.checkThatSuccessAlertIsVisibleOnScreen();
+ await dataModelPage.waitForSuccessAlertToDisappear();
};