test(frontend): add resize image process e2e tests

apps/frontend/cypress/e2e/convert-image.cy.ts

@@ -1,7 +1,7 @@
 import * as path from 'path'
 
 // NOTE: Backend server should be running
-describe('Convert Image', () => {
+describe('Convert image', () => {
   before(() => {
     cy.setDesktopViewport()
     cy.skipTourAndAcceptCookies()

apps/frontend/cypress/e2e/resize-image.cy.ts

@@ -0,0 +1,74 @@
+import * as path from 'path'
+
+const testResize = () => {
+  // Upload an image file.
+  cy.get('[data-cy="image-dropzone"] input').selectFile('cypress/fixtures/test_image.png', {
+    force: true
+  })
+
+  // Set resize width and height.
+  cy.get('[data-cy="input-resize-width"]').type('150')
+  cy.get('[data-cy="input-resize-height"]').type('150')
+
+  const checkboxReduction = cy.get('[data-cy="cbox-resize-reduction"]')
+  checkboxReduction.click()
+  checkboxReduction.should('have.data', 'state', 'checked')
+
+  // Add trim operation.
+  cy.get('[data-cy="resize-operation-trim"]').click({
+    force: true
+  })
+
+  cy.get('[data-cy="cbox-trim-line-art"]').click()
+  cy.get('[data-cy="input-trim-threshold"]').clear().type('4')
+
+  cy.get('[data-cy="button-resize"]')
+    .click()
+    .then(() => {
+      // Simulate waiting for a server response.
+      cy.wait(3000)
+
+      cy.get('[data-cy="button-download"]').click()
+
+      const downloadsFolder = Cypress.config('downloadsFolder')
+      const outputTestFilePath = path.join(downloadsFolder, 'test_image.png')
+      cy.readFile(outputTestFilePath).should('exist')
+    })
+}
+
+// NOTE: Backend server should be running
+describe('Resize image', () => {
+  beforeEach(() => {
+    cy.skipTourAndAcceptCookies()
+  })
+
+  context('Desktop', () => {
+    before(() => {
+      cy.setDesktopViewport()
+    })
+
+    it('should correctly resize image and download it', () => {
+      cy.visit('/')
+      cy.wait(1500)
+
+      cy.selectTab({ tabName: 'resize' })
+
+      testResize()
+    })
+  })
+
+  context('Mobile', () => {
+    before(() => {
+      cy.setMobileViewport()
+    })
+
+    it('should correctly resize image and download it', () => {
+      cy.visit('/')
+      cy.wait(1500)
+
+      cy.selectTab({ tabName: 'resize', isMobile: true })
+
+      testResize()
+    })
+  })
+})

apps/frontend/cypress/support/commands.ts

@@ -31,3 +31,25 @@ Cypress.Commands.add('skipTourAndAcceptCookies' as keyof Chainable<any>, () => {
     })
   )
 })
+
+Cypress.Commands.add(
+  'selectTab' as keyof Chainable<any>,
+  ({ tabName, isMobile = false }: { tabName: string; isMobile?: boolean }) => {
+    if (isMobile) {
+      cy.get('[data-cy="toolbar-tab-dropdown-trigger"]').click()
+      cy.get('[data-cy="toolbar-tab-dropdown-content"]').should('exist')
+
+      cy.get('.rt-TabsTriggerInner')
+        .contains(tabName, {
+          matchCase: false
+        })
+        .click()
+
+      return
+    }
+
+    const tab = cy.get(`[data-cy="tab-trigger-${tabName}"]`)
+    tab.click()
+    tab.should('have.data', 'state', 'active')
+  }
+)

apps/frontend/cypress/support/index.ts

@@ -12,6 +12,7 @@ declare global {
       setTabletViewport: VoidFunction
       setMobileViewport: VoidFunction
       clickOutside: (options?: Partial<Cypress.ClickOptions>) => void
+      selectTab: (params: { tabName: string; isMobile?: boolean }) => void
     }
   }
 }

apps/frontend/src/design-system/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, useId } from 'react'
+import { type HTMLAttributes, memo, useId } from 'react'
 import { Checkbox as RadixCheckbox, Flex, Text } from '@radix-ui/themes'
 import { clsx } from 'clsx'
 
@@ -9,10 +9,9 @@ import type { JustifyContent } from '@lib/theme'
 
 export const rootTestId = 'checkbox-root'
 
-export interface Props {
+export interface Props extends Omit<HTMLAttributes<HTMLButtonElement>, 'color'> {
   label?: string
   checked?: boolean
-  onClick?: VoidFunction
   disabled?: boolean
   direction?: 'row' | 'row-reverse'
   justify?: JustifyContent

apps/frontend/src/widgets/AppFooter/AppFooterContent/buttons/ButtonResize.tsx

@@ -41,6 +41,7 @@ export const ButtonResize = () => {
       error={error}
       isLoading={isLoading}
       isDisabled={resizeSettings.queue.length === 0}
+      data-cy='button-resize'
     />
   )
 }

apps/frontend/src/widgets/SettingsPanel/TabResize/TabResizeControl.tsx

@@ -46,7 +46,7 @@ export const TabResizeControl = () => {
       onValueChange={onValueChange}
     >
       {operationList.map(value => (
-        <CheckboxCards.Item key={value} value={value}>
+        <CheckboxCards.Item key={value} value={value} data-cy={`resize-operation-${value}`}>
           {capitalize(value)}
         </CheckboxCards.Item>
       ))}

apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeCheckboxes/CheckboxEnlargement.tsx

@@ -13,6 +13,7 @@ export const CheckboxEnlargement = () => {
     <Checkbox
       label='Without Enlarging'
       checked={withoutEnlargement}
+      data-cy='cbox-resize-enlargement'
       onClick={handleToggleWithoutEnlargement}
     />
   )

apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeCheckboxes/CheckboxFastShrink.tsx

@@ -26,5 +26,12 @@ export const CheckboxFastShrink = () => {
     return null
   }
 
-  return <Checkbox label='Fast Shrink' checked={fastShrink} onClick={handleToggleFastShrink} />
+  return (
+    <Checkbox
+      label='Fast Shrink'
+      checked={fastShrink}
+      data-cy='cbox-resize-fast-shrink'
+      onClick={handleToggleFastShrink}
+    />
+  )
 }

apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeCheckboxes/CheckboxReduction.tsx

@@ -13,6 +13,7 @@ export const CheckboxReduction = () => {
     <Checkbox
       label='Without Reduction'
       checked={withoutReduction}
+      data-cy='cbox-resize-reduction'
       onClick={handleToggleWithoutReduction}
     />
   )

apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeExtra.tsx

@@ -3,15 +3,15 @@ import { Flex } from '@radix-ui/themes'
 import { ResizeBackgroundPicker } from './ResizeBackgroundPicker'
 import { ResizeDominantBackground } from './ResizeDominantBackground'
 import { ResizeCheckboxes } from './ResizeCheckboxes'
-import { ResizeSelectList } from './ResizeSelectList'
+import { ResizeSelectsList } from './ResizeSelectsList'
 import { useResizeStore } from '@stores/resize'
 
 export const ResizeExtra = () => {
   const background = useResizeStore(state => state.background)
 
   return (
     <Flex direction='column' gap='2' width='100%'>
-      <ResizeSelectList />
+      <ResizeSelectsList />
       {background && (
         <Flex direction='column' gap='3'>
           <ResizeBackgroundPicker background={background} />

apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/ResizeSelectList.tsx → apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/ResizeSelectsList.tsx

@@ -11,7 +11,7 @@ const direction: FlexDirection = {
   xs: 'row'
 } as const
 
-export const ResizeSelectList = () => {
+export const ResizeSelectsList = () => {
   const fit = useResizeStore(state => state.fit)
   const kernel = useResizeStore(state => state.kernel)
   const position = useResizeStore(state => state.position)

apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizeFit/SelectResizeFit.tsx → apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/SelectResizeFit/SelectResizeFit.tsx

@@ -25,6 +25,8 @@ export const SelectResizeFit = () => {
       defaultValue={DEFAULT_RESIZE_FIT}
       data={data}
       DetailsComponent={<ResizeFitExamplesPopover />}
+      triggerCySelector='sl-resize-fit-trigger'
+      contentCySelector='sl-resize-fit-content'
       onValueChange={handleSetFit}
     />
   )

apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizeKernel.tsx → apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/SelectResizeKernel.tsx

@@ -20,9 +20,11 @@ export const SelectResizeKernel = () => {
   return (
     <Select
       label='Kernel'
+      data={data}
       value={kernel ?? DEFAULT_RESIZE_KERNEL}
       defaultValue={DEFAULT_RESIZE_KERNEL}
-      data={data}
+      triggerCySelector='sl-resize-kernel-trigger'
+      contentCySelector='sl-resize-kernel-content'
       onValueChange={handleSetKernel}
     />
   )

apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizePosition.tsx → apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/SelectResizePosition.tsx

@@ -33,9 +33,11 @@ export const SelectResizePosition = () => {
   return (
     <Select
       label='Position'
+      data={data}
       value={position ?? DEFAULT_RESIZE_POSITION}
       defaultValue={DEFAULT_RESIZE_POSITION}
-      data={data}
+      triggerCySelector='sl-resize-position-trigger'
+      contentCySelector='sl-resize-position-content'
       onValueChange={handleSetPosition}
     />
   )

apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/index.ts

@@ -0,0 +1 @@
+export { ResizeSelectsList } from './ResizeSelectsList'

apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeSizesForm.tsx

@@ -34,6 +34,7 @@ export const ResizeSizesForm = () => {
           setValue={setWidth}
           max={MAX_RESIZE_WIDTH}
           placeholder='1920'
+          data-cy='input-resize-width'
           icon={<WidthIcon />}
         />
         <NumberInput
@@ -43,6 +44,7 @@ export const ResizeSizesForm = () => {
           setValue={setHeight}
           max={MAX_RESIZE_HEIGHT}
           placeholder='1080'
+          data-cy='input-resize-height'
           icon={<HeightIcon />}
         />
       </form>

apps/frontend/src/widgets/SettingsPanel/TabResize/sections/trim/TrimContent/CheckboxTrimLineArt.tsx

@@ -6,5 +6,12 @@ export const CheckboxTrimLineArt = () => {
   const toggleLineArt = useTrimStore(state => state.toggleLineArt)
   const handleToggleLineArt = () => toggleLineArt()
 
-  return <Checkbox label='Line Art' onClick={handleToggleLineArt} checked={lineArt} />
+  return (
+    <Checkbox
+      label='Line Art'
+      checked={lineArt}
+      data-cy='cbox-trim-line-art'
+      onClick={handleToggleLineArt}
+    />
+  )
 }

apps/frontend/src/widgets/SettingsPanel/TabResize/sections/trim/TrimContent/TrimThresholdInput.tsx

@@ -18,6 +18,7 @@ export const TrimThresholdInput = () => {
       min={MIN_TRIM_THRESHOLD}
       max={MAX_TRIM_THRESHOLD}
       step={1}
+      data-cy='input-trim-threshold'
     />
   )
 }

apps/frontend/src/widgets/SettingsPanel/Toolbar/ToolbarTabMenu/ToolbarTabDropdown/ToolbarTabDropdown.tsx

@@ -15,14 +15,17 @@ export const ToolbarTabDropdown = () => {
 
   return (
     <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
-      <DropdownMenu.Trigger data-tourstep={TOUR_STEP.TOOLBAR_TAB_LIST}>
+      <DropdownMenu.Trigger
+        data-tourstep={TOUR_STEP.TOOLBAR_TAB_LIST}
+        data-cy='toolbar-tab-dropdown-trigger'
+      >
         <Button radius='large' variant='soft' color='gray' onClick={handleOpen}>
           Tabs
           <ChevronDownIcon width='18px' height='18px' color='var(--gray-a11)' />
         </Button>
       </DropdownMenu.Trigger>
 
-      <DropdownMenu.Content size='1'>
+      <DropdownMenu.Content size='1' data-cy='toolbar-tab-dropdown-content'>
         <ToolbarTabList className={styles.tabs} onClick={handleClose} />
       </DropdownMenu.Content>
     </DropdownMenu.Root>

apps/frontend/src/widgets/SettingsPanel/Toolbar/ToolbarTabMenu/ToolbarTabList/ToolbarTabItem.tsx

@@ -8,8 +8,8 @@ interface Props extends Tab {
   onClick?: VoidFunction
 }
 
-export const ToolbarTabItem = ({ value, label, icon, onClick }: Props) => (
-  <Tabs.Trigger key={value} value={value} onClick={onClick}>
+export const ToolbarTabItem = ({ label, icon, ...props }: Props) => (
+  <Tabs.Trigger {...props} data-cy={`tab-trigger-${label.toLowerCase()}`}>
     <MediaQuery maxWidth={BREAKPOINTS_MAX_WIDTH.xs}>{icon}</MediaQuery>
 
     {label}