팩스 목적의 Vue+Storybook, Inject

지난번 Vue+Storybook+reg-suit은 Visual Regression Test의 틀을 구축했다.
https://qiita.com/kozayupapa/items/0099cea005b3ce0b6274
그 스토리를 확충하고 싶습니다.
당신은 무엇을 하고 싶습니까?
전제로 이번에 스토리북의 스토리를 추가하려는 것은 리셋이 필요한 블루의 컴포네이션으로 페이지가 커진 상황이다.이것은 모든 변수를 페이지 데이터로 정의하는 예입니다.
prop이면story의 테스트 데이터 설정도 가볍습니다
데이터의 내용을 테스트 스토리 쪽에서 좋아하는 값으로 바꾸는 방법이 있는지 토론했다.
Vue Provide/Inject란 무엇입니까?
베르의 문서를 착실하게 읽으니 기분이 좋다.
계층별로 제공되며, 어디에 삽입할지 지휘하지 않고 프로젝트 후 코드를 수신 쪽에 추가하면 된다.원하는 게 이거야!

provide/inject 예

// 送り側
app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide() {
    return {
      todoLength: this.todos.length
    }
  },
  template: `
    ...
  `
})

//受け側
app.component('todo-list-statistics', {
  inject: ['todoLength'],
  created() {
    console.log(`Injected property: ${this.todoLength}`) // > Injected property: 5
  }
})

단, 테스트할 때만 데이터를 교부하고 싶기 때문에 일반적인 상황에서 이전과 같은 초기값을 설정하고 싶습니다.
위의 페이지에서만 초기 값을 제공하는 방법을 알 수 없으며 자세히 살펴보면 다음 API 문서에 자세히 나와 있습니다.
초기 값의 제시 방법 예시

const Child = {
  inject: {
    foo: { default: 'foo' }
  }
}

너무 예뻐요. 얼마나 편해요.
그리고 Inject의 수치를 데이터의 초기 값으로 전달하는 예도 진지하게 썼다.

const Child = {
  inject: ['foo'],
  data() {
    return {
      bar: this.foo
    }
  }
}

하지만!!　
일반적인 vue에서 흔히 볼 수 있는 단일 파일 구성 요소의 쓰기
상술한 쓰기 방법은undefined의 실패를 초래할 수 있다.
NG 예

  export default {
    components: {
      hoge
    },
    data: () => ({
      foo:  this.fooInject,
    }),
    inject: { 
      fooInject :{default : false},
    },
    computed: {
     ...

처음에는 못할 줄 알았는데 Doctoment를 자세히 읽어보니
아래에 해설이 있다.그렇구나,component의 실례를 가리키지 않았구나.

data プロパティでアロー関数を使う場合、this はコンポーネントのインスタンスになりませんが、
関数の第 1 引数としてそのインスタンスにアクセスできるということは忘れないでください。

data: vm => ({ a: vm.myProp })

상기 예시를 데이터 속성의 초기값으로 변경합니다
OK 예

  export default {
    components: {
      hoge
    },
    data: (vm) => ({
      foo:  vm.fooInject,
    }),
    inject: { 
      fooInject :{default : false},
    },
    computed: {
     ...

storybook story 쓰기
테스트 대상(Inject 피테스트 측)의 필요한 변경은 위에서 설명한 대로 최소값으로 설정됩니다.
테스트 코드(이번은storybook의story)의 쓰기 방법은 다음과 같다.
SomePage.stories.js

import idea from '../../src/views/SomePage';

// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
export default {
  title: 'somepage',
  component: some,
  excludeStories: /.*Data$/,
 };


/* story記述 */
// default
export const Default = () => ({    // 変数名がナビゲーションパネルでの表示名となる
    components: { some },  // 対象となるコンポーネントを指定する
    template: '<some />'  // レンダリングするhtmlを記述する
  });

// check foo
export const checkFoo = () => ({    // 変数名がナビゲーションパネルでの表示名となる
  components: { some },  // 対象となるコンポーネントを指定する
  provide(){
    return {fooInject:true}
  },
  template: '<some />'  // レンダリングするhtmlを記述する
});

// check baa
export const checkBaa = () => ({    // 変数名がナビゲーションパネルでの表示名となる
  components: { some },  // 対象となるコンポーネントを指定する
  provide(){
    return {
      baaInject:true,
      contentInject:'test baa from storybook scenario',
    }
  },
  template: '<some />'  // レンダリングするhtmlを記述する
});

이렇게 하면 vue 데이터 속성을 잘 바꾸고 전체 화면이 이동하는 VRT를 쉽게 그릴 수 있습니다!