Devon AndersonandRandall Morey
0015745d41
* feat: 🎸 Custom information field Create custom information component for views that need read-only information listed. ✅ Closes: ICU-6957 ICU-6981 * refactor: 💡 fix setup for info-field component Added conditional icon as a yield to `Hds::Form::TextInput::Field` to avoid over complicating the css for `info-field` component. ✅ Closes: ICU-6957 * refactor `username_password` index.hbs `@value` on `<InfoField>` was pointing to wrong variable. * fix: 🐛 fixed lint Lint errors * fix: 🐛 linting errors fixed linting errors fixed * chore: 🤖 tweak info field styles and layout for icons * refactor: 💡 switched `grid-area` in css to match design Switched `grid-area`'s to match Design * refactor: 💡 removed grid attribute from field wrapper Removed display grid from `vertical` wrapper Co-authored-by: Randall Morey <randall@randallmorey.com>
46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
import { module, test } from 'qunit';
|
|
import { setupRenderingTest } from 'ember-qunit';
|
|
import { render } from '@ember/test-helpers';
|
|
import { hbs } from 'ember-cli-htmlbars';
|
|
|
|
module('Integration | Component | info-field', function (hooks) {
|
|
setupRenderingTest(hooks);
|
|
|
|
test('it renders without icon', async function (assert) {
|
|
assert.expect(4);
|
|
|
|
await render(
|
|
hbs`
|
|
<InfoField @value="Description" as |F|>
|
|
<F.Label>Type</F.Label>
|
|
<F.HelperText>JSON</F.HelperText>
|
|
</InfoField>
|
|
`
|
|
);
|
|
assert.dom('.info-field').isVisible();
|
|
assert.dom('.info-field .hds-form-label').hasText('Type');
|
|
assert.dom('.info-field .hds-form-helper-text').hasText('JSON');
|
|
assert.dom('.info-field .hds-form-text-input').isVisible();
|
|
});
|
|
|
|
test('it renders with icon', async function (assert) {
|
|
assert.expect(5);
|
|
|
|
await render(
|
|
hbs`
|
|
<InfoField @value="Description" @icon='apple' as |F|>
|
|
<F.Label>Type</F.Label>
|
|
<F.HelperText>JSON</F.HelperText>
|
|
</InfoField>
|
|
`
|
|
);
|
|
assert.dom('.info-field').isVisible();
|
|
assert.dom('.info-field .hds-form-label').hasText('Type');
|
|
assert
|
|
.dom('.info-field .hds-form-helper-text:last-of-type')
|
|
.hasText('JSON');
|
|
assert.dom('[data-test-icon="apple"]').isVisible();
|
|
assert.dom('.info-field .hds-form-text-input').isVisible();
|
|
});
|
|
});
|