@openneuro/app 4.2.1 → 4.2.5-alpha.0

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>

package/src/scripts/refactor_2021/dataset/files/viewers/__tests__/__snapshots__/file-viewer-json.spec.jsx.snap

@@ -1,79 +1,104 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`File Viewer - JSON renders with invalid JSON 1`] = `
-<div
-  className="container"
->
+<DocumentFragment>
   <div
-    className="grid"
+    class="container"
   >
     <div
-      className="col col-lg"
+      class="grid"
     >
-      <h3>
-        Tree
-      </h3>
-      <hr />
-      <p>
-        JSON failed to parse
-      </p>
-      <pre>
-        Unexpected token ; in JSON at position 4
-      </pre>
-    </div>
-    <div
-      className="col"
-    >
-      <h3>
-        Raw
-      </h3>
-      <hr />
-      <Styled(pre)>
-        1234;
-      </Styled(pre)>
+      <div
+        class="col col-lg"
+      >
+        <h3>
+          Tree
+        </h3>
+        <hr />
+        <p>
+          JSON failed to parse
+        </p>
+        <pre>
+          Unexpected token ; in JSON at position 4
+        </pre>
+      </div>
+      <div
+        class="col"
+      >
+        <h3>
+          Raw
+        </h3>
+        <hr />
+        <pre
+          class="css-ffm88e"
+        >
+          1234;
+        </pre>
+      </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`File Viewer - JSON renders with valid JSON 1`] = `
-<div
-  className="container"
->
+<DocumentFragment>
   <div
-    className="grid"
+    class="container"
   >
     <div
-      className="col col-lg"
-    >
-      <h3>
-        Tree
-      </h3>
-      <hr />
-      <RecursiveProperty
-        emptyPropertyLabel="Property is empty"
-        property={
-          Object {
-            "name": "string",
-            "thing": 1,
-          }
-        }
-        propertyName="Root Property"
-        propertyNameProcessor={[Function]}
-        rootProperty={true}
-      />
-    </div>
-    <div
-      className="col"
+      class="grid"
     >
-      <h3>
-        Raw
-      </h3>
-      <hr />
-      <Styled(pre)>
-        {"thing":1,"name":"string"}
-      </Styled(pre)>
+      <div
+        class="col col-lg"
+      >
+        <h3>
+          Tree
+        </h3>
+        <hr />
+        <div
+          class="json-container"
+        >
+          <div
+            class="expand-prop-name"
+          >
+             Root  Property-
+          </div>
+          <div
+            class="json-container"
+          >
+            <span
+              class="prop-name"
+            >
+              Thing: 
+            </span>
+            1
+          </div>
+          <div
+            class="json-container"
+          >
+            <span
+              class="prop-name"
+            >
+              Name: 
+            </span>
+            string
+          </div>
+        </div>
+      </div>
+      <div
+        class="col"
+      >
+        <h3>
+          Raw
+        </h3>
+        <hr />
+        <pre
+          class="css-ffm88e"
+        >
+          {"thing":1,"name":"string"}
+        </pre>
+      </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,15 +1,15 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
 import { FileViewerJsonRaw } from '../file-viewer-json.jsx'
 
 describe('File Viewer - JSON', () => {
   it('renders with valid JSON', () => {
     const validJson = JSON.stringify({ thing: 1, name: 'string' })
-    const wrapper = shallow(<FileViewerJsonRaw jsonRaw={validJson} />)
-    expect(wrapper).toMatchSnapshot()
+    const { asFragment } = render(<FileViewerJsonRaw jsonRaw={validJson} />)
+    expect(asFragment()).toMatchSnapshot()
   })
   it('renders with invalid JSON', () => {
-    const wrapper = shallow(<FileViewerJsonRaw jsonRaw="1234;" />)
-    expect(wrapper).toMatchSnapshot()
+    const { asFragment } = render(<FileViewerJsonRaw jsonRaw="1234;" />)
+    expect(asFragment()).toMatchSnapshot()
   })
 })

package/src/scripts/refactor_2021/dataset/fragments/__tests__/__snapshots__/cancel-button.spec.tsx.snap

@@ -1,10 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CancelButton component renders with default props 1`] = `
-<Button
-  className="description-btn description-button-cancel"
-  icon="fas fa-times"
-  label="Cancel"
-  onClick={[Function]}
-/>
+<DocumentFragment>
+  <button
+    aria-label="Cancel"
+    class="on-button on-button--medium on-button--default icon-text description-btn description-button-cancel"
+    role="button"
+    type="button"
+  >
+    <i
+      aria-hidden="true"
+      class="fas fa-times css-0"
+    />
+    Cancel
+  </button>
+</DocumentFragment>
 `;

package/src/scripts/refactor_2021/dataset/fragments/__tests__/__snapshots__/edit-button.spec.tsx.snap

@@ -1,10 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EditButton component renders with default props 1`] = `
-<Button
-  className="description-btn description-button-edit"
-  icon="fas fa-edit"
-  label="Edit"
-  onClick={[Function]}
-/>
+<DocumentFragment>
+  <button
+    aria-label="Edit"
+    class="on-button on-button--medium on-button--default icon-text description-btn description-button-edit"
+    role="button"
+    type="button"
+  >
+    <i
+      aria-hidden="true"
+      class="fas fa-edit css-0"
+    />
+    Edit
+  </button>
+</DocumentFragment>
 `;

package/src/scripts/refactor_2021/dataset/fragments/__tests__/__snapshots__/save-button.spec.tsx.snap

@@ -1,10 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SaveButton component renders with default props 1`] = `
-<Button
-  className="description-btn description-button-save"
-  icon="fas fa-check"
-  label="Save"
-  onClick={[Function]}
-/>
+<DocumentFragment>
+  <button
+    aria-label="Save"
+    class="on-button on-button--medium on-button--default icon-text description-btn description-button-save"
+    role="button"
+    type="button"
+  >
+    <i
+      aria-hidden="true"
+      class="fas fa-check css-0"
+    />
+    Save
+  </button>
+</DocumentFragment>
 `;

package/src/scripts/refactor_2021/dataset/fragments/__tests__/__snapshots__/select-input.spec.tsx.snap

@@ -1,154 +1,227 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SelectInput handles boolean display 1`] = `
-<Fragment>
-  <Styled(div)>
-    <Styled(label)
-      hasValue={true}
-      htmlFor="Expected name"
+<DocumentFragment>
+  <div
+    class="css-1e7yhge"
+  >
+    <label
+      class="css-xlyr96"
+      for="Expected name"
     >
       Expected label
-    </Styled(label)>
-    <Styled(i)
-      className="fa fa-asterisk"
+    </label>
+    <i
+      class="fa fa-asterisk css-1gx6zd3"
     />
-    <Styled(div)>
+    <div
+      class="css-1y7plm6"
+    >
       true
-      <SelectIcon />
-    </Styled(div)>
-    <styledSelect
-      disabled={true}
+      <div
+        class="css-ul54qr"
+      >
+        <i
+          class="fa fa-caret-up"
+        />
+        <i
+          class="fa fa-caret-down"
+        />
+      </div>
+    </div>
+    <select
+      class="css-1m2rag2"
+      disabled=""
       name="Expected name"
-      onChange={[Function]}
-      value="true"
     >
-      <Styled(option)
-        disabled={true}
-        hidden={true}
+      <option
+        class="css-1xu3tth"
+        disabled=""
+        hidden=""
         value=""
       />
-      <Styled(option)
-        key="0"
-        value={true}
+      <option
+        class="css-1xu3tth"
+        value="true"
       >
         true-label
-      </Styled(option)>
-      <Styled(option)
-        key="1"
-        value={false}
+      </option>
+      <option
+        class="css-1xu3tth"
+        value="false"
       >
         false-label
-      </Styled(option)>
-    </styledSelect>
-  </Styled(div)>
-  <Styled(div)>
-    <TextInput
-      disabled={true}
-      label="Other Expected label"
-      name="Expected name"
-      value="true"
-    />
-  </Styled(div)>
-</Fragment>
+      </option>
+    </select>
+  </div>
+  <div
+    class="css-vzng66"
+  >
+    <div
+      class="css-1k9o271"
+    >
+      <label
+        class="css-1y4orcj"
+        for="Expected name"
+      >
+        Other Expected label
+      </label>
+      <input
+        class="css-1v4xkzy"
+        disabled=""
+        name="Expected name"
+        value="true"
+      />
+    </div>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`SelectInput handles display as disabled 1`] = `
-<Fragment>
-  <Styled(div)>
-    <Styled(label)
-      hasValue={true}
-      htmlFor="Expected name"
+<DocumentFragment>
+  <div
+    class="css-1e7yhge"
+  >
+    <label
+      class="css-xlyr96"
+      for="Expected name"
     >
       Expected label
-    </Styled(label)>
-    <Styled(i)
-      className="fa fa-asterisk"
+    </label>
+    <i
+      class="fa fa-asterisk css-1gx6zd3"
     />
-    <Styled(div)>
+    <div
+      class="css-1y7plm6"
+    >
       hi
-      <SelectIcon />
-    </Styled(div)>
-    <styledSelect
-      disabled={true}
+      <div
+        class="css-ul54qr"
+      >
+        <i
+          class="fa fa-caret-up"
+        />
+        <i
+          class="fa fa-caret-down"
+        />
+      </div>
+    </div>
+    <select
+      class="css-1m2rag2"
+      disabled=""
       name="Expected name"
-      onChange={[Function]}
-      value="hi"
     >
-      <Styled(option)
-        disabled={true}
-        hidden={true}
+      <option
+        class="css-1xu3tth"
+        disabled=""
+        hidden=""
         value=""
       />
-      <Styled(option)
-        key="0"
+      <option
+        class="css-1xu3tth"
         value="hi"
       >
         hi
-      </Styled(option)>
-      <Styled(option)
-        key="1"
+      </option>
+      <option
+        class="css-1xu3tth"
         value="bye"
       >
         bye
-      </Styled(option)>
-    </styledSelect>
-  </Styled(div)>
-  <Styled(div)>
-    <TextInput
-      disabled={true}
-      label="Other Expected label"
-      name="Expected name"
-      value="hi"
-    />
-  </Styled(div)>
-</Fragment>
+      </option>
+    </select>
+  </div>
+  <div
+    class="css-vzng66"
+  >
+    <div
+      class="css-1k9o271"
+    >
+      <label
+        class="css-1y4orcj"
+        for="Expected name"
+      >
+        Other Expected label
+      </label>
+      <input
+        class="css-1v4xkzy"
+        disabled=""
+        name="Expected name"
+        value="hi"
+      />
+    </div>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`SelectInput handles display as not disabled 1`] = `
-<Fragment>
-  <Styled(div)>
-    <Styled(label)
-      hasValue={true}
-      htmlFor="Expected name"
+<DocumentFragment>
+  <div
+    class="css-1e7yhge"
+  >
+    <label
+      class="css-xlyr96"
+      for="Expected name"
     >
       Expected label
-    </Styled(label)>
-    <Styled(div)>
+    </label>
+    <div
+      class="css-1y7plm6"
+    >
       hi
-      <SelectIcon />
-    </Styled(div)>
-    <styledSelect
-      disabled={false}
+      <div
+        class="css-ul54qr"
+      >
+        <i
+          class="fa fa-caret-up"
+        />
+        <i
+          class="fa fa-caret-down"
+        />
+      </div>
+    </div>
+    <select
+      class="css-1m2rag2"
       name="Expected name"
-      onChange={[Function]}
-      value="hi"
     >
-      <Styled(option)
-        disabled={true}
-        hidden={true}
+      <option
+        class="css-1xu3tth"
+        disabled=""
+        hidden=""
         value=""
       />
-      <Styled(option)
-        key="0"
+      <option
+        class="css-1xu3tth"
         value="hi"
       >
         hi
-      </Styled(option)>
-      <Styled(option)
-        key="1"
+      </option>
+      <option
+        class="css-1xu3tth"
         value="bye"
       >
         bye
-      </Styled(option)>
-    </styledSelect>
-  </Styled(div)>
-  <Styled(div)>
-    <TextInput
-      disabled={false}
-      label="Other Expected label"
-      name="Expected name"
-      value="hi"
-    />
-  </Styled(div)>
-</Fragment>
+      </option>
+    </select>
+  </div>
+  <div
+    class="css-vzng66"
+  >
+    <div
+      class="css-1k9o271"
+    >
+      <label
+        class="css-1y4orcj"
+        for="Expected name"
+      >
+        Other Expected label
+      </label>
+      <input
+        class="css-1v4xkzy"
+        name="Expected name"
+        value="hi"
+      />
+    </div>
+  </div>
+</DocumentFragment>
 `;

package/src/scripts/refactor_2021/dataset/fragments/__tests__/cancel-button.spec.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
 import { CancelButton } from '../cancel-button'
 
 describe('CancelButton component', () => {
   it('renders with default props', () => {
-    const wrapper = shallow(<CancelButton action={() => {}} />)
-    expect(wrapper).toMatchSnapshot()
+    const { asFragment } = render(<CancelButton action={() => {}} />)
+    expect(asFragment()).toMatchSnapshot()
   })
 })

package/src/scripts/refactor_2021/dataset/fragments/__tests__/edit-button.spec.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
 import { EditButton } from '../edit-button'
 
 describe('EditButton component', () => {
   it('renders with default props', () => {
-    const wrapper = shallow(<EditButton action={() => {}} />)
-    expect(wrapper).toMatchSnapshot()
+    const { asFragment } = render(<EditButton action={() => {}} />)
+    expect(asFragment()).toMatchSnapshot()
   })
 })

package/src/scripts/refactor_2021/dataset/fragments/__tests__/edit-list.spec.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { render, fireEvent, screen } from '@testing-library/react'
 import EditList from '../edit-list.jsx'
 
-// Mount is used because enzyme does not yet support hooks
 describe('EditList component', () => {
   it('renders with default props', () => {
     const { asFragment } = render(<EditList />)

package/src/scripts/refactor_2021/dataset/fragments/__tests__/save-button.spec.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
 import { SaveButton } from '../save-button'
 
 describe('SaveButton component', () => {
   it('renders with default props', () => {
-    const wrapper = shallow(<SaveButton action={() => {}} />)
-    expect(wrapper).toMatchSnapshot()
+    const { asFragment } = render(<SaveButton action={() => {}} />)
+    expect(asFragment()).toMatchSnapshot()
   })
 })