fix: state not syncing in iframe mode, fix #361

histoire-dev · Dec 3, 2022 · 4b7fe0c · 4b7fe0c
1 parent 16a13af
commit 4b7fe0c
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 3 deletions.
diff --git a/examples/vue3/cypress/integration/state.js b/examples/vue3/cypress/integration/state.js
@@ -0,0 +1,49 @@
+/// <reference types="cypress" />
+
+describe('State Options API', () => {
+  const getIframeBody = () => cy.get('iframe[data-test-id="preview-iframe"]').iframe()
+
+  beforeEach(() => {
+    cy.visit('/story/src-components-stateoption-story-vue?variantId=src-components-stateoption-story-vue-0')
+  })
+
+  it('syncs state', () => {
+    getIframeBody().find('.state-output').contains('"optionApiData": "OPTION API"')
+    cy.get('[data-test-id="story-controls"]').get('input[type="text"]').clear().type('Meow')
+    getIframeBody().find('.state-output').contains('"optionApiData": "Meow"')
+  })
+})
+
+describe('State Setup API', () => {
+  const getIframeBody = () => cy.get('iframe[data-test-id="preview-iframe"]').iframe()
+
+  beforeEach(() => {
+    cy.visit('/story/src-components-statesetup-story-vue?variantId=src-components-statesetup-story-vue-0')
+  })
+
+  it('syncs state', () => {
+    getIframeBody().find('pre').contains('"count": 0')
+    getIframeBody().find('pre').contains('"text": "Meow"')
+    cy.get('[data-test-id="story-controls"] .controls').contains('+1').click().click()
+    cy.get('[data-test-id="story-controls"] input[type="text"]').eq(0).clear().type('Waf')
+    getIframeBody().find('pre').contains('"count": 2')
+    getIframeBody().find('pre').contains('"text": "Waf"')
+  })
+})
+
+describe('State Setup API (2)', () => {
+  const getIframeBody = () => cy.get('iframe[data-test-id="preview-iframe"]').iframe()
+
+  beforeEach(() => {
+    cy.visit('/story/src-components-statesetup2-story-vue?variantId=src-components-statesetup2-story-vue-0')
+  })
+
+  it('syncs state', () => {
+    getIframeBody().find('pre').contains('"count": 0')
+    getIframeBody().find('pre').contains('"text": "Meow"')
+    cy.get('[data-test-id="story-controls"] .controls').contains('+1').click().click()
+    cy.get('[data-test-id="story-controls"] input[type="text"]').eq(0).clear().type('Waf')
+    getIframeBody().find('pre').contains('"count": 2')
+    getIframeBody().find('pre').contains('"text": "Waf"')
+  })
+})
diff --git a/examples/vue3/src/components/StateOption.story.vue b/examples/vue3/src/components/StateOption.story.vue
@@ -13,7 +13,7 @@ export default {
     <Variant>
       <h1>State</h1>
       <div>
-        <pre>{{ { optionApiData } }}</pre>
+        <pre class="state-output">{{ { optionApiData } }}</pre>
         <input
           v-model="optionApiData"
         >

diff --git a/packages/histoire-shared/src/state.ts b/packages/histoire-shared/src/state.ts
@@ -22,8 +22,13 @@ export function omit (data, keys: string[]) {
   return copy
 }
 
-export function applyState (target: any, state: any) {
+export function applyState (target: any, state: any, override = false) {
   for (const key in state) {
-    target[key] = state[key]
+    // iframe sync needs to update properties without overriding them
+    if (!override && target[key] && !key.startsWith('_h') && typeof target[key] === 'object' && !Array.isArray(target[key])) {
+      Object.assign(target[key], state[key])
+    } else {
+      target[key] = state[key]
+    }
   }
 }