Skip to content

Commit

Permalink
EDSC-2896: Variable names truncated in form view (Earthdata Search) (#…
Browse files Browse the repository at this point in the history 
…126)

* EDSC-2896 fixes long var name scrolling

* EDSC-2896 test fixes

* EDSC-2896 adds test for tree scrolling

* EDSC-2896 linting change

* EDSC-2896 npm audit fix

* EDSC-2896 moves some echo form css out of edsc and into this repo

* EDSC-2896 version bump
  • Loading branch information
@daniel-zamora
daniel-zamora authored Nov 13, 2024
1 parent 2d61b46 commit 1091550
Show file tree
Hide file tree
Showing 9 changed files with 1,221 additions and 1,117 deletions.
78 changes: 51 additions & 27 deletions cypress/component/Tree.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import murmurhash from 'murmurhash'
import {
treeWithMaxParametersXml,
treeWithNestedDisabledFieldsXml,
treeWithNestedScrollableXml,
treeXml
} from '../mocks/FormElement'
import { Tree } from '../../src/components/Tree/Tree'
Expand Down Expand Up @@ -80,20 +81,20 @@ describe('Tree component', () => {
it('renders a Tree', () => {
setup()

cy.get('.tree__filter-label').should('have.text', 'Filter')
cy.get('#tree_filter_input').should('have.attr', 'placeholder', 'Enter text to filter bands')
cy.get('.tree__filter-clear-button').should('have.text', 'Clear')
cy.get('.ef-tree__filter-label').should('have.text', 'Filter')
cy.get('#ef-tree_filter_input').should('have.attr', 'placeholder', 'Enter text to filter bands')
cy.get('.ef-tree__filter-clear-button').should('have.text', 'Clear')

cy.get('.tree__node-count-text').should('have.text', '0 of 1 bands selected')
cy.get('.ef-tree__node-count-text').should('have.text', '0 of 1 bands selected')

cy.get('.tree__list').find('input').should('have.length', 2)
cy.get('.tree-item--is-open').should('exist')
cy.get('.ef-tree__list').find('input').should('have.length', 2)
cy.get('.ef-tree-item--is-open').should('exist')
})

it('changing a TreeItem calls onUpdateModel', () => {
setup()

cy.get('.tree__list').find('input').first().click()
cy.get('.ef-tree__list').find('input').first().click()

cy.get('@onUpdateModelSpy')
.and(
Expand All @@ -117,7 +118,7 @@ describe('Tree component', () => {
it('updating a simplifyOutput tree calls setSimplifiedTree', () => {
setup({ simplifyOutput: true })

cy.get('.tree__list').find('input').first().click()
cy.get('.ef-tree__list').find('input').first().click()

cy.get('@setSimplifiedTreeSpy')
.and(
Expand Down Expand Up @@ -156,19 +157,19 @@ describe('Tree component', () => {
it('onFilterChange updates the filterText', () => {
setup()

cy.get('#tree_filter_input').type('filter text')
cy.get('#ef-tree_filter_input').type('filter text')

cy.get('#tree_filter_input').should('have.value', 'filter text')
cy.get('#ef-tree_filter_input').should('have.value', 'filter text')
})

it('onFilterClear clears the filterText', () => {
setup()

cy.get('#tree_filter_input').type('filter text')
cy.get('#ef-tree_filter_input').type('filter text')

cy.get('.tree__filter-clear-button').click()
cy.get('.ef-tree__filter-clear-button').click()

cy.get('#tree_filter_input').should('have.value', '')
cy.get('#ef-tree_filter_input').should('have.value', '')
})

// These tests need the full form loaded to properly test the tree interactions,
Expand All @@ -187,8 +188,8 @@ describe('Tree component', () => {
)

// Expand tree
cy.get('[data-cy="tree-item__parent-button-2"]').click()
cy.get('[data-cy="tree-item__parent-button-3"]').click()
cy.get('[data-cy="ef-tree-item__parent-button-2"]').click()
cy.get('[data-cy="ef-tree-item__parent-button-3"]').click()

cy.get('[data-cy="/Parent1"]:indeterminate').should('exist')
cy.get('[data-cy="/Parent1/Child1-1"]:indeterminate').should('exist')
Expand All @@ -211,8 +212,8 @@ describe('Tree component', () => {
)

// Expand tree
cy.get('[data-cy="tree-item__parent-button-2"]').click()
cy.get('[data-cy="tree-item__parent-button-3"]').click()
cy.get('[data-cy="ef-tree-item__parent-button-2"]').click()
cy.get('[data-cy="ef-tree-item__parent-button-3"]').click()

// Uncheck top parent
cy.get('[data-cy="/Parent1"]').click()
Expand All @@ -238,8 +239,8 @@ describe('Tree component', () => {
)

// Expand tree
cy.get('[data-cy="tree-item__parent-button-2"]').click()
cy.get('[data-cy="tree-item__parent-button-3"]').click()
cy.get('[data-cy="ef-tree-item__parent-button-2"]').click()
cy.get('[data-cy="ef-tree-item__parent-button-3"]').click()

// Uncheck middle parent
cy.get('[data-cy="/Parent1/Child1-1"]').click()
Expand Down Expand Up @@ -275,8 +276,8 @@ describe('Tree component', () => {
)

// Expand tree
cy.get('[data-cy="tree-item__parent-button-2"]').click()
cy.get('[data-cy="tree-item__parent-button-3"]').click()
cy.get('[data-cy="ef-tree-item__parent-button-2"]').click()
cy.get('[data-cy="ef-tree-item__parent-button-3"]').click()

// Uncheck middle parent
cy.get('[data-cy="/Parent1/Child1-1/Child1-1-2"]').click()
Expand Down Expand Up @@ -312,8 +313,8 @@ describe('Tree component', () => {
)

// Expand tree
cy.get('[data-cy="tree-item__parent-button-2"]').click()
cy.get('[data-cy="tree-item__parent-button-3"]').click()
cy.get('[data-cy="ef-tree-item__parent-button-2"]').click()
cy.get('[data-cy="ef-tree-item__parent-button-3"]').click()

// Uncheck middle value parent
cy.get('[data-cy="/Parent1/Child1-1/Child1-1-1"]').click()
Expand Down Expand Up @@ -349,8 +350,8 @@ describe('Tree component', () => {
)

// Expand tree
cy.get('[data-cy="tree-item__parent-button-2"]').click()
cy.get('[data-cy="tree-item__parent-button-3"]').click()
cy.get('[data-cy="ef-tree-item__parent-button-2"]').click()
cy.get('[data-cy="ef-tree-item__parent-button-3"]').click()

// Uncheck lower leaf
cy.get('[data-cy="/Parent1/Child1-1/Child1-1-2/Child1-1-2-1"]').click()
Expand Down Expand Up @@ -386,8 +387,8 @@ describe('Tree component', () => {
)

// Expand tree
cy.get('[data-cy="tree-item__parent-button-2"]').click()
cy.get('[data-cy="tree-item__parent-button-3"]').click()
cy.get('[data-cy="ef-tree-item__parent-button-2"]').click()
cy.get('[data-cy="ef-tree-item__parent-button-3"]').click()

// Uncheck middle leaf
cy.get('[data-cy="/Parent1/Child1-1/Child1-1-1"]').click()
Expand Down Expand Up @@ -428,6 +429,29 @@ describe('Tree component', () => {
cy.get('[data-cy="/Parent1/Child1-1/Child1-1-2"]:indeterminate').should('exist')
cy.get('[data-cy="/Parent1/Child1-1/Child1-1-2/Child1-1-2-1"]').should('be.checked')
cy.get('[data-cy="/Parent1/Child1-1/Child1-1-2/Child1-1-2-2"]').should('not.be.checked')

// We shouldn't be able to scroll because the leaf labels are not long enough
cy.get('.ef-tree__list-wrapper').scrollTo('right', { ensureScrollable: false })
})

it('scrolls for long leaf label', () => {
const onFormModelUpdatedSpy = cy.spy().as('onFormModelUpdatedSpy')
const onFormIsValidUpdatedSpy = cy.spy().as('onFormIsValidUpdatedSpy')

cy.mount(
<EDSCEchoform
form={treeWithNestedScrollableXml}
onFormModelUpdated={onFormModelUpdatedSpy}
onFormIsValidUpdated={onFormIsValidUpdatedSpy}
/>
)

// Expand tree
cy.get('[data-cy="ef-tree-item__parent-button-2"]').click()
cy.get('[data-cy="ef-tree-item__parent-button-3"]').click()

// Scroll to right edge and verify that with the longer leaf label value, this element will be scrollable
cy.get('.ef-tree__list-wrapper').scrollTo('right', { ensureScrollable: true })
})
})
})
16 changes: 8 additions & 8 deletions cypress/component/TreeItem.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ describe('TreeItem component', () => {

cy.get('input').should('have.length', 2)

cy.get('.tree-item--is-parent').should('have.class', 'tree-item--is-open')
cy.get('.ef-tree-item--is-parent').should('have.class', 'ef-tree-item--is-open')
})

it('adds the level modifier classname', () => {
Expand All @@ -178,22 +178,22 @@ describe('TreeItem component', () => {
}
})

cy.get('.tree-item--child-2').should('exist')
cy.get('.ef-tree-item--child-2').should('exist')
})

describe('when the item is a parent', () => {
it('adds the modifier classname', () => {
setup()

cy.get('.tree-item--is-parent').should('exist')
cy.get('.ef-tree-item--is-parent').should('exist')
})
})

describe('when the item is first in the list', () => {
it('adds the modifier classname', () => {
setup()

cy.get('.tree-item--is-first').should('exist')
cy.get('.ef-tree-item--is-first').should('exist')
})
})

Expand All @@ -204,15 +204,15 @@ describe('TreeItem component', () => {
isLast: true
})

cy.get('.tree-item--is-last').should('exist')
cy.get('.ef-tree-item--is-last').should('exist')
})
})

describe('when the item is is open', () => {
it('adds the modifier classname', () => {
setup()

cy.get('.tree-item--is-open').should('exist')
cy.get('.ef-tree-item--is-open').should('exist')
})
})

Expand All @@ -222,7 +222,7 @@ describe('TreeItem component', () => {

cy.get('button').click()

cy.get('.tree-item--is-open').should('not.exist')
cy.get('.ef-tree-item--is-open').should('not.exist')
})
})

Expand All @@ -235,7 +235,7 @@ describe('TreeItem component', () => {
}
})

cy.get('.tree-item--is-not-relevant').should('exist')
cy.get('.ef-tree-item--is-not-relevant').should('exist')
})
})
})
2 changes: 2 additions & 0 deletions cypress/mocks/FormElement.js
View file

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

Loading

0 comments on commit 1091550

Please sign in to comment.