chore: Adds snapshot tests in `ui-video-conf` package (#32780)

* chore: add snapshot tests

* fix: review

* Use `@rocket.chat/jest-presets`

---------

Co-authored-by: Tasso <tasso.evangelista@rocket.chat>

packages/jest-presets/package.json

@@ -16,7 +16,9 @@
 		"@swc/core": "~1.5.24",
 		"@swc/jest": "~0.2.36",
 		"@testing-library/jest-dom": "~6.4.5",
+		"@types/jest-axe": "~3.5.9",
 		"identity-obj-proxy": "~3.0.0",
+		"jest-axe": "~9.0.0",
 		"jest-environment-jsdom": "~29.7.0",
 		"uuid": "~9.0.1"
 	},

packages/jest-presets/src/client/jest-setup.ts

 import { TextEncoder, TextDecoder } from 'node:util';
 
+import { toHaveNoViolations } from 'jest-axe';
 import * as uuid from 'uuid';
 
 import '@testing-library/jest-dom';
 
+expect.extend(toHaveNoViolations);
+
 const urlByBlob = new WeakMap<Blob, string>();
 const blobByUrl = new Map<string, Blob>();
 

packages/ui-video-conf/.storybook/main.js

 /** @type {import('@storybook/react/types').StorybookConfig} */
 module.exports = {
 	stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
-	addons: ['@storybook/addon-essentials'],
+	addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
 	framework: '@storybook/react',
 	features: {
 		postcss: false,

packages/ui-video-conf/.storybook/preview.js

 import '../../../apps/meteor/app/theme/client/main.css';
 import 'highlight.js/styles/github.css';
+import '@rocket.chat/icons/dist/rocketchat.css';
 
 export const parameters = {
 	actions: { argTypesRegex: '^on[A-Z].*' },

packages/ui-video-conf/jest.config.ts

+import client from '@rocket.chat/jest-presets/client';
+import type { Config } from 'jest';
+
+export default {
+	preset: client.preset,
+	setupFilesAfterEnv: [...client.setupFilesAfterEnv],
+	testMatch: ['<rootDir>/src/**/*.spec.{ts,tsx}'],
+} satisfies Config;

packages/ui-video-conf/package.json

@@ -9,9 +9,11 @@
 		"@rocket.chat/fuselage": "^0.57.0",
 		"@rocket.chat/fuselage-hooks": "^0.33.1",
 		"@rocket.chat/icons": "^0.36.0",
+		"@rocket.chat/jest-presets": "workspace:~",
 		"@rocket.chat/styled": "~0.31.25",
 		"@rocket.chat/ui-avatar": "workspace:^",
 		"@rocket.chat/ui-contexts": "workspace:^",
+		"@storybook/addon-a11y": "^6.5.16",
 		"@storybook/addon-actions": "~6.5.16",
 		"@storybook/addon-docs": "~6.5.16",
 		"@storybook/addon-essentials": "~6.5.16",
@@ -19,13 +21,16 @@
 		"@storybook/manager-webpack4": "~6.5.16",
 		"@storybook/react": "~6.5.16",
 		"@storybook/testing-library": "~0.0.13",
+		"@storybook/testing-react": "~1.3.0",
 		"@types/babel__core": "~7.20.3",
 		"@types/jest": "~29.5.12",
+		"@types/jest-axe": "~3.5.9",
 		"eslint": "~8.45.0",
 		"eslint-plugin-react": "~7.32.2",
 		"eslint-plugin-react-hooks": "~4.6.0",
 		"eslint-plugin-storybook": "~0.6.15",
 		"jest": "~29.7.0",
+		"jest-axe": "~9.0.0",
 		"react-docgen-typescript-plugin": "~1.0.5",
 		"ts-jest": "~29.1.1",
 		"typescript": "~5.3.3"
@@ -45,9 +50,9 @@
 		"eslint": "eslint --ext .js,.jsx,.ts,.tsx .",
 		"eslint:fix": "eslint --ext .js,.jsx,.ts,.tsx . --fix",
 		"test": "jest",
-		"build": "tsc -p tsconfig.json",
+		"build": "tsc -p tsconfig.build.json",
 		"storybook": "start-storybook -p 6006",
-		"dev": "tsc -p tsconfig.json --watch --preserveWatchOutput"
+		"dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput"
 	},
 	"main": "./dist/index.js",
 	"typings": "./dist/index.d.ts",

packages/ui-video-conf/src/VideoConfButton/VideoConfButton.spec.tsx

+import { composeStories } from '@storybook/testing-react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './VideoConfButton.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+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();
+});

packages/ui-video-conf/src/VideoConfButton/VideoConfButton.stories.tsx

+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import VideoConfButton from './VideoConfButton';
+
+export default {
+	title: 'Components/VideoConfButton',
+	component: VideoConfButton,
+} satisfies ComponentMeta<typeof VideoConfButton>;
+
+export const Default: ComponentStory<typeof VideoConfButton> = () => <VideoConfButton>Button</VideoConfButton>;

packages/ui-video-conf/src/VideoConfButton/__snapshots__/VideoConfButton.spec.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Default without crashing 1`] = `
+<body>
+  <div>
+    <button
+      class="rcx-box rcx-box--full rcx-button rcx-css-1qcz93u"
+      type="button"
+    >
+      <span
+        class="rcx-button--content"
+      >
+        Button
+      </span>
+    </button>
+  </div>
+</body>
+`;

packages/ui-video-conf/src/VideoConfButton/index.ts

+export { default } from './VideoConfButton';

packages/ui-video-conf/src/VideoConfController/VideoConfController.spec.tsx

+import { composeStories } from '@storybook/testing-react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './VideoConfController.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+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();
+});

packages/ui-video-conf/src/VideoConfController/VideoConfController.stories.tsx

+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import VideoConfController from './VideoConfController';
+
+export default {
+	title: 'Components/VideoConfController',
+	component: VideoConfController,
+} satisfies ComponentMeta<typeof VideoConfController>;
+
+export const Default: ComponentStory<typeof VideoConfController> = (args) => <VideoConfController {...args} />;
+Default.args = {
+	'icon': 'info',
+	'aria-label': 'info',
+};

packages/ui-video-conf/src/VideoConfController.tsx → packages/ui-video-conf/src/VideoConfController/VideoConfController.tsx

 import { IconButton } from '@rocket.chat/fuselage';
-import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import type { Keys as IconName } from '@rocket.chat/icons';
 import type { ReactElement, ButtonHTMLAttributes } from 'react';
 
@@ -11,21 +10,16 @@ type VideoConfControllerProps = {
 	small?: boolean;
 } & Omit<ButtonHTMLAttributes<HTMLElement>, 'ref' | 'is' | 'className' | 'size' | 'elevation'>;
 
-const VideoConfController = ({ icon, active, secondary, disabled, small = true, ...props }: VideoConfControllerProps): ReactElement => {
-	const id = useUniqueId();
-
-	return (
-		<IconButton
-			aria-live='assertive'
-			small={small}
-			icon={icon}
-			id={id}
-			info={active}
-			disabled={disabled}
-			secondary={secondary || active || disabled}
-			{...props}
-		/>
-	);
-};
+const VideoConfController = ({ icon, active, secondary, disabled, small = true, ...props }: VideoConfControllerProps): ReactElement => (
+	<IconButton
+		aria-live='assertive'
+		small={small}
+		icon={icon}
+		info={active}
+		disabled={disabled}
+		secondary={secondary || active || disabled}
+		{...props}
+	/>
+);
 
 export default VideoConfController;

packages/ui-video-conf/src/VideoConfController/__snapshots__/VideoConfController.spec.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Default without crashing 1`] = `
+<body>
+  <div>
+    <button
+      aria-label="info"
+      aria-live="assertive"
+      class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button"
+      type="button"
+    >
+      <i
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-icon--name-info rcx-icon rcx-css-4pvxx3"
+      >
+        
+      </i>
+    </button>
+  </div>
+</body>
+`;

packages/ui-video-conf/src/VideoConfController/index.ts

+export { default } from './VideoConfController';

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.spec.tsx

+import { composeStories } from '@storybook/testing-react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './VideoConfMessage.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+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();
+});

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx

@@ -2,7 +2,6 @@ import { MessageDivider, Message, Avatar, Box } from '@rocket.chat/fuselage';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import type { ReactElement } from 'react';
 
-import '@rocket.chat/icons/dist/rocketchat.css';
 import { VideoConfMessage, VideoConfMessageIcon, VideoConfMessageRow, VideoConfMessageText } from '.';
 import VideoConfMessageAction from './VideoConfMessageAction';
 import VideoConfMessageActions from './VideoConfMessageActions';
@@ -22,7 +21,7 @@ export default {
 				<MessageDivider>May, 24, 2020</MessageDivider>
 				<Message className='customclass'>
 					<Message.LeftContainer>
-						<Avatar url={avatarUrl} size='x36' />
+						<Avatar alt='' url={avatarUrl} size='x36' />
 					</Message.LeftContainer>
 					<Message.Container>
 						<Message.Header>
@@ -41,7 +40,7 @@ export default {
 			</Box>
 		),
 	],
-} as ComponentMeta<typeof VideoConfMessage>;
+} satisfies ComponentMeta<typeof VideoConfMessage>;
 
 const avatarUrl =
 	'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z';
@@ -54,7 +53,7 @@ export const CallingDM: ComponentStory<typeof VideoConfMessage> = () => (
 				<VideoConfMessageText>Calling...</VideoConfMessageText>
 			</VideoConfMessageContent>
 			<VideoConfMessageActions>
-				<VideoConfMessageAction icon='info' />
+				<VideoConfMessageAction aria-label='info' icon='info' />
 			</VideoConfMessageActions>
 		</VideoConfMessageRow>
 		<VideoConfMessageFooter>
@@ -72,7 +71,7 @@ export const CallEndedDM: ComponentStory<typeof VideoConfMessage> = () => (
 				<VideoConfMessageText>Call ended</VideoConfMessageText>
 			</VideoConfMessageContent>
 			<VideoConfMessageActions>
-				<VideoConfMessageAction icon='info' />
+				<VideoConfMessageAction aria-label='info' icon='info' />
 			</VideoConfMessageActions>
 		</VideoConfMessageRow>
 		<VideoConfMessageFooter>
@@ -90,7 +89,7 @@ export const CallOngoing: ComponentStory<typeof VideoConfMessage> = () => (
 				<VideoConfMessageText>Call ongoing</VideoConfMessageText>
 			</VideoConfMessageContent>
 			<VideoConfMessageActions>
-				<VideoConfMessageAction icon='info' />
+				<VideoConfMessageAction aria-label='info' icon='info' />
 			</VideoConfMessageActions>
 		</VideoConfMessageRow>
 		<VideoConfMessageFooter>
@@ -109,7 +108,7 @@ export const CallEnded: ComponentStory<typeof VideoConfMessage> = () => (
 				<VideoConfMessageText>Call ended</VideoConfMessageText>
 			</VideoConfMessageContent>
 			<VideoConfMessageActions>
-				<VideoConfMessageAction icon='info' />
+				<VideoConfMessageAction aria-label='info' icon='info' />
 			</VideoConfMessageActions>
 		</VideoConfMessageRow>
 		<VideoConfMessageFooter>

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.tsx

 import { Box } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
+import type { AllHTMLAttributes, ReactElement } from 'react';
 
-const VideoConfMessage = ({ ...props }): ReactElement => (
+type VideoConfMessageProps = Omit<AllHTMLAttributes<HTMLDivElement>, 'is'>;
+const VideoConfMessage = (props: VideoConfMessageProps): ReactElement => (
 	<Box
 		mbs={4}
 		color='default'
@@ -10,7 +11,7 @@ const VideoConfMessage = ({ ...props }): ReactElement => (
 		borderWidth={1}
 		borderColor='extra-light'
 		borderRadius='x4'
-		className='rcx-videoconf-message-block'
+		rcx-videoconf-message-block
 		{...props}
 	/>
 );

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageAction.tsx

@@ -2,6 +2,6 @@ import { IconButton } from '@rocket.chat/fuselage';
 import type { ComponentProps, ReactElement } from 'react';
 
 const VideoConfMessageAction = ({ icon = 'info', ...props }: ComponentProps<typeof IconButton>): ReactElement => (
-	<IconButton icon={icon} small {...props} />
+	<IconButton {...props} icon={icon} small />
 );
 export default VideoConfMessageAction;