PB-73: Several UI improvement in import tool

[ltshb]

• Placeholder translation updated
• removed the search bar for the geo catalogue, the regular search bar in the header should be use.
• Added color background on text search emphasize
• Added tooltip for truncated text in catalogue
• Truncate and added tooltip for long layer title in active layers

Test link

[cypress]

Passing run #212 ↗︎

0

161

19

0

0

Details:

Skipped flaky test
Project: web-mapviewer	Commit: 9f1d0a272e
Status: Passed	Duration: 04:22 💡
Started: Jan 12, 2024 1:59 PM	Ended: Jan 12, 2024 2:03 PM

Review all test suite changes for PR #598 ↗︎

[ltshb]

@pakb I'm not sure if I want to keep this test, I don't like the 1s wait. Unfortunately I did not find a way to make this test reliable. Without this wait is fails time to time.
I tried to spy on ResizeObserver and/or initializeTippy but without success the spy was never called. Maybe you have some better idea ?

[ltshb]

Here are some code that I tried

// Assertions based on the spy

const slotContent = 'My slot content'
// const { wrapper, component } = cy.mount(TextTruncate, {
//     slots: { default: slotContent },
// })
cy.mount(TextTruncate, {
    slots: { default: slotContent },
}).as('mount')
cy.get('@mount').then((wrapper) => {
    cy.spy(wrapper.component, 'initializeTippy').as('initializeTippy')

    cy.get('@initializeTippy').should('not.have.been.calledOnce')
    cy.get('[data-cy="inner-element"]').realHover({ position: 'left' })
    cy.get('[data-cy="outter-element"]').should('not.have.attr', 'aria-describedby')
    cy.get('.tippy-box').should('not.exist')
    cy.get('[data-cy="inner-element"]').click('left')

    cy.viewport(50, 480)
    cy.get('@resizeObserverSpy').should('have.been.calledOnce')
    cy.get('@initializeTippy').should('have.been.calledOnce')
    cy.get('[data-cy="inner-element"]').realHover({ position: 'left' })
    cy.get('[data-cy="outter-element"]').should('have.attr', 'aria-describedby')
    cy.get('.tippy-box').should('be.visible').contains(slotContent)
    cy.get('[data-cy="inner-element"]').click('left')

    cy.viewport(300, 480)
    cy.get('@initializeTippy').should('have.been.calledOnce')
    cy.get('[data-cy="inner-element"]').realHover({ position: 'left' })
    cy.get('[data-cy="outter-element"]').should('not.have.attr', 'aria-describedby')
    cy.get('.tippy-box').should('not.exist')
    cy.get('[data-cy="inner-element"]').click('left')
})

// Clean-up: restore the original ResizeObserver
win.ResizeObserver = originalResizeObserver

[pakb]

as discussed, try this wait/intercept approach to replace the arbitrary 1000ms wait, and we are good to go

[ltshb]

Also the tests now seems to be quite stable on the CI, it is not the case locally using the cypress gui and headless ! I'll try another approach using events instead of fake url.

[ltshb]

I could not find anyway to make the tests non flaky, therefore I skipped the one that causing issues for the moment