chore: add unit tests for Commands and Columns (#6916)

* chore: add unit test for CLICommands

* chore: add unit test for Columns

* Update Command.test.tsx

triggering checks

---------

Co-authored-by: katiegoines <katiegoines@gmail.com>

src/components/CliCommands/__tests__/Command.test.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Command } from '../index';
+
+describe('Command', () => {
+  const command = {
+    name: 'add',
+    description:
+      'Adds a resource for an Amplify category in your local backend',
+    usage: 'amplify add <category>',
+    flags: [
+      {
+        description:
+          'Shows verbose details, including cloudformation differences',
+        long: 'verbose',
+        short: 'v'
+      },
+      {
+        description: 'Automatically accept publish prompt',
+        long: 'yes',
+        short: 'y'
+      }
+    ],
+    subCommands: [
+      {
+        name: 'project',
+        description: 'Configure the attributes of your project',
+        usage: 'amplify configure project'
+      }
+    ]
+  };
+  const component = <Command key={command.name} {...command} />;
+
+  it('should render the Command component', async () => {
+    render(component);
+    const commandNode = await screen.findByText(
+      'Adds a resource for an Amplify category in your local backend'
+    );
+    expect(commandNode).toBeInTheDocument();
+  });
+
+  it('should render a table if flags are passed', async () => {
+    render(component);
+    const flagsTable = await screen.getByRole('table');
+    expect(flagsTable.tagName).toBe('TABLE');
+
+    const flag = await screen.getByRole('cell', { name: '-v| --verbose' });
+    const description = flag.nextElementSibling;
+    expect(description?.tagName).toBe('TD');
+    expect(description?.textContent).toBe(
+      'Shows verbose details, including cloudformation differences'
+    );
+  });
+
+  it('should render a code block if usage is passed', async () => {
+    render(component);
+    const heading = await screen.getByRole('heading', { name: 'add' });
+    const command = heading.parentElement;
+
+    const codeBlock = await screen.getByText('code example');
+    expect(command).toContainElement(codeBlock);
+  });
+
+  it('should render subcommands', async () => {
+    render(component);
+    const heading = await screen.getByRole('heading', { level: 3 });
+    const subCommand = heading.parentElement;
+
+    expect(subCommand?.classList).toContain(
+      'commands-list__command__subcommands'
+    );
+  });
+});

src/components/Columns/__tests__/Columns.test.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Columns } from '../index';
+
+describe('Columns', () => {
+  const component = (
+    <Columns columns={2} gap="small" size="small" className="overview" as="div">
+      <p>Test Column 1</p>
+      <p>Test Column 2</p>
+    </Columns>
+  );
+  it('should render the Columns component', async () => {
+    render(component);
+    const columns = await screen.findByText('Test Column 2');
+    expect(columns).toBeInTheDocument();
+  });
+
+  it('should render two columns as div', async () => {
+    render(component);
+    const columns = document.getElementsByClassName('columns')[0];
+    expect(columns.classList).toContain('columns--small--2');
+    expect(columns.tagName).toBe('DIV');
+  });
+});