discourse/spec/system/topic_page_spec.rb
Alan Guo Xiang Tan 55b05c921b
DEV: Add client settled checks for system tests (#35230)
This change seeks to improve the reliability of our system tests by
resolving the lack of consistency in the state of the client side
application between steps in a system test. This is achieved by patching
various action methods in `Capybara::Playwright::Node` and
`Capybara::Playwright::Browser` so that the methods execute an async
JavaScript function on the client side that waits for the client side
application to reach a settled state. A settled state is currently
defined as:

1. No inflight ajax requests. (_messageBus and presence requests are
excluded_)
2. 2 event cycles of the Javascript event loop has happened for for all
"click", "input", "mousedown", "keydown", "focusin", "focusout",
"touchstart", "change", "resize", "scroll" DOM events that fired.

For debugging purposes, a `--debug-client-settled` CLI flag has been
added to `bin/rspec`. When used, detailed debugging information will be
printed to the browser's console as well as to `stdout` of the
`bin/rspec` process.

This change was inspired by
https://evilmartians.com/chronicles/flaky-tests-be-gone-long-lasting-relief-chronic-ci-retry-irritation
and the https://github.com/makandra/capybara-lockstep rubygem.
2025-10-10 11:03:18 +08:00

128 lines
3.7 KiB
Ruby

# frozen_string_literal: true
describe "Topic page", type: :system do
fab!(:topic)
fab!(:admin)
before { Fabricate(:post, topic: topic, cooked: <<~HTML) }
<h2 dir="ltr" id="toc-h2-testing" data-d-toc="toc-h2-testing" class="d-toc-post-heading">
<a name="toc-h2-testing" class="anchor" href="#toc-h2-testing">x</a>
Testing
</h2>
<p id="test-last-cooked-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor.</p>
HTML
it "allows TOC anchor navigation" do
visit("/t/#{topic.slug}/#{topic.id}")
find("#toc-h2-testing .anchor", visible: :all).click
expect(current_url).to match("/t/#{topic.slug}/#{topic.id}#toc-h2-testing")
end
context "with a subfolder setup" do
before { set_subfolder "/forum" }
it "allows TOC anchor navigation" do
visit("/forum/t/#{topic.slug}/#{topic.id}")
find("#toc-h2-testing .anchor", visible: :all).click
expect(current_url).to match("/forum/t/#{topic.slug}/#{topic.id}#toc-h2-testing")
end
end
context "with a post containing a code block" do
before { Fabricate(:post, topic: topic, raw: <<~RAW) }
this a code block
```
echo "hello world"
```
RAW
it "includes the copy button" do
visit("/t/#{topic.slug}/#{topic.id}")
expect(".codeblock-button-wrapper").to be_present
end
end
context "with a gap" do
before do
post2 = Fabricate(:post, topic: topic, cooked: "post2")
post3 = Fabricate(:post, topic: topic, cooked: "post3")
post4 = Fabricate(:post, topic: topic, cooked: "post4")
PostDestroyer.new(Discourse.system_user, post2, context: "Automated testing").destroy
PostDestroyer.new(Discourse.system_user, post3, context: "Automated testing").destroy
sign_in admin
end
it "displays the gap to admins, and allows them to expand it" do
visit "/t/#{topic.slug}/#{topic.id}"
expect(page).to have_css(".topic-post", count: 2)
find(".post-stream .gap").click()
expect(page).to have_css(".topic-post", count: 4)
end
end
it "supports shift+a kbd shortcut to toggle admin menu" do
sign_in admin
visit("/t/#{topic.slug}/#{topic.id}")
expect(".toggle-admin-menu").to be_present
send_keys([:shift, "a"])
expect(page).to have_css(".topic-admin-menu-content")
send_keys([:shift, "a"])
expect(page).to have_no_css(".topic-admin-menu-content")
end
context "with End keyboard shortcut" do
fab!(:posts) { Fabricate.times(25, :post, topic: topic) }
it "loads last post" do
visit "/t/#{topic.slug}/#{topic.id}/1"
send_keys(:end)
expect(find("#post_#{topic.highest_post_number}")).to be_visible
end
end
context "when triple clicking to select a paragraph" do
it "select the last paragraph" do
visit "/t/#{topic.slug}/#{topic.id}/1"
paragraph = find("#test-last-cooked-paragraph")
page.driver.with_playwright_page do |pw_page|
paragraph.hover
rect = paragraph.native.bounding_box
x = rect["x"] + rect["width"] / 2
y = rect["y"] + rect["height"] / 2
pw_page.mouse.click(x, y, clickCount: 3)
end
# get the selected text in the browser
select_content = page.evaluate_script("window.getSelection().toString()")
# the browser is returning control characters among the whiter space in the end of the text
# this regex will work as a .rstrip on steroids and remove them
select_content.gsub!(/[\s\p{Cf}]+$/, "")
# compare the selected text with the last paragraph
expect(select_content).to eq(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor.",
)
end
end
end