Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! Join TestMu Conference

How to use propsKeyToKeep method in storybook-root

Best JavaScript code snippet using storybook-root

StorybookWrapperComponent.ts

Source:StorybookWrapperComponent.ts

1import {2  AfterViewInit,3  ChangeDetectorRef,4  Component,5  ElementRef,6  Inject,7  OnDestroy,8  Type,9  ViewChild,10  ViewContainerRef,11} from '@angular/core';12import { Subscription, Subject } from 'rxjs';13import { map, skip } from 'rxjs/operators';14import { ICollection } from '../types';15import { STORY_PROPS } from './StorybookProvider';16import { ComponentInputsOutputs, getComponentInputsOutputs } from './utils/NgComponentAnalyzer';17const getNonInputsOutputsProps = (18  ngComponentInputsOutputs: ComponentInputsOutputs,19  props: ICollection = {}20) => {21  const inputs = ngComponentInputsOutputs.inputs22    .filter((i) => i.templateName in props)23    .map((i) => i.templateName);24  const outputs = ngComponentInputsOutputs.outputs25    .filter((o) => o.templateName in props)26    .map((o) => o.templateName);27  return Object.keys(props).filter((k) => ![...inputs, ...outputs].includes(k));28};29/**30 * Wraps the story template into a component31 *32 * @param storyComponent33 * @param initialProps34 */35export const createStorybookWrapperComponent = (36  selector: string,37  template: string,38  storyComponent: Type<unknown> | undefined,39  styles: string[],40  initialProps?: ICollection41): Type<any> => {42  // In ivy, a '' selector is not allowed, therefore we need to just set it to anything if43  // storyComponent was not provided.44  const viewChildSelector = storyComponent ?? '__storybook-noop';45  @Component({46    selector,47    template,48    styles,49  })50  class StorybookWrapperComponent implements AfterViewInit, OnDestroy {51    private storyComponentPropsSubscription: Subscription;52    private storyWrapperPropsSubscription: Subscription;53    @ViewChild(viewChildSelector, { static: true }) storyComponentElementRef: ElementRef;54    @ViewChild(viewChildSelector, { read: ViewContainerRef, static: true })55    storyComponentViewContainerRef: ViewContainerRef;56    // Used in case of a component without selector57    storyComponent = storyComponent ?? '';58    // eslint-disable-next-line no-useless-constructor59    constructor(60      @Inject(STORY_PROPS) private storyProps$: Subject<ICollection | undefined>,61      private changeDetectorRef: ChangeDetectorRef62    ) {}63    ngOnInit(): void {64      // Subscribes to the observable storyProps$ to keep these properties up to date65      this.storyWrapperPropsSubscription = this.storyProps$.subscribe((storyProps = {}) => {66        // All props are added as component properties67        Object.assign(this, storyProps);68        this.changeDetectorRef.detectChanges();69        this.changeDetectorRef.markForCheck();70      });71    }72    ngAfterViewInit(): void {73      // Bind properties to component, if the story have component74      if (this.storyComponentElementRef) {75        const ngComponentInputsOutputs = getComponentInputsOutputs(storyComponent);76        const initialOtherProps = getNonInputsOutputsProps(ngComponentInputsOutputs, initialProps);77        // Initializes properties that are not Inputs | Outputs78        // Allows story props to override local component properties79        initialOtherProps.forEach((p) => {80          (this.storyComponentElementRef as any)[p] = initialProps[p];81        });82        // `markForCheck` the component in case this uses changeDetection: OnPush83        // And then forces the `detectChanges`84        this.storyComponentViewContainerRef.injector.get(ChangeDetectorRef).markForCheck();85        this.changeDetectorRef.detectChanges();86        // Once target component has been initialized, the storyProps$ observable keeps target component properties than are not Input|Output up to date87        this.storyComponentPropsSubscription = this.storyProps$88          .pipe(89            skip(1),90            map((props) => {91              const propsKeyToKeep = getNonInputsOutputsProps(ngComponentInputsOutputs, props);92              return propsKeyToKeep.reduce((acc, p) => ({ ...acc, [p]: props[p] }), {});93            })94          )95          .subscribe((props) => {96            // Replace inputs with new ones from props97            Object.assign(this.storyComponentElementRef, props);98            // `markForCheck` the component in case this uses changeDetection: OnPush99            // And then forces the `detectChanges`100            this.storyComponentViewContainerRef.injector.get(ChangeDetectorRef).markForCheck();101            this.changeDetectorRef.detectChanges();102          });103      }104    }105    ngOnDestroy(): void {106      if (this.storyComponentPropsSubscription != null) {107        this.storyComponentPropsSubscription.unsubscribe();108      }109      if (this.storyWrapperPropsSubscription != null) {110        this.storyWrapperPropsSubscription.unsubscribe();111      }112    }113  }114  return StorybookWrapperComponent;...

Using AI Code Generation

1import { propsKeyToKeep } from 'storybook-root-decorator';2import { propsKeyToKeep } from 'storybook-root-decorator';3import { propsKeyToKeep } from 'storybook-root-decorator';4import { propsKeyToKeep } from 'storybook-root-decorator';5import { propsKeyToKeep } from 'storybook-root-decorator';6import { propsKeyToKeep } from 'storybook-root-decorator';7import { propsKeyToKeep } from 'storybook-root-decorator';8import { propsKeyToKeep } from 'storybook-root-decorator';9import { propsKeyToKeep } from 'storybook-root-decorator';10import { propsKeyToKeep } from 'storybook-root-decorator';11import { propsKeyToKeep } from 'storybook-root-decorator';12import { propsKeyToKeep } from 'storybook-root-decorator';13import { propsKeyToKeep } from 'storybook-root-decorator';14import { propsKeyToKeep } from 'storybook-root-decorator';15import { propsKeyToKeep } from 'storybook-root-decorator';

Using AI Code Generation

1import { propsKeyToKeep } from 'storybook-root-decorator';2export const propsKeyToKeep = (key) => {3  return key === 'children';4};5addDecorator(withRootDecorator({6}));7export const propsKeyToKeep = (key) => {8  return key === 'children' || key === 'className';9};10addDecorator(withRootDecorator({11}));12export const propsKeyToKeep = (key) => {13  return key === 'children' || key === 'className' || key === 'style';14};15addDecorator(withRootDecorator({16}));17export const propsKeyToKeep = (key) => {18  return key === 'children' || key === 'className' || key === 'style' || key === 'onClick';19};20addDecorator(withRootDecorator({21}));

Using AI Code Generation

1import React from 'react';2import { storiesOf } from '@storybook/react';3import { withPropsKeyToKeep } from 'storybook-root-decorator';4import MyComponent from '../MyComponent';5storiesOf('MyComponent', module)6  .addDecorator(withPropsKeyToKeep('prop1', 'prop2'))7  .add('default', () => <MyComponent prop1="prop1" prop2="prop2" prop3="prop3" />);

Using AI Code Generation

1import { propsKeyToKeep } from 'storybook-root-decorator';2import { propsKeyToKeep } from 'storybook-root-decorator';3import { propsKeyToKeep } from 'storybook-root-decorator';4import { propsKeyToKeep } from 'storybook-root-decorator';5import { propsKeyToKeep } from 'storybook-root-decorator';6import { propsKeyToKeep } from 'storybook-root-decorator';7import { propsKeyToKeep } from 'storybook-root-decorator';8import { propsKeyToKeep } from 'storybook-root-decorator';9import { propsKeyToKeep } from 'storybook-root-decorator';10import

Using AI Code Generation

1import { propsKeyToKeep } from 'storybook-root-decorator';2export default {3  decorators: [propsKeyToKeep('children')],4};5export const test = () => {6  return <div>Test</div>;7};8import { propsKeyToKeep } from 'storybook-root-decorator';9export default {10  decorators: [propsKeyToKeep('children')],11};12export const test = () => {13  return <div>Test</div>;14};15import { propsKeyToKeep } from 'storybook-root-decorator';16export default {17  decorators: [propsKeyToKeep('children')],18};19export const test = () => {20  return <div>Test</div>;21};22import { propsKeyToKeep } from 'storybook-root-decorator';23export default {24  decorators: [propsKeyToKeep('children')],25};26export const test = () => {27  return <div>Test</div>;28};29import { propsKeyToKeep } from 'storybook-root-decorator';30export default {31  decorators: [propsKeyToKeep('children')],32};33export const test = () => {34  return <div>Test</div>;35};36import { propsKeyToKeep } from 'storybook-root-decorator';37export default {38  decorators: [propsKeyToKeep('children')],39};40export const test = () => {41  return <div>Test</div>;42};43import { propsKeyToKeep } from 'storybook-root-decorator';44export default {45  decorators: [propsKeyToKeep('

Using AI Code Generation

1import { propsKeyToKeep } from 'storybook-root-decorator';2export default {3    propsKeyToKeep(['children', 'className']),4};5export const MyComponent = () => (6);7export const MyOtherComponent = () => (8);9import { propsKeyToKeep } from 'storybook-root-decorator';10describe('MyComponent', () => {11  it('should render MyComponent with the correct props', () => {12    const wrapper = shallow(<MyComponent />);13    expect(wrapper.find(MyComponent).props()).toEqual({14    });15  });16});17describe('MyOtherComponent', () => {18  it('should render MyComponent with the correct props', () => {19    const wrapper = shallow(<MyOtherComponent />);20    expect(wrapper.find(MyComponent).props()).toEqual({21    });22  });23});24import { propsKeyToKeep } from 'storybook-root-decorator';25export default {26    propsKeyToKeep(['children', 'className']),27};28export const MyComponent = () => (29);30export const MyOtherComponent = () => (31);32import { propsKeyToKeep } from 'storybook-root-decorator';33describe('MyComponent', () => {34  it('should render MyComponent with the correct props

Using AI Code Generation

1import { propsKeyToKeep } from 'storybook-root-decorator';2const propsToKeep = propsKeyToKeep(['color', 'size']);3export const MyComponent = propsToKeep(MyComponent);4import { propsToKeep } from 'storybook-root-decorator';5export const MyComponent = propsToKeep(MyComponent);6import { propsKeyToOmit } from 'storybook-root-decorator';7const propsToOmit = propsKeyToOmit(['color', 'size']);8export const MyComponent = propsToOmit(MyComponent);9import { propsToOmit } from 'storybook-root-decorator';10export const MyComponent = propsToOmit(MyComponent);11import { propsToAdd } from 'storybook-root-decorator';12export const MyComponent = propsToAdd({ color: 'red' })(MyComponent);13import { propsToAddWithDefaultValue } from 'storybook-root-decorator';14export const MyComponent = propsToAddWithDefaultValue({ color: 'red' })(MyComponent);

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.