UI/vault 7196/search select with modal (#16456)
* add validator * generate search select with modal component * finish tests * remove store from test * address comments, add tests
This commit is contained in:
claire bontempo
GitHub
parent
e0961cd2c4
commit
9ea4c8b037
|
|
@ -20,4 +20,9 @@ export const number = (value, { nullable = false } = {}) => {
|
||||||
return !isNaN(value);
|
return !isNaN(value);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default { presence, length, number };
|
export const containsWhiteSpace = (value) => {
|
||||||
|
let validation = new RegExp('\\s', 'g'); // search for whitespace
|
||||||
|
return !validation.test(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default { presence, length, number, containsWhiteSpace };
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
<div {{did-insert this.fetchOptions}} ...attributes data-test-search-select-with-modal>
|
||||||
|
{{#if this.shouldUseFallback}}
|
||||||
|
{{component
|
||||||
|
@fallbackComponent
|
||||||
|
label=(or @label @subLabel)
|
||||||
|
subText=@subText
|
||||||
|
onChange=@onChange
|
||||||
|
inputValue=@inputValue
|
||||||
|
helpText=@helpText
|
||||||
|
placeHolder=@placeHolder
|
||||||
|
id=@id
|
||||||
|
}}
|
||||||
|
{{else}}
|
||||||
|
{{#if @label}}
|
||||||
|
<label for={{@id}} class="is-label" data-test-field-label>
|
||||||
|
{{@label}}
|
||||||
|
{{#if @helpText}}
|
||||||
|
<InfoTooltip>{{@helpText}}</InfoTooltip>
|
||||||
|
{{/if}}
|
||||||
|
</label>
|
||||||
|
{{/if}}
|
||||||
|
{{#if @subText}}
|
||||||
|
<p class="sub-text">{{@subText}}</p>
|
||||||
|
{{/if}}
|
||||||
|
{{! template-lint-configure simple-unless "warn" }}
|
||||||
|
{{#unless (gte this.selectedOptions.length @selectLimit)}}
|
||||||
|
<PowerSelect
|
||||||
|
@eventType="click"
|
||||||
|
@placeholder={{@placeholder}}
|
||||||
|
@searchEnabled={{true}}
|
||||||
|
@search={{this.searchAndSuggest}}
|
||||||
|
@options={{this.allOptions}}
|
||||||
|
@onChange={{this.selectOrCreate}}
|
||||||
|
@placeholderComponent={{component "search-select-placeholder"}}
|
||||||
|
@verticalPosition="below"
|
||||||
|
as |option|
|
||||||
|
>
|
||||||
|
{{#if this.shouldRenderName}}
|
||||||
|
{{option.name}}
|
||||||
|
<small class="search-select-list-key" data-test-smaller-id="true">
|
||||||
|
{{option.id}}
|
||||||
|
</small>
|
||||||
|
{{else}}
|
||||||
|
{{option.id}}
|
||||||
|
{{/if}}
|
||||||
|
</PowerSelect>
|
||||||
|
{{/unless}}
|
||||||
|
<ul class="search-select-list">
|
||||||
|
{{#each this.selectedOptions as |selected|}}
|
||||||
|
<li class="search-select-list-item" data-test-selected-option="true">
|
||||||
|
{{#if this.shouldRenderName}}
|
||||||
|
{{selected.name}}
|
||||||
|
<small class="search-select-list-key" data-test-smaller-id="true">
|
||||||
|
{{selected.id}}
|
||||||
|
</small>
|
||||||
|
{{else}}
|
||||||
|
<div>
|
||||||
|
{{selected.id}}
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
<div class="control">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="button is-ghost"
|
||||||
|
data-test-selected-list-button="delete"
|
||||||
|
{{on "click" (fn this.discardSelection selected)}}
|
||||||
|
>
|
||||||
|
<Icon @name="trash" class="has-text-grey" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{{/each}}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{{/if}}
|
||||||
|
{{#if this.newModelRecord}}
|
||||||
|
<Modal
|
||||||
|
@title="Create new {{@id}}"
|
||||||
|
@onClose={{action (mut this.showModal) false}}
|
||||||
|
@isActive={{this.showModal}}
|
||||||
|
@type="info"
|
||||||
|
@showCloseButton={{false}}
|
||||||
|
>
|
||||||
|
<section class="modal-card-body">
|
||||||
|
<p class="has-bottom-margin-s" data-test-modal-subtext>
|
||||||
|
{{@modalSubtext}}
|
||||||
|
</p>
|
||||||
|
{{#if (has-block)}}
|
||||||
|
{{yield}}
|
||||||
|
{{else}}
|
||||||
|
{{! dynamically render passed in form component }}
|
||||||
|
{{! form must receive an @onSave and @onCancel arg that executes the callback}}
|
||||||
|
{{component
|
||||||
|
@modalFormComponent
|
||||||
|
model=this.newModelRecord
|
||||||
|
onSave=this.resetModal
|
||||||
|
onCancel=this.resetModal
|
||||||
|
isInline=true
|
||||||
|
}}
|
||||||
|
{{/if}}
|
||||||
|
</section>
|
||||||
|
</Modal>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,217 @@
|
||||||
|
import Component from '@glimmer/component';
|
||||||
|
import { inject as service } from '@ember/service';
|
||||||
|
import { action } from '@ember/object';
|
||||||
|
import { tracked } from '@glimmer/tracking';
|
||||||
|
import { singularize } from 'ember-inflector';
|
||||||
|
import { resolve } from 'rsvp';
|
||||||
|
import { filterOptions, defaultMatcher } from 'ember-power-select/utils/group-utils';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @module SearchSelectWithModal
|
||||||
|
* The `SearchSelectWithModal` is an implementation of the [ember-power-select](https://github.com/cibernox/ember-power-select) used for form elements where options come dynamically from the API. It can only accept a single model.
|
||||||
|
* It renders a passed in form component so records can be created inline, via a modal that pops up after clicking "Create new <id>" from the dropdown menu.
|
||||||
|
* **!! NOTE: any form passed must be able to receive an @onSave and @onCancel arg so that the modal will close properly. See `oidc/client-form.hbs` that renders a modal for the `oidc/assignment-form.hbs` as an example.
|
||||||
|
* @example
|
||||||
|
* <SearchSelectWithModal
|
||||||
|
* @id="assignments"
|
||||||
|
* @model="oidc/assignment"
|
||||||
|
* @label="assignment name"
|
||||||
|
* @labelClass="is-label"
|
||||||
|
* @subText="Search for an existing assignment, or type a new name to create it."
|
||||||
|
* @inputValue={{map-by "id" @model.assignments}}
|
||||||
|
* @onChange={{this.handleSearchSelect}}
|
||||||
|
* {{! since this is the "limited" radio select option we do not want to include 'allow_all' }}
|
||||||
|
* @excludeOptions={{array "allow_all"}}
|
||||||
|
* @fallbackComponent="string-list"
|
||||||
|
* @modalFormComponent="oidc/assignment-form"
|
||||||
|
* @modalSubtext="Use assignment to specify which Vault entities and groups are allowed to authenticate."
|
||||||
|
* />
|
||||||
|
*
|
||||||
|
* @param {string} id - the model's attribute for the form field, will be interpolated into create new text: `Create new ${singularize(this.args.id)}`
|
||||||
|
* @param {Array} model - model type to fetch from API (can only be a single model)
|
||||||
|
* @param {string} label - Label that appears above the form field
|
||||||
|
* @param {string} [helpText] - Text to be displayed in the info tooltip for this form field
|
||||||
|
* @param {string} [subText] - Text to be displayed below the label
|
||||||
|
* @param {string} [placeholder] - placeholder text to override the default text of "Search"
|
||||||
|
* @param {function} onChange - The onchange action for this form field. ** SEE UTIL ** search-select-has-many.js if selecting models from a hasMany relationship
|
||||||
|
* @param {string | Array} inputValue - A comma-separated string or an array of strings -- array of ids for models.
|
||||||
|
* @param {string} fallbackComponent - name of component to be rendered if the API returns a 403s
|
||||||
|
* @param {boolean} [passObject=false] - When true, the onChange callback returns an array of objects with id (string) and isNew (boolean)
|
||||||
|
* @param {number} [selectLimit] - A number that sets the limit to how many select options they can choose
|
||||||
|
* @param {array} [excludeOptions] - array of strings containing model ids to filter from the dropdown (ex: ['allow_all'])
|
||||||
|
* @param {function} search - *Advanced usage* - Customizes how the power-select component searches for matches -
|
||||||
|
* see the power-select docs for more information.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
export default class SearchSelectWithModal extends Component {
|
||||||
|
@service store;
|
||||||
|
|
||||||
|
@tracked selectedOptions = null; // list of selected options
|
||||||
|
@tracked allOptions = null; // all possible options
|
||||||
|
@tracked showModal = false;
|
||||||
|
@tracked newModelRecord = null;
|
||||||
|
@tracked shouldUseFallback = false;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super(...arguments);
|
||||||
|
this.selectedOptions = this.inputValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
get inputValue() {
|
||||||
|
return this.args.inputValue || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
get shouldRenderName() {
|
||||||
|
return this.args.shouldRenderName || false;
|
||||||
|
}
|
||||||
|
|
||||||
|
get excludeOptions() {
|
||||||
|
return this.args.excludeOptions || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
get passObject() {
|
||||||
|
return this.args.passObject || false;
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
async fetchOptions() {
|
||||||
|
try {
|
||||||
|
let queryOptions = {};
|
||||||
|
let options = await this.store.query(this.args.model, queryOptions);
|
||||||
|
this.formatOptions(options);
|
||||||
|
} catch (err) {
|
||||||
|
if (err.httpStatus === 404) {
|
||||||
|
if (!this.allOptions) {
|
||||||
|
// If the call failed but the resource has items
|
||||||
|
// from a different namespace, this allows the
|
||||||
|
// selected items to display
|
||||||
|
this.allOptions = [];
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (err.httpStatus === 403) {
|
||||||
|
this.shouldUseFallback = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
formatOptions(options) {
|
||||||
|
options = options.toArray();
|
||||||
|
if (this.excludeOptions) {
|
||||||
|
options = options.filter((o) => !this.excludeOptions.includes(o.id));
|
||||||
|
}
|
||||||
|
options = options.map((option) => {
|
||||||
|
option.searchText = `${option.name} ${option.id}`;
|
||||||
|
return option;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.selectedOptions.length > 0) {
|
||||||
|
this.selectedOptions = this.selectedOptions.map((option) => {
|
||||||
|
let matchingOption = options.findBy('id', option);
|
||||||
|
options.removeObject(matchingOption);
|
||||||
|
return {
|
||||||
|
id: option,
|
||||||
|
name: matchingOption ? matchingOption.name : option,
|
||||||
|
searchText: matchingOption ? matchingOption.searchText : option,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.allOptions = options;
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChange() {
|
||||||
|
if (this.selectedOptions.length && typeof this.selectedOptions.firstObject === 'object') {
|
||||||
|
if (this.passObject) {
|
||||||
|
this.args.onChange(
|
||||||
|
Array.from(this.selectedOptions, (option) => ({ id: option.id, isNew: !!option.new }))
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
this.args.onChange(Array.from(this.selectedOptions, (option) => option.id));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.args.onChange(this.selectedOptions);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
shouldShowCreate(id, options) {
|
||||||
|
if (options && options.length && options.firstObject.groupName) {
|
||||||
|
return !options.some((group) => group.options.findBy('id', id));
|
||||||
|
}
|
||||||
|
let existingOption =
|
||||||
|
this.allOptions && (this.allOptions.findBy('id', id) || this.allOptions.findBy('name', id));
|
||||||
|
return !existingOption;
|
||||||
|
}
|
||||||
|
//----- adapted from ember-power-select-with-create
|
||||||
|
addCreateOption(term, results) {
|
||||||
|
if (this.shouldShowCreate(term, results)) {
|
||||||
|
const name = `Create new ${singularize(this.args.id)}: ${term}`;
|
||||||
|
const suggestion = {
|
||||||
|
__isSuggestion__: true,
|
||||||
|
__value__: term,
|
||||||
|
name,
|
||||||
|
id: name,
|
||||||
|
};
|
||||||
|
results.unshift(suggestion);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
filter(options, searchText) {
|
||||||
|
const matcher = (option, text) => defaultMatcher(option.searchText, text);
|
||||||
|
return filterOptions(options || [], searchText, matcher);
|
||||||
|
}
|
||||||
|
// -----
|
||||||
|
|
||||||
|
@action
|
||||||
|
discardSelection(selected) {
|
||||||
|
this.selectedOptions.removeObject(selected);
|
||||||
|
this.allOptions.pushObject(selected);
|
||||||
|
this.handleChange();
|
||||||
|
}
|
||||||
|
// ----- adapted from ember-power-select-with-create
|
||||||
|
@action
|
||||||
|
searchAndSuggest(term, select) {
|
||||||
|
if (term.length === 0) {
|
||||||
|
return this.allOptions;
|
||||||
|
}
|
||||||
|
if (this.search) {
|
||||||
|
return resolve(this.search(term, select)).then((results) => {
|
||||||
|
if (results.toArray) {
|
||||||
|
results = results.toArray();
|
||||||
|
}
|
||||||
|
this.addCreateOption(term, results);
|
||||||
|
return results;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const newOptions = this.filter(this.allOptions, term);
|
||||||
|
this.addCreateOption(term, newOptions);
|
||||||
|
return newOptions;
|
||||||
|
}
|
||||||
|
@action
|
||||||
|
async selectOrCreate(selection) {
|
||||||
|
// if creating we call handleChange in the resetModal action to ensure the model is valid and successfully created
|
||||||
|
// before adding it to the DOM (and parent model)
|
||||||
|
// if just selecting, then we handleChange immediately
|
||||||
|
if (selection && selection.__isSuggestion__) {
|
||||||
|
const name = selection.__value__;
|
||||||
|
this.showModal = true;
|
||||||
|
let createRecord = await this.store.createRecord(this.args.model);
|
||||||
|
createRecord.name = name;
|
||||||
|
this.newModelRecord = createRecord;
|
||||||
|
} else {
|
||||||
|
this.selectedOptions.pushObject(selection);
|
||||||
|
this.allOptions.removeObject(selection);
|
||||||
|
this.handleChange();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// -----
|
||||||
|
|
||||||
|
@action
|
||||||
|
resetModal(model) {
|
||||||
|
this.showModal = false;
|
||||||
|
if (model && model.currentState.isSaved) {
|
||||||
|
const { name } = model;
|
||||||
|
this.selectedOptions.pushObject({ name, id: name });
|
||||||
|
this.handleChange();
|
||||||
|
}
|
||||||
|
this.newModelRecord = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export { default } from 'core/components/search-select-with-modal';
|
||||||
|
|
@ -0,0 +1,175 @@
|
||||||
|
import { module, test } from 'qunit';
|
||||||
|
import { setupRenderingTest } from 'ember-qunit';
|
||||||
|
import { create } from 'ember-cli-page-object';
|
||||||
|
import { setupMirage } from 'ember-cli-mirage/test-support';
|
||||||
|
import { Response } from 'miragejs';
|
||||||
|
import { clickTrigger, typeInSearch } from 'ember-power-select/test-support/helpers';
|
||||||
|
import { render, fillIn, click } from '@ember/test-helpers';
|
||||||
|
import hbs from 'htmlbars-inline-precompile';
|
||||||
|
import ss from 'vault/tests/pages/components/search-select';
|
||||||
|
|
||||||
|
const component = create(ss);
|
||||||
|
|
||||||
|
module('Integration | Component | search select with modal', function (hooks) {
|
||||||
|
setupRenderingTest(hooks);
|
||||||
|
setupMirage(hooks);
|
||||||
|
hooks.beforeEach(function () {
|
||||||
|
this.server.get('identity/entity/id', () => {
|
||||||
|
return {
|
||||||
|
request_id: 'entity-list-id',
|
||||||
|
data: {
|
||||||
|
key_info: {
|
||||||
|
'entity-1-id': {
|
||||||
|
name: 'entity-1',
|
||||||
|
},
|
||||||
|
'entity-2-id': {
|
||||||
|
name: 'entity-2',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
keys: ['entity-1-id', 'entity-2-id'],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
this.server.get('sys/policies/acl', () => {
|
||||||
|
return {
|
||||||
|
request_id: 'acl-policy-list-id',
|
||||||
|
data: {
|
||||||
|
keys: ['default', 'root'],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
this.server.get('sys/policies/rgp', () => {
|
||||||
|
return {
|
||||||
|
request_id: 'rgp-policy-list-id',
|
||||||
|
data: {
|
||||||
|
keys: ['default', 'root'],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
this.server.get('/identity/entity/id/entity-1-id', () => {
|
||||||
|
return {
|
||||||
|
request_id: 'some-entity-id-1',
|
||||||
|
data: {
|
||||||
|
id: 'entity-1-id',
|
||||||
|
name: 'entity-1',
|
||||||
|
namespace_id: 'root',
|
||||||
|
policies: ['default'],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
this.server.get('/identity/entity/id/entity-2-id', () => {
|
||||||
|
return {
|
||||||
|
request_id: 'some-entity-id-2',
|
||||||
|
data: {
|
||||||
|
id: 'entity-2-id',
|
||||||
|
name: 'entity-2',
|
||||||
|
namespace_id: 'root',
|
||||||
|
policies: ['default'],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('it renders passed in model', async function (assert) {
|
||||||
|
await render(hbs`
|
||||||
|
<SearchSelectWithModal
|
||||||
|
@id="entity"
|
||||||
|
@label="Entity ID"
|
||||||
|
@subText="Search for an existing entity, or type a new name to create it."
|
||||||
|
@model="identity/entity"
|
||||||
|
@onChange={{this.onChange}}
|
||||||
|
@fallbackComponent="string-list"
|
||||||
|
@modalFormComponent="identity/edit-form"
|
||||||
|
@modalSubtext="Some modal subtext"
|
||||||
|
/>
|
||||||
|
<div id="modal-wormhole"></div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
assert.dom('[data-test-search-select-with-modal]').exists('the component renders');
|
||||||
|
assert.equal(component.labelText, 'Entity ID', 'label text is correct');
|
||||||
|
assert.ok(component.hasTrigger, 'it renders the power select trigger');
|
||||||
|
assert.equal(component.selectedOptions.length, 0, 'there are no selected options');
|
||||||
|
|
||||||
|
await clickTrigger();
|
||||||
|
assert.equal(component.options.length, 2, 'dropdown renders passed in models as options');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('it filters options and adds option to create new item', async function (assert) {
|
||||||
|
assert.expect(7);
|
||||||
|
await render(hbs`
|
||||||
|
<SearchSelectWithModal
|
||||||
|
@id="entity"
|
||||||
|
@label="entity"
|
||||||
|
@subText="Search for an existing entity, or type a new name to create it."
|
||||||
|
@model="identity/entity"
|
||||||
|
@onChange={{this.onChange}}
|
||||||
|
@fallbackComponent="string-list"
|
||||||
|
@modalFormComponent="identity/edit-form"
|
||||||
|
@modalSubtext="Some modal subtext"
|
||||||
|
/>
|
||||||
|
<div id="modal-wormhole"></div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await clickTrigger();
|
||||||
|
assert.equal(component.options.length, 2, 'dropdown renders all options');
|
||||||
|
|
||||||
|
await typeInSearch('e');
|
||||||
|
assert.equal(component.options.length, 3, 'dropdown renders all options plus add option');
|
||||||
|
|
||||||
|
await typeInSearch('entity-1');
|
||||||
|
assert.equal(component.options[0].text, 'entity-1-id', 'dropdown renders only matching option');
|
||||||
|
|
||||||
|
await typeInSearch('entity-1-new');
|
||||||
|
assert.equal(
|
||||||
|
component.options[0].text,
|
||||||
|
'Create new entity: entity-1-new',
|
||||||
|
'dropdown gives option to create new option'
|
||||||
|
);
|
||||||
|
|
||||||
|
await component.selectOption();
|
||||||
|
assert.dom('[data-test-modal-div]').hasAttribute('class', 'modal is-info is-active', 'modal is active');
|
||||||
|
assert.dom('[data-test-modal-subtext]').hasText('Some modal subtext', 'renders modal text');
|
||||||
|
assert.dom('[data-test-component="identity-edit-form"]').exists('renders identity form');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('it renders fallback component', async function (assert) {
|
||||||
|
assert.expect(7);
|
||||||
|
this.onChange = () => assert.ok(true, 'onChange callback fires');
|
||||||
|
this.server.get('identity/entity/id', () => {
|
||||||
|
return new Response(
|
||||||
|
403,
|
||||||
|
{ 'Content-Type': 'application/json' },
|
||||||
|
JSON.stringify({ errors: ['permission denied'] })
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
await render(hbs`
|
||||||
|
<SearchSelectWithModal
|
||||||
|
@id="entity"
|
||||||
|
@label="Entity ID"
|
||||||
|
@subText="Search for an existing entity, or type a new name to create it."
|
||||||
|
@model="identity/entity"
|
||||||
|
@onChange={{this.onChange}}
|
||||||
|
@fallbackComponent="string-list"
|
||||||
|
@modalFormComponent="identity/edit-form"
|
||||||
|
@modalSubtext="Some modal subtext"
|
||||||
|
/>
|
||||||
|
<div id="modal-wormhole"></div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
assert.dom('[data-test-component="string-list"]').exists('renders fallback component');
|
||||||
|
assert.false(component.hasTrigger, 'does not render power select trigger');
|
||||||
|
await fillIn('[data-test-string-list-input="0"]', 'some-entity');
|
||||||
|
await click('[data-test-string-list-button="add"]');
|
||||||
|
assert
|
||||||
|
.dom('[data-test-string-list-input="0"]')
|
||||||
|
.hasValue('some-entity', 'first row renders inputted string');
|
||||||
|
assert
|
||||||
|
.dom('[data-test-string-list-row="0"] [data-test-string-list-button="delete"]')
|
||||||
|
.exists('first row renders delete icon');
|
||||||
|
assert.dom('[data-test-string-list-row="1"]').exists('renders second input row');
|
||||||
|
assert
|
||||||
|
.dom('[data-test-string-list-row="1"] [data-test-string-list-button="add"]')
|
||||||
|
.exists('second row renders add icon');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -70,4 +70,21 @@ module('Unit | Util | validators', function (hooks) {
|
||||||
check('0');
|
check('0');
|
||||||
assert.true(isValid, 'Valid for 0 as a string');
|
assert.true(isValid, 'Valid for 0 as a string');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('it should validate white space', function (assert) {
|
||||||
|
let isValid;
|
||||||
|
const check = (prop) => (isValid = validators.containsWhiteSpace(prop));
|
||||||
|
check('validText');
|
||||||
|
assert.true(isValid, 'Valid when text contains no spaces');
|
||||||
|
check('valid-text');
|
||||||
|
assert.true(isValid, 'Valid when text contains no spaces and hyphen');
|
||||||
|
check('some space');
|
||||||
|
assert.false(isValid, 'Invalid when text contains single space');
|
||||||
|
check('text with spaces');
|
||||||
|
assert.false(isValid, 'Invalid when text contains multiple spaces');
|
||||||
|
check(' leadingSpace');
|
||||||
|
assert.false(isValid, 'Invalid when text has leading whitespace');
|
||||||
|
check('trailingSpace ');
|
||||||
|
assert.false(isValid, 'Invalid when text has trailing whitespace');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue