Test del sistema end-to-end per temi e componenti del tema

Documentazione Guide per sviluppatori
,
1 
<div data-theme-toc="true"> </div>

Scrivere test automatizzati per i temi è una parte importante del processo di sviluppo dei temi, che può contribuire a garantire che le funzionalità introdotte da un tema continuino a funzionare bene nel tempo con le funzionalità principali di Discourse.

Attualmente, Discourse supporta due modi per scrivere test di regressione per i temi. Il primo segue principalmente il modo di EmberJS e coinvolge solo il test del codice lato client. Il secondo modo è scrivere test di sistema Rails che consentono di testare contemporaneamente sia il codice lato server che quello lato client. Questo documento si concentrerà sulla scrittura di test di sistema Rails per i temi ed è ciò su cui raccomandiamo agli autori dei temi di concentrarsi quando scrivono test per i loro temi.

Test di sistema Rails per temi

Sotto il cofano, Discourse utilizza i framework di test RSpec e Capybara per eseguire test di sistema Rails. È richiesta una conoscenza di base di RSpec e Capybara per iniziare e consigliamo di leggere i seguenti link prima di iniziare:

Linee guida e suggerimenti per la scrittura di test di sistema per temi

Queste sono alcune linee guida da seguire quando si scrivono test di sistema:

  • I test di sistema devono trovarsi nella directory spec/system della directory del tema.

  • Ogni file nella directory spec/system deve seguire il formato <descrizione_del_test_di_sistema>_spec.rb.

  • Il blocco describe RSpec di primo livello deve avere i metadati system: true presenti. Esempio:

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

  • I metodi helper upload_theme e upload_theme_component sono disponibili e devono essere chiamati prima che i test vengano eseguiti. Esempio:

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

  # o `upload_theme_component` se il tuo tema è un componente
  #
  # let!(:theme_component) do
  #   upload_theme_component
  # end

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

  • L’impostazione di un tema può essere modificata nel test di sistema chiamando il metodo update_setting sull’oggetto theme e quindi salvando il tema.

    Esempio:

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

  it "does not display the theme when `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 utilizza la gem di fabrication che ci consente di impostare facilmente i dati di test di cui abbiamo bisogno per ogni test. L’elenco completo dei fabricators disponibili nel core di Discourse può essere utilizzato anche nei test di sistema del tema.

    Esempio:

    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

  • Utilizzare il metodo helper sign_in per testare diversi profili utente.

    Esempio:

    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 volte vorrai rendere più facile e riutilizzabile l’interrogazione e l’ispezione di parti della pagina per i tuoi test di sistema. Per fare ciò, puoi utilizzare il concetto di PageObjects, che vedrai spesso fare nel core.

    Esempio:

    # 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

    e puoi quindi utilizzarlo importandolo con require_relative integrato di Ruby all’inizio del tuo file di test di sistema.

    require_relative "page_objects/components/my_custom_component"

Esecuzione dei test di sistema per temi

I test di sistema per temi possono essere eseguiti utilizzando la gemma CLI discourse_theme e possono essere installati con queste istruzioni.

Una volta installata la CLI discourse_theme, puoi eseguire tutti i test di sistema nella directory del tuo tema eseguendo il seguente comando:

discourse_theme rspec .

Alla prima esecuzione del comando rspec per un nuovo tema, ti verrà chiesto se desideri eseguire i test di sistema utilizzando un ambiente di sviluppo Discourse locale o un container Docker che avrà l’ambiente di sviluppo configurato per te. A meno che tu non sia uno sviluppatore esperto di plugin o temi Discourse, ti consigliamo di selezionare n ed eseguire i test utilizzando un container Docker poiché tutto funzionerà subito.

Il comando discourse_theme rspec supporta anche l’esecuzione di una singola directory di spec, file e file con numeri di riga.

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

Modalità Headful

Per impostazione predefinita, i test di sistema per temi vengono eseguiti utilizzando Google Chrome in modalità headless. Questa è una modalità in cui il browser non renderizza nulla sullo schermo, consentendo un’esecuzione più rapida dei test. Tuttavia, è spesso utile poter vedere cosa sta facendo il test di sistema che hai scritto utilizzando Google Chrome in modalità headful. Puoi abilitare questa modalità passando l’opzione --headful al comando discourse_theme rspec.

discourse_theme rspec . --headful

Il comando sopra eseguirà i test di sistema in modalità headful, dove l’esecuzione dei test può essere vista visivamente.

Puoi anche mettere in pausa l’esecuzione del test nel tuo caso di test utilizzando il metodo helper pause_test, consentendoti di ispezionare lo stato corrente dell’applicazione nel browser.

Esempio:

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

Questo documento è controllato in versione - suggerisci modifiche su github.

18 Mi Piace
6

Ho notato che di solito nei test per i componenti viene utilizzato let!(:theme) invece di let!(:theme_component). Ad esempio, in questo test:

Tuttavia, la guida suggerisce di utilizzare let!(:theme_component) per i componenti del tema:

C’è un motivo per cui dovrei usare theme_component come descritto in questa guida?

2 Mi Piace