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]
+ }
  }
 }