From 4480fc4f6ec6d0619b5a733772f3cfa78ea25c16 Mon Sep 17 00:00:00 2001 From: Edgar Mueller Date: Wed, 22 Nov 2017 16:17:20 +0100 Subject: [PATCH 1/3] rename test.ts to binding.ts --- test/helpers/{test.ts => binding.ts} | 0 test/renderers/array-renderer.test.tsx | 2 +- test/renderers/boolean.control.test.tsx | 2 +- test/renderers/categorization.control.test.tsx | 2 +- test/renderers/date.control.test.tsx | 2 +- test/renderers/enum.control.test.tsx | 2 +- test/renderers/group.layout.test.tsx | 2 +- test/renderers/horizontal.layout.test.tsx | 2 +- test/renderers/integer.control.test.tsx | 2 +- test/renderers/label.control.test.tsx | 2 +- test/renderers/number.control.test.tsx | 2 +- test/renderers/table-array.control.test.tsx | 2 +- test/renderers/text.control.test.tsx | 4 ++-- test/renderers/textarea.control.test.tsx | 2 +- test/renderers/treemasterdetail.array.test.tsx | 2 +- test/renderers/treemasterdetail.common.test.tsx | 2 +- test/renderers/treemasterdetail.object.test.tsx | 2 +- test/renderers/vertical.layout.test.tsx | 2 +- 18 files changed, 18 insertions(+), 18 deletions(-) rename test/helpers/{test.ts => binding.ts} (100%) diff --git a/test/helpers/test.ts b/test/helpers/binding.ts similarity index 100% rename from test/helpers/test.ts rename to test/helpers/binding.ts diff --git a/test/renderers/array-renderer.test.tsx b/test/renderers/array-renderer.test.tsx index 9981d5a479..3429da6c66 100644 --- a/test/renderers/array-renderer.test.tsx +++ b/test/renderers/array-renderer.test.tsx @@ -13,7 +13,7 @@ import { findRenderedDOMElementWithClass, findRenderedDOMElementWithTag, renderIntoDocument -} from '../helpers/test'; +} from '../helpers/binding'; test.before(() => { JsonForms.stylingRegistry.registerMany([ diff --git a/test/renderers/boolean.control.test.tsx b/test/renderers/boolean.control.test.tsx index dda34904be..59f2247357 100644 --- a/test/renderers/boolean.control.test.tsx +++ b/test/renderers/boolean.control.test.tsx @@ -14,7 +14,7 @@ import { findRenderedDOMElementWithClass, findRenderedDOMElementWithTag, renderIntoDocument -} from '../helpers/test'; +} from '../helpers/binding'; import { Provider } from '../../src/common/binding'; test.before(() => { diff --git a/test/renderers/categorization.control.test.tsx b/test/renderers/categorization.control.test.tsx index 767b71f151..5bafa3a81e 100644 --- a/test/renderers/categorization.control.test.tsx +++ b/test/renderers/categorization.control.test.tsx @@ -12,7 +12,7 @@ import { findRenderedDOMElementWithClass, findRenderedDOMElementWithTag, renderIntoDocument -} from '../helpers/test'; +} from '../helpers/binding'; import { Provider } from '../../src/common/binding'; test.before(() => { diff --git a/test/renderers/date.control.test.tsx b/test/renderers/date.control.test.tsx index 3e31b28acb..9654a3e466 100644 --- a/test/renderers/date.control.test.tsx +++ b/test/renderers/date.control.test.tsx @@ -13,7 +13,7 @@ import { findRenderedDOMElementWithClass, findRenderedDOMElementWithTag, renderIntoDocument -} from '../helpers/test'; +} from '../helpers/binding'; import { Provider } from '../../src/common/binding'; test.before(() => { diff --git a/test/renderers/enum.control.test.tsx b/test/renderers/enum.control.test.tsx index e409c2bc71..18718f628a 100644 --- a/test/renderers/enum.control.test.tsx +++ b/test/renderers/enum.control.test.tsx @@ -11,7 +11,7 @@ import { findRenderedDOMElementWithClass, findRenderedDOMElementWithTag, renderIntoDocument -} from '../helpers/test'; +} from '../helpers/binding'; import { Provider } from '../../src/common/binding'; test.before(() => { diff --git a/test/renderers/group.layout.test.tsx b/test/renderers/group.layout.test.tsx index 95d3e0e2fc..7c10b48133 100644 --- a/test/renderers/group.layout.test.tsx +++ b/test/renderers/group.layout.test.tsx @@ -7,7 +7,7 @@ import GroupLayoutRenderer, { } from '../../src/renderers/layouts/group.layout'; import { JsonForms } from '../../src/core'; import { Provider } from '../../src/common/binding'; -import {findRenderedDOMElementWithClass, renderIntoDocument} from "../helpers/test"; +import {findRenderedDOMElementWithClass, renderIntoDocument} from "../helpers/binding"; test.before(() => { JsonForms.stylingRegistry.registerMany([ diff --git a/test/renderers/horizontal.layout.test.tsx b/test/renderers/horizontal.layout.test.tsx index 08adc86bb1..6e18a0edf3 100644 --- a/test/renderers/horizontal.layout.test.tsx +++ b/test/renderers/horizontal.layout.test.tsx @@ -6,7 +6,7 @@ import { JsonForms } from '../../src/core'; import HorizontalLayoutRenderer, { horizontalLayoutTester } from '../../src/renderers/layouts/horizontal.layout'; -import { findRenderedDOMElementWithClass, renderIntoDocument } from '../helpers/test'; +import { findRenderedDOMElementWithClass, renderIntoDocument } from '../helpers/binding'; import { Provider } from '../../src/common/binding'; test.before(() => { diff --git a/test/renderers/integer.control.test.tsx b/test/renderers/integer.control.test.tsx index 04df06c46b..17cafec49d 100644 --- a/test/renderers/integer.control.test.tsx +++ b/test/renderers/integer.control.test.tsx @@ -14,7 +14,7 @@ import { findRenderedDOMElementWithClass, findRenderedDOMElementWithTag, renderIntoDocument -} from '../helpers/test'; +} from '../helpers/binding'; import { Provider } from '../../src/common/binding'; import { HorizontalLayoutRenderer } from '../../src/renderers/layouts/horizontal.layout'; diff --git a/test/renderers/label.control.test.tsx b/test/renderers/label.control.test.tsx index a63aa622df..c651c4ad3a 100644 --- a/test/renderers/label.control.test.tsx +++ b/test/renderers/label.control.test.tsx @@ -4,7 +4,7 @@ import { initJsonFormsStore } from '../helpers/setup'; import { JsonForms } from '../../src/core'; import { LabelElement, UISchemaElement } from '../../src/models/uischema'; import LabelRenderer, { labelRendererTester } from '../../src/renderers/additional/label.renderer'; -import { findRenderedDOMElementWithTag, renderIntoDocument } from '../helpers/test'; +import { findRenderedDOMElementWithTag, renderIntoDocument } from '../helpers/binding'; import { Provider } from '../../src/common/binding'; test.before(() => { diff --git a/test/renderers/number.control.test.tsx b/test/renderers/number.control.test.tsx index f3a76abc47..7cb1420494 100644 --- a/test/renderers/number.control.test.tsx +++ b/test/renderers/number.control.test.tsx @@ -12,7 +12,7 @@ import { findRenderedDOMElementWithClass, findRenderedDOMElementWithTag, renderIntoDocument -} from '../helpers/test'; +} from '../helpers/binding'; import { Provider } from '../../src/common/binding'; import { HorizontalLayoutRenderer } from '../../src/renderers/layouts/horizontal.layout'; diff --git a/test/renderers/table-array.control.test.tsx b/test/renderers/table-array.control.test.tsx index 8dbbfd9d5b..6257243205 100644 --- a/test/renderers/table-array.control.test.tsx +++ b/test/renderers/table-array.control.test.tsx @@ -8,7 +8,7 @@ import { findRenderedDOMElementWithTag, renderIntoDocument, scryRenderedDOMElementsWithTag -} from '../helpers/test'; +} from '../helpers/binding'; import { Provider } from '../../src/common/binding'; test.before(() => { diff --git a/test/renderers/text.control.test.tsx b/test/renderers/text.control.test.tsx index 5c805e892b..2df226b684 100644 --- a/test/renderers/text.control.test.tsx +++ b/test/renderers/text.control.test.tsx @@ -9,12 +9,12 @@ import { JsonForms } from '../../src/core'; import { update, validate } from '../../src/actions'; import { getData } from '../../src/reducers/index'; import { + change, findRenderedDOMElementWithClass, findRenderedDOMElementWithTag, renderIntoDocument -} from '../helpers/test'; +} from '../helpers/binding'; import { Provider } from '../../src/common/binding'; -import { change } from '../helpers/test'; test.before(() => { JsonForms.stylingRegistry.registerMany([ diff --git a/test/renderers/textarea.control.test.tsx b/test/renderers/textarea.control.test.tsx index ab2b1a84f3..5b57b4ea94 100644 --- a/test/renderers/textarea.control.test.tsx +++ b/test/renderers/textarea.control.test.tsx @@ -15,7 +15,7 @@ import { findRenderedDOMElementWithClass, findRenderedDOMElementWithTag, renderIntoDocument -} from '../helpers/test'; +} from '../helpers/binding'; import { Provider } from '../../src/common/binding'; test.before(() => { diff --git a/test/renderers/treemasterdetail.array.test.tsx b/test/renderers/treemasterdetail.array.test.tsx index 2d17070cc0..fad8233787 100644 --- a/test/renderers/treemasterdetail.array.test.tsx +++ b/test/renderers/treemasterdetail.array.test.tsx @@ -13,7 +13,7 @@ import { renderIntoDocument, scryRenderedDOMElementsWithClass, scryRenderedDOMElementsWithTag -} from '../helpers/test'; +} from '../helpers/binding'; import { Provider } from '../../src/common/binding'; test.beforeEach(t => { diff --git a/test/renderers/treemasterdetail.common.test.tsx b/test/renderers/treemasterdetail.common.test.tsx index 86c8eecd1b..c8d3ad3ab5 100644 --- a/test/renderers/treemasterdetail.common.test.tsx +++ b/test/renderers/treemasterdetail.common.test.tsx @@ -12,7 +12,7 @@ import { findRenderedDOMElementWithTag, renderIntoDocument, scryRenderedDOMElementsWithClass -} from '../helpers/test'; +} from '../helpers/binding'; import { Provider } from '../../src/common/binding'; test.beforeEach(t => { diff --git a/test/renderers/treemasterdetail.object.test.tsx b/test/renderers/treemasterdetail.object.test.tsx index 43ebba27d1..a0db1c6346 100644 --- a/test/renderers/treemasterdetail.object.test.tsx +++ b/test/renderers/treemasterdetail.object.test.tsx @@ -9,7 +9,7 @@ import { findRenderedDOMElementWithClass, findRenderedDOMElementWithTag, renderIntoDocument -} from '../helpers/test'; +} from '../helpers/binding'; import { Provider } from '../../src/common/binding'; test.beforeEach(t => { diff --git a/test/renderers/vertical.layout.test.tsx b/test/renderers/vertical.layout.test.tsx index 70610d7968..bdb5247ea7 100644 --- a/test/renderers/vertical.layout.test.tsx +++ b/test/renderers/vertical.layout.test.tsx @@ -6,7 +6,7 @@ import { UISchemaElement, VerticalLayout } from '../../src/models/uischema'; import VerticalLayoutRenderer, { verticalLayoutTester } from '../../src/renderers/layouts/vertical.layout'; -import { findRenderedDOMElementWithClass, renderIntoDocument } from '../helpers/test'; +import { findRenderedDOMElementWithClass, renderIntoDocument } from '../helpers/binding'; import { Provider } from '../../src/common/binding'; test.before(() => { From 93ff307c19e2d6099b0926de59c8c4f586db2727 Mon Sep 17 00:00:00 2001 From: Edgar Mueller Date: Thu, 23 Nov 2017 00:39:46 +0100 Subject: [PATCH 2/3] Remove tree-master related DnD specifics --- src/renderers/additional/tree-renderer.dnd.ts | 127 -------- test/renderers/treemasterdetail.dnd.test.ts | 283 ------------------ test/tsconfig.test.json | 1 - 3 files changed, 411 deletions(-) delete mode 100644 src/renderers/additional/tree-renderer.dnd.ts delete mode 100644 test/renderers/treemasterdetail.dnd.test.ts diff --git a/src/renderers/additional/tree-renderer.dnd.ts b/src/renderers/additional/tree-renderer.dnd.ts deleted file mode 100644 index 8b73ae8f59..0000000000 --- a/src/renderers/additional/tree-renderer.dnd.ts +++ /dev/null @@ -1,127 +0,0 @@ -import { JsonForms } from '../../core'; -import { JsonSchema } from '../../models/jsonSchema'; -import * as Sortable from 'sortablejs'; - -export type TreeNodeInfo = {data: object, schema: JsonSchema, - deleteFunction(toDelete: object): void}; - -/** - * Returns a function that handles the sortablejs onRemove event - */ -export const dragAndDropRemoveHandler = (treeNodeMapping: Map) => - evt => { - const li = evt.item as HTMLLIElement; - const nodeData = treeNodeMapping.get(li); - const oldParent = evt.from.parentNode as HTMLLIElement; - const parentData = treeNodeMapping.get(oldParent); - const properties = JsonForms.schemaService.getContainmentProperties(parentData.schema); - const nodeId = nodeData.schema.id; - for (const property of properties) { - const propertyId = property.schema.id; - if (propertyId === nodeId) { - property.deleteFromData(parentData.data)(nodeData.data); - - return; - } - } -}; - -/** - * Returns a function that handles the SortableJs onUpdate event. - * It is triggered when an element is moved inside a list. - * It is not triggered when an element is dragged and then dropped at its original position. - */ -export const dragAndDropUpdateHandler = (treeNodeMapping: Map) => - evt => { - const li = evt.item as HTMLLIElement; - const nodeInfo = treeNodeMapping.get(li); - // NOTE does not work on root elements - const parentLi = li.parentNode.parentNode as HTMLLIElement; - const parentInfo = treeNodeMapping.get(parentLi); - const properties = JsonForms.schemaService.getContainmentProperties(parentInfo.schema); - const nodeId = nodeInfo.schema.id; - - for (const property of properties) { - const propertyId = property.schema.id; - if (propertyId !== nodeId) { - continue; - } - property.deleteFromData(parentInfo.data)(nodeInfo.data); - if (evt.newIndex > evt.oldIndex) { - const neighbour = li.previousElementSibling as HTMLLIElement; - const neighbourData = treeNodeMapping.get(neighbour).data; - property.addToData(parentInfo.data)(nodeInfo.data, neighbourData, true); - } else if (evt.newIndex < evt.oldIndex) { - const neighbour = li.nextElementSibling as HTMLLIElement; - const neighbourData = treeNodeMapping.get(neighbour).data; - property.addToData(parentInfo.data)(nodeInfo.data, neighbourData, false); - } - - return; - } -}; - -/** - * Returns a function that handles the sortablejs onAdd Event. - */ -export const dragAndDropAddHandler = (treeNodeMapping: Map) => - evt => { - const li = evt.item as HTMLLIElement; - const nodeInfo = treeNodeMapping.get(li); - const newParent = evt.to.parentNode as HTMLLIElement; - const parentInfo = treeNodeMapping.get(newParent); - const properties = JsonForms.schemaService.getContainmentProperties(parentInfo.schema); - const nodeId = nodeInfo.schema.id; - - /* - * If the new data is not added at the end of the target list, - * get the data that should follow the new data and use the fitting - * containment property to add the new data. - */ - for (const property of properties) { - const propertyId = property.schema.id; - if (propertyId === nodeId) { - // NOTE: assume that a
    list only has
  • list elements as children - // when this code is called: the added
  • is already part of the target
      list - if (li.nextElementSibling !== null) { - const neighbour = li.nextElementSibling as HTMLLIElement; - const neighbourData = treeNodeMapping.get(neighbour).data; - property.addToData(parentInfo.data)(nodeInfo.data, neighbourData, false); - } else { - property.addToData(parentInfo.data)(nodeInfo.data); - } - - // if existing, update the moved element's delete function - if (nodeInfo.deleteFunction !== undefined && nodeInfo.deleteFunction !== null) { - const newDeleteFunction = property.deleteFromData(parentInfo.data); - nodeInfo.deleteFunction = newDeleteFunction; - } - - return; - } - } - // TODO proper logging - console.error('Failed Drag and Drop add due to missing property in target parent'); -}; - -/** - * Activates drag and drop for all direct children of the given list. - * - * @param treeNodeMapping maps the trees renderer li nodes to their represented data, schema, - * and delete function - * @param list the list that will support drag and drop - * @param id the id identifying the type of the list's elements - */ -export const registerDnDWithGroupId = (treeNodeMapping: Map, - list: HTMLUListElement, id: string) => { - Sortable.create(list, { - // groups with the same id allow to drag and drop elements between them - group: id, - // called after an element was added from another list - onAdd: dragAndDropAddHandler(treeNodeMapping), - // called when an element's position is changed within the same list - onUpdate: dragAndDropUpdateHandler(treeNodeMapping), - // called when an element is removed because it was moved to another list - onRemove: dragAndDropRemoveHandler(treeNodeMapping) - }); -}; diff --git a/test/renderers/treemasterdetail.dnd.test.ts b/test/renderers/treemasterdetail.dnd.test.ts deleted file mode 100644 index e1f4852e59..0000000000 --- a/test/renderers/treemasterdetail.dnd.test.ts +++ /dev/null @@ -1,283 +0,0 @@ -import '../helpers/setup'; -import test from 'ava'; -import { - JsonForms -} from '../../src/core'; -import { JsonSchema } from '../../src/models/jsonSchema'; -import { - dragAndDropAddHandler, - dragAndDropRemoveHandler, - dragAndDropUpdateHandler, - TreeNodeInfo -} from '../../src/renderers/additional/tree-renderer.dnd'; - -test.beforeEach(t => { - const schema: JsonSchema = { - type: 'object', - properties: { - befores: { - type: 'array', - items : { - type: 'object', - id: 'a', - properties: { id: {type: 'string'} } - } - }, - children: { - type: 'array', - items: { - type: 'object', - id: 'bar', - properties: { name: {type: 'string'} } - } - } - } - }; - JsonForms.schema = schema; - t.context.schema = schema; -}); - -test('TreeMasterDetailRenderer Drag And Drop - update handler', t => { - const schema: JsonSchema = t.context.schema; - const data = {children: [{name: '1'}, {name: '2'}]}; - // build tree - const liParent = document.createElement('li'); - const childrenUl = document.createElement('ul'); - childrenUl.setAttribute('childrenId', 'bar'); - childrenUl.setAttribute('children', 'children'); - const li1 = document.createElement('li'); - const li2 = document.createElement('li'); - liParent.appendChild(childrenUl); - - // Append children in target order (after 'dnd') - childrenUl.appendChild(li2); - childrenUl.appendChild(li1); - - const childSchema = schema.properties.children.items as JsonSchema; - const childrenProperty = JsonForms.schemaService.getContainmentProperties(schema)[0]; - const deleteFunction = childrenProperty.deleteFromData(data); - const tniParent = { - data: data, - schema: schema, - deleteFunction: null - }; - const tni1 = { - data: data.children[0], - schema: childSchema, - deleteFunction: deleteFunction - }; - const tni2 = { - data: data.children[1], - schema: childSchema, - deleteFunction: deleteFunction - }; - const treeNodeMapping = new Map(); - treeNodeMapping.set(liParent, tniParent); - treeNodeMapping.set(li1, tni1); - treeNodeMapping.set(li2, tni2); - const forwardEvent = { - from: childrenUl, - to: childrenUl, - oldIndex: 0, - newIndex: 1, - item: li1 - }; - - dragAndDropUpdateHandler(treeNodeMapping)(forwardEvent); - t.is(data.children.length, 2); - t.is(data.children[0].name, '2'); - t.is(data.children[1].name, '1'); - - const backwardEvent = { - from: childrenUl, - to: childrenUl, - oldIndex: 1, - newIndex: 0, - item: li1 - }; - childrenUl.removeChild(li1); - childrenUl.removeChild(li2); - childrenUl.appendChild(li1); - childrenUl.appendChild(li2); - dragAndDropUpdateHandler(treeNodeMapping)(backwardEvent); - t.is(data.children.length, 2); - t.is(data.children[0].name, '1'); - t.is(data.children[1].name, '2'); -}); - -test('TreeMasterDetailRenderer Drag And Drop - remove handler', t => { - const schema: JsonSchema = t.context.schema; - const data = {children: [{name: '1'}, {name: '2'}]}; - // build tree - const liParent = document.createElement('li'); - const childrenUl = document.createElement('ul'); - childrenUl.setAttribute('childrenId', 'bar'); - childrenUl.setAttribute('children', 'children'); - const li1 = document.createElement('li'); - const li2 = document.createElement('li'); - liParent.appendChild(childrenUl); - - // in the tree l1 is already deleted when the handler is called - childrenUl.appendChild(li2); - - const childSchema = schema.properties.children.items as JsonSchema; - const childrenProperty = JsonForms.schemaService.getContainmentProperties(schema)[0]; - const deleteFunction = childrenProperty.deleteFromData(data); - const tniParent = { - data: data, - schema: schema, - deleteFunction: null - }; - const tni1 = { - data: data.children[0], - schema: childSchema, - deleteFunction: deleteFunction - }; - const tni2 = { - data: data.children[1], - schema: childSchema, - deleteFunction: deleteFunction - }; - const treeNodeMapping = new Map(); - treeNodeMapping.set(liParent, tniParent); - treeNodeMapping.set(li1, tni1); - treeNodeMapping.set(li2, tni2); - const removeEvent = { - from: childrenUl, - oldIndex: 0, - item: li1 - }; - - dragAndDropRemoveHandler(treeNodeMapping)(removeEvent); - t.is(data.children.length, 1); - t.is(data.children[0].name, '2'); -}); - -test('TreeMasterDetailRenderer Drag And Drop - add handler', t => { - const schema: JsonSchema = t.context.schema; - const data = {children: [{name: '2'}]}; - // build tree - const liParent = document.createElement('li'); - const childrenUl = document.createElement('ul'); - childrenUl.setAttribute('childrenId', 'bar'); - childrenUl.setAttribute('children', 'children'); - const li1 = document.createElement('li'); - const li2 = document.createElement('li'); - liParent.appendChild(childrenUl); - - // Append children in target order (after implied drag and drop) - childrenUl.appendChild(li1); - childrenUl.appendChild(li2); - - const childSchema = schema.properties.children.items as JsonSchema; - const childrenProperty = JsonForms.schemaService.getContainmentProperties(schema)[0]; - const deleteFunction = childrenProperty.deleteFromData(data); - const tniParent = { - data: data, - schema: schema, - deleteFunction: null - }; - const tni1 = { - data: {name: '1'}, - schema: childSchema, - deleteFunction: deleteFunction - }; - const tni2 = { - data: data.children[0], - schema: childSchema, - deleteFunction: deleteFunction - }; - const treeNodeMapping = new Map(); - treeNodeMapping.set(liParent, tniParent); - treeNodeMapping.set(li1, tni1); - treeNodeMapping.set(li2, tni2); - const addBeginning = { - to: childrenUl, - newIndex: 0, - item: li1 - }; - - dragAndDropAddHandler(treeNodeMapping)(addBeginning); - t.is(data.children.length, 2); - t.is(data.children[0].name, '1'); - t.is(data.children[1].name, '2'); - - const li3 = document.createElement('li'); - const tni3 = { - data: {name: '3'}, - schema: childSchema, - deleteFunction: null - }; - treeNodeMapping.set(li3, tni3); - childrenUl.appendChild(li3); - - const addEnd = { - to: childrenUl, - newIndex: 2, - item: li3 - }; - - dragAndDropAddHandler(treeNodeMapping)(addEnd); - t.is(data.children.length, 3); - t.is(data.children[0].name, '1'); - t.is(data.children[1].name, '2'); - t.is(data.children[2].name, '3'); -}); - -test('TreeMasterDetailRenderer Drag And Drop - add handler - missing target property', t => { - const schema: JsonSchema = t.context.schema; - const data = {children: [{name: '1'}]}; - - const addSchema: JsonSchema = { - type: 'object', - id: 'faraway', - properties: { - a: {type: 'string'} - } - }; - - // build tree - const liParent = document.createElement('li'); - const childrenUl = document.createElement('ul'); - childrenUl.setAttribute('childrenId', 'bar'); - childrenUl.setAttribute('children', 'children'); - const liAdd = document.createElement('li'); - const li1 = document.createElement('li'); - liParent.appendChild(childrenUl); - - // Append children in target order (after implied drag and drop) - childrenUl.appendChild(li1); - - const childSchema = schema.properties.children.items as JsonSchema; - const childrenProperty = JsonForms.schemaService.getContainmentProperties(schema)[0]; - const deleteFunction = childrenProperty.deleteFromData(data); - const tniParent = { - data: data, - schema: schema, - deleteFunction: null - }; - const tni1 = { - data: {name: '1'}, - schema: childSchema, - deleteFunction: deleteFunction - }; - const tniAdd = { - data: {a: 'new'}, - schema: addSchema, - deleteFunction: null - }; - const treeNodeMapping = new Map(); - treeNodeMapping.set(liParent, tniParent); - treeNodeMapping.set(liAdd, tniAdd); - treeNodeMapping.set(li1, tni1); - const event = { - to: childrenUl, - newIndex: 0, - item: liAdd - }; - - dragAndDropAddHandler(treeNodeMapping)(event); - t.is(data.children.length, 1); - t.is(data.children[0].name, '1'); - t.is(Object.keys(data).length, 1); -}); diff --git a/test/tsconfig.test.json b/test/tsconfig.test.json index b62ff6a292..040b607964 100644 --- a/test/tsconfig.test.json +++ b/test/tsconfig.test.json @@ -9,7 +9,6 @@ "**/*.tsx" ], "exclude": [ - "**/renderers/treemasterdetail.dnd.test.tsx" ], "types": [ ] From 227781a17e6e1816c9c1462048f3030b7e55ce29 Mon Sep 17 00:00:00 2001 From: Edgar Mueller Date: Thu, 23 Nov 2017 00:43:27 +0100 Subject: [PATCH 3/3] Make react default * clean up package.json * Update focus test to work with react --- package.json | 13 ++--- src/common/binding.ts | 4 +- src/renderers/layouts/horizontal.layout.tsx | 3 +- test/dispatch.renderer.test.tsx | 2 +- test/helpers/binding.ts | 4 +- test/helpers/inferno-test.ts | 65 ++++++++++----------- test/helpers/react-test.ts | 50 ++++++++-------- test/renderers/boolean.control.test.tsx | 15 ++--- test/renderers/date.control.test.tsx | 13 +++-- test/renderers/integer.control.test.tsx | 14 +++-- test/renderers/number.control.test.tsx | 14 +++-- test/renderers/text.control.test.tsx | 17 +++--- test/renderers/textarea.control.test.tsx | 13 +++-- tsconfig.json | 3 +- 14 files changed, 119 insertions(+), 111 deletions(-) diff --git a/package.json b/package.json index 481ff80da8..8db77ae894 100644 --- a/package.json +++ b/package.json @@ -42,17 +42,18 @@ "ajv": "^4.11.2", "dot-prop-immutable": "^1.3.1", "es6-shim": "^0.35.3", - "inferno-component": "^3.10.1", - "inferno-create-element": "3.10.1", - "inferno-redux": "^3.10.1", "json-refs": "^2.1.6", "lodash": "^4.17.4", + "react": "^16.1.1", + "react-dom": "^16.1.1", + "react-redux": "^5.0.6", "redux": "^3.7.2", "redux-thunk": "^2.2.0", - "sortablejs": "^1.6.0", "uuid": "^3.1.0" }, "devDependencies": { + "@types/react": "^16.0.25", + "@types/react-redux": "^5.0.13", "ava": "^0.18.1", "awesome-typescript-loader": "^3.2.0-rc.0", "babel": "^6.23.0", @@ -75,11 +76,8 @@ "coveralls": "^2.13.3", "cross-env": "^5.0.5", "document-register-element": "^1.4.1", - "drag-mock": "^1.4.0", "file-loader": "^0.10.0", "html-webpack-plugin": "^2.28.0", - "incompose": "^1.1.0", - "inferno-test-utils": "^3.9.0", "jquery": "^3.2.1", "jsdom": "^9.11.0", "jsdom-global": "2.1.1", @@ -87,6 +85,7 @@ "materialize-css": "0.100.2", "ncp": "^2.0.0", "nyc": "^10.1.2", + "react-addons-test-utils": "^15.6.2", "source-map-loader": "^0.2.3", "transform-runtime": "0.0.0", "ts-loader": "^2.1.0", diff --git a/src/common/binding.ts b/src/common/binding.ts index 8c5e510dd2..b2254da845 100644 --- a/src/common/binding.ts +++ b/src/common/binding.ts @@ -1,2 +1,2 @@ -export * from './inferno'; -// export * from './react' +// export * from './inferno'; +export * from './react' diff --git a/src/renderers/layouts/horizontal.layout.tsx b/src/renderers/layouts/horizontal.layout.tsx index ba88b87241..c9dc775c02 100644 --- a/src/renderers/layouts/horizontal.layout.tsx +++ b/src/renderers/layouts/horizontal.layout.tsx @@ -8,6 +8,7 @@ import { renderChildren } from '../renderer.util'; import { connect } from '../../common/binding'; +import {RendererProps} from "../../core/renderer"; /** * Default tester for a horizontal layout. @@ -15,7 +16,7 @@ import { connect } from '../../common/binding'; */ export const horizontalLayoutTester: RankedTester = rankWith(1, uiTypeIs('HorizontalLayout')); -export const HorizontalLayoutRenderer = ({ schema, uischema, path, visible }) => { +export const HorizontalLayoutRenderer = ({ schema, uischema, path, visible }: RendererProps) => { const horizontalLayout = uischema as HorizontalLayout; diff --git a/test/dispatch.renderer.test.tsx b/test/dispatch.renderer.test.tsx index e11d9c2489..ac160ce14c 100644 --- a/test/dispatch.renderer.test.tsx +++ b/test/dispatch.renderer.test.tsx @@ -12,7 +12,7 @@ import { findRenderedDOMElementWithTag, renderIntoDocument, scryRenderedDOMElementsWithTag -} from './helpers/test'; +} from './helpers/binding'; class CustomRenderer1 extends Renderer { render() { diff --git a/test/helpers/binding.ts b/test/helpers/binding.ts index 5fa007e225..84432131b4 100644 --- a/test/helpers/binding.ts +++ b/test/helpers/binding.ts @@ -1,2 +1,2 @@ -export * from './inferno-test'; -// export * from './react-test'; +// export * from './inferno-test'; +export * from './react-test'; diff --git a/test/helpers/inferno-test.ts b/test/helpers/inferno-test.ts index 5e3a1d9163..19e90d005b 100644 --- a/test/helpers/inferno-test.ts +++ b/test/helpers/inferno-test.ts @@ -1,33 +1,32 @@ -// import * as TestUtils from 'react-dom/test-utils'; -import * as TestUtils from 'inferno-test-utils'; -import { Component } from '../../src/common/binding'; - -export const findRenderedDOMElementWithTag = - (component: Component, tag: string): Element => - TestUtils.findRenderedDOMElementWithTag(component, tag); - -export const findRenderedDOMElementWithClass = - (component: Component, tag: string): Element => - TestUtils.findRenderedDOMElementWithClass(component, tag); - -export const scryRenderedDOMElementsWithTag = - (component: Component, tag: string): Element[] => - TestUtils.scryRenderedDOMElementsWithTag(component, tag); - -export const scryRenderedDOMElementsWithClass = - (component: Component, tag: string): Element[] => - TestUtils.scryRenderedDOMElementsWithClass(component, tag); - -// TODO: figure out types -export const renderIntoDocument = (element: any): any => - TestUtils.renderIntoDocument(element); - -export const click = (button: HTMLElement) => button.click(); - -export const change = (input: HTMLElement) => { - const evt = new Event('change', { - 'bubbles': true, - 'cancelable': true - }); - input.dispatchEvent(evt); -}; +// import * as TestUtils from 'inferno-test-utils'; +// import { Component } from '../../src/common/binding'; +// +// export const findRenderedDOMElementWithTag = +// (component: Component, tag: string): Element => +// TestUtils.findRenderedDOMElementWithTag(component, tag); +// +// export const findRenderedDOMElementWithClass = +// (component: Component, tag: string): Element => +// TestUtils.findRenderedDOMElementWithClass(component, tag); +// +// export const scryRenderedDOMElementsWithTag = +// (component: Component, tag: string): Element[] => +// TestUtils.scryRenderedDOMElementsWithTag(component, tag); +// +// export const scryRenderedDOMElementsWithClass = +// (component: Component, tag: string): Element[] => +// TestUtils.scryRenderedDOMElementsWithClass(component, tag); +// +// // TODO: figure out types +// export const renderIntoDocument = (element: any): any => +// TestUtils.renderIntoDocument(element); +// +// export const click = (button: HTMLElement) => button.click(); +// +// export const change = (input: HTMLElement) => { +// const evt = new Event('change', { +// 'bubbles': true, +// 'cancelable': true +// }); +// input.dispatchEvent(evt); +// }; diff --git a/test/helpers/react-test.ts b/test/helpers/react-test.ts index 3cadfc973c..1d861a880d 100644 --- a/test/helpers/react-test.ts +++ b/test/helpers/react-test.ts @@ -1,25 +1,25 @@ -// import * as TestUtils from 'react-dom/test-utils'; -// import { Component } from '../../src/common/binding'; -// -// export const findRenderedDOMElementWithTag = -// (component: Component, tag: string): Element => -// TestUtils.findRenderedDOMComponentWithTag(component, tag); -// -// export const findRenderedDOMElementWithClass = -// (component: Component, tag: string): Element => -// TestUtils.findRenderedDOMComponentWithClass(component, tag); -// -// export const scryRenderedDOMElementsWithTag = -// (component: Component, tag: string): Element[] => -// TestUtils.scryRenderedDOMComponentsWithTag(component, tag); -// -// export const scryRenderedDOMElementsWithClass = -// (component: Component, tag: string): Element[] => -// TestUtils.scryRenderedDOMComponentsWithClass(component, tag); -// -// export const renderIntoDocument = (element: any): any => -// TestUtils.renderIntoDocument(element); -// -// export const click = TestUtils.Simulate.click; -// -// export const change = TestUtils.Simulate.change; +import * as TestUtils from 'react-dom/test-utils'; +import { Component } from '../../src/common/binding'; + +export const findRenderedDOMElementWithTag = + (component: Component, tag: string): Element => + TestUtils.findRenderedDOMComponentWithTag(component, tag); + +export const findRenderedDOMElementWithClass = + (component: Component, tag: string): Element => + TestUtils.findRenderedDOMComponentWithClass(component, tag); + +export const scryRenderedDOMElementsWithTag = + (component: Component, tag: string): Element[] => + TestUtils.scryRenderedDOMComponentsWithTag(component, tag); + +export const scryRenderedDOMElementsWithClass = + (component: Component, tag: string): Element[] => + TestUtils.scryRenderedDOMComponentsWithClass(component, tag); + +export const renderIntoDocument = (element: any): any => + TestUtils.renderIntoDocument(element); + +export const click = TestUtils.Simulate.click; + +export const change = TestUtils.Simulate.change; diff --git a/test/renderers/boolean.control.test.tsx b/test/renderers/boolean.control.test.tsx index 59f2247357..5e694e73a8 100644 --- a/test/renderers/boolean.control.test.tsx +++ b/test/renderers/boolean.control.test.tsx @@ -13,7 +13,8 @@ import { change, findRenderedDOMElementWithClass, findRenderedDOMElementWithTag, - renderIntoDocument + renderIntoDocument, + scryRenderedDOMElementsWithTag } from '../helpers/binding'; import { Provider } from '../../src/common/binding'; @@ -89,16 +90,16 @@ test('autofocus on first element', t => { schema, uischema ); - renderIntoDocument( + const tree = renderIntoDocument( ); - const activeElement = document.activeElement.getElementsByTagName('input')[0].id; - t.is(activeElement, '#/properties/firstBooleanField'); - t.not(activeElement, '#/properties/secondBooleanField'); + const inputs = scryRenderedDOMElementsWithTag(tree, 'input'); + t.not(document.activeElement, inputs[0]); + t.is(document.activeElement, inputs[1]); }); test('autofocus active', t => { @@ -120,7 +121,7 @@ test('autofocus active', t => { ); const input = findRenderedDOMElementWithTag(tree, 'input') as HTMLInputElement; - t.true(input.autofocus); + t.is(document.activeElement, input); }); test('autofocus inactive', t => { @@ -161,7 +162,7 @@ test('autofocus inactive by default', t => { ); const input = findRenderedDOMElementWithTag(tree, 'input') as HTMLInputElement; - t.false(input.autofocus); + t.not(document.activeElement, input); }); test('tester', t => { diff --git a/test/renderers/date.control.test.tsx b/test/renderers/date.control.test.tsx index 9654a3e466..58f414ac98 100644 --- a/test/renderers/date.control.test.tsx +++ b/test/renderers/date.control.test.tsx @@ -12,7 +12,8 @@ import { change, findRenderedDOMElementWithClass, findRenderedDOMElementWithTag, - renderIntoDocument + renderIntoDocument, + scryRenderedDOMElementsWithTag } from '../helpers/binding'; import { Provider } from '../../src/common/binding'; @@ -90,16 +91,16 @@ test('autofocus on first element', t => { schema, uischema ); - renderIntoDocument( + const tree = renderIntoDocument( ); - const activeElement = document.activeElement.getElementsByTagName('input')[0].id; - t.is(activeElement, '#/properties/firstDate'); - t.not(activeElement, '#/properties/secondDate'); + const inputs = scryRenderedDOMElementsWithTag(tree, 'input'); + t.not(document.activeElement, inputs[0]); + t.is(document.activeElement, inputs[1]); }); test('autofocus active', t => { @@ -121,7 +122,7 @@ test('autofocus active', t => { ); const input = findRenderedDOMElementWithTag(tree, 'input') as HTMLInputElement; - t.true(input.autofocus); + t.is(document.activeElement, input) }); test('autofocus inactive', t => { diff --git a/test/renderers/integer.control.test.tsx b/test/renderers/integer.control.test.tsx index 17cafec49d..8ed113a50d 100644 --- a/test/renderers/integer.control.test.tsx +++ b/test/renderers/integer.control.test.tsx @@ -13,7 +13,8 @@ import { change, findRenderedDOMElementWithClass, findRenderedDOMElementWithTag, - renderIntoDocument + renderIntoDocument, + scryRenderedDOMElementsWithTag } from '../helpers/binding'; import { Provider } from '../../src/common/binding'; import { HorizontalLayoutRenderer } from '../../src/renderers/layouts/horizontal.layout'; @@ -91,16 +92,17 @@ test('autofocus on first element', t => { schema, uischema ); - renderIntoDocument( + const tree = renderIntoDocument( ); - const activeElement = document.activeElement.getElementsByTagName('input')[0].id; - t.is(activeElement, '#/properties/firstIntegerField'); - t.not(activeElement, '#/properties/secondIntegerField'); + const inputs = scryRenderedDOMElementsWithTag(tree, 'input'); + t.not(document.activeElement, inputs[0]); + t.is(document.activeElement, inputs[1]); + }); test('autofocus active', t => { @@ -122,7 +124,7 @@ test('autofocus active', t => { ); const input = findRenderedDOMElementWithTag(tree, 'input') as HTMLInputElement; - t.true(input.autofocus); + t.is(document.activeElement, input); }); test('autofocus inactive', t => { diff --git a/test/renderers/number.control.test.tsx b/test/renderers/number.control.test.tsx index 7cb1420494..5f6a4e4645 100644 --- a/test/renderers/number.control.test.tsx +++ b/test/renderers/number.control.test.tsx @@ -11,7 +11,8 @@ import { change, findRenderedDOMElementWithClass, findRenderedDOMElementWithTag, - renderIntoDocument + renderIntoDocument, + scryRenderedDOMElementsWithTag } from '../helpers/binding'; import { Provider } from '../../src/common/binding'; import { HorizontalLayoutRenderer } from '../../src/renderers/layouts/horizontal.layout'; @@ -90,16 +91,17 @@ test('autofocus on first element', t => { schema, uischema ); - renderIntoDocument( + const tree = renderIntoDocument( ); - const activeElement = document.activeElement.getElementsByTagName('input')[0].id; - t.is(activeElement, '#/properties/firstNumberField'); - t.not(activeElement, '#/properties/secondNumberField'); + + const inputs = scryRenderedDOMElementsWithTag(tree, 'input'); + t.not(document.activeElement, inputs[0]); + t.is(document.activeElement, inputs[1]); }); test('autofocus active', t => { @@ -121,7 +123,7 @@ test('autofocus active', t => { ); const input = findRenderedDOMElementWithTag(tree, 'input') as HTMLInputElement; - t.true(input.autofocus); + t.is(document.activeElement, input); }); test('autofocus inactive', t => { diff --git a/test/renderers/text.control.test.tsx b/test/renderers/text.control.test.tsx index 2df226b684..8eda82fb2b 100644 --- a/test/renderers/text.control.test.tsx +++ b/test/renderers/text.control.test.tsx @@ -12,7 +12,8 @@ import { change, findRenderedDOMElementWithClass, findRenderedDOMElementWithTag, - renderIntoDocument + renderIntoDocument, + scryRenderedDOMElementsWithTag } from '../helpers/binding'; import { Provider } from '../../src/common/binding'; @@ -89,16 +90,16 @@ test('autofocus on first element', t => { schema, uischema ); - renderIntoDocument( + const tree = renderIntoDocument( ); - const activeElement = document.activeElement.getElementsByTagName('input')[0].id; - t.is(activeElement, '#/properties/firstName'); - t.not(activeElement, '#/properties/lastName'); + const inputs = scryRenderedDOMElementsWithTag(tree, 'input'); + t.not(document.activeElement, inputs[0]); + t.is(document.activeElement, inputs[1]); }); test('autofocus active', t => { @@ -124,7 +125,7 @@ test('autofocus active', t => { ); const input = findRenderedDOMElementWithTag(tree, 'input') as HTMLInputElement; - t.true(input.autofocus); + t.is(document.activeElement, input); }); test('autofocus inactive', t => { @@ -150,7 +151,7 @@ test('autofocus inactive', t => { ); const input = findRenderedDOMElementWithTag(tree, 'input') as HTMLInputElement; - t.false(input.autofocus); + t.not(document.activeElement, input); }); test('autofocus inactive by default', t => { @@ -173,7 +174,7 @@ test('autofocus inactive by default', t => { ); const input = findRenderedDOMElementWithTag(tree, 'input') as HTMLInputElement; - t.false(input.autofocus); + t.not(document.activeElement, input); }); test('tester', t => { diff --git a/test/renderers/textarea.control.test.tsx b/test/renderers/textarea.control.test.tsx index 5b57b4ea94..aa867a7989 100644 --- a/test/renderers/textarea.control.test.tsx +++ b/test/renderers/textarea.control.test.tsx @@ -14,7 +14,8 @@ import { change, findRenderedDOMElementWithClass, findRenderedDOMElementWithTag, - renderIntoDocument + renderIntoDocument, + scryRenderedDOMElementsWithTag } from '../helpers/binding'; import { Provider } from '../../src/common/binding'; @@ -92,16 +93,16 @@ test('autofocus on first element', t => { schema, uischema ); - renderIntoDocument( + const tree = renderIntoDocument( ); - const activeElement = document.activeElement.getElementsByTagName('input')[0].id; - t.is(activeElement, '#/properties/firstName'); - t.not(activeElement, '#/properties/lastName'); + const inputs = scryRenderedDOMElementsWithTag(tree, 'input'); + t.not(document.activeElement, inputs[0]); + t.is(document.activeElement, inputs[1]); }); test('autofocus active', t => { @@ -123,7 +124,7 @@ test('autofocus active', t => { ); const input = findRenderedDOMElementWithTag(tree, 'textarea') as HTMLInputElement; - t.true(input.autofocus); + t.is(document.activeElement, input) }); test('autofocus inactive', t => { diff --git a/tsconfig.json b/tsconfig.json index 504a9e5b36..838af6e079 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,7 +13,8 @@ "jsx": "react", "reactNamespace": "JSX", "types": [ - "inferno" + "react", + "react-redux" ] }, "exclude":[