test: add system spec

common/common.scss

@@ -30,9 +30,16 @@
 
       &__heading {
         &__name {
+          display: flex;
+          align-items: baseline;
+
           .category-icon-widget-wrapper {
             display: inline-block;
           }
+
+          .d-icon, .category-icon {
+            margin-right: 0.25rem;
+          }
         }
       }
     }

javascripts/discourse/components/category-jumbotron.hbs

@@ -35,7 +35,7 @@
           </h2>
         </div>
         {{#if this.displayCategoryDescription}}
-          <div class="categort-jumbotron__grid__content__description">
+          <div class="category-jumbotron__grid__content__description">
             <div class="cooked">
               {{html-safe this.category.description}}
             </div>

spec/system/category_jumbotron_spec.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require_relative "page_objects/components/category_jumbotron"
+
+RSpec.describe "Category Jumbotron", type: :system do
+  let!(:theme) { upload_theme_component }
+  fab!(:category) { Fabricate(:category, description: "<p>this is some description</p>") }
+  fab!(:category_subcategory) do
+    Fabricate(:category, parent_category: category, description: "some description")
+  end
+  let(:category_jumbotron) { PageObjects::Components::Categoryjumbotron.new(category) }
+  let(:subcategory_jumbotron) { PageObjects::Components::Categoryjumbotron.new(category_subcategory) }
+
+  it "displays category jumbotron correctly" do
+    visit(category.url)
+
+    expect(category_jumbotron).to be_visible
+    expect(category_jumbotron).to have_title(category.name)
+    expect(category_jumbotron).to have_description("this is some description")
+  end
+
+  it "should not display category jumbotron on subcategories when `max_level` setting is 0" do
+    theme.update_setting(:max_level, 0)
+    theme.save!
+
+    visit(category_subcategory.url)
+
+    expect(subcategory_jumbotron).to be_not_visible
+  end
+end

spec/system/page_objects/components/category_jumbotron.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Components
+    class CategoryJumbotron < PageObjects::Components::Base
+      def initialize(category)
+        @category = category
+      end
+
+      def visible?
+        has_css?(category_banner_selector)
+      end
+
+      def not_visible?
+        has_no_css?(category_banner_selector)
+      end
+
+      def has_title?(title)
+        has_css?("#{category_banner_selector} .category-jumbotron__grid__content__heading__name", text: title)
+      end
+
+      def has_description?(description)
+        has_css?(
+          "#{category_banner_selector} .category-jumbotron__grid__content__description .cooked",
+          text: description,
+        )
+      end
+
+      def has_no_description?
+        has_no_css?("#{category_banner_selector} .category-jumbotron__grid__content__description")
+      end
+
+      private
+
+      def category_banner_selector
+        ".category-jumbotron-#{@category.slug}"
+      end
+    end
+  end
+end