web-dev-qa-db-ja.com

ストーリーブック5.2のデコレーターを使用してストーリーをラップする-TypeScript / angular

私はstoriesOfを使用して5.2より前のストーリーブックから来ているので、コンポーネントをラップする場合はテンプレートを使用します。

例えば

.add('Test', () => ({
  component: TestComponent,
  template: `
    <div class="wrapper">
      <test-component></test-component>...

5.2では、ストーリーを書くための推奨される方法が変更され、デコレータを使用して同じ結果を達成する方法が説明されています https://storybook.js.org/docs/basics/writing-stories/#decorators 。しかし、私はangularを使用していて、反応とvueの例しかありません。どちらも特定の関数/コンポーネントを使用しているため、解決策を見つけるのに苦労しています。

Vueプロジェクトでは、Reactプロジェクトで使用される関数パラメータstoryFnの代わりに、特別なコンポーネント<story/>を使用する必要があります

古い仕様のようにtemplateを使用して、私は以下を試しました

  1. templateが機能する最初のテストとして
export const Test = () => ({
  component: TestComponent,
  template: `Expecting just this text`
});

結果：「このテキストのみを期待しています」というテキストを参照

  1. <TestComponent>の使用
export const Test = () => ({ component: TestComponent,
  template: <div class="wrapper"><TestComponent></TestComponent></div>
});

結果：空白の画面にTemplate parse errors: 'CheckboxComponent' is not a known element:が表示され、 `スキーマ：[CUSTOM_ELEMENTS_SCHEMA]の使用が提案されます

  1. <test-component>の使用
export const Test = () => ({
  component: TestComponent,
  template: `<div class="wrapper"><test-component></test-component></div>`
});

結果：空白の画面にスキーマの使用を提案するTemplate parse errors: 'CheckboxComponent' is not a known element:が表示されます：[CUSTOM_ELEMENTS_SCHEMA]

2と3の両方に追加してみました

export const Test = () => ({
  component: TestComponent,
  addDecorator: moduleMetadata({
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  }),
  template: `[tried both templates from 2 & 3]`
});

結果：同じエラーが再び表示された

TypeScriptでこれがどのように行われるか、そしてどこが間違っているのかについて誰かが光を当てることができますか？.

javascriptangulartypescriptstorybook
3
fidev

新しいストーリー形式で5.2でそれを行う方法を見つけました。 Template parse errorsを追加してコンポーネントを宣言することにより、[CUSTOM_ELEMENTS_SCHEMA]を修正しました。

docs addOn https://github.com/storybookjs/storybook/tree/master/addons/docs も使用しており、このための機能を追加しました。

StoriesOf https://storybook.js.org/docs/formats/storiesof-api/ とComponent Story Format（CSF） https：//storybook.jsの両方を含めました.org/docs/formats/component-story-format / 他の誰かが問題に遭遇した場合。

storiesOf API

import { TestComponent } from './test.component';
import { storiesOf, moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

storiesOf('Elements|Test', module)
  .addParameters({ // only needed for docs add-on
    component: TestComponent, 
    componentSubtitle: 'Subtitle'
    // docs: { page: null } uncomment this to disabled docs
  })
  .addDecorator(
    moduleMetadata({
      imports: [CommonModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      declarations: [TestComponent]
    })
  )
  .add('Test', () => ({
    component: TestComponent,
    template: `<div class="test">test text<app-test></app-test></div>`
  }));

CSF

import { TestComponent } from './test.component';
import { moduleMetadata, } from '@storybook/angular';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

export default {
  title: 'Elements|Test',
  component: TestComponent, // only needed for docs add-on
  parameters: { // only needed for docs add-on
    componentSubtitle: 'Subtitle.'
    // docs: { page: null } uncomment this to disabled docs
  },
  decorators: [
    moduleMetadata({
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      declarations: [TestComponent]
    })
  ]
};

export const Test = () => ({
  component: TestComponent,
  template: `<div class="text">test text<app-test></app-test></div>`
});
2
fidev