Case everti equidem ius ea, ubique veritus vim id. Eros omnium conclusionemque qui te, usu error alienum imperdiet ut, ex ius meis adipisci. Libris reprehendunt eos ex, mea at nisl suavitate. Altera virtute democritum pro cu, melius latine in ius.
`; - let transformedPost = { + const transformedPost = { id: 1234, - cooked, - created_at: moment().subtract(3, "days"), - user_id: user.id, + topic, + name: user.name, username: user.username, avatar_template: user.avatar_template, - showLike: true, - canToggleLike: true, - canFlag: true, - canEdit: false, - canCreatePost: true, - canBookmark: true, - canManage: true, - canDelete: true, + created_at: "2024-11-13T21:12:37.835Z", + cooked, post_number: 1, - topic: createTopic(), + post_type: 1, + updated_at: moment().subtract(2, "days"), + reply_count: 0, + reply_to_post_number: null, + quote_count: 0, + incoming_link_count: 0, + reads: 1, + readers_count: 0, + score: 0, + yours: false, + topic_id: topic.id, + topic_slug: topic.slug, + display_username: user.name, + primary_group_name: null, + flair_name: null, + flair_url: null, + flair_bg_color: null, + flair_color: null, + flair_group_id: null, + version: 1, + can_edit: true, + can_delete: true, + can_recover: true, + can_see_hidden_post: true, + can_wiki: true, + read: true, + user_title: "", + bookmarked: false, + actions_summary: [ + { + id: 2, + count: 1, + acted: true, + can_undo: true, + }, + { + id: 6, + can_act: true, + }, + { + id: 3, + can_act: true, + }, + { + id: 4, + can_act: true, + }, + { + id: 8, + can_act: true, + }, + { + id: 10, + can_act: true, + }, + { + id: 7, + can_act: true, + }, + ], + moderator: false, + admin: true, + staff: true, + user_id: user.id, + hidden: false, + trust_level: user.trust_level, + deleted_at: null, + user_deleted: false, + edit_reason: null, + can_view_edit_history: true, + wiki: false, + activity_pub_enabled: false, + category_expert_approved_group: null, + needs_category_expert_approval: null, + can_manage_category_expert_posts: false, + reactions: [ + { + id: "heart", + type: "emoji", + count: 1, + }, + ], + current_user_reaction: { + id: "heart", + type: "emoji", + can_undo: true, + }, + reaction_users_count: 1, + current_user_used_main_reaction: true, + shared_edits_enabled: null, + can_accept_answer: false, + can_unaccept_answer: false, + accepted_answer: false, + topic_accepted_answer: false, + can_translate: false, }; const postModel = store.createRecord("post", { - ...transformedPost, + transformedPost, }); + postModel.set("topic", store.createRecord("topic", transformedPost.topic)); _data = { options: [ diff --git a/plugins/styleguide/spec/system/smoke_test_spec.rb b/plugins/styleguide/spec/system/smoke_test_spec.rb new file mode 100644 index 00000000000..6c14c89de13 --- /dev/null +++ b/plugins/styleguide/spec/system/smoke_test_spec.rb @@ -0,0 +1,134 @@ +# frozen_string_literal: true + +require "rails_helper" + +RSpec.describe "Styleguide Smoke Test", type: :system do + fab!(:admin) + + # keep this hash updated when adding, removing or renaming components + sections = { + "SYNTAX" => [{ href: "/syntax/bem", title: "BEM" }], + "ATOMS" => [ + { href: "/atoms/typography", title: "Typography" }, + { href: "/atoms/font-scale", title: "Font System" }, + { href: "/atoms/buttons", title: "Buttons" }, + { href: "/atoms/colors", title: "Colors" }, + { href: "/atoms/icons", title: "Icons" }, + { href: "/atoms/forms", title: "Forms" }, + { href: "/atoms/spinners", title: "Spinners" }, + { href: "/atoms/date-time-inputs", title: "Date/Time inputs" }, + { href: "/atoms/dropdowns", title: "Dropdowns" }, + { href: "/atoms/topic-link", title: "Topic Link" }, + { href: "/atoms/topic-statuses", title: "Topic Statuses" }, + ], + "MOLECULES" => [ + { href: "/molecules/bread-crumbs", title: "Bread Crumbs" }, + { href: "/molecules/categories", title: "Categories" }, + { href: "/molecules/char-counter", title: "Character Counter" }, + { href: "/molecules/empty-state", title: "Empty State" }, + { href: "/molecules/footer-message", title: "Footer Message" }, + { href: "/molecules/menus", title: "Menus" }, + { href: "/molecules/navigation-bar", title: "Navigation Bar" }, + { href: "/molecules/navigation-stacked", title: "Navigation Stacked" }, + { href: "/molecules/post-menu", title: "Post Menu" }, + { href: "/molecules/signup-cta", title: "Signup CTA" }, + { href: "/molecules/toasts", title: "Toasts" }, + { href: "/molecules/tooltips", title: "Tooltips" }, + { href: "/molecules/topic-list-item", title: "Topic List Item" }, + { href: "/molecules/topic-notifications", title: "Topic Notifications" }, + { href: "/molecules/topic-timer-info", title: "Topic Timers" }, + ], + "ORGANISMS" => [ + { href: "/organisms/post", title: "Post" }, + { href: "/organisms/topic-map", title: "Topic Map" }, + { href: "/organisms/topic-footer-buttons", title: "Topic Footer Buttons" }, + { href: "/organisms/topic-list", title: "Topic List" }, + { href: "/organisms/basic-topic-list", title: "Basic Topic List" }, + { href: "/organisms/categories-list", title: "Categories List" }, + { href: "/organisms/chat", title: "Chat" }, + { href: "/organisms/modal", title: "Modal" }, + { href: "/organisms/navigation", title: "Navigation" }, + { href: "/organisms/site-header", title: "Site Header" }, + { href: "/organisms/suggested-topics", title: "Suggested Topics" }, + { href: "/organisms/user-about", title: "User About Box" }, + ], + } + + before do + SiteSetting.styleguide_enabled = true + sign_in(admin) + end + + # this test will check if the index page is rendering correctly and also ensures that all component pages are + # declared in the sections hash above + it "renders the index page correctly and collect information about the available page" do + visit "/styleguide" + expect(page).to have_css(".styleguide-contents h1.section-title", text: "Styleguide") + + existing_sections = {} + page + .all(".styleguide-menu > ul") + .each do |section_node| + section = section_node.find(".styleguide-heading").text.strip + + existing_sections[section] ||= [] + items = existing_sections[section] + + anchors = section_node.all("li a") + anchors.each { |anchor| items << { title: anchor.text.strip, href: anchor[:href] } } + end + + expect(existing_sections.keys).to match_array(sections.keys) + + sections.each do |section, items| + items.each do |item| + existing_items = existing_sections[section] + existing_item = existing_items.find { |i| i[:title] == item[:title] } + + expect(existing_item).not_to be_nil, + "Item #{item[:title]} not declared in section #{section}" + expect(existing_item[:href]).to end_with(item[:href]) + + expect(existing_items.size).to eq(items.size), + "Section #{section} has a different number of items declared then what was found in the index page" + end + end + end + + # uses the sections hash to generate a test for each page and check if it renders correctly + context "when testing the available pages" do + before do + SiteSetting.styleguide_enabled = true + sign_in(admin) + end + + sections.each do |section, items| + items.each do |item| + it "renders the #{section}: #{item[:title]} page correctly" do + visit "/styleguide/#{item[:href]}" + + errors = + page + .driver + .browser + .logs + .get(:browser) + .select { |log| log.level == "SEVERE" } + .reject do |error| + ["Failed to load resource", "Manifest", "PresenceChannelNotFound"].any? do |msg| + error.message.include?(msg) + end + end + + if errors.present? + errors.each do |error| + expect(error.message).to be_nil, "smoke test failed with error: #{error.message}" + end + end + + expect(page).to have_css(".styleguide-contents h1.section-title", text: item[:title]) + end + end + end + end +end