@openneuro/app 4.2.2 → 4.2.5

package/src/scripts/refactor_2021/dataset/download/__tests__/__snapshots__/shell-example.spec.jsx.snap

@@ -1,10 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`dataset/download/ShellExample renders successfully 1`] = `
-<Fragment>
-  <Noop />
+<DocumentFragment>
   <pre
-    className="css-xak41w"
+    class="css-xak41w"
   />
-</Fragment>
+</DocumentFragment>
 `;

package/src/scripts/refactor_2021/dataset/download/__tests__/download-command-line.spec.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
 import { DownloadSampleCommand } from '../download-command-line.jsx'
 
 const defProps = { datasetId: 'ds000001' }
@@ -7,20 +8,18 @@ const defProps = { datasetId: 'ds000001' }
 describe('dataset/download', () => {
   describe('DownloadSampleCommand component', () => {
     it('renders successfully', () => {
-      const wrapper = shallow(<DownloadSampleCommand {...defProps} />)
-      expect(wrapper).toMatchSnapshot()
+      const { asFragment } = render(<DownloadSampleCommand {...defProps} />)
+      expect(asFragment()).toMatchSnapshot()
     })
     it('drafts show draft flag', () => {
-      const wrapper = shallow(<DownloadSampleCommand {...defProps} />)
-      expect(wrapper.text()).toEqual(expect.stringContaining('--draft'))
-      expect(wrapper.text()).toEqual(expect.not.stringContaining('--snapshot'))
+      render(<DownloadSampleCommand {...defProps} />)
+      expect(screen.getByRole('figure')).toHaveTextContent('--draft')
+      expect(screen.queryByText('--snapshot')).not.toBeInTheDocument()
     })
     it('snapshots show snapshot flag', () => {
-      const wrapper = shallow(
-        <DownloadSampleCommand {...defProps} snapshotTag="1.0.0" />,
-      )
-      expect(wrapper.text()).toEqual(expect.stringContaining('--snapshot'))
-      expect(wrapper.text()).toEqual(expect.not.stringContaining('--draft'))
+      render(<DownloadSampleCommand {...defProps} snapshotTag="1.0.0" />)
+      expect(screen.getByRole('figure')).toHaveTextContent('--snapshot')
+      expect(screen.queryByText('--draft')).not.toBeInTheDocument()
     })
   })
 })

package/src/scripts/refactor_2021/dataset/download/__tests__/download-link.spec.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
 import DownloadLink from '../download-link.jsx'
 import { MockedProvider } from '@apollo/client/testing'
 const defProps = {
@@ -9,11 +9,11 @@ const defProps = {
 
 describe('dataset/download/DownloadLink', () => {
   it('renders successfully', () => {
-    const wrapper = shallow(
+    const { asFragment } = render(
       <MockedProvider>
         <DownloadLink {...defProps} />
       </MockedProvider>,
     )
-    expect(wrapper).toMatchSnapshot()
+    expect(asFragment()).toMatchSnapshot()
   })
 })

package/src/scripts/refactor_2021/dataset/download/__tests__/shell-example.spec.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
 import ShellExample from '../shell-example.jsx'
 
 describe('dataset/download/ShellExample', () => {
   it('renders successfully', () => {
-    const wrapper = shallow(<ShellExample />)
-    expect(wrapper).toMatchSnapshot()
+    const { asFragment } = render(<ShellExample />)
+    expect(asFragment()).toMatchSnapshot()
   })
 })

package/src/scripts/refactor_2021/dataset/download/download-command-line.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import ShellExample from './shell-example.jsx'
 
 export const DownloadSampleCommand = ({ datasetId, snapshotTag }) => (
-  <ShellExample>
+  <ShellExample role="figure">
     openneuro download {snapshotTag ? `--snapshot ${snapshotTag}` : '--draft'}{' '}
     {datasetId} {datasetId}
     -download/

package/src/scripts/refactor_2021/dataset/draft-container.tsx

@@ -194,14 +194,20 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
           />
         )}
         renderFiles={() => (
-          <Files
-            datasetId={datasetId}
-            snapshotTag={null}
-            datasetName={dataset.draft.description.Name}
-            files={dataset.draft.files}
-            editMode={hasEdit}
-            datasetPermissions={dataset.permissions}
-          />
+          <ReadMore
+            fileTree={true}
+            id="collapse-tree"
+            expandLabel="Expand File Tree"
+            collapseLabel="Collapse File Tree">
+            <Files
+              datasetId={datasetId}
+              snapshotTag={null}
+              datasetName={dataset.draft.description.Name}
+              files={dataset.draft.files}
+              editMode={hasEdit}
+              datasetPermissions={dataset.permissions}
+            />
+          </ReadMore>
         )}
         renderReadMe={() => (
           <MetaDataBlock
@@ -218,7 +224,7 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
                 <ReadMore
                   id="readme"
                   expandLabel="Read More"
-                  collapseabel="Collapse">
+                  collapseLabel="Collapse">
                   <Markdown>{dataset.draft.readme || 'N/A'}</Markdown>
                 </ReadMore>
               </EditDescriptionField>

package/src/scripts/refactor_2021/dataset/draft-snapshot-routes.tsx

@@ -6,15 +6,10 @@ const Dataset = () => {
   return (
     <Switch>
       <Route
-        name="datalad-snapshot"
         path="/datasets/:datasetId/versions/:snapshotId"
         component={DatasetQuery}
       />
-      <Route
-        name="datalad-dataset"
-        path="/datasets/:datasetId/"
-        component={DatasetQuery}
-      />
+      <Route path="/datasets/:datasetId/" component={DatasetQuery} />
     </Switch>
   )
 }

package/src/scripts/refactor_2021/dataset/files/__tests__/__snapshots__/file-tree.spec.jsx.snap

@@ -1,59 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FileTree component renders with default props 1`] = `
-<FileTree>
-  <AccordionTab
-    accordionStyle="file-tree"
-    className=""
-    label=""
-    startOpen={false}
+<DocumentFragment>
+  <article
+    class="file-tree accordion "
   >
-    <article
-      className="file-tree accordion "
+    <div
+      class="accordion-title "
     >
-      <div
-        className="accordion-title "
-        onClick={[Function]}
+      <span
+        aria-label=""
+        class="file-icon on-icon  "
+        role="img"
       >
-        <Icon
-          className="file-icon"
-          icon="fas fa-folder"
-          label=""
-        >
-          <span
-            aria-label=""
-            className="file-icon on-icon  "
-            role="img"
-            style={
-              Object {
-                "backgroundColor": undefined,
-                "color": undefined,
-              }
-            }
-          >
-            <i
-              className="fas fa-folder"
-              style={
-                Object {
-                  "fontSize": undefined,
-                }
-              }
-            />
-          </span>
-        </Icon>
-      </div>
+        <i
+          class="fas fa-folder"
+        />
+      </span>
+    </div>
+    <div
+      class="accordion-item  collapsed "
+    >
       <div
-        className="accordion-item  collapsed "
+        class="accordion-content"
       >
-        <div
-          className="accordion-content"
-        >
-          <ul
-            className="child-files"
-          />
-        </div>
+        <ul
+          class="child-files"
+        />
       </div>
-    </article>
-  </AccordionTab>
-</FileTree>
+    </div>
+  </article>
+</DocumentFragment>
 `;

package/src/scripts/refactor_2021/dataset/files/__tests__/__snapshots__/file.spec.jsx.snap

@@ -1,103 +1,123 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`File component renders for dataset snapshots 1`] = `
-<Fragment>
-  <Icon
-    color="deepskyblue"
-    icon="fab fa-markdown"
-  />
-    
-  README
+<DocumentFragment>
   <span
-    className="filetree-editfile"
+    aria-label=""
+    class=" on-icon  "
+    role="img"
+    style="color: deepskyblue;"
   >
-    <Media
-      className=""
-      greaterThanOrEqual="medium"
+    <i
+      class="fab fa-markdown"
+    />
+  </span>
+    README
+  <span
+    class="filetree-editfile"
+  >
+    <div
+      class="fresnel-container fresnel-greaterThanOrEqual-medium "
     >
-      <Tooltip
-        tooltip="Download"
+      <span
+        class=" "
+        data-flow="up"
+        data-tooltip="Download"
       >
         <span
-          className="edit-file download-file"
+          class="edit-file download-file"
         >
           <a
-            download={true}
+            aria-label="download file"
+            download=""
             href="/crn/datasets/ds001/snapshots/1.0.0/files/README"
           >
             <i
-              className="fa fa-download"
+              class="fa fa-download"
             />
           </a>
         </span>
-      </Tooltip>
-    </Media>
-    <Tooltip
-      tooltip="View"
+      </span>
+    </div>
+    <span
+      class=" "
+      data-flow="up"
+      data-tooltip="View"
     >
       <span
-        className="edit-file view-file"
+        class="edit-file view-file"
       >
-        <Link
-          to="/datasets/ds001/versions/1.0.0/file-display/README"
+        <a
+          aria-label="view file"
+          href="/datasets/ds001/versions/1.0.0/file-display/README"
         >
           <i
-            className="fa fa-eye"
+            class="fa fa-eye"
           />
-        </Link>
+        </a>
       </span>
-    </Tooltip>
+    </span>
   </span>
-</Fragment>
+</DocumentFragment>
 `;
 
 exports[`File component renders with common props 1`] = `
-<Fragment>
-  <Icon
-    color="deepskyblue"
-    icon="fab fa-markdown"
-  />
-    
-  README
+<DocumentFragment>
   <span
-    className="filetree-editfile"
+    aria-label=""
+    class=" on-icon  "
+    role="img"
+    style="color: deepskyblue;"
   >
-    <Media
-      className=""
-      greaterThanOrEqual="medium"
+    <i
+      class="fab fa-markdown"
+    />
+  </span>
+    README
+  <span
+    class="filetree-editfile"
+  >
+    <div
+      class="fresnel-container fresnel-greaterThanOrEqual-medium "
     >
-      <Tooltip
-        tooltip="Download"
+      <span
+        class=" "
+        data-flow="up"
+        data-tooltip="Download"
       >
         <span
-          className="edit-file download-file"
+          class="edit-file download-file"
         >
           <a
-            download={true}
+            aria-label="download file"
+            download=""
             href="/crn/datasets/ds001/files/README"
           >
             <i
-              className="fa fa-download"
+              class="fa fa-download"
             />
           </a>
         </span>
-      </Tooltip>
-    </Media>
-    <Tooltip
-      tooltip="View"
+      </span>
+    </div>
+    <span
+      class=" "
+      data-flow="up"
+      data-tooltip="View"
     >
       <span
-        className="edit-file view-file"
+        class="edit-file view-file"
       >
-        <Link
-          to="/datasets/ds001/file-display/README"
+        <a
+          aria-label="view file"
+          href="/datasets/ds001/file-display/README"
         >
           <i
-            className="fa fa-eye"
+            class="fa fa-eye"
           />
-        </Link>
+        </a>
       </span>
-    </Tooltip>
+    </span>
   </span>
-</Fragment>
+</DocumentFragment>
 `;

package/src/scripts/refactor_2021/dataset/files/__tests__/file-tree-unloaded-directory.spec.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { mount } from 'enzyme'
+import { render, screen, fireEvent } from '@testing-library/react'
 import DatasetQueryContext from '../../../../datalad/dataset/dataset-query-context.js'
 import FileTreeUnloadedDirectory, {
   mergeNewFiles,
@@ -12,12 +12,13 @@ const dir = {
 describe('FileTreeUnloadedDirectory component', () => {
   it('calls fetchMoreDirectory when clicked', () => {
     const fetchMore = jest.fn()
-    const wrapper = mount(
+    render(
       <DatasetQueryContext.Provider value={{ fetchMore }}>
         <FileTreeUnloadedDirectory datasetId={'ds000001'} directory={dir} />
       </DatasetQueryContext.Provider>,
     )
-    wrapper.find('div.accordion-title').simulate('click')
+    // Label is filename
+    fireEvent.click(screen.getByLabelText(dir.filename))
     expect(fetchMore).toHaveBeenCalled()
   })
   describe('mergeNewFiles', () => {

package/src/scripts/refactor_2021/dataset/files/__tests__/file-tree.spec.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { mount } from 'enzyme'
-import { ApolloProvider } from '@apollo/client'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { MockedProvider } from '@apollo/client/testing'
 import FileTree, {
   sortByFilename,
   sortByName,
@@ -30,27 +30,31 @@ jest.mock('react-spring', () => ({
 
 describe('FileTree component', () => {
   it('renders with default props', () => {
-    expect(mount(<FileTree />)).toMatchSnapshot()
+    const { asFragment } = render(<FileTree />)
+    expect(asFragment()).toMatchSnapshot()
   })
   it('expands and closes when clicked', () => {
-    // ApolloProvider isn't used in this test but must exist
-    // When enzyme supports hooks, this can be simplified
-    const wrapper = mount(
-      <ApolloProvider client={{}}>
+    render(
+      <MockedProvider>
         <FileTree name="Top Level" />
-      </ApolloProvider>,
+      </MockedProvider>,
+    )
+    // Test the folder icon is closed
+    expect(screen.getByLabelText('Top Level').firstChild).toHaveClass(
+      'fa-folder',
+    )
+    expect(screen.getByLabelText('Top Level').firstChild).not.toHaveClass(
+      'fa-folder-open',
+    )
+    // Click it
+    fireEvent.click(screen.getByLabelText('Top Level'))
+    // Test that it is now open
+    expect(screen.getByLabelText('Top Level').firstChild).toHaveClass(
+      'fa-folder-open',
+    )
+    expect(screen.getByLabelText('Top Level').firstChild).not.toHaveClass(
+      'fa-folder',
     )
-    expect(
-      wrapper.find('div.accordion-title i').hasClass('fa-folder-open'),
-    ).toBe(false)
-    wrapper.find('div.accordion-title').simulate('click')
-    expect(
-      wrapper.find('div.accordion-title i').hasClass('fa-folder-open'),
-    ).toBe(true)
-    wrapper.find('div.accordion-title').simulate('click')
-    expect(
-      wrapper.find('div.accordion-title i').hasClass('fa-folder-open'),
-    ).toBe(false)
   })
   describe('sortByFilename()', () => {
     it('sorts the expected filename properties', () => {

package/src/scripts/refactor_2021/dataset/files/__tests__/file-viewer-type.spec.jsx

@@ -1,15 +1,17 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { render, screen } from '@testing-library/react'
 import FileViewerType from '../file-viewer-type.jsx'
 
 describe('FileViewerType component', () => {
   it('displays a fallback when an unknown file is specified', () => {
-    const wrapper = shallow(
+    const component = render(
       <FileViewerType
         path="unknown-file-extension.xyz"
         data={new ArrayBuffer(128)}
       />,
     )
-    expect(wrapper.at(0).hasClass('file-viewer-fallback')).toBe(true)
+    expect(
+      screen.getByText(/this file must be downloaded to view it/i),
+    ).toHaveClass('file-viewer-fallback')
   })
 })

package/src/scripts/refactor_2021/dataset/files/__tests__/file.spec.jsx

@@ -1,43 +1,43 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
 import File from '../file.jsx'
-import { CookiesProvider, Cookies } from 'react-cookie'
 
 describe('File component', () => {
   it('renders with common props', () => {
-    expect(
-      shallow(<File datasetId="ds001" path="" filename="README" />),
-    ).toMatchSnapshot()
+    const { asFragment } = render(
+      <File datasetId="ds001" path="" filename="README" />,
+      { wrapper: MemoryRouter },
+    )
+    expect(asFragment()).toMatchSnapshot()
   })
   it('renders for dataset snapshots', () => {
-    expect(
-      shallow(
-        <File
-          datasetId="ds001"
-          snapshotTag="1.0.0"
-          path=""
-          filename="README"
-        />,
-      ),
-    ).toMatchSnapshot()
+    const { asFragment } = render(
+      <File datasetId="ds001" snapshotTag="1.0.0" path="" filename="README" />,
+      { wrapper: MemoryRouter },
+    )
+    expect(asFragment()).toMatchSnapshot()
   })
   it('generates correct download links for top level files', () => {
-    const wrapper = shallow(
-      <File datasetId="ds001" path="" filename="README" />,
-    )
-    expect(wrapper.find('.download-file > a').prop('href')).toEqual(
+    render(<File datasetId="ds001" path="" filename="README" />, {
+      wrapper: MemoryRouter,
+    })
+    expect(screen.getByRole('link', { name: 'download file' })).toHaveAttribute(
+      'href',
       '/crn/datasets/ds001/files/README',
     )
   })
   it('generates correct download links for nested files', () => {
-    const wrapper = shallow(
+    render(
       <File
         datasetId="ds001"
         path="sub-01:anat"
         filename="sub-01_T1w.nii.gz"
       />,
+      { wrapper: MemoryRouter },
     )
-    expect(wrapper.find('.download-file > a').prop('href')).toEqual(
+    expect(screen.getByRole('link', { name: 'download file' })).toHaveAttribute(
+      'href',
       '/crn/datasets/ds001/files/sub-01:anat:sub-01_T1w.nii.gz',
     )
   })

package/src/scripts/refactor_2021/dataset/files/file.jsx

@@ -113,7 +113,8 @@ const File = ({
             <span className="edit-file download-file">
               <a
                 href={apiPath(datasetId, snapshotTag, filePath(path, filename))}
-                download>
+                download
+                aria-label="download file">
                 <i className="fa fa-download" />
               </a>
             </span>
@@ -121,7 +122,7 @@ const File = ({
         </Media>
         <Tooltip tooltip="View">
           <span className="edit-file view-file">
-            <Link to={viewerPath}>
+            <Link to={viewerPath} aria-label="view file">
               <i className="fa fa-eye" />
             </Link>
           </span>