fix: reverse #225

Closes #227
bpmn-io · Mar 17, 2023 · 01c6362 · 01c6362
1 parent db25f49
commit 01c6362
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 222 deletions.
diff --git a/src/PropertiesPanel.js b/src/PropertiesPanel.js
@@ -119,13 +119,6 @@ export default function PropertiesPanel(props) {
   // set-up layout context
   const [ layout, setLayout ] = useState(createLayout(layoutConfig));
 
-  // react to external changes in the layout config
-  useEffect(() => {
-    const newLayout = createLayout(layoutConfig);
-
-    setLayout(newLayout);
-  }, [ layoutConfig ]);
-
   useEffect(() => {
     if (typeof layoutChanged === 'function') {
       layoutChanged(layout);
@@ -236,9 +229,9 @@ export default function PropertiesPanel(props) {
 
 // helpers //////////////////
 
-function createLayout(overrides, defaults = DEFAULT_LAYOUT) {
+function createLayout(overrides) {
   return {
-    ...defaults,
+    ...DEFAULT_LAYOUT,
     ...overrides
   };
 }

diff --git a/src/hooks/useLayoutState.js b/src/hooks/useLayoutState.js
@@ -1,6 +1,6 @@
 import {
-  useCallback,
-  useContext
+  useContext,
+  useState
 } from 'preact/hooks';
 
 import {
@@ -29,11 +29,16 @@ export function useLayoutState(path, defaultValue) {
   } = useContext(LayoutContext);
 
   const layoutForKey = getLayoutForKey(path, defaultValue);
+  const [ value, set ] = useState(layoutForKey);
 
-  const setState = useCallback ((newValue) => {
-    setLayoutForKey(path, newValue);
-  }, [ setLayoutForKey ]);
+  const setState = (newValue) => {
+
+    // (1) set component state
+    set(newValue);
 
+    // (2) set context
+    setLayoutForKey(path, newValue);
+  };
 
-  return [ layoutForKey, setState ];
+  return [ value, setState ];
 }
diff --git a/test/spec/PropertiesPanel.spec.js b/test/spec/PropertiesPanel.spec.js
@@ -1,7 +1,6 @@
 import {
   act,
-  render,
-  cleanup
+  render
 } from '@testing-library/preact/pure';
 
 import TestContainer from 'mocha-test-container-support';
@@ -53,8 +52,6 @@ describe('<PropertiesPanel>', function() {
   });
 
 
-  afterEach(cleanup);
-
   it('should render (no element)', function() {
 
     // given
@@ -317,41 +314,6 @@ describe('<PropertiesPanel>', function() {
       });
     });
 
-
-    it('should notify on external layout change', async function() {
-
-      // given
-      const initialLayoutConfig = {
-        open: true,
-        foo: 'bar'
-      };
-
-      const layoutChangedSpy = sinon.spy();
-
-      const options = {
-        container,
-        element: noopElement,
-        layoutConfig: initialLayoutConfig,
-        layoutChanged: layoutChangedSpy,
-      };
-
-      const { rerender } = createPropertiesPanel(options);
-
-      // when
-      const updatedLayoutConfig = {
-        open: false,
-        foo: 'baz'
-      };
-
-      createPropertiesPanel({
-        ...options,
-        layoutConfig: updatedLayoutConfig
-      }, rerender);
-
-      // then
-      expect(layoutChangedSpy).to.have.been.calledWith(updatedLayoutConfig);
-    });
-
   });
 
 
@@ -402,21 +364,21 @@ describe('<PropertiesPanel>', function() {
 
 // helpers //////////
 
-function createPropertiesPanel(options = {}, renderFn = render) {
+function createPropertiesPanel(options = {}) {
 
   const {
     container,
     element,
     headerProvider = HeaderProvider,
     placeholderProvider = PlaceholderProvider,
     groups = [],
-    layoutConfig = {},
+    layoutConfig,
     layoutChanged = noop,
-    descriptionConfig = {},
+    descriptionConfig,
     descriptionLoaded = noop
   } = options;
 
-  return renderFn(
+  return render(
     <PropertiesPanel
       element={ element }
       headerProvider={ headerProvider }

diff --git a/test/spec/components/Collapsible.spec.js b/test/spec/components/Collapsible.spec.js
@@ -110,9 +110,7 @@ describe('<Collapsible>', function() {
     expect(domClasses(entries).has('open')).to.be.false;
 
     // when
-    await act(() => {
-      header.click();
-    });
+    await header.click();
 
     // then
     expect(domClasses(entries).has('open')).to.be.true;

diff --git a/test/spec/components/Feel.spec.js b/test/spec/components/Feel.spec.js
@@ -417,7 +417,7 @@ describe('<FeelField>', function() {
 
     describe('toggle', function() {
 
-      it('should toggle feel active', async function() {
+      it('should toggle feel active', function() {
 
         // given
         const updateSpy = sinon.spy();
@@ -434,9 +434,7 @@ describe('<FeelField>', function() {
           field.container);
 
         // when
-        await act(() => {
-          icon.click();
-        });
+        icon.click();
 
         // then
         return waitFor(() => {
@@ -876,7 +874,7 @@ describe('<FeelField>', function() {
 
     describe('toggle', function() {
 
-      it('should toggle feel active', async function() {
+      it('should toggle feel active', function() {
 
         // given
         const updateSpy = sinon.spy();
@@ -893,9 +891,7 @@ describe('<FeelField>', function() {
           field.container);
 
         // when
-        await act(() => {
-          icon.click();
-        });
+        icon.click();
 
         // then
         return waitFor(() => {
@@ -1090,7 +1086,7 @@ describe('<FeelField>', function() {
       });
 
 
-      it('should be edited after update', async function() {
+      it('should be edited after update', function() {
 
         // given
         const result = createFeelField({ container, feel: 'required' });
@@ -1102,9 +1098,7 @@ describe('<FeelField>', function() {
         expect(isEdited(input)).to.be.false;
 
         // when
-        await act(() => {
-          contentEditable.textContent = 'foo';
-        });
+        contentEditable.textContent = 'foo';
 
         // then
         return waitFor(() => {
@@ -1153,25 +1147,25 @@ describe('<FeelField>', function() {
       });
 
 
-      it('should show syntax error', async function() {
+      it('should show syntax error', function() {
 
         // given
         const clock = sinon.useFakeTimers();
         const result = createFeelField({ container, getValue: () => '= foo == bar', feel: 'required' });
 
         // when
         // trigger debounced validation
-        await act(() => { clock.tick(1000); });
-        await act(() => { clock.restore(); });
+        clock.tick(1000);
+        clock.restore();
 
         // then
-        await waitFor(() => {
+        return waitFor(() => {
           expect(domQuery('.bio-properties-panel-error', result.container)).to.exist;
         });
       });
 
 
-      it('should show local error over global error', async function() {
+      it('should show local error over global error', function() {
 
         // given
         const clock = sinon.useFakeTimers();
@@ -1194,9 +1188,8 @@ describe('<FeelField>', function() {
 
         // when
         // trigger debounced validation
-        await act(() => { clock.tick(1000); });
-        await act(() => { clock.restore(); });
-
+        clock.tick(1000);
+        clock.restore();
 
         // then
         return waitFor(() => {
@@ -1236,7 +1229,7 @@ describe('<FeelField>', function() {
       });
 
 
-      it('should set invalid', async function() {
+      it('should set invalid', function() {
 
         // given
         const validate = (v) => {
@@ -1251,10 +1244,7 @@ describe('<FeelField>', function() {
         const input = domQuery('[role="textbox"]', entry);
 
         // when
-        await act(() => {
-          input.textContent = 'bar';
-        });
-
+        input.textContent = 'bar';
 
         // then
         return waitFor(() => {
@@ -1287,7 +1277,7 @@ describe('<FeelField>', function() {
       });
 
 
-      it('should show error message', async function() {
+      it('should show error message', function() {
 
         // given
         const validate = (v) => {
@@ -1302,10 +1292,7 @@ describe('<FeelField>', function() {
         const input = domQuery('[role="textbox"]', entry);
 
         // when
-        await act(() => {
-          input.textContent = 'bar';
-        });
-
+        input.textContent = 'bar';
 
         // then
         return waitFor(() => {
@@ -1468,7 +1455,7 @@ describe('<FeelField>', function() {
 
     describe('toggle', function() {
 
-      it('should toggle feel inactive', async function() {
+      it('should toggle feel inactive', function() {
 
         // given
         const updateSpy = sinon.spy();
@@ -1485,16 +1472,14 @@ describe('<FeelField>', function() {
           field.container);
 
         // when
-        await act(() => {
-          icon.click();
-        });
+        icon.click();
 
         // then
         expect(updateSpy).to.have.been.calledWith('foo');
       });
 
 
-      it('should NOT toggle if FEEL is required', async function() {
+      it('should NOT toggle if FEEL is required', function() {
 
         // given
         const updateSpy = sinon.spy();
@@ -1511,9 +1496,7 @@ describe('<FeelField>', function() {
           field.container);
 
         // when
-        await act(() => {
-          icon.click();
-        });
+        icon.click();
 
         // then
         expect(updateSpy).not.to.have.been.called;