From d3b7c1526dfe900e1dd1a559a406ccdf70456737 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gromit=20=28=EC=A0=84=EB=AF=BC=EC=9E=AC=29?=
 <64779472+ssi02014@users.noreply.github.com>
Date: Thu, 8 Feb 2024 15:44:02 +0900
Subject: [PATCH] fix(react): define default prop of each components(Delay,
 Suspense) (#709)

# Overview

I was looking at the `Delay` component in `@suspensive/react` and it
seems that if we utilize the generic type of `PropsWithChildren`, we can
remove the unnecessary `OmitKeyOf` utility type.

```ts
type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };
```

Also, I added test code for the fallback of the Delay component.

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

---------

Co-authored-by: Jonghyeon Ko <manudeli.ko@gmail.com>
Co-authored-by: Jonghyeon Ko <jonghyeon.ko@wesang.com>
---
 .changeset/swift-foxes-exist.md               |  5 ++++
 .changeset/wild-carpets-study.md              |  5 ++++
 packages/react/src/Delay.spec.tsx             | 28 +++++++++++++++++--
 .../src/contexts/DefaultOptionsContexts.ts    |  1 +
 4 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/swift-foxes-exist.md
 create mode 100644 .changeset/wild-carpets-study.md

diff --git a/.changeset/swift-foxes-exist.md b/.changeset/swift-foxes-exist.md
new file mode 100644
index 000000000..00fef2609
--- /dev/null
+++ b/.changeset/swift-foxes-exist.md
@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+fix(react): define default prop of each components
diff --git a/.changeset/wild-carpets-study.md b/.changeset/wild-carpets-study.md
new file mode 100644
index 000000000..e6f36da5e
--- /dev/null
+++ b/.changeset/wild-carpets-study.md
@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+test(react): add test case for fallback prop of Delay
diff --git a/packages/react/src/Delay.spec.tsx b/packages/react/src/Delay.spec.tsx
index a4bb6ddf3..ebfd6d912 100644
--- a/packages/react/src/Delay.spec.tsx
+++ b/packages/react/src/Delay.spec.tsx
@@ -1,10 +1,19 @@
 import { CustomError, TEXT } from '@suspensive/test-utils'
 import { render, screen, waitFor } from '@testing-library/react'
 import ms from 'ms'
-import { describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { Delay } from './Delay'
 import { Delay_ms_prop_should_be_greater_than_or_equal_to_0, SuspensiveError } from './models/SuspensiveError'
 
+beforeEach(() => {
+  vi.useFakeTimers({ shouldAdvanceTime: true })
+})
+
+afterEach(() => {
+  vi.runOnlyPendingTimers()
+  vi.useRealTimers()
+})
+
 describe('<Delay/>', () => {
   it('should render the children after the delay', async () => {
     render(<Delay ms={ms('0.1s')}>{TEXT}</Delay>)
@@ -16,9 +25,22 @@ describe('<Delay/>', () => {
     render(<Delay>{TEXT}</Delay>)
     expect(screen.queryByText(TEXT)).toBeInTheDocument()
   })
-  it('should accept 0 for ms prop', async () => {
+  it('should accept 0 for ms prop', () => {
     render(<Delay ms={0}>{TEXT}</Delay>)
-    await waitFor(() => expect(screen.queryByText(TEXT)).toBeInTheDocument(), { timeout: 1000 })
+
+    expect(screen.queryByText(TEXT)).toBeInTheDocument()
+  })
+  it('should render fallback content initially and then the actual text after the delay', async () => {
+    render(
+      <Delay ms={ms('1s')} fallback={<p role="paragraph">fallback</p>}>
+        {TEXT}
+      </Delay>
+    )
+    expect(screen.queryByRole('paragraph')).toBeInTheDocument()
+
+    vi.advanceTimersByTime(ms('1s'))
+
+    await waitFor(() => expect(screen.queryByText(TEXT)).toBeInTheDocument())
   })
   it('should throw SuspensiveError if negative number is passed as ms prop', () => {
     expect(() => render(<Delay ms={-1}>{TEXT}</Delay>)).toThrow(Delay_ms_prop_should_be_greater_than_or_equal_to_0)
diff --git a/packages/react/src/contexts/DefaultOptionsContexts.ts b/packages/react/src/contexts/DefaultOptionsContexts.ts
index 850618e29..67a499f59 100644
--- a/packages/react/src/contexts/DefaultOptionsContexts.ts
+++ b/packages/react/src/contexts/DefaultOptionsContexts.ts
@@ -4,6 +4,7 @@ import type { OmitKeyOf } from '../utility-types'
 
 export const DelayDefaultPropsContext = createContext<OmitKeyOf<DelayProps, 'children'>>({
   ms: undefined,
+  fallback: undefined,
 })
 if (process.env.NODE_ENV === 'development') {
   DelayDefaultPropsContext.displayName = 'DelayDefaultPropsContext'