From 155c158a893fbbb9ed8e5f11e8e28986ce0e167f Mon Sep 17 00:00:00 2001
From: Dmitry Petrov <dvpetrov.main@gmail.com>
Date: Sun, 16 Jan 2022 16:58:03 +0300
Subject: [PATCH] feat(react): tests for `useProperty` when subscribed in
 `Strict` mode

---
 packages/react/src/use-property.spec.tsx | 38 ++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/use-property.spec.tsx b/packages/react/src/use-property.spec.tsx
index b35c382..05a4351 100644
--- a/packages/react/src/use-property.spec.tsx
+++ b/packages/react/src/use-property.spec.tsx
@@ -1,8 +1,8 @@
 import { Property, atom, emitter, property } from '@frp-ts/core'
-import React, { useState } from 'react'
+import React, { useEffect } from 'react'
 import { useProperty } from './use-property'
 import { constVoid } from '@frp-ts/utils'
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { act } from 'react-dom/test-utils'
 
 interface TestProps<A> {
@@ -19,6 +19,7 @@ describe('useProperty', () => {
 		const a = atom.newAtom(123)
 		const cb = jest.fn(constVoid)
 		render(<Test property={a} onValue={cb} />)
+		expect(cb).toHaveBeenCalledTimes(1)
 		expect(cb).toHaveBeenLastCalledWith(123)
 	})
 	it('returns new value from new property', () => {
@@ -35,9 +36,10 @@ describe('useProperty', () => {
 		const Component = () => {
 			const value = useProperty(a)
 			cb(value)
-			useState(() => a.set(2))
+			useEffect(() => a.set(2), [])
 			return <></>
 		}
+
 		render(<Component />)
 		expect(cb.mock.calls).toEqual([[1], [2]])
 	})
@@ -84,4 +86,34 @@ describe('useProperty', () => {
 		a.set(a.get() + 1)
 		expect(cb).not.toHaveBeenCalled()
 	})
+	it('subscribe in strict mode with nested components', () => {
+		const a = atom.newAtom(1)
+		const cb = jest.fn()
+
+		const InnerComponent = (props: { value: number }) => {
+			cb(props.value)
+			return <>Value {props.value}</>
+		}
+		const Component = () => {
+			const value = useProperty(a)
+			return <InnerComponent value={value} />
+		}
+		render(
+			<React.StrictMode>
+				<Component />
+			</React.StrictMode>,
+		)
+
+		expect(screen.getByText('Value 1')).toBeDefined()
+		expect(cb).toBeCalledTimes(2)
+		expect(cb).toHaveBeenLastCalledWith(1)
+
+		act(() => {
+			a.set(2)
+		})
+
+		expect(screen.getByText('Value 2')).toBeDefined()
+		expect(cb).toBeCalledTimes(4)
+		expect(cb).toHaveBeenLastCalledWith(2)
+	})
 })