NG_UI : type browser : extend tests (introduced a separate theme provider to...

NG_UI : type browser : extend tests (introduced a separate theme provider to globally disable animated transitions in tests to avoid unnecessary waiting on DOM changes)

openbis_ng_ui/src/js/components/common/theme/ThemeProvider.jsx

@@ -3,7 +3,7 @@ import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
 import indigo from '@material-ui/core/colors/indigo'
 import lightBlue from '@material-ui/core/colors/lightBlue'
 
-const theme = createMuiTheme({
+const config = {
   typography: {
     useNextVariants: true,
     label: {
@@ -33,12 +33,17 @@ const theme = createMuiTheme({
       secondary: '#ebebeb'
     }
   }
-})
+}
+
+const theme = createMuiTheme(config)
 
-export default class ThemeProvider extends React.Component {
+class ThemeProvider extends React.Component {
   render() {
     return (
       <MuiThemeProvider theme={theme}>{this.props.children}</MuiThemeProvider>
     )
   }
 }
+
+export default ThemeProvider
+export { config }

openbis_ng_ui/srcTest/js/common/ComponentTest.js → openbis_ng_ui/srcTest/js/components/common/ComponentTest.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import { mount } from 'enzyme'
 import { createStore } from '@src/js/store/store.js'
-import ThemeProvider from '@src/js/components/common/theme/ThemeProvider.jsx'
+import ThemeProvider from '@srcTest/js/components/common/theme/ThemeProvider.jsx'
 import actions from '@src/js/store/actions/actions.js'
 
 export default class ComponentTest {

openbis_ng_ui/srcTest/js/components/common/theme/ThemeProvider.jsx

+import React from 'react'
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
+import { config } from '@src/js/components/common/theme/ThemeProvider.jsx'
+
+const theme = createMuiTheme({
+  ...config,
+  props: {
+    MuiCollapse: {
+      timeout: 0
+    }
+  },
+  transitions: {
+    create: () => 'none'
+  }
+})
+
+export default class ThemeProvider extends React.Component {
+  render() {
+    return (
+      <MuiThemeProvider theme={theme}>{this.props.children}</MuiThemeProvider>
+    )
+  }
+}

openbis_ng_ui/srcTest/js/components/login/LoginComponent.test.js

 import React from 'react'
-import ComponentTest from '@srcTest/js/common/ComponentTest.js'
+import ComponentTest from '@srcTest/js/components/common/ComponentTest.js'
 import Login from '@src/js/components/login/Login.jsx'
 import LoginWrapper from '@srcTest/js/components/login/wrapper/LoginWrapper.js'
 

openbis_ng_ui/srcTest/js/components/types/browser/TypeBrowserComponent.test.js

 import React from 'react'
-import ComponentTest from '@srcTest/js/common/ComponentTest.js'
+import ComponentTest from '@srcTest/js/components/common/ComponentTest.js'
 import BrowserWrapper from '@srcTest/js/components/common/browser/wrapper/BrowserWrapper.js'
 import TypeBrowser from '@src/js/components/types/browser/TypeBrowser.jsx'
 import openbis from '@srcTest/js/services/openbis.js'
@@ -13,68 +13,94 @@ beforeEach(() => {
     wrapper => new BrowserWrapper(wrapper)
   )
   common.beforeEach()
+
+  openbis.mockSearchSampleTypes([
+    fixture.TEST_SAMPLE_TYPE_DTO,
+    fixture.ANOTHER_SAMPLE_TYPE_DTO
+  ])
+
+  openbis.mockSearchExperimentTypes([fixture.TEST_EXPERIMENT_TYPE_DTO])
+  openbis.mockSearchDataSetTypes([fixture.TEST_DATA_SET_TYPE_DTO])
+
+  openbis.mockSearchMaterialTypes([
+    fixture.TEST_MATERIAL_TYPE_DTO,
+    fixture.ANOTHER_MATERIAL_TYPE_DTO
+  ])
 })
 
-describe('browser', () => {
-  test('test', async () => {
-    openbis.mockSearchSampleTypes([
-      fixture.TEST_SAMPLE_TYPE_DTO,
-      fixture.ANOTHER_SAMPLE_TYPE_DTO
-    ])
-
-    openbis.mockSearchExperimentTypes([fixture.TEST_EXPERIMENT_TYPE_DTO])
-    openbis.mockSearchDataSetTypes([fixture.TEST_DATA_SET_TYPE_DTO])
-
-    openbis.mockSearchMaterialTypes([
-      fixture.TEST_MATERIAL_TYPE_DTO,
-      fixture.ANOTHER_MATERIAL_TYPE_DTO
-    ])
-
-    const browser = await common.mount()
-    await browser.update()
-
-    browser.expectJSON({
-      filter: {
-        value: null
-      },
-      nodes: [
-        { level: 0, text: 'Object Types' },
-        { level: 0, text: 'Collection Types' },
-        { level: 0, text: 'Data Set Types' },
-        { level: 0, text: 'Material Types' }
-      ]
-    })
-
-    browser.getNodes()[0].getIcon().click()
-    await browser.update()
-
-    browser.expectJSON({
-      filter: {
-        value: null
-      },
-      nodes: [
-        { level: 0, text: 'Object Types' },
-        { level: 1, text: fixture.ANOTHER_SAMPLE_TYPE_DTO.code },
-        { level: 1, text: fixture.TEST_SAMPLE_TYPE_DTO.code },
-        { level: 0, text: 'Collection Types' },
-        { level: 0, text: 'Data Set Types' },
-        { level: 0, text: 'Material Types' }
-      ]
-    })
-
-    browser.getFilter().change('ANOTHER')
-    await browser.update()
-
-    browser.expectJSON({
-      filter: {
-        value: 'ANOTHER'
-      },
-      nodes: [
-        { level: 0, text: 'Object Types' },
-        { level: 1, text: fixture.ANOTHER_SAMPLE_TYPE_DTO.code },
-        { level: 0, text: 'Material Types' },
-        { level: 1, text: fixture.ANOTHER_MATERIAL_TYPE_DTO.code }
-      ]
-    })
-  })
+describe('type browser', () => {
+  test('load', testLoad)
+  test('open/close node', testOpenCloseNode)
+  test('filter', testFilter)
 })
+
+async function testLoad() {
+  const browser = await common.mount()
+
+  browser.expectJSON({
+    filter: {
+      value: null
+    },
+    nodes: [
+      { level: 0, text: 'Object Types' },
+      { level: 0, text: 'Collection Types' },
+      { level: 0, text: 'Data Set Types' },
+      { level: 0, text: 'Material Types' }
+    ]
+  })
+}
+
+async function testOpenCloseNode() {
+  const browser = await common.mount()
+
+  browser.getNodes()[0].getIcon().click()
+  await browser.update()
+
+  browser.expectJSON({
+    filter: {
+      value: null
+    },
+    nodes: [
+      { level: 0, text: 'Object Types' },
+      { level: 1, text: fixture.ANOTHER_SAMPLE_TYPE_DTO.code },
+      { level: 1, text: fixture.TEST_SAMPLE_TYPE_DTO.code },
+      { level: 0, text: 'Collection Types' },
+      { level: 0, text: 'Data Set Types' },
+      { level: 0, text: 'Material Types' }
+    ]
+  })
+
+  browser.getNodes()[0].getIcon().click()
+  await browser.update()
+
+  browser.expectJSON({
+    filter: {
+      value: null
+    },
+    nodes: [
+      { level: 0, text: 'Object Types' },
+      { level: 0, text: 'Collection Types' },
+      { level: 0, text: 'Data Set Types' },
+      { level: 0, text: 'Material Types' }
+    ]
+  })
+}
+
+async function testFilter() {
+  const browser = await common.mount()
+
+  browser.getFilter().change('ANOTHER')
+  await browser.update()
+
+  browser.expectJSON({
+    filter: {
+      value: 'ANOTHER'
+    },
+    nodes: [
+      { level: 0, text: 'Object Types' },
+      { level: 1, text: fixture.ANOTHER_SAMPLE_TYPE_DTO.code },
+      { level: 0, text: 'Material Types' },
+      { level: 1, text: fixture.ANOTHER_MATERIAL_TYPE_DTO.code }
+    ]
+  })
+}

openbis_ng_ui/srcTest/js/components/types/form/TypeFormComponent.test.js

 import React from 'react'
-import ComponentTest from '@srcTest/js/common/ComponentTest.js'
+import ComponentTest from '@srcTest/js/components/common/ComponentTest.js'
 import TypeForm from '@src/js/components/types/form/TypeForm.jsx'
 import TypeFormWrapper from '@srcTest/js/components/types/form/wrapper/TypeFormWrapper.js'
 import TypeFormController from '@src/js/components/types/form/TypeFormController.js'
@@ -10,11 +10,17 @@ import fixture from '@srcTest/js/common/fixture.js'
 
 jest.mock('@src/js/components/types/form/TypeFormFacade')
 
+let common = null
 let facade = null
 let controller = null
-let common = null
 
 beforeEach(() => {
+  common = new ComponentTest(
+    object => <TypeForm object={object} controller={controller} />,
+    wrapper => new TypeFormWrapper(wrapper)
+  )
+  common.beforeEach()
+
   facade = new TypeFormFacade()
   controller = new TypeFormController(facade)
 
@@ -25,12 +31,6 @@ beforeEach(() => {
   facade.loadMaterials.mockReturnValue(Promise.resolve([]))
   facade.loadVocabularyTerms.mockReturnValue(Promise.resolve([]))
   facade.loadGlobalPropertyTypes.mockReturnValue(Promise.resolve([]))
-
-  common = new ComponentTest(
-    object => <TypeForm object={object} controller={controller} />,
-    wrapper => new TypeFormWrapper(wrapper)
-  )
-  common.beforeEach()
 })
 
 describe('TypeFormComponent', () => {

openbis_ng_ui/srcTest/js/components/users/browser/UserBrowserComponent.test.js

 import React from 'react'
-import ComponentTest from '@srcTest/js/common/ComponentTest.js'
+import ComponentTest from '@srcTest/js/components/common/ComponentTest.js'
 import BrowserWrapper from '@srcTest/js/components/common/browser/wrapper/BrowserWrapper.js'
 import UserBrowser from '@src/js/components/users/browser/UserBrowser.jsx'
 import openbis from '@srcTest/js/services/openbis.js'