Pruebas de sistema de extremo a extremo para temas y componentes de temas

Documentación Guías para desarrolladores
,
1

La escritura de pruebas automatizadas para temas es una parte importante del proceso de desarrollo de temas que puede ayudar a garantizar que las funcionalidades introducidas por un tema sigan funcionando bien con el tiempo con las funcionalidades principales de Discourse.

Actualmente, Discourse admite dos formas de escribir pruebas de regresión para temas. La primera sigue principalmente el método de EmberJS e implica solo probar el código del lado del cliente. La segunda forma es escribir pruebas de sistema de Rails, lo que le permite probar el código del lado del servidor y el código del lado del cliente al mismo tiempo. Este documento se centrará en escribir pruebas de sistema de Rails para temas y es en lo que recomendamos que los autores de temas se centren al escribir pruebas para sus temas también.

Pruebas de sistema de Rails para temas

En esencia, Discourse utiliza los marcos de prueba RSpec y Capybara para ejecutar pruebas de sistema de Rails. Se requieren conocimientos básicos sobre RSpec y Capybara para comenzar y recomendamos leer los siguientes enlaces antes de empezar:

Pautas y consejos para escribir pruebas de sistema de temas

Estas son algunas pautas a seguir al escribir pruebas de sistema:

  • Se espera que las pruebas de sistema se ubiquen en el directorio spec/system dentro del directorio del tema.

  • Se espera que cada archivo en el directorio spec/system siga el formato \u003cdescripción_de_la_prueba_de_sistema\u003e_spec.rb.

  • El bloque describe de RSpec de nivel superior debe tener presente la metainformación system: true. Ejemplo:

    RSpec.describe "Prueba de un tema o componente de tema", system: true do
  it "muestra el componente" do
    ...
  end
end

  • Los métodos de ayuda upload_theme y upload_theme_component están disponibles y deben llamarse antes de que se ejecuten las pruebas. Ejemplo:

    RSpec.describe "Prueba de un tema o componente de tema", system: true do
  let!(:theme) do
    upload_theme
  end

  # o `upload_theme_component` si su tema es un componente
  #
  # let!(:theme_component) do
  #   upload_theme_component
  # end

  it "muestra el componente" do
    ...
  end
end

  • La configuración de un tema se puede cambiar en la prueba de sistema llamando al método update_setting en el objeto theme y luego guardando el tema.

    Ejemplo:

    RSpec.describe "Prueba de un tema", system: true do
  let!(:theme) do
    upload_theme
  end

  it "no muestra el tema cuando la configuración del tema `should_render` es falsa" do
    theme.update_setting(:should_render, false)
    theme.save!

    expect(page).not_to have_css("#some-identifier")
  end
end

  • Discourse utiliza el gem fabrication, que nos permite configurar fácilmente los datos de prueba que necesitamos para cada prueba. La lista completa de fabricadores disponibles en el núcleo de Discourse también se puede utilizar en la prueba de sistema del tema.

    Ejemplo:

    RSpec.describe "Prueba de un tema", system: true do
  let!(:theme) do
    upload_theme
  end

  it "muestra el tema" do
    user = Fabricate(:user)
    category = Fabricate(:category)
    topic = Fabricate(:topic)
    topic_2 = Fabricate(:topic, title: "Este es el tema número 2")

    ...
  end
end

  • Utilice el método de ayuda sign_in para probar diferentes perfiles de usuario.

    Ejemplo:

    RSpec.describe "Prueba de un tema", system: true do
  let!(:theme) do
    upload_theme
  end

  it "no muestra el tema para un usuario normal" do
    user = Fabricate(:user)
    sign_in(user)

    ...
  end

  it "muestra el tema para un usuario del personal" do
    admin = Fabricate(:admin)
    sign_in(admin)

    ...
  end
end

  • A veces querrá facilitar y hacer más reutilizable la consulta e inspección de partes de la página para sus pruebas de sistema. Para ello, puede utilizar el concepto de PageObjects, que verá hecho a menudo en el núcleo.

    Ejemplo:

    # frozen_string_literal: true

module PageObjects
  module Components
    class MyCustomComponent < PageObjects::Components::Base
      COMPONENT_SELECTOR = ".my-custom-component"

      def click_action_button
        find("#{COMPONENT_SELECTOR} .action-button").click
      end

      def has_content?(content)
        has_css?("#{COMPONENT_SELECTOR} .content", text: content)
      end
    end
  end
end

    y luego puede usarlo importándolo con require_relative incorporado de Ruby en la parte superior de su archivo de prueba de sistema.

    require_relative "page_objects/components/my_custom_component"

Ejecución de pruebas de sistema de temas

Las pruebas de sistema de temas se pueden ejecutar utilizando el gem de la herramienta de línea de comandos discourse_theme y se puede instalar con estas instrucciones.

Una vez que se haya instalado la herramienta de línea de comandos discourse_theme, puede ejecutar todas las pruebas de sistema en el directorio de su tema ejecutando el siguiente comando:

discourse_theme rspec .

En la primera ejecución del comando rspec para un nuevo tema, se le preguntará si desea ejecutar las pruebas de sistema utilizando un entorno de desarrollo local de Discourse o un contenedor Docker que tendrá el entorno de desarrollo configurado para usted. A menos que sea un desarrollador experimentado de complementos o temas de Discourse, recomendamos seleccionar n y ejecutar las pruebas utilizando un contenedor Docker, ya que todo funcionará nada más sacarlo de la caja.

El comando discourse_theme rspec también admite la ejecución de un único directorio de especificaciones, archivo y archivo con números de línea.

discourse_theme rspec /ruta/al/tema/spec/system
discourse_theme rspec /ruta/al/tema/spec/system/my_system_spec.rb
discourse_theme rspec /ruta/al/tema/spec/system/my_system_spec.rb:12

Modo con interfaz gráfica (Headful mode)

Por defecto, las pruebas de sistema de temas se ejecutan utilizando Google Chrome en modo sin interfaz gráfica (headless mode). Este es un modo en el que el navegador no renderiza nada en pantalla, lo que permite que las ejecuciones de pruebas se completen más rápido. Sin embargo, a menudo es útil poder ver lo que está haciendo la prueba de sistema que ha escrito utilizando Google Chrome en modo con interfaz gráfica (headful mode). Puede habilitar este modo pasando la opción --headful al comando discourse_theme rspec.

discourse_theme rspec . --headful

El comando anterior ejecutará las pruebas de sistema en modo con interfaz gráfica donde la ejecución de las pruebas se puede ver visualmente.

También puede pausar la ejecución de la prueba en su caso de prueba utilizando el método de ayuda pause_test, lo que le permite inspeccionar el estado actual de la aplicación en el navegador.

Ejemplo:

RSpec.describe "Prueba de un tema", system: true do
  let!(:theme) do
    upload_theme
  end

  it "muestra el tema" do
    visit("/")
    click("#some-button")
    pause_test
    # ...
  end
end

Este documento está controlado por versiones: sugiera cambios en github.

18 Me gusta
6

Noté que, por lo general, en las pruebas de componentes se usa let!(:theme) en lugar de let!(:theme_component). Por ejemplo, en esta prueba:

Sin embargo, la guía sugiere usar let!(:theme_component) para componentes de temas:

¿Hay alguna razón por la que deba usar theme_component como se describe en esta guía?

2 Me gusta