mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +01:00 
			
		
		
		
	Add cypress tests for project access page (#1215)
* Add tests * Some fixes * Fix test
This commit is contained in:
		
							parent
							
								
									3200fee963
								
							
						
					
					
						commit
						5ffb63e342
					
				
							
								
								
									
										25
									
								
								frontend/.github/workflows/e2e.project-access.yml
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						
									
										25
									
								
								frontend/.github/workflows/e2e.project-access.yml
									
									
									
									
										vendored
									
									
										Normal file
									
								
							@ -0,0 +1,25 @@
 | 
			
		||||
name: e2e:project-access
 | 
			
		||||
# https://docs.github.com/en/actions/reference/events-that-trigger-workflows
 | 
			
		||||
on: [deployment_status]
 | 
			
		||||
jobs:
 | 
			
		||||
  e2e:
 | 
			
		||||
    # only runs this job on successful deploy
 | 
			
		||||
    if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success'
 | 
			
		||||
    runs-on: ubuntu-latest
 | 
			
		||||
    steps:
 | 
			
		||||
      - name: Dump GitHub context
 | 
			
		||||
        env:
 | 
			
		||||
          GITHUB_CONTEXT: ${{ toJson(github) }}
 | 
			
		||||
        run: |
 | 
			
		||||
          echo "$GITHUB_CONTEXT"
 | 
			
		||||
      - name: Checkout
 | 
			
		||||
        uses: actions/checkout@v3
 | 
			
		||||
      - name: Run Cypress
 | 
			
		||||
        uses: cypress-io/github-action@v2
 | 
			
		||||
        with:
 | 
			
		||||
          env: AUTH_USER=admin,AUTH_PASSWORD=unleash4all
 | 
			
		||||
          config: baseUrl=${{ github.event.deployment_status.target_url }}
 | 
			
		||||
          record: true
 | 
			
		||||
          spec: cypress/integration/projects/access/project-access.spec.ts
 | 
			
		||||
        env:
 | 
			
		||||
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
 | 
			
		||||
@ -0,0 +1,147 @@
 | 
			
		||||
/// <reference types="cypress" />
 | 
			
		||||
 | 
			
		||||
import {
 | 
			
		||||
    PA_ASSIGN_BUTTON_ID,
 | 
			
		||||
    PA_ASSIGN_CREATE_ID,
 | 
			
		||||
    PA_EDIT_BUTTON_ID,
 | 
			
		||||
    PA_REMOVE_BUTTON_ID,
 | 
			
		||||
    PA_ROLE_ID,
 | 
			
		||||
    PA_USERS_GROUPS_ID,
 | 
			
		||||
    PA_USERS_GROUPS_TITLE_ID,
 | 
			
		||||
} from '../../../../src/utils/testIds';
 | 
			
		||||
 | 
			
		||||
export {};
 | 
			
		||||
const baseUrl = Cypress.config().baseUrl;
 | 
			
		||||
const randomId = String(Math.random()).split('.')[1];
 | 
			
		||||
const groupAndProjectName = `group-e2e-${randomId}`;
 | 
			
		||||
const userName = `user-e2e-${randomId}`;
 | 
			
		||||
const groupIds: any[] = [];
 | 
			
		||||
const userIds: any[] = [];
 | 
			
		||||
 | 
			
		||||
// Disable all active splash pages by visiting them.
 | 
			
		||||
const disableActiveSplashScreens = () => {
 | 
			
		||||
    cy.visit(`/splash/operators`);
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
describe('project-access', () => {
 | 
			
		||||
    before(() => {
 | 
			
		||||
        disableActiveSplashScreens();
 | 
			
		||||
        cy.login();
 | 
			
		||||
        for (let i = 1; i <= 2; i++) {
 | 
			
		||||
            const name = `${i}-${userName}`;
 | 
			
		||||
            cy.request('POST', `${baseUrl}/api/admin/user-admin`, {
 | 
			
		||||
                name: name,
 | 
			
		||||
                email: `${name}@test.com`,
 | 
			
		||||
                sendEmail: false,
 | 
			
		||||
                rootRole: 3,
 | 
			
		||||
            })
 | 
			
		||||
                .as(name)
 | 
			
		||||
                .then(response => {
 | 
			
		||||
                    const id = response.body.id;
 | 
			
		||||
                    userIds.push(id);
 | 
			
		||||
                    cy.request('POST', `${baseUrl}/api/admin/groups`, {
 | 
			
		||||
                        name: `${i}-${groupAndProjectName}`,
 | 
			
		||||
                        users: [{ user: { id: id } }],
 | 
			
		||||
                    }).then(response => {
 | 
			
		||||
                        const id = response.body.id;
 | 
			
		||||
                        groupIds.push(id);
 | 
			
		||||
                    });
 | 
			
		||||
                });
 | 
			
		||||
        }
 | 
			
		||||
        cy.request('POST', `${baseUrl}/api/admin/projects`, {
 | 
			
		||||
            id: groupAndProjectName,
 | 
			
		||||
            name: groupAndProjectName,
 | 
			
		||||
        });
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    after(() => {
 | 
			
		||||
        userIds.forEach(id =>
 | 
			
		||||
            cy.request('DELETE', `${baseUrl}/api/admin/user-admin/${id}`)
 | 
			
		||||
        );
 | 
			
		||||
        groupIds.forEach(id =>
 | 
			
		||||
            cy.request('DELETE', `${baseUrl}/api/admin/groups/${id}`)
 | 
			
		||||
        );
 | 
			
		||||
 | 
			
		||||
        cy.request(
 | 
			
		||||
            'DELETE',
 | 
			
		||||
            `${baseUrl}/api/admin/projects/${groupAndProjectName}`
 | 
			
		||||
        );
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    beforeEach(() => {
 | 
			
		||||
        cy.login();
 | 
			
		||||
        cy.visit(`/projects/${groupAndProjectName}/access`);
 | 
			
		||||
        if (document.querySelector("[data-testid='CLOSE_SPLASH']")) {
 | 
			
		||||
            cy.get("[data-testid='CLOSE_SPLASH']").click();
 | 
			
		||||
        }
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    it('can assign permissions to user', () => {
 | 
			
		||||
        cy.get(`[data-testid='${PA_ASSIGN_BUTTON_ID}']`).click();
 | 
			
		||||
 | 
			
		||||
        cy.intercept(
 | 
			
		||||
            'POST',
 | 
			
		||||
            `/api/admin/projects/${groupAndProjectName}/role/4/access`
 | 
			
		||||
        ).as('assignAccess');
 | 
			
		||||
 | 
			
		||||
        cy.get(`[data-testid='${PA_USERS_GROUPS_ID}']`).click();
 | 
			
		||||
        cy.contains(`1-${userName}`).click();
 | 
			
		||||
        cy.get(`[data-testid='${PA_USERS_GROUPS_TITLE_ID}']`).click();
 | 
			
		||||
        cy.get(`[data-testid='${PA_ROLE_ID}']`).click();
 | 
			
		||||
        cy.contains('full control over the project').click({ force: true });
 | 
			
		||||
 | 
			
		||||
        cy.get(`[data-testid='${PA_ASSIGN_CREATE_ID}']`).click();
 | 
			
		||||
        cy.wait('@assignAccess');
 | 
			
		||||
        cy.contains(`1-${userName}`);
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    it('can assign permissions to group', () => {
 | 
			
		||||
        cy.get(`[data-testid='${PA_ASSIGN_BUTTON_ID}']`).click();
 | 
			
		||||
 | 
			
		||||
        cy.intercept(
 | 
			
		||||
            'POST',
 | 
			
		||||
            `/api/admin/projects/${groupAndProjectName}/role/4/access`
 | 
			
		||||
        ).as('assignAccess');
 | 
			
		||||
 | 
			
		||||
        cy.get(`[data-testid='${PA_USERS_GROUPS_ID}']`).click();
 | 
			
		||||
        cy.contains(`1-${groupAndProjectName}`).click({ force: true });
 | 
			
		||||
        cy.get(`[data-testid='${PA_USERS_GROUPS_TITLE_ID}']`).click();
 | 
			
		||||
        cy.get(`[data-testid='${PA_ROLE_ID}']`).click();
 | 
			
		||||
        cy.contains('full control over the project').click({ force: true });
 | 
			
		||||
 | 
			
		||||
        cy.get(`[data-testid='${PA_ASSIGN_CREATE_ID}']`).click();
 | 
			
		||||
        cy.wait('@assignAccess');
 | 
			
		||||
        cy.contains(`1-${groupAndProjectName}`);
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    it('can edit role', () => {
 | 
			
		||||
        cy.get(`[data-testid='${PA_EDIT_BUTTON_ID}']`).first().click();
 | 
			
		||||
 | 
			
		||||
        cy.intercept(
 | 
			
		||||
            'PUT',
 | 
			
		||||
            `/api/admin/projects/${groupAndProjectName}/groups/${groupIds[0]}/roles/5`
 | 
			
		||||
        ).as('editAccess');
 | 
			
		||||
 | 
			
		||||
        cy.get(`[data-testid='${PA_ROLE_ID}']`).click();
 | 
			
		||||
        cy.contains('within a project are allowed').click({ force: true });
 | 
			
		||||
 | 
			
		||||
        cy.get(`[data-testid='${PA_ASSIGN_CREATE_ID}']`).click();
 | 
			
		||||
        cy.wait('@editAccess');
 | 
			
		||||
        cy.get("td span:contains('Owner')").should('have.length', 2);
 | 
			
		||||
        cy.get("td span:contains('Member')").should('have.length', 1);
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    it('can remove access', () => {
 | 
			
		||||
        cy.get(`[data-testid='${PA_REMOVE_BUTTON_ID}']`).first().click();
 | 
			
		||||
 | 
			
		||||
        cy.intercept(
 | 
			
		||||
            'DELETE',
 | 
			
		||||
            `/api/admin/projects/${groupAndProjectName}/groups/${groupIds[0]}/roles/5`
 | 
			
		||||
        ).as('removeAccess');
 | 
			
		||||
 | 
			
		||||
        cy.contains("Yes, I'm sure").click();
 | 
			
		||||
 | 
			
		||||
        cy.wait('@removeAccess');
 | 
			
		||||
        cy.contains(`1-${groupAndProjectName} has been removed from project`);
 | 
			
		||||
    });
 | 
			
		||||
});
 | 
			
		||||
@ -27,6 +27,12 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 | 
			
		||||
import { ProjectRoleDescription } from './ProjectRoleDescription/ProjectRoleDescription';
 | 
			
		||||
import { useNavigate } from 'react-router-dom';
 | 
			
		||||
import { GO_BACK } from 'constants/navigate';
 | 
			
		||||
import {
 | 
			
		||||
    PA_ASSIGN_CREATE_ID,
 | 
			
		||||
    PA_ROLE_ID,
 | 
			
		||||
    PA_USERS_GROUPS_ID,
 | 
			
		||||
    PA_USERS_GROUPS_TITLE_ID,
 | 
			
		||||
} from 'utils/testIds';
 | 
			
		||||
 | 
			
		||||
const StyledForm = styled('form')(() => ({
 | 
			
		||||
    display: 'flex',
 | 
			
		||||
@ -282,11 +288,14 @@ export const ProjectAccessAssign = ({
 | 
			
		||||
            >
 | 
			
		||||
                <StyledForm onSubmit={handleSubmit}>
 | 
			
		||||
                    <div>
 | 
			
		||||
                        <StyledInputDescription>
 | 
			
		||||
                        <StyledInputDescription
 | 
			
		||||
                            data-testid={PA_USERS_GROUPS_TITLE_ID}
 | 
			
		||||
                        >
 | 
			
		||||
                            Select the {entityType}
 | 
			
		||||
                        </StyledInputDescription>
 | 
			
		||||
                        <StyledAutocompleteWrapper>
 | 
			
		||||
                            <Autocomplete
 | 
			
		||||
                                data-testid={PA_USERS_GROUPS_ID}
 | 
			
		||||
                                size="small"
 | 
			
		||||
                                multiple
 | 
			
		||||
                                openOnFocus
 | 
			
		||||
@ -341,6 +350,7 @@ export const ProjectAccessAssign = ({
 | 
			
		||||
                        </StyledInputDescription>
 | 
			
		||||
                        <StyledAutocompleteWrapper>
 | 
			
		||||
                            <Autocomplete
 | 
			
		||||
                                data-testid={PA_ROLE_ID}
 | 
			
		||||
                                size="small"
 | 
			
		||||
                                openOnFocus
 | 
			
		||||
                                value={role}
 | 
			
		||||
@ -361,6 +371,7 @@ export const ProjectAccessAssign = ({
 | 
			
		||||
 | 
			
		||||
                    <StyledButtonContainer>
 | 
			
		||||
                        <Button
 | 
			
		||||
                            data-testid={PA_ASSIGN_CREATE_ID}
 | 
			
		||||
                            type="submit"
 | 
			
		||||
                            variant="contained"
 | 
			
		||||
                            color="primary"
 | 
			
		||||
 | 
			
		||||
@ -44,6 +44,11 @@ import { ProjectAccessEditUser } from 'component/project/ProjectAccess/ProjectAc
 | 
			
		||||
import { ProjectAccessEditGroup } from 'component/project/ProjectAccess/ProjectAccessEditGroup/ProjectAccessEditGroup';
 | 
			
		||||
import useHiddenColumns from 'hooks/useHiddenColumns';
 | 
			
		||||
import { ProjectAccessRoleCell } from './ProjectAccessRoleCell/ProjectAccessRoleCell';
 | 
			
		||||
import {
 | 
			
		||||
    PA_ASSIGN_BUTTON_ID,
 | 
			
		||||
    PA_EDIT_BUTTON_ID,
 | 
			
		||||
    PA_REMOVE_BUTTON_ID,
 | 
			
		||||
} from 'utils/testIds';
 | 
			
		||||
 | 
			
		||||
export type PageQueryType = Partial<
 | 
			
		||||
    Record<'sort' | 'order' | 'search', string>
 | 
			
		||||
@ -213,6 +218,7 @@ export const ProjectAccessTable: VFC = () => {
 | 
			
		||||
                }) => (
 | 
			
		||||
                    <ActionCell>
 | 
			
		||||
                        <PermissionIconButton
 | 
			
		||||
                            data-testid={PA_EDIT_BUTTON_ID}
 | 
			
		||||
                            component={Link}
 | 
			
		||||
                            permission={UPDATE_PROJECT}
 | 
			
		||||
                            projectId={projectId}
 | 
			
		||||
@ -230,6 +236,7 @@ export const ProjectAccessTable: VFC = () => {
 | 
			
		||||
                            <Edit />
 | 
			
		||||
                        </PermissionIconButton>
 | 
			
		||||
                        <PermissionIconButton
 | 
			
		||||
                            data-testid={PA_REMOVE_BUTTON_ID}
 | 
			
		||||
                            permission={UPDATE_PROJECT}
 | 
			
		||||
                            projectId={projectId}
 | 
			
		||||
                            onClick={() => {
 | 
			
		||||
@ -379,6 +386,7 @@ export const ProjectAccessTable: VFC = () => {
 | 
			
		||||
                                Icon={Add}
 | 
			
		||||
                                permission={UPDATE_PROJECT}
 | 
			
		||||
                                projectId={projectId}
 | 
			
		||||
                                data-testid={PA_ASSIGN_BUTTON_ID}
 | 
			
		||||
                            >
 | 
			
		||||
                                Assign {entityType}
 | 
			
		||||
                            </ResponsiveButton>
 | 
			
		||||
 | 
			
		||||
@ -22,6 +22,15 @@ export const UG_DELETE_BTN_ID = 'UG_DELETE_BTN_ID';
 | 
			
		||||
export const UG_EDIT_USERS_BTN_ID = 'UG_EDIT_USERS_BTN_ID';
 | 
			
		||||
export const UG_REMOVE_USER_BTN_ID = 'UG_REMOVE_USER_BTN_ID';
 | 
			
		||||
 | 
			
		||||
/* PROJECT ACCESS */
 | 
			
		||||
export const PA_ASSIGN_BUTTON_ID = 'PA_ASSIGN_BUTTON_ID';
 | 
			
		||||
export const PA_USERS_GROUPS_ID = 'PA_USERS_GROUPS_ID';
 | 
			
		||||
export const PA_ROLE_ID = 'PA_ROLE_ID';
 | 
			
		||||
export const PA_ASSIGN_CREATE_ID = 'PA_ASSIGN_CREATE_ID';
 | 
			
		||||
export const PA_USERS_GROUPS_TITLE_ID = 'PA_USERS_GROUPS_TITLE_ID';
 | 
			
		||||
export const PA_EDIT_BUTTON_ID = 'PA_EDIT_BUTTON_ID';
 | 
			
		||||
export const PA_REMOVE_BUTTON_ID = 'PA_REMOVE_BUTTON_ID';
 | 
			
		||||
 | 
			
		||||
/* SEGMENT */
 | 
			
		||||
export const SEGMENT_NAME_ID = 'SEGMENT_NAME_ID';
 | 
			
		||||
export const SEGMENT_DESC_ID = 'SEGMENT_DESC_ID';
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user