End-to-End-Systemtests für Themes und Theme-Komponenten

Dokumentation Entwicklerhandbücher
,
1

Das Schreiben automatisierter Tests für Themes ist ein wichtiger Teil des Theme-Entwicklungsprozesses, der dazu beitragen kann, sicherzustellen, dass die durch ein Theme eingeführten Funktionen im Laufe der Zeit weiterhin gut mit den Kernfunktionen von Discourse funktionieren.

Derzeit unterstützt Discourse zwei Möglichkeiten, Regressionstests für Themes zu schreiben. Die erste folgt hauptsächlich dem Ansatz von EmberJS und beinhaltet nur das Testen des clientseitigen Codes. Die zweite Möglichkeit besteht darin, Rails Systemtests zu schreiben, mit denen Sie gleichzeitig sowohl den serverseitigen als auch den clientseitigen Code testen können. Dieses Dokument konzentriert sich auf das Schreiben von Rails Systemtests für Themes und ist das, worauf wir Theme-Autoren empfehlen, sich beim Schreiben von Tests für ihre Themes ebenfalls zu konzentrieren.

Rails Systemtests für Themes

Im Hintergrund verwendet Discourse die Test-Frameworks RSpec und Capybara, um Rails Systemtests auszuführen. Grundkenntnisse in RSpec und Capybara sind für den Einstieg erforderlich, und wir empfehlen, sich zuerst die folgenden Links anzusehen, bevor Sie beginnen:

Richtlinien und Tipps zum Schreiben von Theme-Systemtests

Dies sind einige Richtlinien, die beim Schreiben von Systemtests zu befolgen sind:

  • Systemtests sollen sich im Verzeichnis spec/system im Verzeichnis des Themes befinden.

  • Jede Datei im Verzeichnis spec/system soll dem Format \u003cBeschreibung_des_Systemtests\u003e_spec.rb folgen.

  • Der RSpec describe-Block der obersten Ebene muss die Metadaten system: true enthalten. Beispiel:

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

  • Die Hilfsmethoden upload_theme und upload_theme_component sind verfügbar und müssen aufgerufen werden, bevor die Tests ausgeführt werden. Beispiel:

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

  # oder `upload_theme_component`, wenn Ihr Theme eine Komponente ist
  #
  # let!(:theme_component) do
  #   upload_theme_component
  # end

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

  • Die Einstellungen eines Themes können im Systemtest geändert werden, indem die Methode update_setting für das theme-Objekt aufgerufen und das Theme anschließend gespeichert wird.

    Beispiel:

    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 verwendet das fabrication gem, mit dem wir ganz einfach die Testdaten einrichten können, die wir für jeden Test benötigen. Die vollständige Liste der Fabricators, die im Discourse-Kern verfügbar sind, kann auch im Systemtest des Themes verwendet werden.

    Beispiel:

    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

  • Verwenden Sie die Hilfsmethode sign_in, um Tests gegen verschiedene Benutzerprofile durchzuführen.

    Beispiel:

    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

  • Manchmal möchten Sie das Abfragen und Untersuchen von Teilen der Seite für Ihre Systemtests einfacher und wiederverwendbarer gestalten. Dazu können Sie das Konzept der PageObjects verwenden, was Sie oft im Kern sehen werden.

    Beispiel:

    # 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

    und Sie können es verwenden, indem Sie es mit dem integrierten require_relative von Ruby am Anfang Ihrer Systemtestdatei importieren.

    require_relative "page_objects/components/my_custom_component"

Ausführen von Theme-Systemtests

Theme-Systemtests können mit dem discourse_theme CLI rubygem ausgeführt werden und können mit diesen Anweisungen installiert werden.

Sobald das discourse_theme-CLI installiert ist, können Sie alle Systemtests in Ihrem Theme-Verzeichnis ausführen, indem Sie den folgenden Befehl ausführen:

discourse_theme rspec .

Beim ersten Ausführen des rspec-Befehls für ein neues Theme werden Sie gefragt, ob Sie die Systemtests mit einer lokalen Discourse-Entwicklungsumgebung oder einem Docker Container ausführen möchten, der die Entwicklungsumgebung für Sie konfiguriert hat. Sofern Sie kein erfahrener Discourse-Plugin- oder Theme-Entwickler sind, empfehlen wir die Auswahl von n und die Ausführung der Tests mit einem Docker-Container, da dort alles sofort funktioniert.

Der Befehl discourse_theme rspec unterstützt auch die Ausführung eines einzelnen Spec-Verzeichnisses, einer Datei und einer Datei mit Zeilennummern.

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

Headful-Modus

Standardmäßig werden die Theme-Systemtests mit Google Chrome im Headless-Modus ausgeführt. Dies ist ein Modus, in dem der Browser nichts auf dem Bildschirm rendert, wodurch Testläufe schneller abgeschlossen werden können. Es ist jedoch oft nützlich, sehen zu können, was der von Ihnen geschriebene Systemtest tut, indem Sie Google Chrome im Headful-Modus verwenden. Sie können diesen Modus aktivieren, indem Sie die Option --headful an den Befehl discourse_theme rspec übergeben.

discourse_theme rspec . --headful

Der obige Befehl führt die Systemtests im Headful-Modus aus, bei dem der Ablauf der Tests visuell verfolgt werden kann.

Sie können die Ausführung des Tests auch in Ihrem Testfall anhalten, indem Sie die Hilfsmethode pause_test verwenden, wodurch Sie den aktuellen Zustand der Anwendung im Browser überprüfen können.

Beispiel:

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

Dieses Dokument wird versioniert – Änderungen auf GitHub vorschlagen.

18 „Gefällt mir“
6

Mir ist aufgefallen, dass in den Tests für Komponenten normalerweise let!(:theme) anstelle von let!(:theme_component) verwendet wird. Zum Beispiel in diesem Test:

Der Leitfaden empfiehlt jedoch die Verwendung von let!(:theme_component) für Theme-Komponenten:

Gibt es einen Grund, warum ich theme_component verwenden sollte, wie in diesem Leitfaden beschrieben?

2 „Gefällt mir“