Merge pull request #3 from foobaragency/create-tests

Create tests

.github/workflows/build.yml

@@ -0,0 +1,20 @@
+name: build
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build
+        run: yarn build

.github/workflows/release.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 16.x
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Semantic Release

.github/workflows/test.yml

@@ -0,0 +1,25 @@
+name: test
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build
+        run: yarn build
+      - run: yarn test
+      - name: Coverage badges
+        uses: jpb06/jest-badges-action@latest
+        with:
+          branches: master

README.md

@@ -1,3 +1,5 @@
+[![build](https://github.com/foobaragency/react-global-state/actions/workflows/build.yml/badge.svg)](https://github.com/foobaragency/react-global-state/actions/workflows/build.yml)
+![Total coverage](./badges/coverage-jest%20coverage.svg)
 # react-global-state
 
 This package consists of simple global states made possible by observing browser events. It works well when you need to use global states in a react or next.js app.

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    "@babel/preset-react",
+  ],
+}

examples/00_counter/src/index.js → examples/00_basic/src/Counter.js

@@ -1,20 +1,19 @@
 import React from "react"
-import ReactDOM from "react-dom"
 import { createGlobalState } from "@foobar-agency/react-global-state"
 
 const initialState = 0
 
 const { useGlobalState } = createGlobalState(initialState)
 
-const Counter = () => {
+export const Counter = () => {
   const [count, setCount] = useGlobalState()
 
   const decrement = () => {
     /**
      * using a callback
      * to prevent negative numbers
      */
-    setCount((state) => {
+    setCount(state => {
       if (state > 0) {
         return state - 1
       }
@@ -35,10 +34,3 @@ const Counter = () => {
     </div>
   )
 }
-
-ReactDOM.render(
-  <React.StrictMode>
-    <Counter />
-  </React.StrictMode>,
-  document.getElementById("root")
-)

examples/00_basic/src/index.js

@@ -0,0 +1,11 @@
+import React from "react"
+import ReactDOM from "react-dom"
+
+import { Counter } from "./Counter"
+
+ReactDOM.render(
+  <React.StrictMode>
+    <Counter />
+  </React.StrictMode>,
+  document.getElementById("root")
+)

examples/01_outside_react/src/Counter.js

@@ -0,0 +1,36 @@
+import React, { useEffect } from "react"
+import { createGlobalState } from "@foobar-agency/react-global-state"
+
+const initialState = 0
+
+const { useGlobalState, setGlobalState } = createGlobalState(initialState)
+
+function setInitialState() {
+  setTimeout(() => {
+    setGlobalState(10_000)
+  }, 2_000)
+}
+
+export const Counter = () => {
+  const [count, setCount] = useGlobalState()
+
+  useEffect(() => {
+    setInitialState()
+  }, [])
+
+  const decrement = () => {
+    setCount(count - 1)
+  }
+
+  const increment = () => {
+    setCount(count + 1)
+  }
+
+  return (
+    <div>
+      <button onClick={decrement}>-</button>
+      <span>{count}</span>
+      <button onClick={increment}>+</button>
+    </div>
+  )
+}

examples/01_outside_react/src/index.js

@@ -1,40 +1,5 @@
-import React, { useEffect } from "react"
+import React from "react"
 import ReactDOM from "react-dom"
-import { createGlobalState } from "@foobar-agency/react-global-state"
-
-const initialState = 0
-
-const { useGlobalState, setGlobalState } = createGlobalState(initialState)
-
-function setInitialState() {
-  setTimeout(() => {
-    setGlobalState(10_000)
-  }, 2_000)
-}
-
-const Counter = () => {
-  const [count, setCount] = useGlobalState()
-
-  useEffect(() => {
-    setInitialState()
-  }, [])
-
-  const decrement = () => {
-    setCount(count - 1)
-  }
-
-  const increment = () => {
-    setCount(count + 1)
-  }
-
-  return (
-    <div>
-      <button onClick={decrement}>-</button>
-      <span>{count}</span>
-      <button onClick={increment}>+</button>
-    </div>
-  )
-}
 
 ReactDOM.render(
   <React.StrictMode>

examples/02_partial_state/src/Age.js

@@ -0,0 +1,18 @@
+import React from "react"
+import { createGlobalState } from "@foobar-agency/react-global-state"
+
+const initialState = {
+  firstName: "John",
+  lastName: "Doe",
+  age: 43,
+}
+
+const { createPartialState } = createGlobalState(initialState)
+
+const useAge = createPartialState(state => state.age)
+
+export const Age = () => {
+  const age = useAge()
+
+  return <div>{age}</div>
+}

examples/02_partial_state/src/index.js

@@ -1,24 +1,7 @@
 import React from "react"
 import ReactDOM from "react-dom"
-import { createGlobalState } from "@foobar-agency/react-global-state"
 
-const initialState = {
-    firstName: "John",
-    lastName: "Doe",
-    age: 43
-}
-
-const { createPartialState } = createGlobalState(initialState)
-
-const useAge = createPartialState(state => state.age)
-
-const Age = () => {
-    const age = useAge()
-
-    return (
-        <div>{age}</div>
-    )
-}
+import { Age } from "./Age"
 
 ReactDOM.render(
   <React.StrictMode>

examples/03_persist_state/src/Person.js

@@ -0,0 +1,49 @@
+import React from "react"
+import { createGlobalState } from "@foobar-agency/react-global-state"
+
+const initialState = {
+  firstName: "John",
+  lastName: "Doe",
+  age: 43,
+}
+
+const { useGlobalState } = createGlobalState(initialState, {
+  persistence: {
+    key: "x-storage-key",
+    // optional, can be either localStorage or sessionStorage, localStorage by default
+    storage: "localStorage",
+  },
+})
+
+export const Person = () => {
+  const [person, setPerson] = useGlobalState()
+
+  function onChange(e) {
+    const { name, value } = e.target
+
+    setPerson({
+      ...person,
+      [name]: value,
+    })
+  }
+
+  return (
+    <div>
+      <label>
+        First Name
+        <br />
+        <input name="firstName" value={person.firstName} onChange={onChange} />
+      </label>
+      <label>
+        Last Name
+        <br />
+        <input name="lastName" value={person.lastName} onChange={onChange} />
+      </label>
+      <label>
+        Age
+        <br />
+        <input name="age" value={person.age} onChange={onChange} />
+      </label>
+    </div>
+  )
+}

examples/03_persist_state/src/index.js

@@ -1,53 +1,7 @@
 import React from "react"
 import ReactDOM from "react-dom"
-import { createGlobalState } from "@foobar-agency/react-global-state"
 
-const initialState = {
-    firstName: "John",
-    lastName: "Doe",
-    age: 43
-}
-
-const { useGlobalState } = createGlobalState(initialState, {
-  persistence: {
-      key: "x-storage-key",
-      // optional, can be either localStorage or sessionStorage, localStorage by default
-      storage: "localStorage",
-  }
-})
-
-const Person = () => {
-    const [person, setPerson] = useGlobalState()
-
-    function onChange(e){
-      const {name, value} = e.target
-
-      setPerson({
-        ...person,
-        [name]: value
-      })
-    }
-
-    return (
-        <div>
-          <label>
-            First Name
-            <br />
-           <input name="firstName" value={person.firstName} onChange={onChange} />
-          </label>
-          <label>
-            Last Name
-            <br />
-           <input name="lastName" value={person.lastName} onChange={onChange} />
-          </label>
-          <label>
-            Age
-            <br />
-           <input name="age" value={person.age} onChange={onChange} />
-          </label>
-        </div>
-    )
-}
+import { Person } from "./Person"
 
 ReactDOM.render(
   <React.StrictMode>

examples/04_deep_compare/src/Profile.js

@@ -0,0 +1,32 @@
+import React from "react"
+import { createGlobalState } from "@foobar-agency/react-global-state"
+
+const initialState = {
+  firstName: "John",
+  lastName: "Doe",
+  age: 43,
+}
+
+const { useGlobalState } = createGlobalState(initialState)
+
+export const Profile = () => {
+  const [state, setState] = useGlobalState()
+
+  function invertNames() {
+    const newState = {
+      firstName: "Doe",
+      lastName: "John",
+      age: 43,
+    }
+    setState(newState, { deepCompare: true })
+  }
+
+  return (
+    <div>
+      <p>First Name: {state.firstName}</p>
+      <p>Last Name: {state.lastName}</p>
+      <p>Age: {state.age}</p>
+      <button onClick={invertNames}>Click me!</button>
+    </div>
+  )
+}