Skip to content

Commit

Permalink
Team groups follow-up
Browse files Browse the repository at this point in the history 
- fix create group dialog application selector not closing after selection
- adding explicit selectors for create dialog
- fix page title and route to match nomenclature
- adding e2e tests
  • Loading branch information
@cstns
cstns committed Jan 16, 2025
1 parent a08ba1b commit 0524fff
Show file tree
Hide file tree
Showing 3 changed files with 200 additions and 20 deletions.
44 changes: 26 additions & 18 deletions frontend/src/pages/team/DeviceGroups/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,43 +65,51 @@
<p>Groups can then be set as the target in a DevOps Pipeline to update multiple devices in a single operation</p>
</template>
<template #actions>
<ff-button class="center" @click="showCreateDeviceGroupDialog">Create Group</ff-button>
<ff-button class="center" data-action="create-device-group" @click="showCreateDeviceGroupDialog">
Create Group
</ff-button>
</template>
</EmptyState>
</template>
</div>
</template>
</ff-page>
<ff-dialog ref="create-dialog" class="ff-dialog-box--info" header="Create Group">
<ff-dialog ref="create-dialog" class="ff-dialog-box--info" header="Create Group" data-dialog="create-group">
<template #default>
<slot name="helptext">
<p>Enter the name and description of the Device Group to create.</p>
</slot>
<div class="flex gap-4">
<div class="flex-grow">
<div class="form-row max-w-sm mb-2">
<label>
<span class="block mb-1">
Application
</span>
<ff-listbox
v-model="input.application"
:options="applicationOptions"
data-el="snapshots-list"
label-key="label"
option-title-key="description"
class="flex-grow w-full"
/>
</label>
<label class="block text-sm font-medium mb-1">Application</label>
<ff-listbox
v-model="input.application"
:options="applicationOptions"
data-el="applications-list"
class="flex-grow w-full"
/>
</div>
<FormRow v-model="input.name" class="mb-2" :error="!input.name ? 'required' : ''" data-form="name">Name</FormRow>
<FormRow v-model="input.description" data-form="name">Description</FormRow>
<FormRow v-model="input.description" data-form="description">Description</FormRow>
</div>
</div>
</template>
<template #actions>
<ff-button kind="secondary" @click="$refs['create-dialog'].close()">Cancel</ff-button>
<ff-button kind="primary" @click="createDeviceGroup">Create</ff-button>
<ff-button
kind="secondary"
data-action="dialog-cancel"
@click="$refs['create-dialog'].close()"
>
Cancel
</ff-button>
<ff-button
kind="primary"
data-action="dialog-confirm"
@click="createDeviceGroup"
>
Create
</ff-button>
</template>
</ff-dialog>
</template>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/team/routes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,10 +219,10 @@ export default [
},
{
name: 'device-groups',
path: 'device-groups',
path: 'groups',
component: DeviceGroups,
meta: {
title: 'Team - Remote Instances Groups'
title: 'Team - Groups'
}
}
]
Expand Down
172 changes: 172 additions & 0 deletions test/e2e/frontend/cypress/tests/team/groups.spec.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
describe('FlowForge - Groups', () => {
describe('Teams with the groups feature disabled', () => {
it('should have the groups menu entry in the sidebar and display the feature banner', () => {
cy.login('bob', 'bbPassword')
cy.home()

// check for menu entry
cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').should('exist')
cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').should('be.visible')

// check for premium feature marking
cy.get('[data-el="left-drawer"] [data-nav="device-groups"] [data-el="premium-feature"]').should('exist')
cy.get('[data-el="left-drawer"] [data-nav="device-groups"] [data-el="premium-feature"]').should('be.visible')

cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').click()

cy.url().should('include', '/groups')

cy.get('[data-cy="page-name"]').should('contain', 'Groups')
cy.get('[data-el="page-banner-feature-unavailable-to-team"]').should('be.visible')
cy.get('[data-el="empty-state"]').should('be.visible')
cy.get('[data-el="empty-state"]').should('contain', 'Groups Not Available')

cy.get('[data-action="create-device-group"]').should('not.exist')
})
})

describe('Teams with the groups feature enabled', () => {
beforeEach(() => {
cy.intercept('/api/*/teams/*', (req) => {
req.reply((response) => {
response.body.type.properties.features.deviceGroups = true
return response
})
}).as('enableTeamGroups')

cy.login('bob', 'bbPassword')
cy.home()
cy.wait('@enableTeamGroups')
})

it('should have the groups menu entry in the sidebar and display an empty state message', () => {
// check for menu entry
cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').should('exist')
cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').should('be.visible')

// check for premium feature marking
cy.get('[data-el="left-drawer"] [data-nav="device-groups"] [data-el="premium-feature"]').should('not.exist')

cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').click()

cy.url().should('include', '/groups')

cy.get('[data-el="empty-state"]').should('be.visible')
cy.get('[data-el="empty-state"]').should('contain', 'Start building your Groups')
cy.get('[data-el="empty-state"] [data-action="create-device-group"]').should('exist')
cy.get('[data-el="empty-state"] [data-action="create-device-group"]').should('be.enabled')
})

it('should allow users to create groups when they don\'t have any', () => {
cy.intercept('POST', '/api/*/applications/*/device-groups', {
description: '',
name: 'A new group'
}).as('createGroup')
cy.intercept('GET', '/api/*/teams/*/device-groups', {
meta: {},
count: 0,
groups: []
})
.as('getGroups')
cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').click()

cy.get('[data-dialog="create-group"]').should('exist')
cy.get('[data-dialog="create-group"]').should('not.be.visible')

cy.get('[data-el="empty-state"] [data-action="create-device-group"]').should('exist')
cy.get('[data-el="empty-state"] [data-action="create-device-group"]').should('be.enabled')

cy.get('[data-el="empty-state"] [data-action="create-device-group"]').click()

cy.get('[data-dialog="create-group"]').should('be.visible')
cy.get('[data-dialog="create-group"]').within(() => {
cy.get('[data-el="applications-list"]').click()
cy.get('[data-el="applications-list"]').within(() => {
cy.get('[data-option="application-1"]').click()
})
cy.get('[data-form="name"] input').type('A new group')
cy.get('[data-action="dialog-confirm"]').click()
})

cy.wait('@createGroup')
cy.wait('@getGroups')
})

it('should display the groups list table when groups are present', () => {
cy.intercept('GET', '/api/*/teams/*/device-groups', {
meta: {},
count: 0,
groups: [{
id: 'id',
name: 'a group',
description: 'group description',
deviceCount: 2,
targetSnapshot: null,
application: {
id: 'id',
name: 'application-1'
}
}]
}).as('getGroups')
cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').click()

cy.wait('@getGroups')

cy.get('[data-el="empty-state"]').should('not.exist')
cy.get('[data-el="device-groups-table"]').should('exist')
cy.get('[data-el="device-groups-table"]').should('be.visible')

cy.get('[data-el="device-groups-table"] tbody tr').should('have.length', 1)
cy.get('[data-el="device-groups-table"] tbody tr').should('contain', 'a group')
cy.get('[data-el="device-groups-table"] tbody tr').should('contain', 'application-1')
cy.get('[data-el="device-groups-table"] tbody tr').should('contain', 'group description')
cy.get('[data-el="device-groups-table"] tbody tr').should('contain', '2')
})

it('should allow users to create groups when they already have some', () => {
cy.intercept('GET', '/api/*/teams/*/device-groups', {
meta: {},
count: 0,
groups: [{
id: 'id',
name: 'a group',
description: 'group description',
deviceCount: 2,
targetSnapshot: null,
application: {
id: 'id',
name: 'application-1'
}
}]
}).as('getGroups')
cy.intercept('POST', '/api/*/applications/*/device-groups', {
description: '',
name: 'A new group'
}).as('createGroup')
cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').click()

cy.wait('@getGroups')

cy.get('[data-dialog="create-group"]').should('exist')
cy.get('[data-dialog="create-group"]').should('not.be.visible')

cy.get('[data-el="device-groups-table"] [data-action="create-device-group"]').should('exist')
cy.get('[data-el="device-groups-table"] [data-action="create-device-group"]').should('be.enabled')

cy.get('[data-el="device-groups-table"] [data-action="create-device-group"]').click()

cy.get('[data-dialog="create-group"]').should('be.visible')
cy.get('[data-dialog="create-group"]').within(() => {
cy.get('[data-el="applications-list"]').click()
cy.get('[data-el="applications-list"]').within(() => {
cy.get('[data-option="application-1"]').click()
})
cy.get('[data-form="name"] input').type('A new group')
cy.get('[data-action="dialog-confirm"]').click()
})

cy.wait('@createGroup')
cy.wait('@getGroups')
})
})
})

0 comments on commit 0524fff

Please sign in to comment.