From 21cb9b3b07a1cdc0ec83bbb2f02e7b48c19c19b7 Mon Sep 17 00:00:00 2001 From: MiracleHorizon Date: Fri, 31 May 2024 17:51:30 +0300 Subject: [PATCH] test(frontend): add resize image process e2e tests --- apps/frontend/cypress/e2e/convert-image.cy.ts | 2 +- apps/frontend/cypress/e2e/resize-image.cy.ts | 74 +++++++++++++++++++ apps/frontend/cypress/support/commands.ts | 22 ++++++ apps/frontend/cypress/support/index.ts | 1 + .../src/design-system/Checkbox/Checkbox.tsx | 5 +- .../AppFooterContent/buttons/ButtonResize.tsx | 1 + .../TabResize/TabResizeControl.tsx | 2 +- .../ResizeCheckboxes/CheckboxEnlargement.tsx | 1 + .../ResizeCheckboxes/CheckboxFastShrink.tsx | 9 ++- .../ResizeCheckboxes/CheckboxReduction.tsx | 1 + .../resize/ResizeExtra/ResizeExtra.tsx | 4 +- .../ResizeExtra/ResizeSelectList/index.ts | 1 - .../ResizeSelectsList.tsx} | 2 +- .../ResizeFitExamplesPopover.module.css | 0 .../ResizeFitExamplesPopover.tsx | 0 .../ResizeFitExamplesPopover/index.ts | 0 .../SelectResizeFit/SelectResizeFit.tsx | 2 + .../SelectResizeFit/index.ts | 0 .../SelectResizeKernel.tsx | 4 +- .../SelectResizePosition.tsx | 4 +- .../ResizeExtra/ResizeSelectsList/index.ts | 1 + .../sections/resize/ResizeSizesForm.tsx | 2 + .../trim/TrimContent/CheckboxTrimLineArt.tsx | 9 ++- .../trim/TrimContent/TrimThresholdInput.tsx | 1 + .../ToolbarTabDropdown/ToolbarTabDropdown.tsx | 7 +- .../ToolbarTabList/ToolbarTabItem.tsx | 4 +- 26 files changed, 142 insertions(+), 17 deletions(-) create mode 100644 apps/frontend/cypress/e2e/resize-image.cy.ts delete mode 100644 apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/index.ts rename apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/{ResizeSelectList/ResizeSelectList.tsx => ResizeSelectsList/ResizeSelectsList.tsx} (94%) rename apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/{ResizeSelectList => ResizeSelectsList}/SelectResizeFit/ResizeFitExamplesPopover/ResizeFitExamplesPopover.module.css (100%) rename apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/{ResizeSelectList => ResizeSelectsList}/SelectResizeFit/ResizeFitExamplesPopover/ResizeFitExamplesPopover.tsx (100%) rename apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/{ResizeSelectList => ResizeSelectsList}/SelectResizeFit/ResizeFitExamplesPopover/index.ts (100%) rename apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/{ResizeSelectList => ResizeSelectsList}/SelectResizeFit/SelectResizeFit.tsx (89%) rename apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/{ResizeSelectList => ResizeSelectsList}/SelectResizeFit/index.ts (100%) rename apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/{ResizeSelectList => ResizeSelectsList}/SelectResizeKernel.tsx (88%) rename apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/{ResizeSelectList => ResizeSelectsList}/SelectResizePosition.tsx (89%) create mode 100644 apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/index.ts diff --git a/apps/frontend/cypress/e2e/convert-image.cy.ts b/apps/frontend/cypress/e2e/convert-image.cy.ts index b13e8103..b2dd6d83 100644 --- a/apps/frontend/cypress/e2e/convert-image.cy.ts +++ b/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() diff --git a/apps/frontend/cypress/e2e/resize-image.cy.ts b/apps/frontend/cypress/e2e/resize-image.cy.ts new file mode 100644 index 00000000..a52fdcae --- /dev/null +++ b/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() + }) + }) +}) diff --git a/apps/frontend/cypress/support/commands.ts b/apps/frontend/cypress/support/commands.ts index 1ebbca10..b8264959 100644 --- a/apps/frontend/cypress/support/commands.ts +++ b/apps/frontend/cypress/support/commands.ts @@ -31,3 +31,25 @@ Cypress.Commands.add('skipTourAndAcceptCookies' as keyof Chainable, () => { }) ) }) + +Cypress.Commands.add( + 'selectTab' as keyof Chainable, + ({ 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') + } +) diff --git a/apps/frontend/cypress/support/index.ts b/apps/frontend/cypress/support/index.ts index 7c60872ab..7c032425 100644 --- a/apps/frontend/cypress/support/index.ts +++ b/apps/frontend/cypress/support/index.ts @@ -12,6 +12,7 @@ declare global { setTabletViewport: VoidFunction setMobileViewport: VoidFunction clickOutside: (options?: Partial) => void + selectTab: (params: { tabName: string; isMobile?: boolean }) => void } } } diff --git a/apps/frontend/src/design-system/Checkbox/Checkbox.tsx b/apps/frontend/src/design-system/Checkbox/Checkbox.tsx index 1552febf..07dd6ee4 100644 --- a/apps/frontend/src/design-system/Checkbox/Checkbox.tsx +++ b/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, 'color'> { label?: string checked?: boolean - onClick?: VoidFunction disabled?: boolean direction?: 'row' | 'row-reverse' justify?: JustifyContent diff --git a/apps/frontend/src/widgets/AppFooter/AppFooterContent/buttons/ButtonResize.tsx b/apps/frontend/src/widgets/AppFooter/AppFooterContent/buttons/ButtonResize.tsx index 9091e45b..68515749 100644 --- a/apps/frontend/src/widgets/AppFooter/AppFooterContent/buttons/ButtonResize.tsx +++ b/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' /> ) } diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/TabResizeControl.tsx b/apps/frontend/src/widgets/SettingsPanel/TabResize/TabResizeControl.tsx index b05b55ba..acf3fc03 100644 --- a/apps/frontend/src/widgets/SettingsPanel/TabResize/TabResizeControl.tsx +++ b/apps/frontend/src/widgets/SettingsPanel/TabResize/TabResizeControl.tsx @@ -46,7 +46,7 @@ export const TabResizeControl = () => { onValueChange={onValueChange} > {operationList.map(value => ( - + {capitalize(value)} ))} diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeCheckboxes/CheckboxEnlargement.tsx b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeCheckboxes/CheckboxEnlargement.tsx index 9431995d..2d00be7a 100644 --- a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeCheckboxes/CheckboxEnlargement.tsx +++ b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeCheckboxes/CheckboxEnlargement.tsx @@ -13,6 +13,7 @@ export const CheckboxEnlargement = () => { ) diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeCheckboxes/CheckboxFastShrink.tsx b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeCheckboxes/CheckboxFastShrink.tsx index c3b97604..e1afa04f 100644 --- a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeCheckboxes/CheckboxFastShrink.tsx +++ b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeCheckboxes/CheckboxFastShrink.tsx @@ -26,5 +26,12 @@ export const CheckboxFastShrink = () => { return null } - return + return ( + + ) } diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeCheckboxes/CheckboxReduction.tsx b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeCheckboxes/CheckboxReduction.tsx index e2199c9d..8c1bba84 100644 --- a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeCheckboxes/CheckboxReduction.tsx +++ b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeCheckboxes/CheckboxReduction.tsx @@ -13,6 +13,7 @@ export const CheckboxReduction = () => { ) diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeExtra.tsx b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeExtra.tsx index 053e733c..d809ff16 100644 --- a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeExtra.tsx +++ b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeExtra.tsx @@ -3,7 +3,7 @@ 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 = () => { @@ -11,7 +11,7 @@ export const ResizeExtra = () => { return ( - + {background && ( diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/index.ts b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/index.ts deleted file mode 100644 index 90b460be..00000000 --- a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { ResizeSelectList } from './ResizeSelectList' diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/ResizeSelectList.tsx b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/ResizeSelectsList.tsx similarity index 94% rename from apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/ResizeSelectList.tsx rename to apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/ResizeSelectsList.tsx index 830b4073..ce417daf 100644 --- a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/ResizeSelectList.tsx +++ b/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) diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizeFit/ResizeFitExamplesPopover/ResizeFitExamplesPopover.module.css b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/SelectResizeFit/ResizeFitExamplesPopover/ResizeFitExamplesPopover.module.css similarity index 100% rename from apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizeFit/ResizeFitExamplesPopover/ResizeFitExamplesPopover.module.css rename to apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/SelectResizeFit/ResizeFitExamplesPopover/ResizeFitExamplesPopover.module.css diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizeFit/ResizeFitExamplesPopover/ResizeFitExamplesPopover.tsx b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/SelectResizeFit/ResizeFitExamplesPopover/ResizeFitExamplesPopover.tsx similarity index 100% rename from apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizeFit/ResizeFitExamplesPopover/ResizeFitExamplesPopover.tsx rename to apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/SelectResizeFit/ResizeFitExamplesPopover/ResizeFitExamplesPopover.tsx diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizeFit/ResizeFitExamplesPopover/index.ts b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/SelectResizeFit/ResizeFitExamplesPopover/index.ts similarity index 100% rename from apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizeFit/ResizeFitExamplesPopover/index.ts rename to apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/SelectResizeFit/ResizeFitExamplesPopover/index.ts diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizeFit/SelectResizeFit.tsx b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/SelectResizeFit/SelectResizeFit.tsx similarity index 89% rename from apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizeFit/SelectResizeFit.tsx rename to apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/SelectResizeFit/SelectResizeFit.tsx index cadbd7f5..806adf9b 100644 --- a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizeFit/SelectResizeFit.tsx +++ b/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={} + triggerCySelector='sl-resize-fit-trigger' + contentCySelector='sl-resize-fit-content' onValueChange={handleSetFit} /> ) diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizeFit/index.ts b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/SelectResizeFit/index.ts similarity index 100% rename from apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizeFit/index.ts rename to apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/SelectResizeFit/index.ts diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizeKernel.tsx b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/SelectResizeKernel.tsx similarity index 88% rename from apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizeKernel.tsx rename to apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/SelectResizeKernel.tsx index 5741c804..3e0edc2d 100644 --- a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectList/SelectResizeKernel.tsx +++ b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/SelectResizeKernel.tsx @@ -20,9 +20,11 @@ export const SelectResizeKernel = () => { return ( ) diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/index.ts b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/index.ts new file mode 100644 index 00000000..ed15be2b --- /dev/null +++ b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeExtra/ResizeSelectsList/index.ts @@ -0,0 +1 @@ +export { ResizeSelectsList } from './ResizeSelectsList' diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeSizesForm.tsx b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeSizesForm.tsx index c6a9bfac..1f9ea54d 100644 --- a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/resize/ResizeSizesForm.tsx +++ b/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={} /> { setValue={setHeight} max={MAX_RESIZE_HEIGHT} placeholder='1080' + data-cy='input-resize-height' icon={} /> diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/trim/TrimContent/CheckboxTrimLineArt.tsx b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/trim/TrimContent/CheckboxTrimLineArt.tsx index 07875fca..721b44c0 100644 --- a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/trim/TrimContent/CheckboxTrimLineArt.tsx +++ b/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 + return ( + + ) } diff --git a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/trim/TrimContent/TrimThresholdInput.tsx b/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/trim/TrimContent/TrimThresholdInput.tsx index 90fdc8fb..a652f275 100644 --- a/apps/frontend/src/widgets/SettingsPanel/TabResize/sections/trim/TrimContent/TrimThresholdInput.tsx +++ b/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' /> ) } diff --git a/apps/frontend/src/widgets/SettingsPanel/Toolbar/ToolbarTabMenu/ToolbarTabDropdown/ToolbarTabDropdown.tsx b/apps/frontend/src/widgets/SettingsPanel/Toolbar/ToolbarTabMenu/ToolbarTabDropdown/ToolbarTabDropdown.tsx index ba502545..3426fdff 100644 --- a/apps/frontend/src/widgets/SettingsPanel/Toolbar/ToolbarTabMenu/ToolbarTabDropdown/ToolbarTabDropdown.tsx +++ b/apps/frontend/src/widgets/SettingsPanel/Toolbar/ToolbarTabMenu/ToolbarTabDropdown/ToolbarTabDropdown.tsx @@ -15,14 +15,17 @@ export const ToolbarTabDropdown = () => { return ( - + - + diff --git a/apps/frontend/src/widgets/SettingsPanel/Toolbar/ToolbarTabMenu/ToolbarTabList/ToolbarTabItem.tsx b/apps/frontend/src/widgets/SettingsPanel/Toolbar/ToolbarTabMenu/ToolbarTabList/ToolbarTabItem.tsx index 7936b39e..85116644 100644 --- a/apps/frontend/src/widgets/SettingsPanel/Toolbar/ToolbarTabMenu/ToolbarTabList/ToolbarTabItem.tsx +++ b/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) => ( - +export const ToolbarTabItem = ({ label, icon, ...props }: Props) => ( + {icon} {label}