fix(card): update card and skeleton tests, update default alt attr value

src/components/Card/Card.js

@@ -96,7 +96,7 @@ Card.defaultProps = {
   className: '',
   footer: null,
   header: null,
-  label: null,
+  label: '',
   link: null,
   onClick: null,
 };
@@ -131,7 +131,7 @@ Card.propTypes = {
     title: string.isRequired,
   }),
 
-  /** @type {string} Card label. */
+  /** @type {string} The alt tag content for an image, if included in the header object. */
   label: string,
 
   /** @type {string} The link. */

src/components/Card/CardSkeleton/__tests__/CardSkeleton.spec.js

@@ -0,0 +1,21 @@
+/**
+ * @file Card skeleton tests.
+ * @copyright IBM Security 2020
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { CardSkeleton } from '../../../..';
+
+describe('CardSkeleton', () => {
+  test('should have no Axe or DAP violations', async () => {
+    const main = document.createElement('main');
+    render(<CardSkeleton />, {
+      // DAP requires a landmark '<main>' in the DOM:
+      container: document.body.appendChild(main),
+    });
+    await expect(document.body).toHaveNoAxeViolations();
+    await expect(document.body).toHaveNoDAPViolations('CardSkeleton');
+  });
+});

src/components/Card/__tests__/Card.spec.js

@@ -1,61 +1,195 @@
 /**
  * @file Card tests.
- * @copyright IBM Security 2019
+ * @copyright IBM Security 2020
  */
 
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
+import userEvent from '@testing-library/user-event';
 
-import { children, className } from '../../_mocks_';
+import { Card } from '../../..';
 
-import { Card, CardSkeleton } from '../';
+import { icon } from '../../_mocks_';
 
-import { image, label, link, tag, text as bodyText, title } from '../_mocks_';
+describe('Card', () => {
+  test('should have no Axe or DAP violations', async () => {
+    const main = document.createElement('main');
+    render(
+      <Card
+        header={{
+          image: icon,
+          tag: 'test tag',
+          title: 'test title',
+        }}
+        label="test label"
+        body={{
+          text: 'test content',
+        }}
+        footer={{
+          children: <span>test footer</span>,
+        }}
+      />,
+      {
+        // DAP requires a landmark '<main>' in the DOM:
+        container: document.body.appendChild(main),
+      }
+    );
+    await expect(document.body).toHaveNoAxeViolations();
+    await expect(document.body).toHaveNoDAPViolations('Card');
+  });
 
-const props = {
-  className,
-  label,
+  test('should have no Axe or DAP violations when rendered as a link', async () => {
+    const main = document.createElement('main');
+    render(
+      <Card
+        header={{
+          title: 'test title',
+        }}
+        link="#"
+      />,
+      {
+        // DAP requires a landmark '<main>' in the DOM:
+        container: document.body.appendChild(main),
+      }
+    );
+    await expect(document.body).toHaveNoAxeViolations();
+    await expect(document.body).toHaveNoDAPViolations('Card as a link');
+  });
 
-  header: {
-    tag,
-    image,
-    title,
-  },
+  test('should invoke click mock when card is clicked', () => {
+    const onClickMock = jest.fn();
+    const { getByText } = render(
+      <Card
+        header={{
+          title: 'test title',
+        }}
+        link="#"
+        onClick={onClickMock}
+      />
+    );
 
-  body: {
-    text: bodyText,
-  },
+    userEvent.click(getByText(/test title/i));
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+  });
 
-  footer: {
-    children,
-  },
-};
+  test('should add custom class', () => {
+    const { getByText } = render(
+      <Card
+        header={{
+          title: 'test title',
+        }}
+        className="custom-class"
+      />
+    );
+    expect(getByText(/test title/i).parentNode.parentNode).toHaveClass(
+      'custom-class'
+    );
+  });
 
-describe('Card', () => {
-  let card;
+  test('should apply a header with an image, tag, and title', () => {
+    const { container, queryByText } = render(
+      <Card
+        header={{
+          image: 'test-image',
+          tag: 'test tag',
+          title: 'test title',
+        }}
+      />
+    );
+    expect(container.querySelector('img')).toHaveAttribute('src', 'test-image');
+    expect(queryByText('test title')).toBeVisible();
+    expect(queryByText('test tag')).toBeVisible();
+  });
 
-  beforeEach(() => {
-    card = shallow(<Card {...props}>{children}</Card>);
+  test('should apply alt text to the header image via the `label` prop', () => {
+    const { queryByAltText } = render(
+      <Card
+        header={{
+          image: 'test-image',
+          title: 'test title',
+        }}
+        label="test label"
+      />
+    );
+    expect(queryByAltText('test label')).toBeVisible();
   });
 
-  it('renders', () => {
-    expect(card).toMatchSnapshot();
+  test('should apply aria-label via the `label` prop if `link` is `true`', () => {
+    const { queryByLabelText } = render(
+      <Card
+        header={{
+          title: 'test title',
+        }}
+        label="test label"
+        link="#"
+      />
+    );
+    expect(queryByLabelText('test label')).toBeVisible();
   });
 
-  it("renders the HTML of the node's subtree", () => {
-    expect(card.render()).toMatchSnapshot();
+  test('should apply a footer', () => {
+    const { queryByText } = render(
+      <Card
+        header={{
+          title: 'test title',
+        }}
+        footer={{
+          children: <span>test footer</span>,
+        }}
+      />
+    );
+    expect(queryByText('test footer')).toBeVisible();
   });
 
-  it('renders the link variation', () => {
-    card.setProps({
-      link,
-      onClick: jest.fn(),
-    });
+  test('should apply a body', () => {
+    const { queryByText } = render(
+      <Card
+        header={{
+          title: 'test title',
+        }}
+        body={{
+          text: 'test content',
+        }}
+      />
+    );
+    expect(queryByText('test content')).toBeVisible();
+  });
 
-    expect(card).toMatchSnapshot();
+  test('should render as a `div` by default if no `link` prop is provided', () => {
+    const { container } = render(
+      <Card
+        header={{
+          title: 'test title',
+        }}
+      />
+    );
+    expect(container.firstElementChild.nodeName).toBe('DIV');
   });
 
-  it('renders the skeleton variation', () => {
-    expect(shallow(<CardSkeleton />)).toMatchSnapshot();
+  test('should render as an `a` element when a `link` is provided', () => {
+    const { container } = render(
+      <Card
+        header={{
+          title: 'test title',
+        }}
+        link="#"
+      />
+    );
+    expect(container.firstElementChild.nodeName).toBe('A');
+  });
+
+  test('should render children', () => {
+    const { getByText } = render(
+      <Card
+        header={{
+          title: 'test title',
+        }}
+        link="#"
+      >
+        <span>test content</span>
+      </Card>
+    );
+
+    expect(getByText('test content')).toBeVisible();
   });
 });