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, dass die durch ein Theme eingeführten Funktionen im Laufe der Zeit 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, die es Ihnen ermöglichen, sowohl den serverseitigen als auch den clientseitigen Code gleichzeitig zu testen. 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. Grundlegende Kenntnisse über RSpec und Capybara sind erforderlich, um loszulegen, und wir empfehlen, die folgenden Links zuerst durchzulesen, bevor Sie beginnen:

Richtlinien und Tipps zum Schreiben von Theme-Systemtests

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

  • Systemtests werden im Verzeichnis spec/system im Verzeichnis des Themes erwartet.

  • Jede Datei im Verzeichnis spec/system muss dem Format _spec.rb folgen.

  • Der RSpec describe-Block auf oberster 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 dann gespeichert wird.

    Beispiel:

    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 verwendet das fabrication gem, das es uns ermöglicht, die Testdaten, die wir für jeden Test benötigen, einfach einzurichten. 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 verschiedene Benutzerprofile zu testen.

    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 Inspizieren von Teilen der Seite für Ihre Systemtests einfacher und wiederverwendbarer gestalten. Dazu können Sie das Konzept von PageObjects verwenden, das Sie oft im Kern sehen.

    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 dann verwenden, indem Sie es mit Ruby’s integriertem require_relative 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 dieser Anleitung installiert werden.

Sobald die 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 Entwickler von Discourse-Plugins oder -Themes sind, empfehlen wir, n auszuwählen und die Tests mit einem Docker-Container auszuführen, da dann alles sofort funktioniert.

Der Befehl discourse_theme rspec unterstützt auch die Ausführung eines einzelnen Spec-Verzeichnisses, einer einzelnen 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 die Testausführung schneller abgeschlossen werden kann. 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, in dem der Ablauf der Tests visuell verfolgt werden kann.

Sie können die Ausführung des Tests in Ihrem Testfall auch mit der Hilfsmethode pause_test anhalten, sodass Sie den aktuellen Zustand der Anwendung im Browser untersuchen 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 ist versionskontrolliert – schlagen Sie Änderungen auf github vor.

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“