Завершение истории с использованием декоратора в сборнике рассказов 5.2 - машинопись / angular - PullRequest
Новая
       8

Завершение истории с использованием декоратора в сборнике рассказов 5.2 - машинопись / angular

2 голосов
/ 04 марта 2020

Я исхожу из сборника рассказов до 5.2, используя storiesOf, поэтому если бы я хотел обернуть свой компонент, я бы использовал шаблон.

EG 

.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 примеры. Оба из которых используют указанные c функции / компоненты

В Vue проектах необходимо использовать специальный компонент <story/> вместо параметра функции storyFn, который используется в проектах React

Используя template как в старом spe c Я попробовал следующее

  1. В качестве начального теста, который template работает 
export const Test = () => ({
  component: TestComponent,
  template: `Expecting just this text`
});

Результат: см. Текст «Ожидается только этот текст»

Использование <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]

Использование <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]`
});

Результат: снова появились те же ошибки

Может ли кто-нибудь пролить свет на то, как это будет сделано в машинописи и где я ошибаюсь - спасибо.

1 Ответ

1 голос
/ 05 марта 2020

Нашел способ сделать это в 5.2 с новым форматом истории. Исправлен Template parse errors путем добавления [CUSTOM_ELEMENTS_SCHEMA] и объявления компонента.

Я также использую docs addOn https://github.com/storybookjs/storybook/tree/master/addons/docs и добавил возможность для этого.

Я включил оба файла storyOf https://storybook.js.org/docs/formats/storiesof-api/ и Формат истории компонентов (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>`
});
...