test with example

Author: SilentCatD

example/package.json

@@ -12,8 +12,9 @@
     "@types/react-dom": "^18.2.17",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-state-view-controller": "latest",
+    "react-scoped-provider": "^1.3.2",
     "react-scripts": "5.0.1",
+    "rxjs": "^7.8.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

example/src/App.tsx

@@ -1,55 +1,73 @@
 import { useState } from 'react'
 import logo from './logo.svg'
 import './App.css'
-import { MultiProvider, Provider, useNamedProvider, useProvider } from 'react-scoped-provider'
+import {
+  Controller,
+  ControllerProvider,
+  useBuilder,
+  useListener,
+  useProvider,
+  useSelector,
+} from 'react-state-view-controller'
 
-class Counter {
+type MultiCounterState = {
   count: number
-  constructor(count: number) {
-    this.count = count
+  count2: number
+}
+
+class MultiCounterController extends Controller<MultiCounterState> {
+  constructor() {
+    super({ count: 0, count2: 0 })
+  }
+
+  inc() {
+    this.emit({ count: this.state.count + 1 })
   }
+  inc2() {
+    this.emit({ count2: this.state.count2 + 1 })
+  }
+}
+
+const ControllerConsumer = () => {
+  const controller = useProvider(MultiCounterController)
+  return <h2 data-testid='controller-consumer'>{controller !== undefined ? 'Controller existed!' : ''}</h2>
 }
 
-type CustomData = {
-  field: number
-  field2: string
+const ListenerConsumer = () => {
+  const controller = useListener(MultiCounterController, (state) => console.log(state))
+  console.log('render listner')
+  return <h2 data-testid='controller-listener'>Listenner mounted</h2>
 }
 
-const Consumer = () => {
-  const count = useProvider(Number)
-  const text = useProvider(String)
-  const truth = useProvider(Boolean)
-  const counter = useProvider(Counter)
-  const customData = useNamedProvider<CustomData>('customData')
+const CounterConsumer = () => {
+  const [state, controller] = useBuilder(MultiCounterController)
+  console.log('render builder')
   return (
     <div>
-      <h2 data-testid='counter-value'>This should update on btn clicked: {count}</h2>
-      <h2 data-testid='string'>Provided String: {text}</h2>
-      <h2 data-testid='boolean'>Provided Boolean: {truth ? 'true' : 'false'}</h2>
-      <h2 data-testid='counter-create'>This should NOT update on btn clicked: {counter.count}</h2>
-      <h2 data-testid='custom-data'>
-        Custom data: {customData.field}-{customData.field2}
-      </h2>
+      <h2 data-testid='counter-text'>Counter: {state.count}</h2>
+      <button onClick={() => controller.inc()} data-testid='counter-btn'>
+        Inc counter
+      </button>
+    </div>
+  )
+}
+
+const Counter2Consumer = () => {
+  const [state, controller] = useSelector(MultiCounterController, (state) => state.count2)
+  console.log('render-selector')
+  return (
+    <div>
+      <h2 data-testid='counter2-text'>Counter2: {state}</h2>
+      <button onClick={() => controller.inc2()} data-testid='counter2-btn'>
+        Inc counter2
+      </button>
     </div>
   )
 }
 
 function App() {
-  const [count, setCount] = useState(0)
-  const customData: CustomData = {
-    field: 3,
-    field2: 'hello',
-  }
   return (
-    <MultiProvider
-      providers={[
-        <Provider source={count} />,
-        <Provider source={'test-string'} />,
-        <Provider source={true} />,
-        <Provider source={() => new Counter(count + 1)} />,
-        <Provider source={customData} name='customData' />,
-      ]}
-    >
+    <ControllerProvider source={() => new MultiCounterController()}>
       <div className='App'>
         <header className='App-header'>
           <img src={logo} className='App-logo' alt='logo' />
@@ -59,13 +77,13 @@ function App() {
           <a className='App-link' href='https://reactjs.org' target='_blank' rel='noopener noreferrer'>
             Learn React
           </a>
-          <button className='App-button' data-testid='btn' onClick={() => setCount((value) => value + 1)}>
-            Inc
-          </button>
-          <Consumer />
+          <ControllerConsumer />
+          <ListenerConsumer />
+          <CounterConsumer />
+          <Counter2Consumer />
         </header>
       </div>
-    </MultiProvider>
+    </ControllerProvider>
   )
 }
 

example/src/index.tsx

@@ -5,11 +5,7 @@ import App from './App'
 import reportWebVitals from './reportWebVitals'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+root.render(<App />)
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

example/tests/App.test.tsx

@@ -1,8 +1,10 @@
-import {  render } from '@testing-library/react'
+import { getByTestId, render } from '@testing-library/react'
 import App from '../src/App'
 
 test('inject success', () => {
-  render(<App />)
-
-  expect(true).toBe(true);
+  const { container } = render(<App />)
+  const controllerExistElement = getByTestId(container, 'controller-exist-assertion-text')
+  const text = controllerExistElement.textContent
+  const expected = 'Controller existed!'
+  expect(text).toBe(expected)
 })