mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 09:42:07 +08:00
FIX: Styleguide errors and add smoke test for component pages (#29747)
This commit is contained in:
Sérgio Saquetim
GitHub
parent
f70cc6215c
commit
91ce470fce
|
|
@ -1,5 +1,7 @@
|
|||
<StyleguideExample @title="<Chat::ThreadList::Item>">
|
||||
<Styleguide::Component>
|
||||
<Chat::ThreadList::Item @thread={{this.thread}} />
|
||||
{{#if this.thread}}
|
||||
<Chat::ThreadList::Item @thread={{this.thread}} />
|
||||
{{/if}}
|
||||
</Styleguide::Component>
|
||||
</StyleguideExample>
|
||||
|
|
@ -1,10 +1,19 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { getOwner } from "@ember/owner";
|
||||
import { next } from "@ember/runloop";
|
||||
import { service } from "@ember/service";
|
||||
import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
|
||||
|
||||
export default class ChatStyleguideChatThreadListItem extends Component {
|
||||
@service currentUser;
|
||||
@tracked thread;
|
||||
|
||||
thread = new ChatFabricators(getOwner(this)).thread();
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
|
||||
next(() => {
|
||||
this.thread = new ChatFabricators(getOwner(this)).thread();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@
|
|||
<StyleguideExample @title="Image">
|
||||
<Form as |form|>
|
||||
<form.Field @title="Image" @name="image" as |field|>
|
||||
<field.Image />
|
||||
<field.Image @type="avatar" />
|
||||
</form.Field>
|
||||
</Form>
|
||||
</StyleguideExample>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
<StyleguideExample @title="post-menu">
|
||||
<MountWidget @widget="post-menu" @args={{@dummy.transformedPost}} />
|
||||
<MountWidget
|
||||
@widget="post-menu"
|
||||
@args={{@dummy.transformedPost}}
|
||||
@model={{@dummy.postModel}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
<StyleguideExample @title="topic-map">
|
||||
<MountWidget @widget="topic-map" @args={{@dummy.transformedPost}} />
|
||||
<TopicMap
|
||||
@model={{@dummy.postModel}}
|
||||
@topicDetails={{@dummy.postModel.topic.details}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
|
|
@ -153,28 +153,116 @@ export function createData(store) {
|
|||
|
||||
<p>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.</p>`;
|
||||
|
||||
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: [
|
||||
|
|
|
|||
134
plugins/styleguide/spec/system/smoke_test_spec.rb
Normal file
134
plugins/styleguide/spec/system/smoke_test_spec.rb
Normal file
|
|
@ -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
|
||||
Loading…
Reference in New Issue
Block a user