test(TabbarItem): add screenshots tests to component (#7477)

packages/vkui/src/components/TabbarItem/TabbarItem.e2e-playground.tsx

@@ -0,0 +1,34 @@
+import { Icon28MessageOutline } from '@vkontakte/icons';
+import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers';
+import { Badge } from '../Badge/Badge';
+import { Tabbar, type TabbarProps } from '../Tabbar/Tabbar';
+import { TabbarItem, type TabbarItemProps } from './TabbarItem';
+
+export const TabbarItemPlayground = (playgroundProps: ComponentPlaygroundProps) => {
+  return (
+    <ComponentPlayground
+      {...playgroundProps}
+      propSets={[
+        {
+          mode: ['vertical', 'horizontal'],
+          text: ['Message'],
+          children: [<Icon28MessageOutline key="icon" />],
+          indicator: [undefined, <Badge key="badge" />],
+          disabled: [false, true],
+        },
+        {
+          mode: ['horizontal'],
+          text: ['Message'],
+          children: [<Icon28MessageOutline key="icon" />],
+          selected: [true, false],
+        },
+      ]}
+    >
+      {(props: TabbarItemProps & Pick<TabbarProps, 'mode'>) => (
+        <Tabbar mode={props.mode} style={{ position: 'relative' }}>
+          <TabbarItem {...props} />
+        </Tabbar>
+      )}
+    </ComponentPlayground>
+  );
+};

packages/vkui/src/components/TabbarItem/TabbarItem.e2e.tsx

@@ -0,0 +1,13 @@
+import { test } from '@vkui-e2e/test';
+import { TabbarItemPlayground } from './TabbarItem.e2e-playground';
+
+test.use({ onlyForPlatforms: ['android', 'ios'] });
+
+test('TabbarItem', async ({
+  mount,
+  expectScreenshotClippedToContent,
+  componentPlaygroundProps,
+}) => {
+  await mount(<TabbarItemPlayground {...componentPlaygroundProps} />);
+  await expectScreenshotClippedToContent();
+});