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

Documentación Guías para desarrolladores
,
1 
<div data-theme-toc="true"> </div>

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

Actualmente, Discourse admite dos formas de escribir pruebas de regresión para temas. La primera sigue principalmente la forma de EmberJS y solo implica probar el código del lado del cliente. La segunda forma es escribir pruebas de sistema de Rails que le permite probar tanto el código del lado del servidor como 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.

Pruebas de sistema de Rails para temas

En el fondo, 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 comenzar:

Directrices y consejos para escribir pruebas de sistema de temas

Estas son algunas directrices 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 necesita que la metadato system: true esté presente. Ejemplo:

    RSpec.describe "Testing A Theme or Theme Component", system: true do
  it "displays the component" do
    ...
  end
end

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

    RSpec.describe "Testing A Theme or Theme Component", system: true do
  let!(:theme) do
    upload_theme
  end

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

  it "displays the component" do
    ...
  end
end

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

    Ejemplo:

    RSpec.describe "Testing A Theme", system: true do
  let!(:theme) do
    upload_theme
  end

  it "does not display the theme when the `should_render` theme setting is false" 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 del sistema del tema.

    Ejemplo:

    RSpec.describe "Testing A Theme", system: true do
  let!(:theme) do
    upload_theme
  end

  it "displays the theme" do
    user = Fabricate(:user)
    category = Fabricate(:category)
    topic = Fabricate(:topic)
    topic_2 = Fabricate(:topic, title: "This is topic number 2")

    ...
  end
end

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

    Ejemplo:

    RSpec.describe "Testing A Theme", system: true do
  let!(:theme) do
    upload_theme
  end

  it "does not display the theme for a regular user" do
    user = Fabricate(:user)
    sign_in(user)

    ...
  end

  it "displays the theme for a staff user" 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á 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 del 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 rubygem CLI discourse_theme y se pueden instalar con estas instrucciones.

Una vez instalado el CLI discourse_theme, puede ejecutar todas las pruebas del 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 del sistema utilizando un entorno de desarrollo de Discourse local o un contenedor Docker que tendrá el entorno de desarrollo configurado para usted. A menos que sea un desarrollador experimentado de plugins o temas de Discourse, recomendamos seleccionar n y ejecutar las pruebas utilizando un contenedor Docker, ya que todo funcionará directamente.

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 /path/to/theme/spec/system
discourse_theme rspec /path/to/theme/spec/system/my_system_spec.rb
discourse_theme rspec /path/to/theme/spec/system/my_system_spec.rb:12

Modo Headful

Por defecto, las pruebas de sistema de temas se ejecutan utilizando Google Chrome en modo sin cabeza. 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 del sistema que ha escrito utilizando Google Chrome en modo con cabeza. Puede habilitar este modo pasando la opción --headful al comando discourse_theme rspec.

discourse_theme rspec . --headful

El comando anterior ejecutará las pruebas del sistema en modo con cabeza, 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 auxiliar pause_test, lo que le permite inspeccionar el estado actual de la aplicación en el navegador.

Ejemplo:

RSpec.describe "Testing A Theme", system: true do
  let!(:theme) do
    upload_theme
  end

  it "displays the theme" 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