add system spec for testing visible columns - chart sync

app/assets/javascripts/visibility.js

@@ -40,7 +40,7 @@ $(document).ready(function() {
  }
  }, 1000)
 
- $(".observation-checkbox").on('change', function(event) {
+ $(".visible-column__checkbox").on('change', function(event) {
  const elem = event.target;
  const column = $(`.col-${elem.id}`);
  column.toggleClass('hide', !elem.checked);
@@ -49,10 +49,10 @@ $(document).ready(function() {
  });
 
  function updateColumnVisiblity() {
- if ($('.observation-attributes').length > 0) {
- const saveToLocalStorage = $('.observation-attributes').data('saveToLocalStorage');
+ if ($('.visible-columns').length > 0) {
+ const saveToLocalStorage = $('.visible-columns').data('saveToLocalStorage');
 
- $('.observation-attributes').children().each((_idx, elem) => {
+ $('.visible-columns').children().each((_idx, elem) => {
  const id = elem.id.split('-')[1];
  if (saveToLocalStorage) {
  const storage = localStorage.getItem(id);
@@ -72,5 +72,18 @@ $(document).ready(function() {
  }
  }
 
+ function getCursorPosition(canvas, event) {
+ const rect = canvas.getBoundingClientRect()
+ const x = event.clientX - rect.left
+ const y = event.clientY - rect.top
+ console.log("x: " + x + " y: " + y)
+ console.log("clientX: " + event.clientX + " clientY: " + event.clientY);
+}
+
+const canvas = document.querySelector('#chart-1')
+canvas.addEventListener('mousedown', function(e) {
+ getCursorPosition(canvas, e)
+})
+
  updateColumnVisiblity();
 });

app/assets/stylesheets/active_admin.scss

@@ -129,7 +129,7 @@ body.active_admin {
  }
  }
 
- .observations-checkbox {
+ .visible-column {
  display: inline-block;
  margin-right: 15px;
  input {

app/views/active_admin/resource/_fields.html.erb

@@ -1,13 +1,13 @@
 <% save_to_localstorage ||= true %>
-<div class="observation-attributes" data-save-to-localstorage="<%= save_to_localstorage %>">
+<div class="visible-columns" data-save-to-localstorage="<%= save_to_localstorage %>">
  <% attributes.each do |column, name, checked| %>
  <%
  column_id = column.gsub('_&_', '_')
  name = column if name.blank?
  %>
- <div class="observations-checkbox" id="attribute-<%= column_id %>">
+ <div class="visible-column" id="attribute-<%= column_id %>">
  <label>
- <input type="checkbox" class="observation-checkbox" id="<%= column_id %>" <%= checked == :checked ? 'checked' : '' %>>
+ <input type="checkbox" class="visible-column__checkbox" id="<%= column_id %>" <%= checked == :checked ? 'checked' : '' %>>
  <%=name %>
  </label>
  </div>

spec/support/system/cuprite_helpers.rb

@@ -0,0 +1,13 @@
+module CupriteHelpers
+ # Drop #pause anywhere in a test to stop the execution.
+ # Useful when you want to checkout the contents of a web page in the middle of a test
+ # running in a headful mode.
+ def pause
+ page.driver.pause
+ end
+
+ # Drop #debug anywhere in a test to open a Chrome inspector and pause the execution
+ def debug(*args)
+ page.driver.debug(*args)
+ end
+end

spec/system/visible_colums_charts_spec.rb

@@ -0,0 +1,72 @@
+require "system_helper"
+
+RSpec.describe "Admin: Visible Columns and Charts", type: :system do
+ let(:admin) { create(:admin) }
+
+ before do
+ country1 = create(:country, name: "Poland")
+ country2 = create(:country, name: "Germany")
+ operator1 = create(:operator, fa_id: "FA1", country: country1)
+ operator2 = create(:operator, fa_id: "FA2", country: country2)
+
+ travel_to 2.days.ago do
+ create(:operator_document_country, operator: operator1, force_status: "doc_valid")
+ create(:operator_document_country, operator: operator1)
+ create(:operator_document_country, operator: operator2, force_status: "doc_valid")
+ create(:operator_document_country, operator: operator2)
+ end
+
+ travel_to 1.day.ago do
+ create(:operator_document_country, operator: operator1, force_status: "doc_valid")
+ end
+
+ [2.days.ago, Date.yesterday, Date.today].each do |date|
+ # nil represents all countries
+ [country1.id, country2.id, nil].each do |country_id|
+ OperatorDocumentStatistic.generate_for_country_and_day(country_id, date)
+ end
+ end
+ end
+
+ before do
+ sign_in admin
+ visit "/admin/producer_documents_dashboards"
+ end
+
+ it "should sync columns and chart visibility" do
+ sleep 1 # wait for chart to be rendered
+ # toggle valid visible column and see if column disappear/appear in table and on the chart
+ # expect input checkbox to be checked
+ expect(page).to have_field("valid", checked: true)
+ expect(page).to have_selector("th.col-valid", visible: true)
+ expect(get_legend_item("Valid")["hidden"]).to eq(false)
+ page.uncheck("valid")
+ expect(page).to have_field("valid", checked: false)
+ expect(page).to have_selector("th.col-valid", visible: false)
+ expect(get_legend_item("Valid")["hidden"]).to eq(true)
+ # toggle valid in chart legend and see if column disappear/appear in table and on the chart and checkbox is changed as well
+ legend_item_valid_hitbox = get_legend_item_hitbox("Valid")
+ chart_x = page.evaluate_script("document.getElementById('chart-1').getBoundingClientRect().x")
+ chart_y = page.evaluate_script("document.getElementById('chart-1').getBoundingClientRect().y")
+ legend_item_valid_x = chart_x + legend_item_valid_hitbox["left"] + 10
+ legend_item_valid_y = chart_y + legend_item_valid_hitbox["top"] + 3
+ page.driver.click(legend_item_valid_x, legend_item_valid_y)
+ expect(page).to have_field("valid", checked: true)
+ expect(page).to have_selector("th.col-valid", visible: true)
+ expect(get_legend_item("Valid")["hidden"]).to eq(false)
+ # once there was something wrong after clicking on the legend item, so test clicking on checkbox again
+ page.uncheck("valid")
+ expect(page).to have_field("valid", checked: false)
+ expect(page).to have_selector("th.col-valid", visible: false)
+ expect(get_legend_item("Valid")["hidden"]).to eq(true)
+ end
+
+ def get_legend_item(name)
+ page.evaluate_script("Chartkick.charts['chart-1'].chart.legend.legendItems.find(x => x.text === '#{name}')")
+ end
+
+ def get_legend_item_hitbox(name)
+ legend_item = get_legend_item(name)
+ page.evaluate_script("Chartkick.charts['chart-1'].chart.legend.legendHitBoxes[#{legend_item["datasetIndex"]}]")
+ end
+end

spec/system_helper.rb

@@ -4,19 +4,20 @@
 Capybara.default_max_wait_time = 2
 Capybara.default_normalize_ws = true
 
+cuprite_options = {
+ window_size: [1200, 800],
+ browser_options: {
+ "no-sandbox": nil
+ },
+ timeout: 120,
+ # Increase Chrome startup wait time (required for stable CI builds)
+ process_timeout: 120,
+ inspector: ENV["INSPECTOR"],
+ headless: !ENV["HEADLESS"].in?(%w[n 0 no false])
+}
+
 Capybara.register_driver(:cuprite) do |app|
- Capybara::Cuprite::Driver.new(
- app,
- window_size: [1200, 800],
- browser_options: {
- "no-sandbox": nil
- },
- timeout: 120,
- # Increase Chrome startup wait time (required for stable CI builds)
- process_timeout: 120,
- inspector: true,
- headless: ENV["HEADLESS"] != "false"
- )
+ Capybara::Cuprite::Driver.new(app, **cuprite_options)
 end
 
 # Configure Capybara to use :cuprite driver by default
@@ -25,14 +26,17 @@
 RSpec.configure do |config|
  config.include Devise::Test::IntegrationHelpers, type: :system
  config.include Select2Helper, type: :system
+ config.include CupriteHelpers, type: :system
  config.around(:each, type: :system) do |ex|
  was_host = Rails.application.default_url_options[:host]
  Rails.application.default_url_options[:host] = Capybara.server_host
  ex.run
  Rails.application.default_url_options[:host] = was_host
  end
 
- config.prepend_before(:each, type: :system) do
- driven_by Capybara.javascript_driver
+ config.before(:each, type: :system) do
+ # not sure why but options needs to be passed here again starting in Rails 7
+ # otherwise headless or inspector options are not respected
+ driven_by :cuprite, screen_size: [1200, 800], options: cuprite_options
  end
 end