feat(FilesTableSort): refactor to its own component

src/sections/dataset/dataset-files/file-criteria-inputs/FileCriteriaInputs.tsx

@@ -1,40 +1,17 @@
-import { FileCriteria, FileSortByOption } from '../../../../files/domain/models/FileCriteria'
-import { Col, DropdownButton, DropdownButtonItem, Row } from 'dataverse-design-system'
+import { FileCriteria } from '../../../../files/domain/models/FileCriteria'
+import { Col, Row } from 'dataverse-design-system'
 import styles from './FileCriteriaInputs.module.scss'
-import { ArrowDownUp } from 'react-bootstrap-icons'
-import { useTranslation } from 'react-i18next'
+import { FileCriteriaSortBy } from './FileCriteriaSortBy'
 
 export function FileCriteriaInputs({
   onCriteriaChange
 }: {
   onCriteriaChange: (criteria: FileCriteria) => void
 }) {
-  const { t } = useTranslation('files')
-  const handleSortChange = (eventKey: string | null) => {
-    onCriteriaChange({ sortBy: eventKey as FileSortByOption })
-  }
-
   return (
     <Row className={styles['criteria-section']}>
       <Col className={styles['sort-container']}>
-        <DropdownButton
-          icon={
-            <ArrowDownUp
-              className={styles.icon}
-              role="img"
-              aria-label={t('criteria.sortBy.icon')}
-            />
-          }
-          title={t('criteria.sortBy.title')}
-          id="files-table-sort-by"
-          variant="secondary"
-          onSelect={handleSortChange}>
-          {Object.values(FileSortByOption).map((sortByOption) => (
-            <DropdownButtonItem key={sortByOption} eventKey={sortByOption}>
-              {t(`criteria.sortBy.options.${sortByOption}`)}
-            </DropdownButtonItem>
-          ))}
-        </DropdownButton>
+        <FileCriteriaSortBy onCriteriaChange={onCriteriaChange} />
       </Col>
     </Row>
   )

src/sections/dataset/dataset-files/file-criteria-inputs/FileCriteriaSortBy.tsx

@@ -0,0 +1,33 @@
+import { ArrowDownUp } from 'react-bootstrap-icons'
+import styles from './FileCriteriaInputs.module.scss'
+import { FileCriteria, FileSortByOption } from '../../../../files/domain/models/FileCriteria'
+import { DropdownButton, DropdownButtonItem } from 'dataverse-design-system'
+import { useTranslation } from 'react-i18next'
+
+export function FileCriteriaSortBy({
+  onCriteriaChange
+}: {
+  onCriteriaChange: (criteria: FileCriteria) => void
+}) {
+  const { t } = useTranslation('files')
+  const handleSortChange = (eventKey: string | null) => {
+    onCriteriaChange({ sortBy: eventKey as FileSortByOption })
+  }
+
+  return (
+    <DropdownButton
+      icon={
+        <ArrowDownUp className={styles.icon} role="img" aria-label={t('criteria.sortBy.icon')} />
+      }
+      title={t('criteria.sortBy.title')}
+      id="files-table-sort-by"
+      variant="secondary"
+      onSelect={handleSortChange}>
+      {Object.values(FileSortByOption).map((sortByOption) => (
+        <DropdownButtonItem key={sortByOption} eventKey={sortByOption}>
+          {t(`criteria.sortBy.options.${sortByOption}`)}
+        </DropdownButtonItem>
+      ))}
+    </DropdownButton>
+  )
+}

tests/component/sections/dataset/dataset-files/file-criteria-inputs/FileCriteriaInputs.spec.tsx

@@ -1,33 +1,11 @@
 import { FileCriteriaInputs } from '../../../../../../src/sections/dataset/dataset-files/file-criteria-inputs/FileCriteriaInputs'
 
-describe('FilesCriteriaInputs', () => {
-  it('calls onCriteriaChange with the selected orderBy value', () => {
+describe('FileCriteriaInputs', () => {
+  it('renders the SortBy input', () => {
     const onCriteriaChange = cy.stub().as('onCriteriaChange')
 
     cy.customMount(<FileCriteriaInputs onCriteriaChange={onCriteriaChange} />)
 
-    cy.findByRole('button', { name: /Sort/ }).click()
-    cy.findByText('Name (A-Z)').should('exist').click()
-    cy.wrap(onCriteriaChange).should('be.calledWith', { sortBy: 'name_az' })
-
-    cy.findByRole('button', { name: /Sort/ }).click()
-    cy.findByText('Name (Z-A)').click()
-    cy.wrap(onCriteriaChange).should('be.calledWith', { sortBy: 'name_za' })
-
-    cy.findByRole('button', { name: /Sort/ }).click()
-    cy.findByText('Newest').click()
-    cy.wrap(onCriteriaChange).should('be.calledWith', { sortBy: 'newest' })
-
-    cy.findByRole('button', { name: /Sort/ }).click()
-    cy.findByText('Oldest').click()
-    cy.wrap(onCriteriaChange).should('be.calledWith', { sortBy: 'oldest' })
-
-    cy.findByRole('button', { name: /Sort/ }).click()
-    cy.findByText('Size').click()
-    cy.wrap(onCriteriaChange).should('be.calledWith', { sortBy: 'size' })
-
-    cy.findByRole('button', { name: /Sort/ }).click()
-    cy.findByText('Type').click()
-    cy.wrap(onCriteriaChange).should('be.calledWith', { sortBy: 'type' })
+    cy.findByRole('button', { name: /Sort/ }).should('exist')
   })
 })

tests/component/sections/dataset/dataset-files/file-criteria-inputs/FileCriteriaSortBy.spec.tsx

@@ -0,0 +1,33 @@
+import { FileCriteriaSortBy } from '../../../../../../src/sections/dataset/dataset-files/file-criteria-inputs/FileCriteriaSortBy'
+
+describe('FilesCriteriaSortBy', () => {
+  it('calls onCriteriaChange with the selected orderBy value', () => {
+    const onCriteriaChange = cy.stub().as('onCriteriaChange')
+
+    cy.customMount(<FileCriteriaSortBy onCriteriaChange={onCriteriaChange} />)
+
+    cy.findByRole('button', { name: /Sort/ }).click()
+    cy.findByText('Name (A-Z)').should('exist').click()
+    cy.wrap(onCriteriaChange).should('be.calledWith', { sortBy: 'name_az' })
+
+    cy.findByRole('button', { name: /Sort/ }).click()
+    cy.findByText('Name (Z-A)').click()
+    cy.wrap(onCriteriaChange).should('be.calledWith', { sortBy: 'name_za' })
+
+    cy.findByRole('button', { name: /Sort/ }).click()
+    cy.findByText('Newest').click()
+    cy.wrap(onCriteriaChange).should('be.calledWith', { sortBy: 'newest' })
+
+    cy.findByRole('button', { name: /Sort/ }).click()
+    cy.findByText('Oldest').click()
+    cy.wrap(onCriteriaChange).should('be.calledWith', { sortBy: 'oldest' })
+
+    cy.findByRole('button', { name: /Sort/ }).click()
+    cy.findByText('Size').click()
+    cy.wrap(onCriteriaChange).should('be.calledWith', { sortBy: 'size' })
+
+    cy.findByRole('button', { name: /Sort/ }).click()
+    cy.findByText('Type').click()
+    cy.wrap(onCriteriaChange).should('be.calledWith', { sortBy: 'type' })
+  })
+})