From 0a656e2c446974bc0c8c6f708380e933130f331e Mon Sep 17 00:00:00 2001 From: dougfabris Date: Thu, 28 Nov 2024 16:29:03 -0300 Subject: [PATCH 1/4] fix: styles --- .../src/components/CodeSnippet/CodeSnippet.styles.scss | 3 +++ packages/fuselage/src/components/CodeSnippet/CodeSnippet.tsx | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.styles.scss b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.styles.scss index 9eeded734f..5bc2f71707 100644 --- a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.styles.scss +++ b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.styles.scss @@ -3,6 +3,7 @@ @use '../../styles/typography.scss'; .rcx-code-snippet { + color: colors.font(default); display: flex; flex-direction: row; justify-content: space-between; @@ -22,6 +23,8 @@ &__codebox { margin-right: lengths.margin(8); + font-family: monospace, monospace; + white-space: pre-line; word-break: break-all; } diff --git a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.tsx b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.tsx index 9b763474cc..f75296b5fa 100644 --- a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.tsx +++ b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.tsx @@ -35,8 +35,8 @@ const CodeSnippet = ({ return ( - - {children} + + {children} {onClick && children && ( From ab6b03b4908bdfcf67034f97a8b03cec5fdcdf92 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Thu, 28 Nov 2024 16:29:18 -0300 Subject: [PATCH 2/4] chore: tests improvement --- .../CodeSnippet/CodeSnippet.spec.tsx | 73 ++++------ .../__snapshots__/CodeSnippet.spec.tsx.snap | 128 ++++++++++++++++++ 2 files changed, 154 insertions(+), 47 deletions(-) create mode 100644 packages/fuselage/src/components/CodeSnippet/__snapshots__/CodeSnippet.spec.tsx.snap diff --git a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.spec.tsx b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.spec.tsx index 6154b8caa9..c43f57b443 100644 --- 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(); - }); - - it('should display children', () => { - render(Children); - screen.getByText('Children'); - }); - - describe('Button behavior', () => { - let onClickSpy: ReturnType; - beforeEach(() => { - onClickSpy = jest.fn(); - render(); - }); - - 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(); - screen.getByText('custom-name'); - }); - - it('should display skeleton, when there is no children', () => { - const { container } = render(); - expect(container.querySelector('.rcx-skeleton')).toBeInTheDocument(); - }); - - it('should should render a disabled button, when buttonDisabled prop is passed', () => { - render(); - 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(); + expect(tree.baseElement).toMatchSnapshot(); + }, + ); + + test.each(testCases)( + '%s should have no a11y violations', + async (_storyname, Story) => { + const { container } = render(); + + const results = await axe(container); + expect(results).toHaveNoViolations(); + }, + ); }); diff --git a/packages/fuselage/src/components/CodeSnippet/__snapshots__/CodeSnippet.spec.tsx.snap b/packages/fuselage/src/components/CodeSnippet/__snapshots__/CodeSnippet.spec.tsx.snap new file mode 100644 index 0000000000..810d6725b8 --- /dev/null +++ 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`] = ` + +
+ 
+      

+        curl -L https://go.rocket.chat/i/docker-compose.yml -O
+      

+      

+        
+      

+
+
+ +`; + +exports[`[CodeSnippet Rendering] renders CustomButtonName without crashing 1`] = ` + +
+ 
+      

+        curl -L https://go.rocket.chat/i/docker-compose.yml -O
+      

+      

+        
+      

+
+
+ +`; + +exports[`[CodeSnippet Rendering] renders Default without crashing 1`] = ` + +
+ 
+      

+        curl -L https://go.rocket.chat/i/docker-compose.yml -O
+      

+
+
+ +`; + +exports[`[CodeSnippet Rendering] renders DisabledButton without crashing 1`] = ` + +
+ 
+      

+        curl -L https://go.rocket.chat/i/docker-compose.yml -O
+      

+      

+        
+      

+
+
+ +`; + +exports[`[CodeSnippet Rendering] renders LoadingCode without crashing 1`] = ` + +
+ 
+
+
+ +`; From 1774179980e4d227a57ca22e8c63d9e2e879d4bf Mon Sep 17 00:00:00 2001 From: dougfabris Date: Thu, 28 Nov 2024 16:30:15 -0300 Subject: [PATCH 3/4] chore: changeset --- .changeset/hip-bananas-obey.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/hip-bananas-obey.md diff --git a/.changeset/hip-bananas-obey.md b/.changeset/hip-bananas-obey.md new file mode 100644 index 0000000000..6db27fbf97 --- /dev/null +++ b/.changeset/hip-bananas-obey.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/fuselage': patch +--- + +fix(fuselage): `CodeSnippet` inheriting `code` css styles From b693e0a2b4bf3912c37a0f7d02bdc1e30ec94870 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Thu, 28 Nov 2024 16:57:33 -0300 Subject: [PATCH 4/4] fix: stylelint --- .../src/components/CodeSnippet/CodeSnippet.styles.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.styles.scss b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.styles.scss index 5bc2f71707..41e3932558 100644 --- a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.styles.scss +++ b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.styles.scss @@ -3,7 +3,6 @@ @use '../../styles/typography.scss'; .rcx-code-snippet { - color: colors.font(default); display: flex; flex-direction: row; justify-content: space-between; @@ -14,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) @@ -23,9 +24,9 @@ &__codebox { margin-right: lengths.margin(8); - font-family: monospace, monospace; - white-space: pre-line; word-break: break-all; + + font-family: monospace; } }