Skip to content

Commit

Permalink
Merge pull request #853 from dhis2/DHIS2-11939-DHIS2-12054_Complete_h…
Browse files Browse the repository at this point in the history
…omepage_and_navigation_tests

refactor(sidenav): use @dhis2/ui & add tests for homepage and sidenav
  • Loading branch information
Mohammer5 authored Nov 10, 2021
2 parents c18a34c + 1db9437 commit 8b323c3
Show file tree
Hide file tree
Showing 24 changed files with 2,784 additions and 991 deletions.
9 changes: 3 additions & 6 deletions cypress.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,7 @@
"dhis2ApiVersion": "38"
},
"testFiles": "**/*.feature",
"ignoreTestFiles": [
"**/homepage-wip/*.feature",
"**/user-wip/*.feature",
"**/user-group-wip/*.feature",
"**/user-role-wip/*.feature"
]
"ignoreTestFiles": ["**/*-wip/*.feature"],
"defaultCommandTimeout": 10000,
"requestTimeout": 10000
}

Large diffs are not rendered by default.

310 changes: 196 additions & 114 deletions cypress/fixtures/network/38/static_resources.json

Large diffs are not rendered by default.

10 changes: 6 additions & 4 deletions cypress/fixtures/network/38/summary.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
{
"count": 322,
"totalResponseSize": 588190,
"duplicates": 211,
"nonDeterministicResponses": 27,
"count": 654,
"totalResponseSize": 950710,
"duplicates": 506,
"nonDeterministicResponses": 55,
"apiVersion": "38",
"fixtureFiles": [
"static_resources.json",
"show_tiles_with_list_and_add_action_to_all_available_sections.json",
"the_app_has_a_main_navigation.json",
"user_groups_can_be_listed.json",
"the_user_group_list_can_be_searched.json",
"user_roles_can_be_listed.json",
Expand Down
505 changes: 505 additions & 0 deletions cypress/fixtures/network/38/the_app_has_a_main_navigation.json

Large diffs are not rendered by default.

295 changes: 164 additions & 131 deletions cypress/fixtures/network/38/the_user_group_list_can_be_searched.json

Large diffs are not rendered by default.

387 changes: 214 additions & 173 deletions cypress/fixtures/network/38/the_user_list_can_be_searched.json

Large diffs are not rendered by default.

298 changes: 164 additions & 134 deletions cypress/fixtures/network/38/the_user_role_list_can_be_searched.json

Large diffs are not rendered by default.

270 changes: 150 additions & 120 deletions cypress/fixtures/network/38/user_groups_can_be_listed.json

Large diffs are not rendered by default.

242 changes: 136 additions & 106 deletions cypress/fixtures/network/38/user_roles_can_be_listed.json

Large diffs are not rendered by default.

250 changes: 140 additions & 110 deletions cypress/fixtures/network/38/users_can_be_listed.json

Large diffs are not rendered by default.

94 changes: 94 additions & 0 deletions cypress/integration/homepage/show-action-tiles/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'

Given('the user-manager is on the homepage', () => {
cy.visit('/')
})

When('the user-manager clicks on the user list icon of the user tile', () => {
cy.findByRole('heading', { name: 'User' })
.parents('[data-test="dhis2-uicore-card"]')
.findByRole('button', { name: 'List' })
.click()
})

When('the user-manager clicks on the add user icon of the user tile', () => {
cy.findByRole('heading', { name: 'User' })
.parents('[data-test="dhis2-uicore-card"]')
.findByRole('button', { name: 'Add' })
.click()
})

When(
'the user-manager clicks on the add user group icon of the user group tile',
() => {
cy.findByRole('heading', { name: 'User group' })
.parents('[data-test="dhis2-uicore-card"]')
.findByRole('button', { name: 'Add' })
.click()
}
)

When(
'the user-manager clicks on the add user role icon of the user role tile',
() => {
cy.findByRole('heading', { name: 'User role' })
.parents('[data-test="dhis2-uicore-card"]')
.findByRole('button', { name: 'Add' })
.click()
}
)

When(
'the user-manager clicks on the user group list icon of the user group tile',
() => {
cy.findByRole('heading', { name: 'User group' })
.parents('[data-test="dhis2-uicore-card"]')
.findByRole('button', { name: 'List' })
.click()
}
)

When(
'the user-manager clicks on the user role list icon of the user role tile',
() => {
cy.findByRole('heading', { name: 'User role' })
.parents('[data-test="dhis2-uicore-card"]')
.findByRole('button', { name: 'List' })
.click()
}
)

Then('the user-manager should be redirected to the user list page', () => {
cy.url().should('match', /[/]users/)
cy.findByRole('nav').should('exist')
})

Then('the user-manager should be redirected to the add user form page', () => {
cy.url().should('match', /[/]users[/]new/)
cy.get('form').should('exist')
})

Then(
'the user-manager should be redirected to the add user group form page',
() => {
cy.url().should('match', /[/]user-groups[/]new/)
}
)

Then(
'the user-manager should be redirected to the add user role form page',
() => {
cy.url().should('match', /[/]user-roles[/]new/)
}
)

Then(
'the user-manager should be redirected to the user group list page',
() => {
cy.url().should('match', /[/]user-groups/)
}
)

Then('the user-manager should be redirected to the user role list page', () => {
cy.url().should('match', /[/]user-roles/)
})
32 changes: 32 additions & 0 deletions cypress/integration/navigation/main-navigation.feature
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
Feature: The app has a main navigation

Scenario: No link is active
Given the user is on the homepage
Then no link in the main navigation should be active

Scenario: The user navigates to the users page
Given the user is on the homepage
When the user clicks the users link in the main navigation
Then the user should be redirected to the user list page

Scenario: The user navigates to the user groups page
Given the user is on the homepage
When the user clicks the user groups link in the main navigation
Then the user should be redirected to the user group list page

Scenario: The user navigates to the user roles page
Given the user is on the homepage
When the user clicks the user roles link in the main navigation
Then the user should be redirected to the user role list page

Scenario: The users link is active
Given the user is on the user list page
Then the users link in the main navigation should be active

Scenario: The user groups link is active
Given the user is on the user group list page
Then the user groups link in the main navigation should be active

Scenario: The user roles link is active
Given the user is on the user role list page
Then the user roles link in the main navigation should be active
72 changes: 72 additions & 0 deletions cypress/integration/navigation/main-navigation/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'

Given('the user is on the homepage', () => {
cy.visit('/')
})

Given('the user is on the user group list page', () => {
cy.visit('/')
cy.findByRole('nav').findByText('User group').click()
})

Given('the user is on the user list page', () => {
cy.visit('/')
cy.findByRole('nav').findByText('User').click()
})

Given('the user is on the user role list page', () => {
cy.visit('/')
cy.findByRole('nav').findByText('User role').click()
})

When('the user clicks the user groups link in the main navigation', () => {
cy.findByRole('nav').findByText('User group').click()
})

When('the user clicks the user roles link in the main navigation', () => {
cy.findByRole('nav').findByText('User role').click()
})

When('the user clicks the users link in the main navigation', () => {
cy.findByRole('nav').findByText('User').click()
})

Then('no link in the main navigation should be active', () => {
cy.findByRole('nav').find('li.active').should('not.exist')
})

Then('the users link in the main navigation should be active', () => {
cy.findByRole('nav').find('li.active').should('have.length', 1)
cy.findByRole('nav')
.findByText('User')
.parents('li')
.should('have.class', 'active')
})

Then('the user groups link in the main navigation should be active', () => {
cy.findByRole('nav').find('li.active').should('have.length', 1)
cy.findByRole('nav')
.findByText('User group')
.parents('li')
.should('have.class', 'active')
})

Then('the user roles link in the main navigation should be active', () => {
cy.findByRole('nav').find('li.active').should('have.length', 1)
cy.findByRole('nav')
.findByText('User role')
.parents('li')
.should('have.class', 'active')
})

Then('the user should be redirected to the user list page', () => {
cy.url().should('match', /[/]users$/)
})

Then('the user should be redirected to the user group list page', () => {
cy.url().should('match', /[/]user-groups/)
})

Then('the user should be redirected to the user role list page', () => {
cy.url().should('match', /[/]user-roles$/)
})
7 changes: 6 additions & 1 deletion cypress/integration/user-group/search-groups/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ const NAME_SEARCH_QUERY = 'admin'

When('the user-manager searches the list by entering a name', () => {
cy.getWithDataTest('{search-filter}').type(NAME_SEARCH_QUERY)
cy.wait(1000)
cy.get(
'[data-test="dhis2-uicore-tablebody"] [data-test="dhis2-uicore-datatablerow"]'
).should('have.length', 4)
})

Then(
Expand All @@ -21,6 +23,9 @@ Then(

Given('the user-manager filtered the list', () => {
cy.getWithDataTest('{search-filter}').type(NAME_SEARCH_QUERY)
cy.get(
'[data-test="dhis2-uicore-tablebody"] [data-test="dhis2-uicore-datatablerow"]'
).should('have.length', 4)
})

When('the user-manager edits one of the displayed user groups', () => {
Expand Down
7 changes: 6 additions & 1 deletion cypress/integration/user-role/search-roles/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ const NAME_SEARCH_QUERY = 'admin'

When('the user-manager searches the list by entering a name', () => {
cy.getWithDataTest('{search-filter}').type(NAME_SEARCH_QUERY)
cy.wait(1000)
cy.get(
'[data-test="dhis2-uicore-tablebody"] [data-test="dhis2-uicore-datatablerow"]'
).should('have.length', 1)
})

Then(
Expand All @@ -21,6 +23,9 @@ Then(

Given('the user-manager filtered the list', () => {
cy.getWithDataTest('{search-filter}').type(NAME_SEARCH_QUERY)
cy.get(
'[data-test="dhis2-uicore-tablebody"] [data-test="dhis2-uicore-datatablerow"]'
).should('have.length', 1)
})

When('the user-manager edits one of the displayed user roles', () => {
Expand Down
13 changes: 11 additions & 2 deletions cypress/integration/user/search-users/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ const NAME_SEARCH_QUERY = 'admin'

When('the user-manager searches the list by entering a name', () => {
cy.getWithDataTest('{user-filter-name}').type(NAME_SEARCH_QUERY)
cy.wait(1000)
cy.get(
'[data-test="dhis2-uicore-tablebody"] [data-test="dhis2-uicore-datatablerow"]'
).should('have.length', 1)
})

Then(
Expand All @@ -25,10 +27,17 @@ When('the user-manager chooses an inactivity time', () => {

Given('the user-manager filtered the list', () => {
cy.getWithDataTest('{user-filter-name}').type(NAME_SEARCH_QUERY)
cy.get(
'[data-test="dhis2-uicore-tablebody"] [data-test="dhis2-uicore-datatablerow"]'
).should('have.length', 1)
})

When('the user-manager edits one of the displayed users', () => {
cy.getWithDataTest('{context-menu-button}').first().click()
cy.getWithDataTest('{context-menu-button}')
.first()
.should('be.visible')
.click()
cy.getWithDataTest('{dhis2-uicore-menu}').should('be.visible')
cy.getWithDataTest('{dhis2-uicore-menu}').contains('Edit').click()
cy.findByRole('heading', { name: /^Update User:/ }).should('exist')
})
Expand Down
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@
"query-string": "^7.0.1",
"react-highlight-words": "^0.16.0",
"react-redux": "^7.2.5",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"redux": "^4.1.1",
"redux-form": "^8.3.7",
"redux-thunk": "^2.2.0",
Expand All @@ -61,8 +61,8 @@
"devDependencies": {
"@dhis2/cli-app-scripts": "^8.0.1",
"@dhis2/cli-style": "^9.2.2",
"@dhis2/cypress-commands": "^9",
"@dhis2/cypress-plugins": "^9",
"@dhis2/cypress-commands": "^9.0.1",
"@dhis2/cypress-plugins": "^9.0.1",
"@testing-library/cypress": "^8.0.1",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.1.2",
Expand Down
16 changes: 3 additions & 13 deletions src/components/SectionLoader.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,9 @@ import { initCurrentUser } from '../actions'
import getRouteConfig from '../constants/routeConfig'
import navigateTo from '../utils/navigateTo'
import ErrorMessage from './ErrorMessage'
import styles from './SectionLoader.module.css'
import SideNav from './SideNav'

const styles = {
container: {
display: 'grid',
gridTemplateColumns: '320px 1fr',
height: '100%',
},
content: {
padding: 16,
},
}

/**
* This component prepares the user-app sections and routes based on the current user's authorities
* The sections will be rendered in the SideNav and the routes within a react-router Switch component
Expand Down Expand Up @@ -131,7 +121,7 @@ class SectionLoader extends Component {
return (
<>
<SideNav key="sidenav" sections={sections} />
<div style={styles.content}>
<div className={styles.content}>
<Switch key="routeswitch">
{this.renderRoutes(routes)}
</Switch>
Expand All @@ -141,7 +131,7 @@ class SectionLoader extends Component {
}

render() {
return <main style={styles.container}>{this.renderContent()}</main>
return <main className={styles.container}>{this.renderContent()}</main>
}
}

Expand Down
9 changes: 9 additions & 0 deletions src/components/SectionLoader.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.container {
display: grid;
grid-template-columns: 220px 1fr;
height: 100%;
}

.content {
padding: 16px;
}
Loading

0 comments on commit 8b323c3

Please sign in to comment.