fix: result page enhancement

src/components/result-page/result-page.tsx

@@ -39,7 +39,7 @@ export type ResultPageProps = {
   title: ReactNode
   description?: ReactNode
   icon?: ReactNode
-  details?: ResultPageDetails
+  details?: ResultPageDetails | null
   children?: ReactNode
   primaryButtonText?: ReactNode
   secondaryButtonText?: ReactNode
@@ -81,7 +81,7 @@ export const ResultPage: FC<ResultPageProps> = p => {
         {isNodeWithContent(description) ? (
           <div className={`${classPrefix}-description`}>{description}</div>
         ) : null}
-        {details.length ? (
+        {details?.length ? (
           <div className={`${classPrefix}-details`}>
             {(collapse ? details.slice(0, 3) : details).map((detail, index) => {
               return (
@@ -116,35 +116,37 @@ export const ResultPage: FC<ResultPageProps> = p => {
 
       <div className={`${classPrefix}-content`}>{props.children}</div>
 
-      <div className={`${classPrefix}-footer`}>
-        {showSecondaryButton && (
-          <Button
-            block
-            color='default'
-            fill='solid'
-            size='large'
-            onClick={onSecondaryButtonClick}
-            className={`${classPrefix}-footer-btn`}
-          >
-            {secondaryButtonText}
-          </Button>
-        )}
-        {showPrimaryButton && showSecondaryButton && (
-          <div className={`${classPrefix}-footer-space`} />
-        )}
-        {showPrimaryButton && (
-          <Button
-            block
-            color='primary'
-            fill='solid'
-            size='large'
-            onClick={onPrimaryButtonClick}
-            className={`${classPrefix}-footer-btn`}
-          >
-            {primaryButtonText}
-          </Button>
-        )}
-      </div>
+      {(showPrimaryButton || showSecondaryButton) && (
+        <div className={`${classPrefix}-footer`}>
+          {showSecondaryButton && (
+            <Button
+              block
+              color='default'
+              fill='solid'
+              size='large'
+              onClick={onSecondaryButtonClick}
+              className={`${classPrefix}-footer-btn`}
+            >
+              {secondaryButtonText}
+            </Button>
+          )}
+          {showPrimaryButton && showSecondaryButton && (
+            <div className={`${classPrefix}-footer-space`} />
+          )}
+          {showPrimaryButton && (
+            <Button
+              block
+              color='primary'
+              fill='solid'
+              size='large'
+              onClick={onPrimaryButtonClick}
+              className={`${classPrefix}-footer-btn`}
+            >
+              {primaryButtonText}
+            </Button>
+          )}
+        </div>
+      )}
     </div>
   )
 }

src/components/result-page/tests/result-page.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { render, screen } from 'testing'
+import ResultPage from '..'
+
+const classPrefix = 'adm-result-page'
+
+describe('ResultPage', () => {
+  test('renders with success status', () => {
+    render(
+      <ResultPage
+        status='success'
+        title='title'
+        description='desc'
+        primaryButtonText='primary'
+        secondaryButtonText='secondary'
+      />
+    )
+    expect(screen.getByText('title')).toBeInTheDocument()
+    expect(screen.getByText('desc')).toBeInTheDocument()
+    expect(screen.getByText('primary')).toBeInTheDocument()
+    expect(screen.getByText('secondary')).toBeInTheDocument()
+  })
+
+  test('renders with details: null', () => {
+    render(
+      <ResultPage
+        status='success'
+        title='title'
+        description='desc'
+        details={null}
+      />
+    )
+    expect(screen.getByText('title')).toBeInTheDocument()
+    expect(screen.getByText('desc')).toBeInTheDocument()
+    expect(document.querySelector(`.${classPrefix}-detail`)).not.toBeInTheDocument()
+  })
+
+  test('renders with no footer', () => {
+    render(<ResultPage status='success' title='title' description='desc' />)
+    expect(screen.getByText('title')).toBeInTheDocument()
+    expect(screen.getByText('desc')).toBeInTheDocument()
+    expect(document.querySelector(`.${classPrefix}-footer`)).not.toBeInTheDocument()
+  })
+})