Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(#3398): Add control flow syntax to icon bar and improved e2e tests #3399

Merged
merged 3 commits into from
Jan 7, 2025
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions ui/cypress/support/utils/GeneralUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);
}
}
115 changes: 115 additions & 0 deletions ui/cypress/support/utils/navigation/NavigationUtils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
/*
* 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 {
/**
* Validates that the Pipelines navigation icon is displayed.
*/
public static pipelinesIsDisplayed() {
this.validateNavigationIcon('pipelines', true);
}

/**
* Validates that the Pipelines navigation icon is not displayed.
*/
public static pipelinesNotDisplayed() {
this.validateNavigationIcon('pipelines', false);
}

/**
* Validates that the Connect navigation icon is displayed.
*/
public static connectIsDisplayed() {
this.validateNavigationIcon('connect', true);
}

/**
* Validates that the Connect navigation icon is not displayed.
*/
public static connectNotDisplayed() {
this.validateNavigationIcon('connect', false);
}

/**
* Validates that the Dashboard navigation icon is displayed.
*/
public static dashboardIsDisplayed() {
this.validateNavigationIcon('dashboard', true);
}

/**
* Validates that the Dashboard navigation icon is not displayed.
*/
public static dashboardNotDisplayed() {
this.validateNavigationIcon('dashboard', false);
}

/**
* Validates that the Data Explorer navigation icon is displayed.
*/
public static dataExplorerIsDisplayed() {
this.validateNavigationIcon('dataexplorer', true);
}

/**
* Validates that the Data Explorer navigation icon is not displayed.
*/
public static dataExplorerNotDisplayed() {
this.validateNavigationIcon('dataexplorer', false);
}

/**
* Validates that the Asset Management navigation icon is displayed.
*/
public static assetManagementIsDisplayed() {
this.validateNavigationIcon('assets', true);
}

/**
* Validates that the Asset Management navigation icon is not displayed.
*/
public static assetManagementNotDisplayed() {
this.validateNavigationIcon('assets', false);
}

/**
* Validates that the Configuration navigation icon is displayed.
*/
public static configurationIsDisplayed() {
this.validateNavigationIcon('configuration', true);
}

/**
* Validates that the Configuration navigation icon is not displayed.
*/
public static configurationNotDisplayed() {
this.validateNavigationIcon('configuration', false);
}

/**
* 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,
);
}
}
9 changes: 5 additions & 4 deletions ui/cypress/tests/userManagement/testGroupManagement.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -104,7 +104,8 @@ 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.pipelinesIsDisplayed();
NavigationUtils.configurationIsDisplayed();

// Check if pipeline is visible
PipelineUtils.goToPipelines();
Expand All @@ -119,8 +120,8 @@ describe('Test Group Management for Pipelines', () => {

// Login as user2
UserUtils.switchUser(user2);

GeneralUtils.validateAmountOfNavigationIcons(3);
NavigationUtils.pipelinesIsDisplayed();
NavigationUtils.configurationNotDisplayed();

// Check if pipeline is invisible to user2
PipelineUtils.goToPipelines();
Expand Down
8 changes: 4 additions & 4 deletions ui/cypress/tests/userManagement/testUserRoleConnect.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ 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';

describe('Test User Roles for Connect', () => {
var connectAdminUser;
Expand All @@ -35,7 +35,7 @@ describe('Test User Roles for Connect', () => {
it('Connect admin should not see adapters of other users', () => {
UserUtils.switchUser(connectAdminUser);

GeneralUtils.validateAmountOfNavigationIcons(3);
NavigationUtils.connectIsDisplayed();

// Validate that no adapter is visible
ConnectUtils.checkAmountOfAdapters(0);
Expand All @@ -47,7 +47,7 @@ describe('Test User Roles for Connect', () => {

UserUtils.switchUser(connectAdminUser);

GeneralUtils.validateAmountOfNavigationIcons(3);
NavigationUtils.connectIsDisplayed();

// Validate that adapter is visible
ConnectUtils.checkAmountOfAdapters(1);
Expand All @@ -59,7 +59,7 @@ describe('Test User Roles for Connect', () => {

UserUtils.switchUser(connectAdminUser);

GeneralUtils.validateAmountOfNavigationIcons(3);
NavigationUtils.connectIsDisplayed();

// Validate that adapter is visible
ConnectUtils.checkAmountOfAdapters(1);
Expand Down
4 changes: 2 additions & 2 deletions ui/cypress/tests/userManagement/testUserRolePipeline.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -40,7 +40,7 @@ describe('Test User Roles for Pipelines', () => {
// Login as user and check if pipeline is visible to user
UserUtils.switchUser(newUser);

GeneralUtils.validateAmountOfNavigationIcons(4);
NavigationUtils.pipelinesIsDisplayed();

PipelineUtils.goToPipelines();
PipelineUtils.checkAmountOfPipelinesPipeline(0);
Expand Down
25 changes: 16 additions & 9 deletions ui/cypress/tests/userManagement/testVariousUserRoles.smoke.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -29,18 +29,25 @@ 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', () => {
cy.initStreamPipesTest();
});

it('Perform Test', () => {
// Add new user
UserUtils.goToUserConfiguration();
GeneralUtils.validateAmountOfNavigationIcons(8);

// validate navigation bar shows all modules
NavigationUtils.pipelinesIsDisplayed();
NavigationUtils.connectIsDisplayed();
NavigationUtils.dashboardIsDisplayed();
NavigationUtils.dataExplorerIsDisplayed();
NavigationUtils.assetManagementIsDisplayed();
NavigationUtils.configurationIsDisplayed();

// Add new user
cy.dataCy('user-accounts-table-row', { timeout: 10000 }).should(
'have.length',
1,
Expand All @@ -66,15 +73,15 @@ 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.pipelinesIsDisplayed();
} else if (testRole == UserRole.ROLE_DASHBOARD_ADMIN) {
GeneralUtils.validateAmountOfNavigationIcons(4);
NavigationUtils.dashboardIsDisplayed();
} else if (testRole == UserRole.ROLE_DATA_EXPLORER_ADMIN) {
GeneralUtils.validateAmountOfNavigationIcons(4);
NavigationUtils.dataExplorerIsDisplayed();
} else if (testRole == UserRole.ROLE_CONNECT_ADMIN) {
GeneralUtils.validateAmountOfNavigationIcons(3);
NavigationUtils.connectIsDisplayed();
} else if (testRole == UserRole.ROLE_ASSET_ADMIN) {
GeneralUtils.validateAmountOfNavigationIcons(3);
NavigationUtils.assetManagementIsDisplayed();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Theoretically, during the test for the ROLE_ASSET, all navigation icons could be visible (including those that shouldn't be), and the test would still pass, even though a user with the Asset-role shouldn't see all the icons, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, you are right. I thought of that, but then we would always need a block like this:

NavigationUtils.pipelinesIsDisplayed();
NavigationUtils.connectIsDisplayed();
NavigationUtils.dashboardIsDisplayed();
NavigationUtils.dataExplorerIsDisplayed();
NavigationUtils.assetManagementNotDisplayed();
NavigationUtils.configurationIsDisplayed();

This is quite hard to read and understand.

I could change the API of NavigationUtils to take a list of strings representing all the modules that should be displayed. This way, we can validate that only the specified modules are shown. Additionally, I could add all the module names as static variables to the class to make the API easier to use.

Updated API Code

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';

    /**
     * Validates that only the specified navigation icons are displayed.
     * @param displayedModules List of module names that should be visible.
     */
    public static validateActiveModules(displayedModules: string[]) {
        const allModules = [
            NavigationUtils.PIPELINES,
            NavigationUtils.CONNECT,
            NavigationUtils.DASHBOARD,
            NavigationUtils.DATA_EXPLORER,
            NavigationUtils.ASSET_MANAGEMENT,
            NavigationUtils.CONFIGURATION,
        ];

        allModules.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,
        );
    }
}

Usage Example

// Validate that only the specified modules are displayed
NavigationUtils.validateActiveModules([
    NavigationUtils.PIPELINES,
    NavigationUtils.CONNECT,
    NavigationUtils.DASHBOARD,
    NavigationUtils.CONFIGURATION,
]);

What do you think?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this looks great! I believe this approach makes it easier to verify that the user roles behave as expected.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Marcelfrueh, I have changed the code accordingly. Please take a look at this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

}

// Login as admin and delete user
Expand Down
4 changes: 2 additions & 2 deletions ui/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

57 changes: 29 additions & 28 deletions ui/src/app/core/components/iconbar/iconbar.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Loading