@dhis2-ui/organisation-unit-tree 10.16.2 → 10.16.3

package/src/features/expanded.feature

@@ -0,0 +1,27 @@
+Feature: Nodes can be expanded
+
+    Scenario: No initially expanded paths are provided
+        Given a OrganisationUnitTree with children and no paths in the initiallyExpanded prop is rendered
+        Then the root unit is closed
+
+    # The given step is really long.. but I don't know how to split it while
+    # being able to test/prepare that with cypress
+    Scenario: The first unit on the second level is provided as initially expanded path
+        Given a OrganisationUnitTree with children and the path of the first unit on the second level in the initiallyExpanded prop is rendered
+        Then the root unit is opened
+
+    # For info what a "sub", "main" and "root" unit is, see
+    # "sub_unit_as_root.feature"
+    Scenario: A sub org unit gets expanded within the main org unit tree
+        Given both a sub org unit with children and a main org unit are root org units
+        And the root main org unit is expanded
+        When the user expands the sub org unit within the main org unit tree
+        Then the root sub org unit should not expand
+
+    # For info what a "sub", "main" and "root" unit is, see
+    # "sub_unit_as_root.feature"
+    Scenario: A root sub org unit gets expanded which is also in the main org unit tree
+        Given both a sub org unit with children and a main org unit are root org units
+        And the root main org unit is expanded
+        When the user expands the root sub org unit
+        Then the sub org unit within the main org unit tree should not expand

package/src/features/force_reload/index.js

@@ -0,0 +1,36 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a OrganisationUnitTree with three levels is rendered', () => {
+    cy.visitStory('OrganisationUnitTree', 'Force reloading')
+})
+
+Given('the two parent levels are opened', () => {
+    cy.getOrgUnitByLabel('Org Unit 1').as('rootNode').openOrgUnitNode()
+
+    cy.getOrgUnitByLabel('Org Unit 2').openOrgUnitNode()
+
+    cy.get('@rootNode')
+        .find(
+            '[data-test="dhis2-uiwidgets-orgunittree-node"] [data-test="dhis2-uiwidgets-orgunittree-node"]'
+        )
+        .should('exist')
+})
+
+When(
+    'the tree is being force reloaded and the loading process has finished',
+    () => {
+        cy.get('[data-test="reload-all"]').click()
+    }
+)
+
+Then('all three levels are visible again', () => {
+    cy.get('@rootNode')
+        .find('[data-test="dhis2-uiwidgets-orgunittree-node"]')
+        .should('exist')
+
+    cy.get('@rootNode')
+        .find(
+            '[data-test="dhis2-uiwidgets-orgunittree-node"] [data-test="dhis2-uiwidgets-orgunittree-node"]'
+        )
+        .should('exist')
+})

package/src/features/force_reload.feature

@@ -0,0 +1,7 @@
+Feature: The whole organisation unit tree can be reloaded
+
+    Scenario: The whole tree is reloaded while being opened
+        Given a OrganisationUnitTree with three levels is rendered
+        And the two parent levels are opened
+        When the tree is being force reloaded and the loading process has finished
+        Then all three levels are visible again

package/src/features/highlight/index.js

@@ -0,0 +1,9 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a OrganisationUnitTree with a highlighted root unit is rendered', () => {
+    cy.visitStory('OrganisationUnitTree', 'Root highlighted')
+})
+
+Then('root unit has the highlighted styles', () => {
+    cy.getOrgUnitByLabel('Org Unit 1').find('.highlighted').should('exist')
+})

package/src/features/highlight.feature

@@ -0,0 +1,5 @@
+Feature: Units can be highlighted
+
+    Scenario: The root unit is highlighted
+        Given a OrganisationUnitTree with a highlighted root unit is rendered
+        Then root unit has the highlighted styles

package/src/features/loading_state/index.js

@@ -0,0 +1,26 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a OrganisationUnitTree with two levels is rendered', () => {
+    cy.visitStory('OrganisationUnitTree', 'A 0000000001 loading')
+})
+
+Given('the root level is closed', () => {
+    cy.getOrgUnitByLabel('Org Unit 1').as('rootUnit').shouldBeAClosedNode()
+})
+
+When('the root level is opened', () => {
+    cy.get('@rootUnit').openOrgUnitNode()
+})
+
+Then(
+    'there is a loading indicator rendered on the first child of the second level',
+    () => {
+        cy.getOrgUnitByLabel('Org Unit 2')
+            .find('[data-test="dhis2-uicore-circularloader"]')
+            .should('exist')
+
+        cy.getOrgUnitByLabel('Org Unit 2')
+            .find('[data-test="dhis2-uiwidgets-orgunittree-node-leaves"]:empty')
+            .should('exist')
+    }
+)

package/src/features/loading_state.feature

@@ -0,0 +1,7 @@
+Feature: When a unit is loading its children then there is a loading indicator
+
+    Scenario: The first second-level unit is loading its children
+        Given a OrganisationUnitTree with two levels is rendered
+        And the root level is closed
+        When the root level is opened
+        Then there is a loading indicator rendered on the first child of the second level

package/src/features/multi_selection/index.js

@@ -0,0 +1,94 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('an OrganisationUnitTree with two levels is rendered', () => {
+    cy.visitStory('OrganisationUnitTree', 'Multiple selection')
+})
+
+Given('no unit is selected', () => {
+    cy.window().should((win) => {
+        expect(win.selection).to.eql([])
+    })
+})
+
+Given('the root level unit is opened', () => {
+    cy.getOrgUnitByLabel('Org Unit 1').openOrgUnitNode(true)
+})
+
+Given('the first unit on the second level is selected', () => {
+    cy.getOrgUnitByLabel('Org Unit 2').toggleOrgUnitNodeSelection(true)
+})
+
+Given('the first unit on the second level unit is opened', () => {
+    cy.getOrgUnitByLabel('Org Unit 2').openOrgUnitNode(true)
+})
+
+Given('the second level has two units', () => {
+    cy.getOrgUnitByLabel('Org Unit 2')
+        .find('[data-test="dhis2-uiwidgets-orgunittree-node-leaves"]')
+        .first()
+        .children()
+        .filter((index, child) =>
+            Cypress.$(child).is(
+                '[data-test="dhis2-uiwidgets-orgunittree-node"]'
+            )
+        )
+        .should('have.length', 2)
+})
+
+When('the user selects a unit', () => {
+    cy.getOrgUnitByLabel('Org Unit 1').toggleOrgUnitNodeSelection(true)
+})
+
+When('the user selects the first unit on the second level', () => {
+    cy.getOrgUnitByLabel('Org Unit 2').toggleOrgUnitNodeSelection(true)
+})
+
+When('the user selects the root level', () => {
+    cy.getOrgUnitByLabel('Org Unit 1').toggleOrgUnitNodeSelection(true)
+})
+
+When('the user selects the second unit on the second level', () => {
+    cy.getOrgUnitByLabel('Org Unit 3').toggleOrgUnitNodeSelection(true)
+})
+
+Then('a unit is selected', () => {
+    cy.window().should((win) => {
+        expect(win.selection).to.eql(['/A0000000000'])
+    })
+})
+
+Then('the unit on the second level is selected', () => {
+    cy.window().should((win) => {
+        expect(win.selection).to.eql(['/A0000000000/A0000000001'])
+    })
+})
+
+Then('the unit on the first level is marked as selected intermediately', () => {
+    cy.getOrgUnitByLabel('Org Unit 1')
+        .find(
+            '[data-test="dhis2-uiwidgets-orgunittree-node-label"] [data-test="dhis2-uicore-checkbox"] input'
+        )
+        .should(($input) => {
+            expect($input[0].indeterminate).to.be.true
+        })
+})
+
+Then('the root unit is marked as selected', () => {
+    cy.window().should((win) => {
+        expect(win.selection.includes('/A0000000000')).to.be.true
+    })
+})
+
+Then('the first unit is selected', () => {
+    cy.window().should((win) => {
+        expect(win.selection.includes('/A0000000000/A0000000001')).to.be.true
+        expect(win.selection).to.have.length(2)
+    })
+})
+
+Then('the second unit is selected', () => {
+    cy.window().should((win) => {
+        expect(win.selection.includes('/A0000000000/A0000000002')).to.be.true
+        expect(win.selection).to.have.length(2)
+    })
+})

package/src/features/multi_selection.feature

@@ -0,0 +1,31 @@
+Feature: When not limited any amount of units can be selected
+
+    Scenario: The user selects a unit when no other unit is selected
+        Given an OrganisationUnitTree with two levels is rendered
+        And no unit is selected
+        When the user selects a unit
+        Then a unit is selected
+
+    Scenario: The user selects a unit when a parent unit is not selected
+        Given an OrganisationUnitTree with two levels is rendered
+        And the root level unit is opened
+        When the user selects the first unit on the second level
+        Then the unit on the second level is selected
+        Then the unit on the first level is marked as selected intermediately
+
+    Scenario: The user selects a unit which is selected intermediately
+        Given an OrganisationUnitTree with two levels is rendered
+        And the root level unit is opened
+        And the first unit on the second level is selected
+        When the user selects the root level
+        Then the root unit is marked as selected
+
+    Scenario: The user selects a unit when another unit on the same level is selected
+        Given an OrganisationUnitTree with two levels is rendered
+        And the root level unit is opened
+        And the first unit on the second level unit is opened
+        And the second level has two units
+        And the first unit on the second level is selected
+        When the user selects the second unit on the second level
+        Then the first unit is selected
+        Then the second unit is selected

package/src/features/no_selection/index.js

@@ -0,0 +1,41 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'a disabled, collapsed OrganisationUnitTree with two levels is rendered',
+    () => {
+        cy.visitStory('OrganisationUnitTree', 'No selection closed')
+    }
+)
+
+Given(
+    'a disabled OrganisationUnitTree with two levels is rendered with the second level is expanded',
+    () => {
+        cy.visitStory('OrganisationUnitTree', 'No selection root opened')
+    }
+)
+
+When('the root node is clicked', () => {
+    cy.getOrgUnitByLabel('Org Unit 1')
+        .find('[data-test="dhis2-uiwidgets-orgunittree-node-label"]')
+        .first()
+        .trigger('click')
+})
+
+Then('the root node remains unselected', () => {
+    cy.getOrgUnitByLabel('Org Unit 1')
+        .find('[data-test="dhis2-uiwidgets-orgunittree-node-label"]')
+        .first()
+        .as('rootLabel')
+        .find('.checked')
+        .should('not.exist')
+
+    cy.get('@rootLabel').find('input').should('not.exist')
+})
+
+Then('the second level is expanded', () => {
+    cy.getOrgUnitByLabel('Org Unit 1').shouldBeAnOpenNode()
+})
+
+Then('the second level is collapsed', () => {
+    cy.getOrgUnitByLabel('Org Unit 1').shouldBeAClosedNode()
+})

package/src/features/no_selection.feature

@@ -0,0 +1,13 @@
+Feature: Selection can be disabled entirely in the OrganisationUnitTree
+
+    Scenario: The user clicks on a level of the disabled OrganisationUnitTree with the second level collapsed
+        Given a disabled, collapsed OrganisationUnitTree with two levels is rendered
+        When the root node is clicked
+        Then the root node remains unselected
+        But the second level is expanded
+
+    Scenario: The user clicks on a level of the disabled OrganisationUnitTree with the second level expanded
+        Given a disabled OrganisationUnitTree with two levels is rendered with the second level is expanded
+        When the root node is clicked
+        Then the root node remains unselected
+        But the second level is collapsed

package/src/features/path_based_filtering/index.js

@@ -0,0 +1,97 @@
+import { Before, Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Before(() => {
+    cy.wrap([]).as('displayedUnits')
+})
+
+const addDisplayedUnit = (id) => {
+    cy.get('@displayedUnits').then((displayedUnits) => {
+        cy.wrap([...displayedUnits, id]).as('displayedUnits')
+    })
+}
+
+Given(
+    'a unfiltered OrganisationUnitTree with a depth of 3 levels is rendered',
+    () => {
+        cy.visitStory('OrganisationUnitTree', 'Filtered by 3-level-path')
+    }
+)
+
+Given(
+    'a filtered OrganisationUnitTree with a depth of 3 levels is rendered',
+    () => {
+        cy.visitStory(
+            'OrganisationUnitTree',
+            'Filtered by 3-level-path and 2-level-path'
+        )
+    }
+)
+
+/**
+ * left empty intentionally
+ * ========================
+ * Step is necessary to make the feature file understandable
+ * Required states are prepared by the story.
+ * There is no way to check if the given is true by checking the dom
+ * as this can only be verified by opening the org unit tree,
+ * which triggers the recursive loading strategy.
+ */
+Given('the second level contains two nodes', () => {})
+Given('all parent levels are open', () => {})
+Given(
+    'a filter containing the first child of the first second level is provided',
+    () => {}
+)
+Given('the second level nodes each have a child node', () => {})
+Given(
+    'a filter containing the first child of the second level is provided',
+    () => {}
+)
+Given(
+    'a filter containing the second child of the first level is provided',
+    () => {}
+)
+
+Then('the root level is visible', () => {
+    cy.getOrgUnitByLabel('Org Unit 1').should('exist')
+
+    addDisplayedUnit('A0000000000')
+})
+
+Then('the first node on the second level is visible', () => {
+    cy.getOrgUnitByLabel('Org Unit 2').should('exist')
+
+    addDisplayedUnit('A0000000001')
+})
+
+Then(
+    'the first child node of the first node on the second level is visible',
+    () => {
+        cy.getOrgUnitByLabel('Org Unit 4').should('exist')
+
+        addDisplayedUnit('A0000000003')
+    }
+)
+
+Then('the second node on the first level is visible', () => {
+    cy.getOrgUnitByLabel('Org Unit 3').should('exist')
+
+    addDisplayedUnit('A0000000002')
+})
+
+Then('all other nodes are not rendered', () => {
+    cy.get('@displayedUnits').then((displayedUnits) => {
+        cy.window().then((win) => {
+            const excludedUnitNumbers = win.allUnits
+                .filter((unit) => !displayedUnits.includes(unit))
+                .map((id) => parseInt(id.replace(/^.*(\d)$/, '$1'), 10) + 1)
+
+            excludedUnitNumbers.forEach((number) => {
+                const label = `Org Unit ${number}`
+                cy.get(
+                    `[data-test="dhis2-uiwidgets-orgunittree-node-label"]:contains("${label}")`
+                ).should('not.exist')
+            })
+        })
+    })
+})

package/src/features/path_based_filtering.feature

@@ -0,0 +1,24 @@
+Feature: The OrganisationUnitTree can be filtered by paths
+
+    Scenario: The org unit tree is filtered by a three-level-deep path
+        Given a unfiltered OrganisationUnitTree with a depth of 3 levels is rendered
+        And the second level contains two nodes
+        And all parent levels are open
+        And a filter containing the first child of the first second level is provided
+        Then the root level is visible
+        And the first node on the second level is visible
+        And the first child node of the first node on the second level is visible
+        And all other nodes are not rendered
+
+    Scenario: The org unit tree is filtered by a three-level- and a two-level-deep path
+        Given a filtered OrganisationUnitTree with a depth of 3 levels is rendered
+        And the second level contains two nodes
+        And the second level nodes each have a child node
+        And all parent levels are open
+        And a filter containing the first child of the second level is provided
+        And a filter containing the second child of the first level is provided
+        Then the root level is visible
+        And the first node on the second level is visible
+        And the first child node of the first node on the second level is visible
+        And the second node on the first level is visible
+        And all other nodes are not rendered

package/src/features/single_selection/index.js

@@ -0,0 +1,41 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('an OrganisationUnitTree with two nodes is rendered', () => {
+    cy.visitStory('OrganisationUnitTree', 'Single selection')
+})
+
+Given('no unit has been selected', () => {
+    cy.get('.checked').should('not.exist')
+})
+
+Given('the first unit has been selected', () => {
+    cy.getOrgUnitByLabel('Org Unit 1').toggleOrgUnitNodeSelection(true, true)
+})
+
+When('the user selects the first unit', () => {
+    cy.getOrgUnitByLabel('Org Unit 1').toggleOrgUnitNodeSelection(true, true)
+})
+
+When('the user selects the second unit', () => {
+    cy.getOrgUnitByLabel('Org Unit 2').toggleOrgUnitNodeSelection(true, true)
+})
+
+When('the user deselects the first unit', () => {
+    cy.getOrgUnitByLabel('Org Unit 1').toggleOrgUnitNodeSelection(false, true)
+})
+
+Then('the first unit is selected', () => {
+    cy.getOrgUnitByLabel('Org Unit 1').shouldBeASelectedOrgUnitNode(true)
+})
+
+Then('the first unit is not selected', () => {
+    cy.getOrgUnitByLabel('Org Unit 1').shouldNotBeASelectedOrgUnitNode(true)
+})
+
+Then('the second unit is selected', () => {
+    cy.getOrgUnitByLabel('Org Unit 2').shouldBeASelectedOrgUnitNode(true)
+})
+
+Then('no unit is selected', () => {
+    cy.get('.checked').should('not.exist')
+})

package/src/features/single_selection.feature

@@ -0,0 +1,20 @@
+Feature: When specified only one unit can be selected
+
+    Scenario: The user selects a unit when no other unit is selected
+        Given an OrganisationUnitTree with two nodes is rendered
+        And no unit has been selected
+        When the user selects the first unit
+        Then the first unit is selected
+
+    Scenario: The user select a unit when another unit is selected
+        Given an OrganisationUnitTree with two nodes is rendered
+        And the first unit has been selected
+        When the user selects the second unit
+        Then the first unit is not selected
+        Then the second unit is selected
+
+    Scenario: The user deselects a unit
+        Given an OrganisationUnitTree with two nodes is rendered
+        And the first unit has been selected
+        When the user deselects the first unit
+        Then no unit is selected

package/src/features/sub_unit_as_root/index.js

@@ -0,0 +1,83 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+const rootOrgUnitLabelSelector = `
+    [data-test="dhis2-uiwidgets-orgunittree"]
+    > [data-test="dhis2-uiwidgets-orgunittree-node"]
+    > [data-test="dhis2-uiwidgets-orgunittree-node-content"]
+    > [data-test="dhis2-uiwidgets-orgunittree-node-label"]
+    label
+`
+
+Given('a sub org unit is a root org unit', () => {
+    cy.visitStory(
+        'OrganisationUnitTree',
+        'multiple root sub and one main org unit'
+    )
+})
+
+Given('both a sub org unit and a main org unit are root org units', () => {
+    cy.visitStory(
+        'OrganisationUnitTree',
+        'multiple root sub and one main org unit'
+    )
+})
+
+Given('multiple sub org units is a root org unit', () => {
+    cy.visitStory(
+        'OrganisationUnitTree',
+        'multiple root sub and one main org unit'
+    )
+})
+
+Given('the root sub org unit is a child of the root main org unit', () => {
+    cy.visitStory(
+        'OrganisationUnitTree',
+        'multiple root sub and one main org unit'
+    )
+})
+
+Given('the user provided one root sub org unit to the filter', () => {
+    cy.get('input[type="input"]').clear().type('/A0000000001')
+})
+
+Given('the user provided one non-root sub org unit to the filter', () => {
+    cy.get('input[type="input"]').clear().type('/A0000000000/A0000000006')
+})
+
+When('the user selects sub org unit in the main org unit tree', () => {
+    cy.contains('label', 'Org Unit 1').click()
+    cy.get('[data-test="dhis2-uiwidgets-orgunittree-node-content"]')
+        .contains('label', 'Org Unit 2')
+        .click()
+})
+
+When('the user selects the root sub org unit', () => {
+    cy.contains(rootOrgUnitLabelSelector, 'Org Unit 2').click()
+})
+
+Then(
+    'all root sub org units but the filtered sub org unit should be hidden',
+    () => {
+        cy.contains(rootOrgUnitLabelSelector, 'Org Unit 2').should('exist')
+        cy.contains(rootOrgUnitLabelSelector, 'Org Unit 1').should('not.exist')
+        cy.contains(rootOrgUnitLabelSelector, 'Org Unit 3').should('not.exist')
+    }
+)
+
+Then('the root main org unit should be marked as indeterminate', () => {
+    cy.contains(rootOrgUnitLabelSelector, 'Org Unit 1')
+        .find('> .icon svg')
+        .should('have.class', 'indeterminate')
+})
+
+Then('the root sub org unit should be selected', () => {
+    cy.contains(rootOrgUnitLabelSelector, 'Org Unit 2')
+        .find('> .icon svg')
+        .should('have.class', 'checked')
+})
+
+Then('only the root main org units should be visible', () => {
+    cy.contains(rootOrgUnitLabelSelector, 'Org Unit 1').should('exist')
+    cy.contains(rootOrgUnitLabelSelector, 'Org Unit 2').should('not.exist')
+    cy.contains(rootOrgUnitLabelSelector, 'Org Unit 3').should('not.exist')
+})

package/src/features/sub_unit_as_root.feature

@@ -0,0 +1,34 @@
+Feature: Sub-org units can be a root org unit
+
+    Main org unit : is an actual root org unit in the configured hierarchy
+    Sub org unit  : is an org unit which is inside the tree of a "main org unit"
+    Root org unit : refers to an org unit which is a root node in the component
+    ---
+    Org unit components can have multiple selections in all of the scenarios
+
+    Scenario: The user selects the root sub org unit
+        Given a sub org unit is a root org unit
+        When the user selects the root sub org unit
+        Then the root sub org unit should be selected
+
+    Scenario: The user selects the root sub org unit which is included in the tree of a root main org unit
+        Given both a sub org unit and a main org unit are root org units
+        And the root sub org unit is a child of the root main org unit
+        When the user selects the root sub org unit
+        Then the root main org unit should be marked as indeterminate
+
+    Scenario: The user selects the a child in the root main org unit which is also a root sub org unit
+        Given both a sub org unit and a main org unit are root org units
+        And the root sub org unit is a child of the root main org unit
+        When the user selects sub org unit in the main org unit tree
+        Then the root sub org unit should be selected
+
+    Scenario: The user filtered the tree by a root sub unit path
+        Given multiple sub org units is a root org unit
+        And the user provided one root sub org unit to the filter
+        Then all root sub org units but the filtered sub org unit should be hidden
+
+    Scenario: The user filtered the tree by a non-root sub unit path in the root main org unit
+        Given multiple sub org units is a root org unit
+        And the user provided one non-root sub org unit to the filter
+        Then only the root main org units should be visible