patternfly-react/packages/react-integration/cypress/integration/datalist.spec.ts at 0c9ba402e9f756788cf3b123d1cca54d88bb5fe0 · tlabaj/patternfly-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
describe('Data List Demo Test', () => {
  it('Navigate to demo section', () => {
    cy.visit('http://localhost:3000/data-list-demo-nav-link');
  });

  it('in glass theme, does not apply glass plain transparent background when pf-m-no-plain-on-glass is present (even with pf-m-plain)', () => {
    cy.visit('http://localhost:3000/data-list-demo-nav-link');
    cy.document().then((doc) => {
      doc.documentElement.classList.add('pf-v6-theme-glass');
    });

    cy.get('[data-testid="data-list-glass-plain-both"]')
      .should('have.class', 'pf-m-no-plain-on-glass')
      .and('have.class', 'pf-m-plain');

    // Glass/plain tokens set --pf-v6-c-data-list__item--BackgroundColor on the list; items paint it.
    // The `<ul>` has no background-color rule, so its computed background stays transparent.
    cy.get('[data-testid="data-list-glass-plain-both"] .pf-v6-c-data-list__item')
      .first()
      .then(($item) => {
        const el = $item[0];
        const win = el.ownerDocument.defaultView;
        if (!win) {
          throw new Error('expected window');
        }
        const bg = win.getComputedStyle(el).backgroundColor;
        const fullyTransparent = bg === 'transparent' || bg === 'rgba(0, 0, 0, 0)' || bg === 'rgba(0,0,0,0)';
        expect(fullyTransparent, `expected non-transparent item background, got ${bg}`).to.eq(false);
      });
  });

  it('Verify rows selectable', () => {
    cy.visit('http://localhost:3000/data-list-demo-nav-link');
    cy.get('#row1.pf-m-clickable').should('exist');
    cy.get('#row2.pf-m-clickable').should('exist');

    cy.get('#row1.pf-m-selected').should('not.exist');
    cy.get('#row2.pf-m-selected').should('not.exist');

    cy.get('#row1').click();
    cy.get('#row1.pf-m-selected').should('exist');
    cy.get('#row2.pf-m-selected').should('not.exist');

    cy.get('#row2').click();
    cy.get('#row1.pf-m-selected').should('not.exist');
    cy.get('#row2.pf-m-selected').should('exist');
  });
});

// Skip this test until a new drag and drop is implemented
describe.skip('Data List Draggable Demo Test', () => {
  it('Navigate to demo section', () => {
    cy.visit('http://localhost:3000/data-list-draggable-demo-nav-link');
  });

  it('Verify drag', () => {
    cy.get('#data1').contains('Item 1');
    cy.get('#drag1').type(' ');
    cy.get('#drag1').type('{downarrow}');
    cy.get('#data1').should('have.class', 'pf-m-ghost-row');
    cy.get('#drag1').type('{downarrow}');
    cy.get('#drag1').type('{enter}');
    cy.get('#data1').should('not.have.class', 'pf-m-ghost-row');
  });
});