added e2e test case for breadcrumb

[NileshPatel17]

issue #796

[enikonemeth]

The test does not follow the test case. There is no check for the grid, and there are a lot of missing steps. I feel some misunderstanding here. Let me please illustrate the page with a picture:

You missed to check the grid in some cases. I hope that this pic can help a little.

Thanks :)

[NileshPatel17]

@pusztaienike changes done.

[enikonemeth]

@pusztaienike changes done.

I have still found some difference. Here is my final version which is working good:

import { pathWithQueryParams } from '../../../src/services/query-string-builder'

const expectedBreadcrumbItems = ['Content', '/', 'IT Workspace', '/', 'Document library']

describe('Breadcrumb', () => {
  before(() => {
    cy.login()
    cy.visit(pathWithQueryParams({ path: '/', newParams: { repoUrl: Cypress.env('repoUrl') } }))
  })
  it('breadcrumb after navigating to IT Workspace, breadcrumb should be displayed as it should.', () => {
    cy.get('[data-test="drawer-menu-item-Content"]').click()
    cy.get('[data-test="IT Workspace"]')
      .click()
      .then(() => {
        cy.get('[data-test="table-cell-Calendar"]').should('be.visible')
      })

    cy.get('[data-test="Document library"]').click({ force: true })
    cy.get('nav[aria-label="breadcrumb"] li')
      .should('have.length', expectedBreadcrumbItems.length)
      .each(($el) => {
        expect(expectedBreadcrumbItems).to.include($el.text())
      })
  })
  it('clicking on parent item in the breadcrumb should open the chosen container', () => {
    cy.get('[data-test="drawer-menu-item-Content"]').click()
    cy.get('[data-test="IT Workspace"]')
      .click()
      .then(() => {
        cy.get('[data-test="table-cell-Calendar"]').should('be.visible')
      })
    cy.get('[data-test="Document library"]')
      .click({ force: true })
      .then(() => {
        cy.get('[data-test="table-cell-Calendar"]').should('not.be.visible')
      })
    cy.get('nav[aria-label="breadcrumb"] li')
      .find('button[aria-label="IT Workspace"]')
      .click()
      .then(() => {
        cy.get('[data-test="table-cell-Calendar"]').should('be.visible')
      })
  })
  it('right click on a breadcrumb item should open its actionmenu.', () => {
    cy.get('[data-test="drawer-menu-item-Content"]').click()
    cy.get('[data-test="IT Workspace"]')
      .click()
      .then(() => {
        cy.get('[data-test="table-cell-Calendar"]').should('be.visible')
      })
    cy.get('[data-test="Document library"]').click({ force: true })
    cy.get('nav[aria-label="breadcrumb"] li')
      .should('have.length', expectedBreadcrumbItems.length)
      .find('button[aria-label="IT Workspace"]')
      .rightclick()
      .then(() => {
        cy.get('ul[role="menu"]').should('be.visible')
      })
  })
})

Global:

• I have moved the expectedBreadcrumbItems to upper scope cause I used it from more tests
• Document Library has been changed to Document library

Test1:

• .should('have.length', expectedBreadcrumbItems.length) --> After clicking on Document library the breadcrumb renders more time: the first time it only has ''Content', '/', 'IT Workspace'' but the test won't fail cause the expectedBreadcrumbItems includes these values. You need to check the length as well. In cypress if you have an assertion the test will wait till your condition will be true, so it is a valid solution to wait for rerenders as well. :)

Test2:

• here we don't need to check the breadcrumb, just the grid itself.
• I also added a plus step here:

    cy.get('[data-test="Document library"]')
      .click({ force: true })
      .then(() => {
        cy.get('[data-test="table-cell-Calendar"]').should('not.be.visible')
      })

--> Here I would like to check the clicking on document library causes a rerender of the grid.

Test3:

• assertion added to wait for breadcrumb
• check of the grid has been added

Could you please update your test with my suggestions?
Thank you for your work! 🥇