change b to span for PageHeader.tsx

add tests for SentinelDatabases.stories.tsx

Author: pd-redis

redisinsight/ui/src/components/page-header/PageHeader.tsx

@@ -18,6 +18,7 @@ import { Title } from 'uiSrc/components/base/text/Title'
 import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
 import { RedisLogoFullIcon } from 'uiSrc/components/base/icons'
 import styles from './PageHeader.module.scss'
+import { ColorText } from 'uiSrc/components/base/text'
 
 interface Props {
   title?: string
@@ -59,7 +60,9 @@ const PageHeader = (props: Props) => {
         <div>
           {title && (
             <Title size="L" data-testid="page-title">
-              <b data-testid="page-header-title">{title}</b>
+              <ColorText variant="semiBold" data-testid="page-header-title">
+                {title}
+              </ColorText>
             </Title>
           )}
           {subtitle ? <span data-testid="page-subtitle">{subtitle}</span> : ''}

redisinsight/ui/src/pages/autodiscover-cloud/utils.tsx

@@ -18,8 +18,16 @@ export const getSelectionColumn = <T extends object>({
     size,
     isHeaderCustom: true,
     header: ({ table }) => (
-      <Table.HeaderMultiRowSelectionButton table={table} />
+      <Table.HeaderMultiRowSelectionButton
+        table={table}
+        data-testid="row-selection"
+      />
+    ),
+    cell: ({ row }) => (
+      <Table.RowSelectionButton
+        row={row}
+        data-testid={`row-selection-${row.id}`}
+      />
     ),
-    cell: ({ row }) => <Table.RowSelectionButton row={row} />,
   }
 }

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.stories.tsx

@@ -1,20 +1,23 @@
 import React, { useState } from 'react'
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { action } from 'storybook/actions'
+import { expect, fn, screen } from 'storybook/test'
 
 import SentinelDatabases from './SentinelDatabases'
 import {
   AddRedisDatabaseStatus,
   ModifiedSentinelMaster,
 } from 'uiSrc/slices/interfaces'
 import { RowSelectionState } from '@redis-ui/table'
-import {
-  colFactory,
-  getRowId,
-} from 'uiSrc/pages/autodiscover-sentinel/sentinel-databases/useSentinelDatabasesConfig'
+import { colFactory, getRowId } from '../../useSentinelDatabasesConfig'
 
 const meta: Meta<typeof SentinelDatabases> = {
   component: SentinelDatabases,
+  args: {
+    onBack: fn(),
+    onClose: fn(),
+    onSubmit: fn(),
+  },
 }
 
 export default meta
@@ -74,9 +77,9 @@ const DefaultRender = () => {
       selection={selection || []}
       columns={columnsMock}
       masters={mastersMock}
-      onClose={action('onClose')}
-      onBack={action('onBack')}
-      onSubmit={action('onSubmit')}
+      onClose={meta.args?.onClose!}
+      onBack={meta.args?.onBack!}
+      onSubmit={meta.args?.onSubmit!}
       onSelectionChange={(sel) => {
         setSelection(sel)
       }}
@@ -86,6 +89,41 @@ const DefaultRender = () => {
 
 export const Default: Story = {
   render: () => <DefaultRender />,
+  play: async ({ canvas, userEvent, args, step }) => {
+    await step('Ensure render', async () => {
+      await expect(canvas.getByTestId('row-selection')).toBeInTheDocument()
+      await expect(canvas.getByText('mymaster')).toBeInTheDocument()
+      await expect(canvas.getByText('mymaster2')).toBeInTheDocument()
+      await expect(
+        canvas.getByText('Auto-Discover Redis Sentinel Primary Groups'),
+      ).toBeInTheDocument()
+      await expect(canvas.getByText('Add databases')).toBeInTheDocument()
+    })
+    // you can group interactions with `step`
+    await step('Ensure cancel is called', async () => {
+      await userEvent.click(canvas.getByRole('button', { name: 'Cancel' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Proceed' }))
+      await expect(args.onClose).toHaveBeenCalled()
+    })
+    // or you can just call actions sequentially
+    // await userEvent.click(canvas.getByRole('button', { name: 'Cancel' }))
+    // await userEvent.click(screen.getByRole('button', { name: 'Proceed' }))
+    // await expect(args.onClose).toHaveBeenCalled()
+    await step('Back to add databases screen is called', async () => {
+      await userEvent.click(
+        canvas.getByRole('button', { name: 'Add databases' }),
+      )
+      await expect(args.onBack).toHaveBeenCalled()
+    })
+    await step('Primary group selection', async () => {
+      await userEvent.click(canvas.getByTestId('row-selection-1'))
+      await userEvent.click(
+        // name can be exact matching string or regex
+        canvas.getByRole('button', { name: /add primary group/i }),
+      )
+      await expect(args.onSubmit).toHaveBeenCalled()
+    })
+  },
 }
 const emptyColumnsMock = colFactory([], () => {})
 export const Empty: Story = {
@@ -98,4 +136,9 @@ export const Empty: Story = {
     onSubmit: action('onSubmit'),
     onSelectionChange: action('on selection change'),
   },
+  play: async ({ canvas }) => {
+    await expect(
+      canvas.getByText('Your Redis Sentinel has no primary groups available'),
+    ).toBeInTheDocument()
+  },
 }

stories/Start.mdx

@@ -8,3 +8,14 @@ import { Meta } from "@storybook/addon-docs/blocks";
 Redis Insight is a visual tool that provides capabilities to design, develop, and optimize your Redis application.
 
 Query, analyse and interact with your Redis data. [Download it here](https://redis.io/insight/#insight-form)!
+
+### Storybook
+
+#### [Play function](https://storybook.js.org/docs/writing-stories/play-function)
+Besides development in isolation, Storybook also provides a way to test interactions and user flows.
+
+#### [Interaction testing](https://storybook.js.org/docs/writing-tests/interaction-testing)
+Every story you write can be render tested. A render test is a simple version of an interaction test that only tests the ability of a component to render successfully in a given state.
+
+#### [Accessibility testing](https://storybook.js.org/docs/writing-tests/accessibility-testing)
+Storybook provides a way to test accessibility of our components.