chore(Card): added tests for new clickable/selectable (patternfly#9262)

* chore(Card): added tests for new clickable/selectable * Added tests for clickable cards * Updated card with actions test
jenny-s51 · Jul 21, 2023 · 55789d0 · 55789d0
1 parent 937d3f4
commit 55789d0
Show file tree

Hide file tree

Showing 4 changed files with 306 additions and 73 deletions.
diff --git a/packages/react-core/src/components/Card/__tests__/CardSelectableActions.test.tsx b/packages/react-core/src/components/Card/__tests__/CardSelectableActions.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CardSelectableActions } from '../CardSelectableActions';
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CardSelectableActions>Test</CardSelectableActions>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders without children', () => {
+  render(<CardSelectableActions data-testid="card-selectable-actions" />);
+
+  expect(screen.getByTestId('card-selectable-actions')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<CardSelectableActions>Test</CardSelectableActions>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class name pf-v5-c-card__selectable-actions', () => {
+  render(<CardSelectableActions>Test</CardSelectableActions>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-card__selectable-actions');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<CardSelectableActions className="test-class">Test</CardSelectableActions>);
+
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
diff --git a/...eact-core/src/components/Card/__tests__/__snapshots__/CardSelectableActions.test.tsx.snap b/...eact-core/src/components/Card/__tests__/__snapshots__/CardSelectableActions.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-card__selectable-actions"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-integration/cypress/integration/card.spec.ts b/packages/react-integration/cypress/integration/card.spec.ts
@@ -3,8 +3,18 @@ describe('Card Demo Test', () => {
     cy.visit('http://localhost:3000/card-demo-nav-link');
   });
 
-  it('Verify that selectable card can be selected and unselected with keyboard input', () => {
-    cy.get('#selectableCard').focus();
+  it('Verify card with actions', () => {
+    cy.get('#cardWithActions .pf-v5-c-menu-toggle').then(($menuToggle) => {
+      cy.wrap($menuToggle).should('not.have.class', 'pf-m-expanded');
+      cy.wrap($menuToggle).click();
+      cy.wrap($menuToggle).should('have.class', 'pf-m-expanded');
+    });
+    cy.get('#cardWithActions .pf-v5-c-menu .pf-v5-c-menu__item').first().click();
+    cy.get('#cardWithActions .pf-v5-c-menu-toggle').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('Verify that deprecated selectable card can be selected and unselected with keyboard input', () => {
+    cy.get('#selectableCardDeprecated').focus();
     cy.focused().should('have.class', 'pf-m-selectable');
     cy.focused().should('not.have.class', 'pf-m-selected');
     cy.focused().type('{enter}');
@@ -29,4 +39,66 @@ describe('Card Demo Test', () => {
     cy.get('.pf-v5-c-card__header-toggle .pf-v5-c-button').click();
     cy.get('#expand-card').should('have.class', 'pf-m-expanded');
   });
+
+  it('Verify new selectable card can be selected', () => {
+    cy.get('#selectable-card-example-1 #selectable-card-input-1').should('not.be.checked');
+    cy.get('#selectable-card-example-2 #selectable-card-input-2').should('not.be.checked');
+    cy.get('#selectable-card-example-1').then(($card) => {
+      cy.wrap($card).click();
+      cy.wrap($card).get('#selectable-card-input-1').should('be.checked');
+      cy.get('#selectable-card-example-2 #selectable-card-input-2').should('not.be.checked');
+    });
+    cy.get('#selectable-card-example-2').then(($card) => {
+      cy.wrap($card).click();
+      cy.wrap($card).get('#selectable-card-input-2').should('be.checked');
+      cy.get('#selectable-card-example-1 #selectable-card-input-1').should('be.checked');
+    });
+  });
+
+  it('Verify new single selectable card can be selected', () => {
+    cy.get('#single-selectable-card-example-1 #single-selectable-card-input-1').should('not.be.checked');
+    cy.get('#single-selectable-card-example-2 #single-selectable-card-input-2').should('not.be.checked');
+    cy.get('#single-selectable-card-example-1').then(($card) => {
+      cy.wrap($card).click();
+      cy.wrap($card).get('#single-selectable-card-input-1').should('be.checked');
+      cy.get('#single-selectable-card-example-2 #single-selectable-card-input-2').should('not.be.checked');
+    });
+    cy.get('#single-selectable-card-example-2').then(($card) => {
+      cy.wrap($card).click();
+      cy.wrap($card).get('#single-selectable-card-input-2').should('be.checked');
+      cy.get('#single-selectable-card-example-1 #single-selectable-card-input-1').should('not.be.checked');
+    });
+  });
+
+  it('Verify clickable only card action is triggered', () => {
+    cy.get('#clickable-card-drawer').should('not.have.class', 'pf-m-expanded');
+    cy.get('#clickable-card-example-1 #clickable-card-input-1').should('not.be.checked');
+    cy.get('#clickable-card-example-1').click();
+    cy.get('#clickable-card-drawer').should('have.class', 'pf-m-expanded');
+    cy.get('#clickable-card-example-1 #clickable-card-input-1').should('be.checked');
+  });
+
+  it('Verify clickable only card link is navigated to', () => {
+    cy.location('pathname').should('eq', '/card-demo-nav-link');
+    cy.get('#clickable-card-example-2').click();
+    cy.location('pathname').should('eq', '/button-demo-nav-link');
+    cy.go('back');
+  });
+
+  it('Verify clickable and selectable card', () => {
+    cy.get('#clickable-selectable-card-drawer').should('not.have.class', 'pf-m-expanded');
+    cy.get('#clickable-selectable-card-example-1 #clickable-selectable-card-input-1').should('not.be.checked');
+    // Clicking outside clickable areas should not change input or trigger action
+    cy.get('#clickable-selectable-card-example-1').click();
+    cy.get('#clickable-selectable-card-drawer').should('not.have.class', 'pf-m-expanded');
+    cy.get('#clickable-selectable-card-example-1 #clickable-selectable-card-input-1').should('not.be.checked');
+
+    // Ciicking input should not trigger action
+    cy.get('#clickable-selectable-card-example-1 #clickable-selectable-card-input-1').click();
+    cy.get('#clickable-selectable-card-example-1 #clickable-selectable-card-input-1').should('be.checked');
+    cy.get('#clickable-selectable-card-drawer').should('not.have.class', 'pf-m-expanded');
+
+    cy.get('#clickable-selectable-card-example-1 .pf-v5-c-button').click();
+    cy.get('#clickable-selectable-card-drawer').should('have.class', 'pf-m-expanded');
+  });
 });