add basic component cypress tests

cypress/component/Ansible.cy.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Ansible from '../../packages/module/dist/dynamic/Ansible';
+
+describe('Ansible', () => {
+  it('renders supported Ansible', () => {
+    cy.mount(<Ansible unsupported={false}/>)
+    cy.get('i').should('have.class', 'ansibleSupported-0-2-2');
+  });
+  it('renders unsupported Ansible', () => {
+    cy.mount(<Ansible unsupported={true}/>)
+    cy.get('i').should('have.class', 'ansibleUnsupported-0-2-3');
+  });
+});

cypress/component/CloseButton.cy.tsx

@@ -2,9 +2,15 @@ import React from 'react';
 import CloseButton from '../../packages/module/dist/dynamic/CloseButton';
 
 describe('CloseButton', () => {
+  /* eslint-disable no-console */
   it('renders the Close button', () => {
-    /* eslint-disable no-console */
     cy.mount(<CloseButton dataTestID="close-button-example" onClick={()=>{console.log('Close button clicked')}} style={{ float: 'none' }}/>)
     cy.get('[data-test-id="close-button-example"]').should('exist');
-  })
+  });
+  it('should call callback on click', () => {
+    const onClickSpy = cy.spy().as('onClickSpy');
+    cy.mount(<CloseButton dataTestID="close-button-example" onClick={onClickSpy}/>);
+    cy.get('[data-test-id="close-button-example"]').click();
+    cy.get('@onClickSpy').should('have.been.called');
+  });
 })

cypress/component/ErrorBoundary.cy.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ErrorBoundary from '../../packages/module/dist/dynamic/ErrorBoundary';
+
+describe('ErrorBoundary', () => {
+  it('renders the ErrorBoundary ', () => {
+    cy.mount(<ErrorBoundary headerTitle="My app header" errorTitle="Something wrong happened"/>)
+    cy.get('div h1').should('have.text', 'Something wrong happened');
+  });
+})

cypress/component/ErrorState.cy.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import ErrorState from '../../packages/module/dist/dynamic/ErrorState';
+import { ActionButton } from '../../packages/module/dist/dynamic/ActionButton'
+
+describe('ErrorState', () => {
+  it('renders the Close button', () => {
+    cy.mount(<ErrorState errorTitle='Sample error title' errorDescription='Sample error description' />);
+    cy.get('h4').should('have.text', 'Sample error title');
+    cy.get('div div div div div div').should('have.text', 'Sample error description');
+  });
+
+  it('render with a custom footer', () => {
+    const onClickSpy = cy.spy().as('onClickSpy');
+    cy.mount(<ErrorState errorTitle='Sample error title' errorDescription='Sample error description' customFooter={<ActionButton variant="secondary" onClick={onClickSpy}>
+    Custom action
+    </ActionButton>}/>);
+    cy.get('button').should('exist');
+    cy.get('button').click();
+    cy.get('@onClickSpy').should('have.been.called');
+  })
+})

cypress/component/InvalidObject.cy.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import InvalidObject from '../../packages/module/dist/dynamic/InvalidObject';
+
+describe('InvalidObject', () => {
+  it('renders InvalidObject', () => {
+    cy.mount(<InvalidObject />)
+    cy.get('[class="pf-v5-c-empty-state"]').should('exist')
+    cy.get('h1').should('have.text', 'We lost that page');
+  });
+})

cypress/component/LogSnippet.cy.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import LogSnippet from '../../packages/module/dist/dynamic/LogSnippet';
+
+describe('LogSnippet', () => {
+  it('renders LogSnippet', () => {
+    cy.mount(<LogSnippet logSnippet='test test code' message='A test message'/>)
+    cy.get('div div p').should('have.text', 'A test message');
+    cy.get('div div div div pre').should('have.text', 'test test code');
+  });
+});

cypress/component/MultiContentCard.cy.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
+import { Button, Card, CardHeader, CardBody, Text, TextContent, TextVariants, Icon, TextList, TextListItem, CardFooter } from '@patternfly/react-core';
+import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
+
+const cards = [
+  <Card isFullHeight isPlain key="card-1">
+    <CardHeader>
+      <TextContent>
+        <Text component={TextVariants.h4}>Getting Started</Text>
+      </TextContent>
+    </CardHeader>
+    <CardBody>
+      <TextContent>
+        <Text className="pf-v5-u-font-size-sm pf-v5-u-font-weight-bold pf-v5-u-mb-sm pf-v5-u-link-color-hover">
+          <Icon size="md" className="pf-v5-u-pl-sm pf-v5-u-pr-md">
+            <CogIcon />
+          </Icon>
+          Configure application
+        </Text>
+        <Text className="pf-v5-u-font-size-sm">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Text>
+      </TextContent>
+    </CardBody>
+    <CardFooter>
+      <TextContent>
+        <TextList className="pf-v5-u-font-size-sm pf-v5-u-link-color pf-v5-u-ml-0">
+          <TextListItem>
+            <Button variant="link" isInline>First link</Button>
+          </TextListItem>
+          <TextListItem>
+            <Button variant="link" isInline>Second link</Button>
+          </TextListItem>
+          <TextListItem>
+            <Button variant="link" isInline>Another link</Button>
+          </TextListItem>
+        </TextList>
+      </TextContent>
+    </CardFooter>
+  </Card>,
+  <Card isFullHeight isPlain key="card-2">
+    <CardBody className="pf-v5-u-pt-3xl-on-md">
+      <TextContent>
+        <Text className="pf-v5-u-font-size-sm pf-v5-u-font-weight-bold pf-v5-u-mb-sm pf-v5-u-link-color-hover">
+          <Icon size="md" className="pf-v5-u-pl-sm pf-v5-u-pr-md">
+            <LockIcon />
+          </Icon>
+          Configure access
+        </Text>
+        <Text className="pf-v5-u-font-size-sm">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </Text>
+      </TextContent>
+    </CardBody>
+    <CardFooter>
+      <Text>
+        <Button variant="link" isInline>
+            Learn more  
+          <Icon className="pf-u-ml-sm" isInline>
+            <ArrowRightIcon />
+          </Icon>
+        </Button>
+      </Text>
+    </CardFooter>
+  </Card>,
+  <Card isFullHeight isPlain key="card-3">
+    <CardHeader>
+      <TextContent>
+        <Text component={TextVariants.h4}>Next Steps</Text>
+      </TextContent>
+    </CardHeader>
+    <CardBody>
+      <TextContent>
+        <Text className="pf-v5-u-font-size-sm pf-v5-u-font-weight-bold pf-v5-u-mb-sm pf-v5-u-link-color-hover">
+          <Icon size="md" className="pf-v5-u-pl-sm pf-v5-u-pr-md">
+            <BellIcon />
+          </Icon>
+          Configure notifications
+        </Text>
+        <Text className="pf-v5-u-font-size-sm">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Text>
+      </TextContent>
+    </CardBody>
+    <CardFooter>
+      <Text>
+        <Button variant="link" isInline>
+            Learn more  
+          <Icon className="pf-u-ml-sm" isInline>
+            <ArrowRightIcon />
+          </Icon>
+        </Button>
+      </Text>
+    </CardFooter>
+  </Card>
+];
+
+const MultiContentCardExample: React.FunctionComponent = () => <MultiContentCard cards={cards} />;
+
+describe('MultiContentCard', () => {
+  it('renders MultiContentCard', () => {
+    cy.mount(<MultiContentCardExample />);
+    cy.get('[class="pf-v5-c-card pf-m-expanded"').should('exist');
+  });
+});

cypress/component/NotAuthorized.cy.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import NotAuthorized from '../../packages/module/dist/dynamic/NotAuthorized';
+
+describe('NotAuthorized', () => {
+  it('renders basic NotAuthorized', () => {
+    cy.mount(<NotAuthorized 
+      description="Test text" 
+      serviceName="Test bundle"
+      prevPageButtonText="Go to previous page"
+    />);
+    cy.get('div div div h5').should('have.text', 'You do not have access to Test bundle');
+    cy.get('[class="pf-v5-c-empty-state__body"').should('have.text', 'Test text');
+  });
+
+  it('renders NotAuthorized with custom action buttons', () => {
+    const onClickSpy = cy.spy().as('onClickSpy');
+    const primaryAction = 
+    <Button key="1" onClick={onClickSpy}>
+      Custom primary action
+    </Button>;
+    const customNotAuthorized = <NotAuthorized 
+      primaryAction={primaryAction}
+      description="Test text" 
+      serviceName="Demo bundle"
+      prevPageButtonText="Go to previous page"
+    />
+    cy.mount(customNotAuthorized);
+    const customButton = cy.get('div div div div button')
+    customButton.should('exist');
+    customButton.should('have.text', 'Custom primary action');
+    customButton.click();
+    cy.get('@onClickSpy').should('have.been.called');
+  });
+});

cypress/component/ShortcutGrid.cy.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ShortcutGrid from '../../packages/module/dist/dynamic/ShortcutGrid';
+
+describe('ShortcutGrid', () => {
+  it('renders ShortcutGrid', () => {
+    const shortCutGridExample = <ShortcutGrid 
+      shortcuts={[ 
+        { description: 'Open new tab', keys: [ 'cmd', 'shift', 't' ] }, 
+        { description: 'Open new page', keys: [ 'opt', 'n' ] },
+        { description: 'Move object', keys: [ 'ctrl' ], drag: true },  
+      ]}
+    />
+    cy.mount(shortCutGridExample);
+    cy.get('[class="pf-v5-l-grid pf-m-all-6-col pf-m-gutter"]').should('exist');
+    cy.get('div div').should('have.text', '⌘ Cmd + ⇧ Shift + TOpen new tab⌥ Opt + NOpen new page^ Ctrl +  DragMove object⌘ Cmd + ⇧ Shift + T⌘ Cmd⇧ ShiftTOpen new tab⌥ Opt + N⌥ OptNOpen new page^ Ctrl +  Drag^ Ctrl DragMove object');
+  });
+})

cypress/component/SkeletonTable.cy.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import SkeletonTable from '../../packages/module/dist/dynamic/SkeletonTable';
+
+describe('SkeletonTable', () => {
+  it('renders SkeletonTable', () => {
+    const SkeletonTableExample =  <SkeletonTable rowSize={10} columns={[ 'first', 'second' ]} />;
+    cy.mount(SkeletonTableExample);
+    cy.get('table').should('exist');
+    cy.get('table thead tr').should('have.text', 'firstsecond');
+  });
+})

cypress/component/TagCount.cy.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import TagCount from '../../packages/module/dist/dynamic/TagCount';
+
+describe('TagCount', () => {
+  it('renders TagCount', () => {
+    cy.mount(<TagCount count={50} />)
+    cy.get('button').should('exist');
+    cy.get('button span').should('have.text', '50');
+  });
+
+  it('render disabled', () => {
+    cy.mount(<TagCount disabled={true} />)
+    cy.get('button').should('be.disabled');
+  });
+});

cypress/component/UnavailableContent.cy.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import UnavailableContent from '../../packages/module/dist/dynamic/UnavailableContent';
+
+describe('UnavailableContent', () => {
+  it('renders UnavailableContent', () => {
+    cy.mount(<UnavailableContent />)
+    cy.get('[class="pf-v5-c-empty-state__content"').should('exist');
+    cy.get('div div div h5').should('have.text', 'This page is temporarily unavailable');
+    cy.get('[class="pf-v5-c-empty-state__body"').should('have.text', 'Try refreshing the page. If the problem persists, contact your organization administrator or visit our status page for known outages.');
+  });
+});

cypress/component/WarningModal.cy.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import WarningModal from '../../packages/module/dist/dynamic/WarningModal';
+
+const BasicModal: React.FunctionComponent = () => {
+  const [ isOpen, setIsOpen ] = React.useState(false);
+  return <>
+    <Button onClick={() => setIsOpen(true)}>Open modal</Button>
+    <WarningModal
+      isOpen={isOpen}
+      title='Unsaved changes'
+      confirmButtonLabel='Yes'
+      cancelButtonLabel='No'
+      onClose={() => setIsOpen(false)}
+      onConfirm={() => setIsOpen(false)}>
+      Your page contains unsaved changes. Do you want to leave?
+    </WarningModal>
+  </>
+};
+
+describe('WarningModal', () => {
+  it('renders WarningModal', () => {
+    cy.mount(<BasicModal />)
+    cy.get('button').click();
+    cy.get('[class="pf-v5-c-modal-box pf-m-warning pf-m-sm"').should('exist');
+    cy.get('div header h1 span').should('have.text', 'Warning alert:Unsaved changes');
+  });
+});