bump to version 0.5.0

architecture.md

@@ -8,7 +8,7 @@ React Router is used to render different views in App-component. All components
 
 Form components are crucial part of the application:
 
-- Forms for XML upload and folder creation are made with `Formik` and customized fields for material-UI.
+- All submissions and folder creation are made with `react-hook-form`. Latter uses form as a reference so submission can be triggered outside the form.
 - Form for json schema based forms are created with custom json schema parser, which builds `react-hook-form` based forms from given json schema. Json schema-based forms are validated against json schema with `Ajv`. React-hook-form is used for performance reasons: it uses uncontrolled components so adding a lot of fields to array doesn't slow rendering of the application.
 
 ## Redux store

package.json

@@ -1,32 +1,31 @@
 {
   "name": "metadata-submitter-frontend",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": true,
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^9.0.6",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@reduxjs/toolkit": "^1.4.0",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
-    "ajv": "^6.12.3",
+    "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/react": "^11.1.1",
+    "ajv": "^6.12.6",
     "apisauce": "^1.1.2",
-    "formik": "^2.1.5",
-    "lodash": "^4.17.19",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-hook-form": "^6.3.1",
-    "react-redux": "^7.2.1",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "lodash": "^4.17.20",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-hook-form": "^6.10.1",
+    "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.3"
+    "react-scripts": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
-    "test:noninteractive": "react-scripts test --watchAll=false",
+    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
+    "test:noninteractive": "react-scripts test --watchAll=false --env=jest-environment-jsdom-sixteen",
     "lint": "eslint --fix .",
     "lint:check": "eslint .",
     "format": "prettier --write \"**/*.+(json|yml|yaml|css|md)\"",
@@ -55,19 +54,20 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/user-event": "^12.2.0",
     "concurrently": "^5.3.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.5",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jest": "^23.20.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.1.3",
     "eslint-plugin-prettier": "^3.1.4",
     "flow-bin": "^0.126.1",
-    "http-proxy-middleware": "^1.0.5",
-    "husky": "^4.2.5",
-    "prettier": "^2.0.5",
-    "redux-mock-store": "^1.5.4"
+    "http-proxy-middleware": "^1.0.6",
+    "husky": "^4.3.0",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "prettier": "^2.2.0",
+    "redux-mock-store": "^1.5.4",
+    "snapshot-diff": "^0.8.1"
   },
   "husky": {
     "hooks": {

src/components/Nav.test.js → src/__tests__/Nav.test.js

@@ -4,7 +4,7 @@ import "@testing-library/jest-dom/extend-expect"
 import { render } from "@testing-library/react"
 import { MemoryRouter } from "react-router-dom"
 
-import Nav from "./Nav"
+import Nav from "../components/Nav"
 
 describe("NavBar", () => {
   let component

src/__tests__/WizardAddObjectStep.test.js

@@ -0,0 +1,59 @@
+import React from "react"
+
+import "@testing-library/jest-dom/extend-expect"
+import { render, screen, act } from "@testing-library/react"
+import { Provider } from "react-redux"
+import configureStore from "redux-mock-store"
+import { toMatchDiffSnapshot } from "snapshot-diff"
+
+import WizardAddObjectStep from "../components/NewDraftWizard/WizardSteps/WizardAddObjectStep"
+
+const mockStore = configureStore([])
+
+expect.extend({ toMatchDiffSnapshot })
+
+describe("WizardAddObjectStep", () => {
+  it("should not render any cards if no selected object type", () => {
+    const store = mockStore({
+      objectType: "",
+      submissionType: "xml",
+      submissionFolder: {
+        name: "folder name",
+        description: "folder description",
+        published: false,
+        metadataObjects: [],
+        id: "FOL12341234",
+      },
+    })
+    render(
+      <Provider store={store}>
+        <WizardAddObjectStep />
+      </Provider>
+    )
+    expect(screen.getByText("Add objects by clicking the name, then fill form or upload XML File.")).toBeInTheDocument()
+  })
+
+  it("should render appropriate card", async () => {
+    const typeList = ["form", "xml", "existing"]
+    await act(async () => {
+      typeList.forEach(typeName => {
+        const store = mockStore({
+          objectType: "study",
+          submissionType: typeName,
+          submissionFolder: {
+            description: "Test",
+            id: "FOL12341234",
+            name: "Testname",
+            published: false,
+          },
+        })
+        render(
+          <Provider store={store}>
+            <WizardAddObjectStep />
+          </Provider>
+        )
+        expect(screen.getByTestId(typeName)).toBeInTheDocument()
+      })
+    })
+  })
+})

src/__tests__/WizardAlert.test.js

@@ -0,0 +1,36 @@
+import React from "react"
+
+import { render, screen } from "@testing-library/react"
+import { Provider } from "react-redux"
+import { BrowserRouter } from "react-router-dom"
+import configureStore from "redux-mock-store"
+
+import WizardAlert from "../components/NewDraftWizard/WizardComponents/WizardAlert"
+
+const mockStore = configureStore([])
+
+describe("WizardAlert", () => {
+  const store = mockStore({
+    submissionType: "",
+  })
+
+  it("should render appropriate dialogs", () => {
+    const alerts = [
+      { submission: { types: ["form", "xml", "existing"] } },
+      { footer: { types: ["cancel", "save"] } },
+      { stepper: { types: ["form", "xml", "existing"] } },
+    ]
+    alerts.forEach(item => {
+      item[Object.keys(item)].types.forEach(type => {
+        render(
+          <BrowserRouter>
+            <Provider store={store}>
+              <WizardAlert alertType={type} parentLocation={Object.keys(item)[0]} onAlert="true" />
+            </Provider>
+          </BrowserRouter>
+        )
+        expect(screen.getByRole("dialog")).toBeDefined()
+      })
+    })
+  })
+})

src/__tests__/WizardFillObjectDetailsForm.test.js

@@ -0,0 +1,69 @@
+import React from "react"
+
+import "@testing-library/jest-dom/extend-expect"
+import { render, screen, waitFor } from "@testing-library/react"
+import { Provider } from "react-redux"
+import configureStore from "redux-mock-store"
+
+import WizardFillObjectDetailsForm from "../components/NewDraftWizard/WizardForms/WizardFillObjectDetailsForm"
+
+const mockStore = configureStore([])
+
+describe("WizardFillObjectDetailsForm", () => {
+  const schema = {
+    title: "Study",
+    type: "object",
+    required: ["descriptor"],
+    properties: {
+      descriptor: {
+        type: "object",
+        title: "Study Description",
+        required: ["studyTitle"],
+        properties: {
+          studyTitle: {
+            title: "Study Title",
+            description: "Title of the study as would be used in a publication.",
+            type: "string",
+          },
+        },
+      },
+    },
+  }
+
+  const store = mockStore({
+    objectType: "study",
+    submissionType: "form",
+    submissionFolder: {
+      description: "AWD",
+      id: "FOL90524783",
+      name: "Testname",
+      published: false,
+    },
+  })
+
+  localStorage.setItem(`cached_study_schema`, JSON.stringify(schema))
+
+  it("should create study form from schema in localstorage", async () => {
+    render(
+      <Provider store={store}>
+        <WizardFillObjectDetailsForm />
+      </Provider>
+    )
+    await waitFor(() => screen.getByText("Study Description"))
+    expect(screen.getByText("Study Description")).toBeDefined()
+  })
+
+  // Note: If this test runs before form creation, form creation fails because getItem spy messes localstorage init somehow
+  it("should call localstorage", async () => {
+    const spy = jest.spyOn(Storage.prototype, "getItem")
+    render(
+      <Provider store={store}>
+        <WizardFillObjectDetailsForm />
+      </Provider>
+    )
+    expect(spy).toBeCalledWith("cached_study_schema")
+    await waitFor(() => {
+      expect(spy.mock.calls.length).toBe(1)
+    })
+  })
+})

src/__tests__/WizardFooter.test.js

@@ -0,0 +1,37 @@
+import React from "react"
+
+import "@testing-library/jest-dom/extend-expect"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { Provider } from "react-redux"
+import { BrowserRouter } from "react-router-dom"
+import configureStore from "redux-mock-store"
+
+import WizardFooter from "../components/NewDraftWizard/WizardComponents/WizardFooter"
+
+const mockStore = configureStore([])
+
+describe("WizardStepper", () => {
+  let store
+  let wrapper
+
+  beforeEach(() => {
+    store = mockStore({
+      submissionType: "form",
+      wizardStep: 1,
+    })
+    wrapper = (
+      <BrowserRouter>
+        <Provider store={store}>
+          <WizardFooter />
+        </Provider>
+      </BrowserRouter>
+    )
+  })
+
+  it("should open dialog on click of cancel", () => {
+    render(wrapper)
+    const button = screen.getByRole("button", { name: /Cancel/i })
+    fireEvent.click(button)
+    expect(screen.getByRole("dialog")).toBeDefined()
+  })
+})

src/__tests__/WizardSavedObjectsList.test.js

@@ -0,0 +1,33 @@
+import React from "react"
+
+import "@testing-library/jest-dom/extend-expect"
+import { render, screen } from "@testing-library/react"
+import { Provider } from "react-redux"
+import configureStore from "redux-mock-store"
+
+import WizardSavedObjectsList from "../components/NewDraftWizard/WizardComponents/WizardSavedObjectsList"
+
+const mockStore = configureStore([])
+
+describe("WizardStepper", () => {
+  const store = mockStore({
+    submissionType: "sample",
+    wizardStep: 1,
+  })
+
+  const submissions = [
+    { accessionId: "EDAG1", schema: "sample" },
+    { accessionId: "EDAG2", schema: "sample" },
+  ]
+
+  it("should have 'Added!' message rendered on item that has 'new' property", () => {
+    render(
+      <Provider store={store}>
+        <WizardSavedObjectsList submissions={submissions} submissionType="sample" />
+      </Provider>
+    )
+    submissions.forEach(item => {
+      expect(screen.getByText(item.accessionId)).toBeInTheDocument()
+    })
+  })
+})

src/__tests__/WizardShowSummaryStep.test.js

@@ -0,0 +1,44 @@
+import React from "react"
+
+import "@testing-library/jest-dom/extend-expect"
+import { render, screen } from "@testing-library/react"
+import { Provider } from "react-redux"
+import configureStore from "redux-mock-store"
+import { toMatchDiffSnapshot } from "snapshot-diff"
+
+import WizardShowSummaryStep from "../components/NewDraftWizard/WizardSteps/WizardShowSummaryStep"
+
+const mockStore = configureStore([])
+
+expect.extend({ toMatchDiffSnapshot })
+
+describe("WizardShowSummaryStep", () => {
+  let store
+  let wrapper
+
+  beforeEach(() => {
+    store = mockStore({
+      submissionFolder: {
+        description: "AWD",
+        id: "FOL90524783",
+        metadataObjects: [
+          { accessionId: "EDAG2584421211413887", schema: "study" },
+          { accessionId: "EDAG9880663174234413", schema: "study" },
+        ],
+        name: "AA",
+        published: false,
+      },
+    })
+    wrapper = (
+      <Provider store={store}>
+        <WizardShowSummaryStep />
+      </Provider>
+    )
+  })
+
+  it("should have uploaded objects listed", async () => {
+    render(wrapper)
+    const items = await screen.findAllByRole("button")
+    expect(items).toHaveLength(4) // Screen renders stepper back and next buttons
+  })
+})