fix(fuselage): CodeSnippet inheriting code css styles (#1490)

RocketChat · Dec 2, 2024 · 418dd23 · 418dd23
1 parent 8a20712
commit 418dd23
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 49 deletions.
diff --git a/.changeset/hip-bananas-obey.md b/.changeset/hip-bananas-obey.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/fuselage': patch
+---
+
+fix(fuselage): `CodeSnippet` inheriting `code` css styles
diff --git a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.spec.tsx b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.spec.tsx
@@ -1,54 +1,33 @@
 import { composeStories } from '@storybook/react';
-import { screen } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
 
 import { render } from '../../testing';
 
 import * as stories from './CodeSnippet.stories';
 
-const { Default, CopyButton, CustomButtonName, LoadingCode, DisabledButton } =
-  composeStories(stories);
-
-describe('[CodeSnippet Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
-
-  it('should display children', () => {
-    render(<Default>Children</Default>);
-    screen.getByText('Children');
-  });
-
-  describe('Button behavior', () => {
-    let onClickSpy: ReturnType<typeof jest.fn>;
-    beforeEach(() => {
-      onClickSpy = jest.fn();
-      render(<CopyButton onClick={onClickSpy} />);
-    });
-
-    it('should display button, when component receives onClick property', () => {
-      screen.getByRole('button');
-    });
-
-    it('should call onClick function when button is clicked', () => {
-      const button = screen.getByRole('button');
-      button.click();
-      expect(onClickSpy).toHaveBeenCalled();
-    });
-  });
-
-  it('should change button name, when buttonText property is passed', () => {
-    render(<CustomButtonName buttonText='custom-name' />);
-    screen.getByText('custom-name');
-  });
-
-  it('should display skeleton, when there is no children', () => {
-    const { container } = render(<LoadingCode />);
-    expect(container.querySelector('.rcx-skeleton')).toBeInTheDocument();
-  });
-
-  it('should should render a disabled button, when buttonDisabled prop is passed', () => {
-    render(<DisabledButton />);
-    const button = screen.getByRole('button');
-    expect(button).toBeDisabled();
-  });
+expect.extend(toHaveNoViolations);
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
+
+describe('[CodeSnippet Rendering]', () => {
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    },
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    },
+  );
 });
diff --git a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.styles.scss b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.styles.scss
@@ -13,6 +13,8 @@
   min-height: lengths.size(60);
   padding: lengths.padding(16);
 
+  color: colors.font(default);
+
   border-radius: theme(
     'code-snippet-border-radius',
     lengths.border-radius(medium)
@@ -24,5 +26,7 @@
 
     white-space: pre-line;
     word-break: break-all;
+
+    font-family: monospace;
   }
 }
diff --git a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.tsx b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.tsx
@@ -35,8 +35,8 @@ const CodeSnippet = ({
 
   return (
     <Box is='pre' rcx-code-snippet {...props}>
-      <Box rcx-code-snippet__codebox>
-        <code>{children}</code>
+      <Box role='code' rcx-code-snippet__codebox>
+        {children}
       </Box>
       {onClick && children && (
         <Box>

diff --git a/packages/fuselage/src/components/CodeSnippet/__snapshots__/CodeSnippet.spec.tsx.snap b/packages/fuselage/src/components/CodeSnippet/__snapshots__/CodeSnippet.spec.tsx.snap
@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[CodeSnippet Rendering] renders CopyButton without crashing 1`] = `
+<body>
+  <div>
+    <pre
+      class="rcx-box rcx-box--full rcx-code-snippet"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-code-snippet__codebox"
+        role="code"
+      >
+        curl -L https://go.rocket.chat/i/docker-compose.yml -O
+      </div>
+      <div
+        class="rcx-box rcx-box--full"
+      >
+        <button
+          class="rcx-box rcx-box--full rcx-button--small rcx-button--primary rcx-button"
+          type="button"
+        >
+          <span
+            class="rcx-button--content"
+          >
+            Copy
+          </span>
+        </button>
+      </div>
+    </pre>
+  </div>
+</body>
+`;
+
+exports[`[CodeSnippet Rendering] renders CustomButtonName without crashing 1`] = `
+<body>
+  <div>
+    <pre
+      class="rcx-box rcx-box--full rcx-code-snippet"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-code-snippet__codebox"
+        role="code"
+      >
+        curl -L https://go.rocket.chat/i/docker-compose.yml -O
+      </div>
+      <div
+        class="rcx-box rcx-box--full"
+      >
+        <button
+          class="rcx-box rcx-box--full rcx-button--small rcx-button--primary rcx-button"
+          type="button"
+        >
+          <span
+            class="rcx-button--content"
+          >
+            Custom name
+          </span>
+        </button>
+      </div>
+    </pre>
+  </div>
+</body>
+`;
+
+exports[`[CodeSnippet Rendering] renders Default without crashing 1`] = `
+<body>
+  <div>
+    <pre
+      class="rcx-box rcx-box--full rcx-code-snippet"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-code-snippet__codebox"
+        role="code"
+      >
+        curl -L https://go.rocket.chat/i/docker-compose.yml -O
+      </div>
+    </pre>
+  </div>
+</body>
+`;
+
+exports[`[CodeSnippet Rendering] renders DisabledButton without crashing 1`] = `
+<body>
+  <div>
+    <pre
+      class="rcx-box rcx-box--full rcx-code-snippet"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-code-snippet__codebox"
+        role="code"
+      >
+        curl -L https://go.rocket.chat/i/docker-compose.yml -O
+      </div>
+      <div
+        class="rcx-box rcx-box--full"
+      >
+        <button
+          class="rcx-box rcx-box--full rcx-button--small rcx-button--primary rcx-button"
+          disabled=""
+          type="button"
+        >
+          <span
+            class="rcx-button--content"
+          >
+            Disabled Button
+          </span>
+        </button>
+      </div>
+    </pre>
+  </div>
+</body>
+`;
+
+exports[`[CodeSnippet Rendering] renders LoadingCode without crashing 1`] = `
+<body>
+  <div>
+    <pre
+      class="rcx-box rcx-box--full rcx-code-snippet"
+    >
+      <span
+        aria-busy="true"
+        aria-hidden="true"
+        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+      />
+    </pre>
+  </div>
+</body>
+`;