chore(chat-button-toggle-skeleton): test updates (#17440)

packages/react/src/components/ChatButton/__tests__/ChatButton-test.js

@@ -0,0 +1,88 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import ChatButton from '../ChatButton';
+
+describe('ChatButton', () => {
+  it('should support rendering elements within the ChatButton through the `children` prop', () => {
+    render(
+      <ChatButton>
+        <span>child</span>
+      </ChatButton>
+    );
+    expect(screen.getByText('child')).toBeInTheDocument();
+  });
+
+  it('should support a custom className on the outermost element', () => {
+    const { container } = render(
+      <ChatButton className="custom-class">test</ChatButton>
+    );
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('should use the disabled prop to set disabled on the <ChatButton>', () => {
+    const { rerender } = render(<ChatButton>test</ChatButton>);
+    expect(screen.getByRole('button')).toBeEnabled();
+
+    rerender(<ChatButton disabled>test</ChatButton>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it.each([
+    ['primary', 'cds--btn'],
+    ['secondary', 'cds--btn--secondary'],
+    ['ghost', 'cds--btn--ghost'],
+    ['danger', 'cds--btn--danger'],
+    ['tertiary', 'cds--btn--tertiary'],
+  ])(
+    'should set the expected classes for the ChatButton of kind: `%s`',
+    (kind, className) => {
+      render(
+        <ChatButton className={className} kind={kind}>
+          test
+        </ChatButton>
+      );
+      expect(screen.getByText('test')).toHaveClass(className);
+    }
+  );
+
+  it.each([
+    ['sm', 'cds--btn--sm'],
+    ['md', 'cds--btn--md'],
+    ['lg', 'cds--btn--lg'],
+  ])(
+    'should set the expected classes for the ChatButton of size: `%s`',
+    (size, className) => {
+      render(
+        <ChatButton className={className} size={size}>
+          test
+        </ChatButton>
+      );
+      expect(screen.getByText('test')).toHaveClass(className);
+    }
+  );
+
+  it('should set kind=ghost and size=sm if isQuickAction is set on the <ChatButton>', () => {
+    render(<ChatButton isQuickAction>test</ChatButton>);
+    expect(screen.getByText('test')).toHaveClass('cds--btn--ghost');
+    expect(screen.getByText('test')).toHaveClass('cds--btn--sm');
+  });
+
+  it('should not allow sizes larger than lg on the <ChatButton>', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(<ChatButton size="xl" />);
+
+    try {
+      expect(spy).toHaveBeenCalled();
+    } finally {
+      spy.mockRestore();
+    }
+  });
+});

packages/react/src/components/ChatButton/__tests__/ChatButtonSkeleton-test.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import ChatButtonSkeleton from '../ChatButton.Skeleton';
+
+describe('ButtonSkeleton', () => {
+  it.each([
+    ['sm', 'cds--layout--size-sm'],
+    ['md', 'cds--layout--size-md'],
+    ['lg', 'cds--layout--size-lg'],
+  ])(
+    'should set the expected classes for the size: `%s`',
+    (size, className) => {
+      render(<ChatButtonSkeleton data-testid="test" size={size} />);
+      expect(screen.getByTestId('test')).toHaveClass(className);
+    }
+  );
+
+  it('should support a custom className on the outermost element', () => {
+    const { container } = render(<ChatButtonSkeleton className="test" />);
+    expect(container.firstChild).toHaveClass('test');
+  });
+
+  it('should spread props onto the outermost element', () => {
+    const { container } = render(<ChatButtonSkeleton data-testid="test" />);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
+  });
+});

packages/react/src/components/Toggle/Toggle-test.js → packages/react/src/components/Toggle/__tests__/Toggle-test.js

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import Toggle from './Toggle';
+import Toggle from '../Toggle';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 

packages/react/src/components/Toggle/__tests__/ToggleSkeleton-test.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+import ToggleSkeleton from '../Toggle.Skeleton';
+
+describe('ToggleSkeleton', () => {
+  it('should support a custom className on the outermost element', () => {
+    const { container } = render(<ToggleSkeleton className="test" />);
+    expect(container.firstChild).toHaveClass('test');
+  });
+
+  it('should spread props onto the outermost element', () => {
+    const { container } = render(<ToggleSkeleton data-testid="test" />);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
+  });
+});