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

Documentazione Guide per sviluppatori
,
1

La scrittura di test automatici per i temi è una parte importante del processo di sviluppo del tema che può aiutare 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 metodo di EmberJS e prevede solo il test del codice lato client. Il secondo modo consiste nello scrivere test di sistema Rails che consente 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 i 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 ti consigliamo di leggere i seguenti link prima di iniziare:

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

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

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

  • Ogni file nella directory spec/system deve seguire il formato \u003cdescrizione_del_test_di_sistema\u003e_spec.rb.

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

    RSpec.describe "Test di un tema o di un componente tema", system: true do
  it "visualizza il componente" do
    ...
  end
end

  • I metodi helper upload_theme e upload_theme_component sono disponibili e devono essere chiamati prima dell’esecuzione dei test. Esempio:

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

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

  it "visualizza il componente" do
    ...
  end
end

  • Le impostazioni di un tema possono essere modificate nel test di sistema chiamando il metodo update_setting sull’oggetto theme e quindi salvando il tema.

    Esempio:

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

  it "non visualizza il tema quando l'impostazione del tema `should_render` è falsa" do
    theme.update_setting(:should_render, false)
    theme.save!

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

  • Discourse utilizza la gem fabrication che ci consente di configurare facilmente i dati di test di cui abbiamo bisogno per ogni test. L’elenco completo dei fabricator disponibili nel core di Discourse può essere utilizzato anche nel test di sistema del tema.

    Esempio:

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

  it "visualizza il tema" do
    user = Fabricate(:user)
    category = Fabricate(:category)
    topic = Fabricate(:topic)
    topic_2 = Fabricate(:topic, title: "Questo è il topic numero 2")

    ...
  end
end

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

    Esempio:

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

  it "non visualizza il tema per un utente normale" do
    user = Fabricate(:user)
    sign_in(user)

    ...
  end

  it "visualizza il tema per un utente staff" 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 usare il concetto di PageObjects, che vedrai spesso fatto 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 del tema

I test di sistema del tema possono essere eseguiti utilizzando la rubygem 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à immediatamente.

Il comando discourse_theme rspec supporta anche l’esecuzione di una singola directory di spec, un file e un 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 del tema vengono eseguiti utilizzando Google Chrome in modalità headless. Questa è una modalità in cui il browser non visualizza nulla sullo schermo, consentendo di completare le esecuzioni dei test più velocemente. Tuttavia, è spesso utile essere in grado di 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 "Test di un tema", system: true do
  let!(:theme) do
    upload_theme
  end

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

Questo documento è controllato tramite 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