|
| 1 | +RSpec.describe "Distribution line item layout", type: :system do |
| 2 | + let(:organization) { create(:organization) } |
| 3 | + let(:user) { create(:user, organization:) } |
| 4 | + let(:partner) { create(:partner, organization:, name: "Layout Partner") } |
| 5 | + let(:storage_location) { create(:storage_location, organization:, name: "Layout Storage") } |
| 6 | + let(:item) { create(:item, organization:, name: "Layout Diapers") } |
| 7 | + |
| 8 | + before do |
| 9 | + sign_in(user) |
| 10 | + TestInventory.create_inventory(organization, storage_location.id => {item.id => 100}) |
| 11 | + end |
| 12 | + |
| 13 | + shared_examples "responsive line items" do |
| 14 | + it "keeps each label with its field at narrow and desktop widths" do |
| 15 | + select "Layout Storage", from: "From storage location" |
| 16 | + expect(page).to have_css("#__add_line_item:not(.disabled)") |
| 17 | + [375, 600, 1200].each do |width| |
| 18 | + current_window.resize_to(width, 900) |
| 19 | + expect(page).to have_css(".li-name .select2-container") |
| 20 | + |
| 21 | + layout = page.evaluate_script(<<~JS) |
| 22 | + (() => { |
| 23 | + const row = document.querySelector('.distribution-line-item-inputs'); |
| 24 | + const bounds = element => element.getBoundingClientRect(); |
| 25 | + const fields = [...row.children]; |
| 26 | + return { |
| 27 | + labelsFit: fields.every(field => { |
| 28 | + const label = field.querySelector('label, .form-label'); |
| 29 | + const text = document.createRange(); |
| 30 | + text.selectNodeContents(label); |
| 31 | + return bounds(label).height < parseFloat(getComputedStyle(label).fontSize) * 2 && |
| 32 | + label.scrollWidth <= field.clientWidth + 1 && |
| 33 | + bounds(text).left >= bounds(field).left - 1 && |
| 34 | + bounds(text).right <= bounds(field).right + 1; |
| 35 | + }), |
| 36 | + gridFitsViewport: bounds(row).left >= 0 && |
| 37 | + bounds(row).right <= document.documentElement.clientWidth + 1, |
| 38 | + fieldsFit: fields.every(field => bounds(field).left >= bounds(row).left && |
| 39 | + bounds(field).right <= bounds(row).right + 1), |
| 40 | + labelsAlign: fields.every(field => { |
| 41 | + const label = field.querySelector('label, .form-label'); |
| 42 | + const value = field.querySelector('.select2-container, input, .distribution-requested-value'); |
| 43 | + return Math.abs(bounds(label).left - bounds(value).left) <= 1 && |
| 44 | + bounds(label).bottom <= bounds(value).top + 1; |
| 45 | + }), |
| 46 | + dropdownFits: bounds(row.querySelector('.select2-container')).width <= |
| 47 | + bounds(row.querySelector('.li-name')).width + 1 |
| 48 | + }; |
| 49 | + })() |
| 50 | + JS |
| 51 | + |
| 52 | + expect(layout).to eq("labelsFit" => true, "gridFitsViewport" => true, "fieldsFit" => true, "labelsAlign" => true, "dropdownFits" => true) |
| 53 | + end |
| 54 | + |
| 55 | + current_window.resize_to(375, 900) |
| 56 | + click_on "Add Another Item" |
| 57 | + expect(page).to have_css(".distribution-line-item-inputs", count: 2) |
| 58 | + within all(".distribution-line-item-inputs").last do |
| 59 | + expect(page).to have_field("Item") |
| 60 | + fill_in "Quantity - Total Units", with: "5" |
| 61 | + expect(page).to have_field("Quantity - Total Units", with: "5") |
| 62 | + find(".select2-selection").click |
| 63 | + end |
| 64 | + find(".select2-results__option", text: "Layout Diapers").click |
| 65 | + within all(".line_item_section").last do |
| 66 | + expect(page).to have_content("Layout Diapers") |
| 67 | + click_on "Remove" |
| 68 | + end |
| 69 | + expect(page).to have_css(".distribution-line-item-inputs", count: 1) |
| 70 | + end |
| 71 | + end |
| 72 | + |
| 73 | + context "on a regular distribution" do |
| 74 | + before { visit new_distribution_path } |
| 75 | + |
| 76 | + include_examples "responsive line items" |
| 77 | + end |
| 78 | + |
| 79 | + context "when fulfilling a request" do |
| 80 | + before do |
| 81 | + request = create(:request, organization:, partner:, request_items: [{"item_id" => item.id, "quantity" => 10}]) |
| 82 | + create(:item_request, request:, item:, quantity: 10) |
| 83 | + visit request_path(request) |
| 84 | + click_on "Fulfill request" |
| 85 | + end |
| 86 | + |
| 87 | + include_examples "responsive line items" |
| 88 | + end |
| 89 | +end |
0 commit comments