diff --git a/apps/frontend/src/stores/__tests__/extract.test.ts b/apps/frontend/src/stores/__tests__/extract.test.ts new file mode 100644 index 00000000..cf86d092 --- /dev/null +++ b/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) + }) +}) diff --git a/apps/frontend/src/stores/extract.ts b/apps/frontend/src/stores/extract.ts index 1c063daf..ddc0cc0b 100644 --- a/apps/frontend/src/stores/extract.ts +++ b/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((set, get) => ({ +const extractStoreCreator: StateCreator = (set, get) => ({ // State ...defaultState, @@ -45,12 +47,15 @@ export const useExtractStore = create((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()(extractStoreCreator) + +export const useExtractStore = createExtractStore() diff --git a/apps/frontend/src/stores/hooks/useResizeSettings.ts b/apps/frontend/src/stores/hooks/useResizeSettings.ts index 662c71a4..cb8c69f1 100644 --- a/apps/frontend/src/stores/hooks/useResizeSettings.ts +++ b/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 {