This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new b86750af3b refactor(#3398): Add control flow syntax to icon bar and
improved e2e tests (#3399)
b86750af3b is described below
commit b86750af3bfe124e5b6131322f7c9d21733c6f88
Author: Philipp Zehnder <[email protected]>
AuthorDate: Tue Jan 7 11:20:53 2025 +0100
refactor(#3398): Add control flow syntax to icon bar and improved e2e tests
(#3399)
* refactor(#3398): Add control flow syntax to icon bar and improved e2e
tests
* refactor(#3398): Fix the test testVariousUserRoles.smoke.spec.ts
* refactor(#3398): Change implementation of NavigationUtils.ts
---
ui/cypress/support/utils/GeneralUtils.ts | 7 ---
ui/cypress/support/utils/UserUtils.ts | 2 +-
.../support/utils/navigation/NavigationUtils.ts | 59 ++++++++++++++++++++++
.../userManagement/testGroupManagement.spec.ts | 10 ++--
.../userManagement/testUserRoleConnect.spec.ts | 26 ++++++----
.../userManagement/testUserRolePipeline.spec.ts | 7 ++-
.../testVariousUserRoles.smoke.spec.ts | 35 +++++++++----
ui/package-lock.json | 4 +-
.../core/components/iconbar/iconbar.component.html | 57 +++++++++++----------
9 files changed, 143 insertions(+), 64 deletions(-)
diff --git a/ui/cypress/support/utils/GeneralUtils.ts
b/ui/cypress/support/utils/GeneralUtils.ts
index 9b0186b1f6..8db505e32b 100644
--- a/ui/cypress/support/utils/GeneralUtils.ts
+++ b/ui/cypress/support/utils/GeneralUtils.ts
@@ -20,11 +20,4 @@ export class GeneralUtils {
public static tab(identifier: string) {
return cy.dataCy(`tab-${identifier}`).click();
}
-
- public static validateAmountOfNavigationIcons(expected: number) {
- cy.dataCy('navigation-icon', { timeout: 10000 }).should(
- 'have.length',
- expected,
- );
- }
}
diff --git a/ui/cypress/support/utils/UserUtils.ts
b/ui/cypress/support/utils/UserUtils.ts
index 3f966450db..6498976d2c 100644
--- a/ui/cypress/support/utils/UserUtils.ts
+++ b/ui/cypress/support/utils/UserUtils.ts
@@ -44,7 +44,7 @@ export class UserUtils {
this.goToUserConfiguration();
// user configuration
- cy.dataCy('add-new-user').click();
+ cy.dataCy('add-new-user', { timeout: 10000 }).click();
cy.dataCy('new-user-email').type(user.email);
cy.dataCy('new-user-full-name').type(user.name);
cy.dataCy('new-user-password').type(user.password);
diff --git a/ui/cypress/support/utils/navigation/NavigationUtils.ts
b/ui/cypress/support/utils/navigation/NavigationUtils.ts
new file mode 100644
index 0000000000..8796765507
--- /dev/null
+++ b/ui/cypress/support/utils/navigation/NavigationUtils.ts
@@ -0,0 +1,59 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+export class NavigationUtils {
+ // Static variables for module names
+ public static readonly PIPELINES = 'pipelines';
+ public static readonly CONNECT = 'connect';
+ public static readonly DASHBOARD = 'dashboard';
+ public static readonly DATA_EXPLORER = 'dataexplorer';
+ public static readonly ASSET_MANAGEMENT = 'assets';
+ public static readonly CONFIGURATION = 'configuration';
+
+ public static readonly ALL_MODULES = [
+ NavigationUtils.PIPELINES,
+ NavigationUtils.CONNECT,
+ NavigationUtils.DASHBOARD,
+ NavigationUtils.DATA_EXPLORER,
+ NavigationUtils.ASSET_MANAGEMENT,
+ NavigationUtils.CONFIGURATION,
+ ];
+
+ /**
+ * Validates that only the specified navigation icons are displayed.
+ * @param displayedModules List of module names that should be visible.
+ */
+ public static validateActiveModules(displayedModules: string[]) {
+ NavigationUtils.ALL_MODULES.forEach(module => {
+ const shouldBeDisplayed = displayedModules.includes(module);
+ this.validateNavigationIcon(module, shouldBeDisplayed);
+ });
+ }
+
+ /**
+ * Validates the visibility of a navigation icon.
+ * @param icon The icon identifier.
+ * @param shown Whether the icon should be shown.
+ */
+ private static validateNavigationIcon(icon: string, shown: boolean) {
+ const expectedLength = shown ? 1 : 0;
+ cy.dataCy(`navigation-icon-${icon}`, { timeout: 10000 }).should(
+ 'have.length',
+ expectedLength,
+ );
+ }
+}
diff --git a/ui/cypress/tests/userManagement/testGroupManagement.spec.ts
b/ui/cypress/tests/userManagement/testGroupManagement.spec.ts
index 4c62669b2b..d28dacb037 100644
--- a/ui/cypress/tests/userManagement/testGroupManagement.spec.ts
+++ b/ui/cypress/tests/userManagement/testGroupManagement.spec.ts
@@ -23,8 +23,8 @@ import { ConnectUtils } from
'../../support/utils/connect/ConnectUtils';
import { PipelineUtils } from '../../support/utils/pipeline/PipelineUtils';
import { PipelineElementBuilder } from
'../../support/builder/PipelineElementBuilder';
import { PipelineBuilder } from '../../support/builder/PipelineBuilder';
-import { GeneralUtils } from '../../support/utils/GeneralUtils';
import { PermissionUtils } from '../../support/utils/user/PermissionUtils';
+import { NavigationUtils } from
'../../support/utils/navigation/NavigationUtils';
describe('Test Group Management for Pipelines', () => {
beforeEach('Setup Test', () => {
@@ -104,7 +104,10 @@ describe('Test Group Management for Pipelines', () => {
// Login as first user which belongs to user group with pipeline admin
role
UserUtils.switchUser(user);
- GeneralUtils.validateAmountOfNavigationIcons(4);
+ NavigationUtils.validateActiveModules([
+ NavigationUtils.PIPELINES,
+ NavigationUtils.CONFIGURATION,
+ ]);
// Check if pipeline is visible
PipelineUtils.goToPipelines();
@@ -119,8 +122,7 @@ describe('Test Group Management for Pipelines', () => {
// Login as user2
UserUtils.switchUser(user2);
-
- GeneralUtils.validateAmountOfNavigationIcons(3);
+ NavigationUtils.validateActiveModules([NavigationUtils.PIPELINES]);
// Check if pipeline is invisible to user2
PipelineUtils.goToPipelines();
diff --git a/ui/cypress/tests/userManagement/testUserRoleConnect.spec.ts
b/ui/cypress/tests/userManagement/testUserRoleConnect.spec.ts
index 04290d02ca..584e7eed96 100644
--- a/ui/cypress/tests/userManagement/testUserRoleConnect.spec.ts
+++ b/ui/cypress/tests/userManagement/testUserRoleConnect.spec.ts
@@ -19,10 +19,11 @@ import { UserRole } from
'../../../src/app/_enums/user-role.enum';
import { UserUtils } from '../../support/utils/UserUtils';
import { ConnectUtils } from '../../support/utils/connect/ConnectUtils';
import { PermissionUtils } from '../../support/utils/user/PermissionUtils';
-import { GeneralUtils } from '../../support/utils/GeneralUtils';
+import { NavigationUtils } from
'../../support/utils/navigation/NavigationUtils';
+import { User } from '../../support/model/User';
describe('Test User Roles for Connect', () => {
- var connectAdminUser;
+ let connectAdminUser: User;
beforeEach('Setup Test', () => {
cy.initStreamPipesTest();
connectAdminUser = UserUtils.createUser(
@@ -33,9 +34,7 @@ describe('Test User Roles for Connect', () => {
});
it('Connect admin should not see adapters of other users', () => {
- UserUtils.switchUser(connectAdminUser);
-
- GeneralUtils.validateAmountOfNavigationIcons(3);
+ switchUserAndValidateConnectModuleIsShown();
// Validate that no adapter is visible
ConnectUtils.checkAmountOfAdapters(0);
@@ -45,9 +44,7 @@ describe('Test User Roles for Connect', () => {
// Set adapter to public
PermissionUtils.markElementAsPublic();
- UserUtils.switchUser(connectAdminUser);
-
- GeneralUtils.validateAmountOfNavigationIcons(3);
+ switchUserAndValidateConnectModuleIsShown();
// Validate that adapter is visible
ConnectUtils.checkAmountOfAdapters(1);
@@ -57,11 +54,18 @@ describe('Test User Roles for Connect', () => {
// Share adapter with user
PermissionUtils.authorizeUser(connectAdminUser.email);
- UserUtils.switchUser(connectAdminUser);
-
- GeneralUtils.validateAmountOfNavigationIcons(3);
+ switchUserAndValidateConnectModuleIsShown();
// Validate that adapter is visible
ConnectUtils.checkAmountOfAdapters(1);
});
+
+ function switchUserAndValidateConnectModuleIsShown() {
+ UserUtils.switchUser(connectAdminUser);
+
+ NavigationUtils.validateActiveModules([
+ NavigationUtils.CONNECT,
+ NavigationUtils.CONFIGURATION,
+ ]);
+ }
});
diff --git a/ui/cypress/tests/userManagement/testUserRolePipeline.spec.ts
b/ui/cypress/tests/userManagement/testUserRolePipeline.spec.ts
index 3c690ffe92..0a67894ca3 100644
--- a/ui/cypress/tests/userManagement/testUserRolePipeline.spec.ts
+++ b/ui/cypress/tests/userManagement/testUserRolePipeline.spec.ts
@@ -20,9 +20,9 @@ import { UserRole } from
'../../../src/app/_enums/user-role.enum';
import { UserUtils } from '../../support/utils/UserUtils';
import { ConnectUtils } from '../../support/utils/connect/ConnectUtils';
import { PipelineUtils } from '../../support/utils/pipeline/PipelineUtils';
-import { GeneralUtils } from '../../support/utils/GeneralUtils';
import { PermissionUtils } from '../../support/utils/user/PermissionUtils';
import { PipelineBtns } from '../../support/utils/pipeline/PipelineBtns';
+import { NavigationUtils } from
'../../support/utils/navigation/NavigationUtils';
describe('Test User Roles for Pipelines', () => {
beforeEach('Setup Test', () => {
@@ -40,7 +40,10 @@ describe('Test User Roles for Pipelines', () => {
// Login as user and check if pipeline is visible to user
UserUtils.switchUser(newUser);
- GeneralUtils.validateAmountOfNavigationIcons(4);
+ NavigationUtils.validateActiveModules([
+ NavigationUtils.PIPELINES,
+ NavigationUtils.CONFIGURATION,
+ ]);
PipelineUtils.goToPipelines();
PipelineUtils.checkAmountOfPipelinesPipeline(0);
diff --git a/ui/cypress/tests/userManagement/testVariousUserRoles.smoke.spec.ts
b/ui/cypress/tests/userManagement/testVariousUserRoles.smoke.spec.ts
index 4c00e01667..9ac2b37578 100644
--- a/ui/cypress/tests/userManagement/testVariousUserRoles.smoke.spec.ts
+++ b/ui/cypress/tests/userManagement/testVariousUserRoles.smoke.spec.ts
@@ -19,7 +19,7 @@
import { UserBuilder } from '../../support/builder/UserBuilder';
import { UserRole } from '../../../src/app/_enums/user-role.enum';
import { UserUtils } from '../../support/utils/UserUtils';
-import { GeneralUtils } from '../../support/utils/GeneralUtils';
+import { NavigationUtils } from
'../../support/utils/navigation/NavigationUtils';
const testedRoles = [
UserRole.ROLE_PIPELINE_ADMIN,
@@ -29,7 +29,7 @@ const testedRoles = [
UserRole.ROLE_ASSET_ADMIN,
];
-for (var i = 0; i < testedRoles.length; i++) {
+for (let i = 0; i < testedRoles.length; i++) {
const testRole = testedRoles[i];
describe('Test User Role ' + testedRoles[i], () => {
beforeEach('Setup Test', () => {
@@ -37,10 +37,12 @@ for (var i = 0; i < testedRoles.length; i++) {
});
it('Perform Test', () => {
- // Add new user
UserUtils.goToUserConfiguration();
- GeneralUtils.validateAmountOfNavigationIcons(8);
+ // validate navigation bar shows all modules
+ NavigationUtils.validateActiveModules(NavigationUtils.ALL_MODULES);
+
+ // Add new user
cy.dataCy('user-accounts-table-row', { timeout: 10000 }).should(
'have.length',
1,
@@ -66,15 +68,30 @@ for (var i = 0; i < testedRoles.length; i++) {
// Check if every role displays correct navigation menu
if (testRole == UserRole.ROLE_PIPELINE_ADMIN) {
- GeneralUtils.validateAmountOfNavigationIcons(4);
+ NavigationUtils.validateActiveModules([
+ NavigationUtils.PIPELINES,
+ NavigationUtils.CONFIGURATION,
+ ]);
} else if (testRole == UserRole.ROLE_DASHBOARD_ADMIN) {
- GeneralUtils.validateAmountOfNavigationIcons(4);
+ NavigationUtils.validateActiveModules([
+ NavigationUtils.PIPELINES,
+ NavigationUtils.DASHBOARD,
+ ]);
} else if (testRole == UserRole.ROLE_DATA_EXPLORER_ADMIN) {
- GeneralUtils.validateAmountOfNavigationIcons(4);
+ NavigationUtils.validateActiveModules([
+ NavigationUtils.PIPELINES,
+ NavigationUtils.DATA_EXPLORER,
+ ]);
} else if (testRole == UserRole.ROLE_CONNECT_ADMIN) {
- GeneralUtils.validateAmountOfNavigationIcons(3);
+ NavigationUtils.validateActiveModules([
+ NavigationUtils.CONNECT,
+ NavigationUtils.CONFIGURATION,
+ ]);
} else if (testRole == UserRole.ROLE_ASSET_ADMIN) {
- GeneralUtils.validateAmountOfNavigationIcons(3);
+ NavigationUtils.validateActiveModules([
+ NavigationUtils.ASSET_MANAGEMENT,
+ NavigationUtils.CONFIGURATION,
+ ]);
}
// Login as admin and delete user
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 054742cf18..cad7803cb0 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "apache-streampipes",
- "version": "0.97.0-SNAPSHOT",
+ "version": "0.98.0-SNAPSHOT",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "apache-streampipes",
- "version": "0.97.0-SNAPSHOT",
+ "version": "0.98.0-SNAPSHOT",
"dependencies": {
"@ali-hm/angular-tree-component": "12.0.5",
"@angular-architects/native-federation": "^17.1.8",
diff --git a/ui/src/app/core/components/iconbar/iconbar.component.html
b/ui/src/app/core/components/iconbar/iconbar.component.html
index 85d6238171..e90d1b9d12 100644
--- a/ui/src/app/core/components/iconbar/iconbar.component.html
+++ b/ui/src/app/core/components/iconbar/iconbar.component.html
@@ -17,34 +17,35 @@
-->
<div style="padding-top: 0" fxFlex="100" fxLayout="column">
- <div *ngFor="let item of menu">
- <div
- *ngIf="item.visible"
- style="min-width: 0; padding: 5px 0"
- [ngClass]="
- item.link === activePage
- ? 'sp-navbar-item-selected'
- : 'sp-navbar-item'
- "
- >
- <button
- mat-icon-button
- class="button-margin-iconbar iconbar-size"
- (click)="go(item.link)"
- matTooltip="{{ item.title }}"
- matTooltipPosition="right"
+ @for (item of menu; track item.title) {
+ @if (item.visible) {
+ <div
+ style="min-width: 0; padding: 5px 0"
+ [ngClass]="
+ item.link === activePage
+ ? 'sp-navbar-item-selected'
+ : 'sp-navbar-item'
+ "
>
- <mat-icon
- [ngClass]="
- item.link === activePage
- ? 'sp-navbar-icon-selected'
- : 'sp-navbar-icon'
- "
- data-cy="navigation-icon"
+ <button
+ mat-icon-button
+ class="button-margin-iconbar iconbar-size"
+ (click)="go(item.link)"
+ matTooltip="{{ item.title }}"
+ matTooltipPosition="right"
>
- {{ item.icon }}
- </mat-icon>
- </button>
- </div>
- </div>
+ <mat-icon
+ [ngClass]="
+ item.link === activePage
+ ? 'sp-navbar-icon-selected'
+ : 'sp-navbar-icon'
+ "
+ [attr.data-cy]="'navigation-icon-' + item.link"
+ >
+ {{ item.icon }}
+ </mat-icon>
+ </button>
+ </div>
+ }
+ }
</div>
