mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-02 21:27:59 +08:00
b671166ab1
Our current implementation of lightbox uses Magnific Popup, which is now deprecated and will only receive critical/security bug fixes. Magnific also relies on jQuery, which we would like to remove where possible throughout our codebase. After looking at various options, the general consensus was that PhotoSwipe was a close match to what we need. Regular image types that are supported with our current lightbox (jpg, png etc) will work with their existing cooked markup (no need to rebake posts). This PR also adds support for SVG images and markup from various theme components (ie. Discourse Mermaid). --------- Co-authored-by: Martin Brennan <martin@discourse.org>
71 lines
2.1 KiB
Ruby
71 lines
2.1 KiB
Ruby
# frozen_string_literal: true
|
||
|
||
describe "Lightbox | Photoswipe", type: :system do
|
||
fab!(:topic)
|
||
fab!(:current_user, :admin)
|
||
fab!(:upload_1) { Fabricate(:image_upload, width: 2400, height: 3600) }
|
||
fab!(:post) { Fabricate(:post, topic: topic, raw: "") }
|
||
|
||
let(:topic_page) { PageObjects::Pages::Topic.new }
|
||
let(:lightbox) { PageObjects::Components::PhotoSwipe.new }
|
||
let(:cpp) { CookedPostProcessor.new(post, disable_dominant_color: true) }
|
||
|
||
before do
|
||
SiteSetting.experimental_lightbox = true
|
||
SiteSetting.create_thumbnails = true
|
||
|
||
sign_in(current_user)
|
||
end
|
||
|
||
context "with single image" do
|
||
before do
|
||
cpp.post_process
|
||
post.update(cooked: cpp.html)
|
||
end
|
||
|
||
it "has the correct lightbox elements" do
|
||
topic_page.visit_topic(topic)
|
||
|
||
find("#post_1 a.lightbox").click
|
||
|
||
expect(lightbox).to be_visible
|
||
|
||
expect(lightbox).to have_no_counter
|
||
expect(lightbox).to have_caption_title("first image")
|
||
expect(lightbox).to have_caption_details("2400×3600 1.21 KB")
|
||
|
||
expect(lightbox).to have_no_next_button
|
||
expect(lightbox).to have_no_prev_button
|
||
expect(lightbox).to have_download_button
|
||
expect(lightbox).to have_original_image_button
|
||
end
|
||
end
|
||
|
||
context "with multiple images" do
|
||
fab!(:upload_2) { Fabricate(:large_image_upload, width: 2000, height: 1000) }
|
||
|
||
before do
|
||
post.update(raw: " ")
|
||
|
||
cpp.post_process
|
||
post.update(cooked: cpp.html)
|
||
end
|
||
|
||
it "has the correct lightbox elements" do
|
||
topic_page.visit_topic(topic)
|
||
|
||
find("#post_1 .lightbox-wrapper:nth-of-type(2) .lightbox").click
|
||
|
||
expect(lightbox).to be_visible
|
||
|
||
expect(lightbox).to have_counter("2 / 2")
|
||
expect(lightbox).to have_caption_title("second image")
|
||
expect(lightbox).to have_caption_details("2000×1000 1.21 KB")
|
||
|
||
expect(lightbox).to have_next_button
|
||
expect(lightbox).to have_prev_button
|
||
expect(lightbox).to have_download_button
|
||
expect(lightbox).to have_original_image_button
|
||
end
|
||
end
|
||
end
|
