Refs #38822: update pf3 buttons to pf5 - common/table/Delete

Author: Konstantinos Familonidis

webpack/assets/javascripts/react_app/components/common/table/components/DeleteButton.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'patternfly-react';
+import { Button } from '@patternfly/react-core';
 import { translate as __ } from '../../../../common/I18n';
 
 const DeleteButton = ({ active, onClick }) =>
   active ? (
-    <Button bsStyle="default" onClick={onClick}>
+    <Button ouiaId="table-delete-button" variant="secondary" onClick={onClick}>
       {__('Delete')}
     </Button>
   ) : null;

webpack/assets/javascripts/react_app/components/common/table/components/__tests__/DeleteButton.test.js

@@ -1,4 +1,7 @@
-import { testComponentSnapshotsWithFixtures } from 'foremanReact/common/testHelpers';
+import React from 'react';
+import { screen, fireEvent, render, act } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
 import DeleteButton from '../DeleteButton';
 
 const baseProps = {
@@ -9,13 +12,49 @@ const baseProps = {
 };
 
 const fixtures = {
-  'should render delete button on active': {
+  'active': {
     active: true,
     ...baseProps,
   },
-  'should render nothing on inactive': baseProps,
+  'inactive': baseProps,
 };
 
 describe('DeleteButton', () => {
-  testComponentSnapshotsWithFixtures(DeleteButton, fixtures);
+  describe('when active', () => {
+    const props = { ...fixtures.active };
+
+    it('should render delete button', () => {
+      render(<DeleteButton {...props} />);
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i });
+      expect(deleteButton).toBeInTheDocument();
+    });
+
+    it('should have correct button text', () => {
+      render(<DeleteButton {...props} />);
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i });
+      expect(deleteButton).toHaveTextContent('Delete');
+    });
+
+    it('should have secondary variant style', () => {
+      render(<DeleteButton {...props} />);
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i });
+      expect(deleteButton).toHaveClass('pf-m-secondary');
+    });
+  });
+
+  describe('when inactive', () => {
+    const props = { ...fixtures.inactive };
+
+    it('should not render anything', () => {
+      const { container } = render(<DeleteButton {...props} />);
+
+      const button = screen.queryByRole('button', { name: /delete/i });
+      expect(button).not.toBeInTheDocument();
+
+      expect(container.firstChild).toBeNull();
+    });
+  });
 });