es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo simular una variable de ventana en una única historia

05 Jun, 2023 Programación

Estoy utilizando Navigator online en mi aplicación de React para determinar si el cliente está en línea. Estoy mostrando un Componente de Respaldo sin conexión cuando el cliente está sin conexión. Por ahora he hecho el Componente Puro, para que pueda mostrarse en Storybook pasando el estado en línea como propiedad. Pero no siempre es una solución adecuada.

Así que me pregunto, ¿cómo se pueden simular variables globales (window) para una sola historia en Storybook? La única solución muy sucia que encontré se ve así:

ClientOffline.decorators = [
  (Story) => {
    const navegatiorInitally = global.navigator

// Estoy sobrescribiendo el objeto navigator en lugar del valor en línea directamente, 
// ya que esto arroja un error 'TypeError: "x" es de solo lectura'
Object.defineProperty(global, 'navigator', {
  value: { onLine: false },
  writable: false,
})

useEffect(() => {
  return () => {
    Object.defineProperty(global, 'navigator', {
      value: navegatiorInitally,
      writable: false,
    })
   location.reload() //necesario porque de lo contrario otras historias arrojan un error
  }
}, [])

return <story></story>
}
]

¿Alguien tiene una solución más sencilla?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para crear una simulación de variables globales (window) para una única historia en Storybook, puedes usar el método addDecorator de la API de Storybook. Primero, crea una función de decorador que simule la variable global según sea necesario. Por ejemplo, para simular la propiedad onLine del objeto navigator, puedes crear un decorador como este:

    import { addDecorator } from '@storybook/react';

addDecorator((storyFn, context) => {
  const navigatorInitially = global.navigator;

  global.navigator = { onLine: false };

  return (
    <>
      {storyFn(context)}

  );
});

    Esta función de decorador establece la propiedad onLine del objeto navigator como false globalmente durante la duración de la historia.

    Para eliminar los cambios en la variable global después de completar la historia, puedes usar la propiedad storyContext.parameters.globalTypes para modificar la variable global en la configuración de la historia. Esto restaurará el valor original de la variable después de que se complete la historia.

    export const MyStory = (args) => <mycomponent {...args}=""></mycomponent>;

MyStory.parameters = {
  globalTypes: {
    navigator: {
      defaultValue: navigatorInitially,
    },
  },
};

    Con esta configuración, puedes crear historias que utilicen diferentes valores para las variables globales sin afectar a otras historias ni a la aplicación en general.

Comments are closed.