Playwright test update

.storybook/preview.tsx

@@ -6,6 +6,7 @@ import { withThemeByClassName } from '@storybook/addon-themes'
 import plgd from '../src/components/Atomic/_theme/plgd'
 import siemens from "../src/components/Atomic/_theme/siemens";
 import App from "../src/components/Atomic/App/App";
+import ErrorBoundary from "../src/components/Atomic/ErrorBoundary";
 
 const preview: Preview = {
     parameters: {
@@ -25,9 +26,11 @@ const withTheme = (StoryFn: any, context: any) => {
 
     return (
         <ThemeProvider theme={getThemeByKey(context.globals.theme)}>
-            <App>
-                <StoryFn/>
-            </App>
+            <ErrorBoundary>
+                <App>
+                    <StoryFn/>
+                </App>
+            </ErrorBoundary>
             <div id="modal-root"></div>
             <div id="modal-floating"></div>
         </ThemeProvider>

package.json

@@ -33,8 +33,9 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test:storybook": "npx playwright test",
-    "test:storybook:ui": "npx playwright test --ui",
+    "test:storybook:ui": "npx playwright test --ui --update-snapshots",
     "test:storybook:debug": "npx playwright test --debug",
+    "test:storybook:updateSnapshots": "npx playwright test --update-snapshots",
     "test:storybook:report": "npx playwright show-report"
   },
   "dependencies": {

src/components/Atomic/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import isFunction from 'lodash/isFunction'
+
+type Props = {
+    logErrorToMyService?: (error: any, errorInfo: any) => void
+    children: React.ReactNode
+}
+
+type State = {
+    hasError: boolean
+}
+
+class ErrorBoundary extends React.Component<Props, State> {
+    constructor(props: Props) {
+        super(props)
+        this.state = { hasError: false }
+    }
+
+    static getDerivedStateFromError(error: any) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true }
+    }
+
+    componentDidCatch(error: any, errorInfo: any) {
+        // You can also log the error to an error reporting service
+        if (isFunction(this.props.logErrorToMyService)) {
+            this.props.logErrorToMyService(error, errorInfo)
+        } else {
+            console.log('ERROR')
+            console.log(error)
+            console.log(errorInfo)
+        }
+    }
+
+    render() {
+        if (this.state.hasError) {
+            // You can render any custom fallback UI
+            return <h1>Something went wrong.</h1>
+        }
+
+        return this.props.children
+    }
+}
+
+export default ErrorBoundary

src/components/Atomic/ErrorBoundary/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './ErrorBoundary'
+export * from './ErrorBoundary'

src/components/Atomic/Tabs/Tabs.test.tsx

@@ -7,6 +7,7 @@ describe('<Tabs>', () => {
         const { asFragment } = render(
             <div>
                 <Tabs
+                    activeItem={0}
                     onItemChange={(activeItem) => console.log(`Active item: ${activeItem}`)}
                     tabs={[
                         { name: 'Device information', id: 0, content: <div style={{ height: 300, background: '#e5e5e5' }}>Device information content</div> },

src/components/Atomic/Tabs/Tabs.tsx

@@ -1,9 +1,9 @@
-import React, { FC, Suspense, useCallback, useEffect, useRef, useState } from 'react'
+import React, { FC, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import isFunction from 'lodash/isFunction'
 import { motion } from 'framer-motion'
 import classNames from 'classnames'
 
-import { defaultProps, Props } from './Tabs.types'
+import { defaultProps, Props, TabItemType } from './Tabs.types'
 import * as styles from './Tabs.styles'
 import { useMeasure } from '../../../common/hooks/use-measure'
 import Pager from './Pager'
@@ -13,14 +13,33 @@ import IconCheck from '../Icon/components/IconCheck'
 import IconWarningCircle from '../Icon/components/IconWarningCircle'
 import MotionElement from '../MotionElement'
 
+export const TabItem = (props: TabItemType) => <>{props.content}</>
+
 const Tabs: FC<Props> = (props) => {
-    const { activeItem, className, onAnimationComplete, onItemChange, fullHeight, innerPadding, isAsync, style, tabs } = { ...defaultProps, ...props }
+    const { activeItem, className, onAnimationComplete, onItemChange, fullHeight, innerPadding, isAsync, style, tabs: tabsProp } = { ...defaultProps, ...props }
     const [value, setValue] = useState(activeItem)
     const childRefs = useRef(new Map())
     const tabListRef = useRef<HTMLDivElement | null>(null)
     const [slider, setSlider] = useState({ left: 0, right: 0, hasValue: false })
     const { bounds, ref } = useMeasure()
 
+    const tabs = useMemo(() => {
+        if (tabsProp && tabsProp.length > 0) {
+            return tabsProp
+        }
+
+        if (props.children) {
+            const items = React.Children.map(props.children, (child, i) => {
+                const tab = child as React.ReactElement
+                return tab.props as TabItemType
+            })?.filter((tab) => tab)
+
+            return items || []
+        }
+
+        return []
+    }, [tabsProp, props.children])
+
     const handleTabChange = (i: number) => {
         setValue(i)
         isFunction(onItemChange) && onItemChange(i)

src/components/Atomic/Tabs/Tabs.types.ts

@@ -3,7 +3,7 @@ import { statuses } from './constants'
 
 export type StatusType = (typeof statuses)[keyof typeof statuses]
 
-export type TabItem = {
+export type TabItemType = {
     content: ReactNode
     dataTestId?: string
     disabled?: boolean
@@ -14,17 +14,18 @@ export type TabItem = {
 }
 
 export type Props = {
-    activeItem?: number
+    activeItem: number
     className?: string
     fullHeight?: boolean
     innerPadding?: boolean
     isAsync?: boolean
     onAnimationComplete?: () => void
     onItemChange?: (activeItem: number) => void
     style?: CSSProperties
-    tabs: TabItem[]
+    tabs?: TabItemType[]
+    children?: ReactNode[]
 }
 
-export const defaultProps = {
+export const defaultProps: Partial<Props> = {
     activeItem: 0,
 }

src/stories/Keycloakify/KeycloakTemplate.stories.tsx → src/stories/Keycloak/KeycloakTemplate.stories.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { StoryFn } from '@storybook/react'
 import KeycloakTemplate from '../../components/Templates/KeycloakTemplate'
 import '../global.css'
 import Swiper from '../../components/Atomic/Swiper'
@@ -16,10 +17,9 @@ import Button from '../../components/Atomic/Button'
 import FormLabel from '../../components/Atomic/FormLabel'
 import FormInput from '../../components/Atomic/FormInput'
 import SignInForm from '../../components/Templates/SignInForm'
-import { StoryFn } from '@storybook/react'
 
 export default {
-    title: 'Keycloakify/KeycloakTemplate',
+    title: 'Keycloak/KeycloakTemplate',
     component: KeycloakTemplate,
     argTypes: {},
 }

src/stories/Keycloakify/Popup.stories.tsx → src/stories/Keycloak/Popup.stories.tsx

@@ -7,7 +7,7 @@ import Button from '../../components/Atomic/Button'
 import { StoryFn } from '@storybook/react'
 
 export default {
-    title: 'Keycloakify/Popup',
+    title: 'Keycloak/Popup',
     component: Popup,
     argTypes: {},
 }

src/stories/Keycloakify/SignInForm.stories.tsx → src/stories/Keycloak/SignInForm.stories.tsx

@@ -10,7 +10,7 @@ import '../global.css'
 import { StoryFn } from '@storybook/react'
 
 export default {
-    title: 'Keycloakify/SignInForm',
+    title: 'Keycloak/SignInForm',
     component: SignInForm,
     argTypes: {},
 }

src/stories/Keycloakify/Steps.stories.tsx → src/stories/Keycloak/Steps.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import Steps from '../../components/Templates/Steps'
 import { StoryFn } from '@storybook/react'
+import Steps from '../../components/Templates/Steps'
 
 export default {
-    title: 'Keycloakify/Steps',
+    title: 'Keycloak/Steps',
     component: Steps,
     argTypes: {},
 }

src/stories/Tabs.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import Tabs from '../components/Atomic/Tabs'
+import Tabs, { TabItem } from '../components/Atomic/Tabs/Tabs'
 import { StoryFn } from '@storybook/react'
 
 export default {
@@ -8,19 +8,17 @@ export default {
     argTypes: {},
 }
 
+const Content = (props: any) => <div style={{ height: 300, background: '#e5e5e5' }}>Content {props.id}</div>
+
 const Template = (args: any) => {
     const [activeItem, setActiveItem] = useState(0)
+
     return (
         <div>
-            <Tabs
-                {...args}
-                activeItem={activeItem}
-                onItemChange={(activeItem) => setActiveItem(activeItem)}
-                tabs={[
-                    { id: 0, name: 'Device information', content: <div style={{ height: 300, background: '#e5e5e5' }}>Device information content</div> },
-                    { id: 1, name: 'Resources', content: <div style={{ height: 300, background: '#e5e5e5' }}>Resources content</div> },
-                ]}
-            />
+            <Tabs {...args} activeItem={activeItem} onItemChange={(activeItem: number) => setActiveItem(activeItem)} testujeme={<Content />}>
+                <TabItem content={<Content id={0} />} id={0} name='Device information' />
+                <TabItem content={<Content id={1} />} id={1} name='Resources' />
+            </Tabs>
         </div>
     )
 }

tests/components.spec.ts

@@ -28,7 +28,7 @@ const components = [
         group: 'Form',
         items: [
             { name: 'ActionButton', views: ['variants'] },
-            { name: 'Button' },
+            { name: 'Button', views: ['variants', 'disabled', 'icon', 'loading'] },
             { name: 'Checkbox' },
             { name: 'ColorPicker' },
             { name: 'ConfirmButton' },
@@ -39,7 +39,7 @@ const components = [
             { name: 'FormSelect' },
             { name: 'FormTextarea' },
             { name: 'Radio' },
-            { name: 'SplitButton' },
+            { name: 'SplitButton', views: ['variants', 'disabled', 'icon', 'loading'] },
             { name: 'Switch' },
             { name: 'TimeoutControl' },
         ],