test(frontend): add tests for tint store

apps/frontend/src/stores/__tests__/tint.test.ts

@@ -0,0 +1,47 @@
+// vitest-environment jsdom
+
+import { DEFAULT_TINT_COLOR } from '@scissors/sharp'
+
+import { createTintStore } from '@stores/tint'
+
+describe('@stores/tint', () => {
+  it('should correctly add / remove tint', () => {
+    const store = createTintStore()
+    expect(store.getState().isAdded).toBe(false)
+    store.getState().add()
+    expect(store.getState().isAdded).toBe(true)
+    store.getState().remove()
+    expect(store.getState().isAdded).toBe(false)
+  })
+
+  it('should correctly set / reset state', () => {
+    const store = createTintStore()
+
+    expect(store.getState().isAdded).toBe(false)
+
+    store.getState().set('#0f883f')
+    expect(store.getState().color).toBe('#0f883f')
+    expect(store.getState().isAdded).toBe(true)
+
+    store.getState().reset()
+    expect(store.getState().color).toBe(DEFAULT_TINT_COLOR)
+    expect(store.getState().isAdded).toBe(true)
+
+    store.getState().set(null)
+    expect(store.getState().color).toBe(null)
+    expect(store.getState().isAdded).toBe(false)
+
+    store.getState().reset()
+    expect(store.getState().color).toBe(null)
+  })
+
+  it('should correctly set color value', () => {
+    const store = createTintStore()
+
+    store.getState().setColor('#f77333')
+    expect(store.getState().color).toBe('#f77333')
+
+    store.getState().setColor('#000000')
+    expect(store.getState().color).toBe('#000000')
+  })
+})

apps/frontend/src/stores/tint.ts

@@ -1,4 +1,4 @@
-import { create } from 'zustand'
+import { create, type StateCreator } from 'zustand'
 
 import { DEFAULT_TINT_COLOR } from '@scissors/sharp'
 
@@ -16,12 +16,12 @@ interface State {
   color: string | null
 }
 
-const defaultState: State = {
+export const defaultState: State = {
   isAdded: false,
   color: null
 } as const
 
-export const useTintStore = create<Store>(set => ({
+const tintStoreCreator: StateCreator<Store> = set => ({
   // State
   ...defaultState,
 
@@ -52,4 +52,8 @@ export const useTintStore = create<Store>(set => ({
   remove: () => set({ isAdded: false, color: null }),
 
   setColor: color => set({ color })
-}))
+})
+
+export const createTintStore = () => create<Store>()(tintStoreCreator)
+
+export const useTintStore = createTintStore()