test(frontend): add tests for extract store

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

@@ -0,0 +1,80 @@
+// @vitest-environment jsdom
+
+import pick from 'lodash.pick'
+
+import type { ExtractRegion } from '@scissors/sharp'
+
+import { createExtractStore, defaultRegion, defaultState } from '@stores/extract'
+
+describe('@stores/extract', () => {
+  it('should correctly set extract region', () => {
+    const store = createExtractStore()
+    const testRegion: ExtractRegion = {
+      left: 1,
+      top: 1,
+      width: 1,
+      height: 1
+    }
+
+    expect(store.getState().getExtractRegion()).toStrictEqual(defaultRegion)
+    store.getState().setRegion(testRegion)
+    expect(store.getState().getExtractRegion()).toStrictEqual(testRegion)
+  })
+
+  it('should correctly set preview file', () => {
+    const store = createExtractStore()
+    const testFile = new File([], 'foo.png', {
+      type: 'image/png'
+    })
+
+    expect(store.getState().previewFile).toBe(null)
+    store.getState().setPreviewFile(testFile)
+    expect(store.getState().previewFile).toStrictEqual(testFile)
+  })
+
+  it('should correctly set preview aspect ratio', () => {
+    const store = createExtractStore()
+
+    expect(store.getState().previewAspectRatio).toBe(defaultState.previewAspectRatio)
+    store.getState().setPreviewAspectRatio(4 / 3)
+    expect(store.getState().previewAspectRatio).toBe(4 / 3)
+  })
+
+  it('should correctly set cropper aspect ratio', () => {
+    const store = createExtractStore()
+
+    expect(store.getState().cropperAspectRatio).toBe(defaultState.cropperAspectRatio)
+    store.getState().setCropperAspectRatio(16 / 9)
+    expect(store.getState().cropperAspectRatio).toBe(16 / 9)
+  })
+
+  it('should correctly reset state', () => {
+    const store = createExtractStore()
+
+    store.setState({
+      left: 1,
+      top: 1,
+      width: 1,
+      height: 1,
+      previewFile: new File([], 'foo.png', {
+        type: 'image/png'
+      }),
+      previewAspectRatio: 4 / 3,
+      cropperAspectRatio: 16 / 9
+    })
+
+    store.getState().reset()
+
+    expect(
+      pick(store.getState(), [
+        'left',
+        'top',
+        'width',
+        'height',
+        'previewFile',
+        'previewAspectRatio',
+        'cropperAspectRatio'
+      ])
+    ).toStrictEqual(defaultState)
+  })
+})

apps/frontend/src/stores/extract.ts

@@ -1,11 +1,10 @@
-import { create } from 'zustand'
+import { create, type StateCreator } from 'zustand'
 
 import type { ExtractRegion } from '@scissors/sharp'
 
 /* eslint no-unused-vars: 0 */
 interface Store extends State {
   getExtractRegion: () => ExtractRegion
-  getExtractOptions: () => ExtractRegion
 
   setRegion: (region: ExtractRegion) => void
   setPreviewFile: (file: File | null) => void
@@ -20,18 +19,21 @@ interface State extends ExtractRegion {
   cropperAspectRatio: number
 }
 
-const defaultState: State = {
-  previewFile: null,
-  previewAspectRatio: -1,
-  cropperAspectRatio: -1,
-
+export const defaultRegion: ExtractRegion = {
   left: 1,
   top: 1,
   width: 100,
   height: 100
 } as const
+export const defaultState: State = {
+  previewFile: null,
+  previewAspectRatio: -1,
+  cropperAspectRatio: -1,
+
+  ...defaultRegion
+} as const
 
-export const useExtractStore = create<Store>((set, get) => ({
+const extractStoreCreator: StateCreator<Store> = (set, get) => ({
   // State
   ...defaultState,
 
@@ -45,12 +47,15 @@ export const useExtractStore = create<Store>((set, get) => ({
       height
     }
   },
-  getExtractOptions: () => get().getExtractRegion(),
 
   // Actions
   setRegion: region => set({ ...region }),
-  setPreviewFile: file => set({ previewFile: file }),
-  setPreviewAspectRatio: aspectRatio => set({ previewAspectRatio: aspectRatio }),
-  setCropperAspectRatio: aspectRatio => set({ cropperAspectRatio: aspectRatio }),
+  setPreviewFile: previewFile => set({ previewFile }),
+  setPreviewAspectRatio: previewAspectRatio => set({ previewAspectRatio }),
+  setCropperAspectRatio: cropperAspectRatio => set({ cropperAspectRatio }),
   reset: () => set(defaultState)
-}))
+})
+
+export const createExtractStore = () => create<Store>()(extractStoreCreator)
+
+export const useExtractStore = createExtractStore()

apps/frontend/src/stores/hooks/useResizeSettings.ts

@@ -9,7 +9,7 @@ export function useResizeSettings(): ResizeSettings {
   const queue = useTabResizeStore(state => state.getQueue())
   const resize = useResizeStore(state => state.getResizeOptions())
   const extend = useExtendStore(state => state.getExtendOptions())
-  const extract = useExtractStore(state => state.getExtractOptions())
+  const extract = useExtractStore(state => state.getExtractRegion())
   const trim = useTrimStore(state => state.getTrimOptions())
 
   return {