discourse/spec/system/page_objects/components/select_kit.rb

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

109 lines
2.6 KiB
Ruby
Raw Normal View History

# frozen_string_literal: true
module PageObjects
module Components
class SelectKit < PageObjects::Components::Base
attr_reader :context
def initialize(context)
@context = context
end
def component
DEV: form-kit This PR introduces FormKit, a component-based form library designed to simplify form creation and management. This library provides a single `Form` component, various field components, controls, validation mechanisms, and customization options. Additionally, it includes helpers to facilitate testing and writing specifications for forms. 1. **Form Component**: - The main component that encapsulates form logic and structure. - Yields various utilities like `Field`, `Submit`, `Alert`, etc. **Example Usage**: ```gjs import Form from "discourse/form"; <template> <Form as |form|> <form.Field @name="username" @title="Username" @validation="required" as |field| > <field.Input /> </form.Field> <form.Field @name="age" @title="Age" as |field|> <field.Input @type="number" /> </form.Field> <form.Submit /> </Form> </template> ``` 2. **Validation**: - Built-in validation rules such as `required`, `number`, `length`, and `url`. - Custom validation callbacks for more complex validation logic. **Example Usage**: ```javascript validateUsername(name, value, data, { addError }) { if (data.bar / 2 === value) { addError(name, "That's not how maths work."); } } ``` ```hbs <form.Field @name="username" @validate={{this.validateUsername}} /> ``` 3. **Customization**: - Plugin outlets for extending form functionality. - Styling capabilities through propagated attributes. - Custom controls with properties provided by `form` and `field`. **Example Usage**: ```hbs <Form class="my-form" as |form|> <form.Field class="my-field" as |field|> <MyCustomControl id={{field.id}} @onChange={{field.set}} /> </form.Field> </Form> ``` 4. **Helpers for Testing**: - Test assertions for form and field validation. **Example usage**: ```javascript assert.form().hasErrors("the form shows errors"); assert.form().field("foo").hasValue("bar", "user has set the value"); ``` - Helper for interacting with he form **Example usage**: ```javascript await formKit().field("foo").fillIn("bar"); ``` 5. **Page Object for System Specs**: - Page objects for interacting with forms in system specs. - Methods for submitting forms, checking alerts, and interacting with fields. **Example Usage**: ```ruby form = PageObjects::Components::FormKit.new(".my-form") form.submit expect(form).to have_an_alert("message") ``` **Field Interactions**: ```ruby field = form.field("foo") expect(field).to have_value("bar") field.fill_in("bar") ``` 6. **Collections handling**: - A specific component to handle array of objects **Example Usage**: ```gjs <Form @data={{hash foo=(array (hash bar=1) (hash bar=2))}} as |form|> <form.Collection @name="foo" as |collection|> <collection.Field @name="bar" @title="Bar" as |field|> <field.Input /> </collection.Field> </form.Collection> </Form> ```
2024-07-17 17:59:35 +08:00
if @context.is_a?(Capybara::Node::Element)
@context
else
find(@context)
end
end
def visible?
has_css?(@context)
end
def hidden?
has_no_css?(@context)
end
def expanded_component
expand_if_needed
find(@context + ".is-expanded", wait: 5)
end
def collapsed_component
find(@context + ":not(.is-expanded)")
end
def is_expanded?
has_css?(context + ".is-expanded")
end
def is_collapsed?
has_css?(context + ":not(.is-expanded)", wait: 0)
end
def is_not_disabled?
has_css?(@context + ":not(.disabled)", wait: 0)
end
DEV: form-kit This PR introduces FormKit, a component-based form library designed to simplify form creation and management. This library provides a single `Form` component, various field components, controls, validation mechanisms, and customization options. Additionally, it includes helpers to facilitate testing and writing specifications for forms. 1. **Form Component**: - The main component that encapsulates form logic and structure. - Yields various utilities like `Field`, `Submit`, `Alert`, etc. **Example Usage**: ```gjs import Form from "discourse/form"; <template> <Form as |form|> <form.Field @name="username" @title="Username" @validation="required" as |field| > <field.Input /> </form.Field> <form.Field @name="age" @title="Age" as |field|> <field.Input @type="number" /> </form.Field> <form.Submit /> </Form> </template> ``` 2. **Validation**: - Built-in validation rules such as `required`, `number`, `length`, and `url`. - Custom validation callbacks for more complex validation logic. **Example Usage**: ```javascript validateUsername(name, value, data, { addError }) { if (data.bar / 2 === value) { addError(name, "That's not how maths work."); } } ``` ```hbs <form.Field @name="username" @validate={{this.validateUsername}} /> ``` 3. **Customization**: - Plugin outlets for extending form functionality. - Styling capabilities through propagated attributes. - Custom controls with properties provided by `form` and `field`. **Example Usage**: ```hbs <Form class="my-form" as |form|> <form.Field class="my-field" as |field|> <MyCustomControl id={{field.id}} @onChange={{field.set}} /> </form.Field> </Form> ``` 4. **Helpers for Testing**: - Test assertions for form and field validation. **Example usage**: ```javascript assert.form().hasErrors("the form shows errors"); assert.form().field("foo").hasValue("bar", "user has set the value"); ``` - Helper for interacting with he form **Example usage**: ```javascript await formKit().field("foo").fillIn("bar"); ``` 5. **Page Object for System Specs**: - Page objects for interacting with forms in system specs. - Methods for submitting forms, checking alerts, and interacting with fields. **Example Usage**: ```ruby form = PageObjects::Components::FormKit.new(".my-form") form.submit expect(form).to have_an_alert("message") ``` **Field Interactions**: ```ruby field = form.field("foo") expect(field).to have_value("bar") field.fill_in("bar") ``` 6. **Collections handling**: - A specific component to handle array of objects **Example Usage**: ```gjs <Form @data={{hash foo=(array (hash bar=1) (hash bar=2))}} as |form|> <form.Collection @name="foo" as |collection|> <collection.Field @name="bar" @title="Bar" as |field|> <field.Input /> </collection.Field> </form.Collection> </Form> ```
2024-07-17 17:59:35 +08:00
def value
component.find(".select-kit-header")["data-value"]
end
def has_selected_value?(value)
component.find(".select-kit-header[data-value='#{value}']")
end
def has_selected_name?(name)
component.find(".select-kit-header[data-name='#{name}']")
end
def has_selected_choice_name?(name)
component.find(".selected-choice[data-name='#{name}']")
end
def has_option_name?(name)
component.find(".select-kit-collection li[data-name='#{name}']")
end
def has_option_value?(value)
component.find(".select-kit-collection li[data-value='#{value}']")
end
def has_no_option_value?(value)
component.has_no_css?(".select-kit-collection li[data-value='#{value}']")
end
def expand
collapsed_component.find(":not(.is-expanded) .select-kit-header", visible: :all).click
expanded_component
end
def collapse
expanded_component.find(".is-expanded .select-kit-header").click
collapsed_component
end
def search(value = nil)
expanded_component.find(".select-kit-filter .filter-input").fill_in(with: value)
end
def select_row_by_value(value)
expanded_component.find(".select-kit-row[data-value='#{value}']").click
end
def select_row_by_name(name)
expanded_component.find(".select-kit-row[data-name='#{name}']").click
end
def select_row_by_index(index)
expanded_component.find(".select-kit-row[data-index='#{index}']").click
end
def expand_if_needed
expand if is_collapsed?
end
end
end
end