Merge branch 'main' into toolbar

addons/rose/tests/dummy/app/controllers/index.js

@@ -1,12 +1,28 @@
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
+const possibleItems = [
+  { id: 1, name: 'foo' },
+  { id: 2, name: 'bar' },
+  { id: 3, name: 'baz' },
+];
+
 export default class IndexController extends Controller {
-  color = 'green';
+  // =attributes
+
+  @tracked items = [...possibleItems];
+  @tracked selectedItems = [possibleItems[2]];
+
+  // =actions
 
   @action
-  actionHandler(/*value*/) {
-    // eslint-disable-next-line no-console
-    //console.log('action handled');
+  checkboxGroupChanged(selected) {
+    this.selectedItems = [...selected];
+  }
+
+  @action
+  clearSelected() {
+    this.selectedItems = [];
   }
 }

addons/rose/tests/dummy/app/initializers/deprecations.js

@@ -0,0 +1,17 @@
+import { registerDeprecationHandler } from '@ember/debug';
+import config from 'ember-get-config';
+
+const isTesting = config.environment === 'test';
+
+export function initialize(/* application */) {
+  if (isTesting) {
+    // Disable all deprecations for now in tests.
+    registerDeprecationHandler((/*message, options, next*/) => {
+      return;
+    });
+  }
+}
+
+export default {
+  initialize,
+};

addons/rose/tests/dummy/app/templates/index.hbs

@@ -1,3 +1,28 @@
+<h2>Checkbox Group</h2>
+<Rose::Form::Checkbox::Group
+  @items={{this.items}}
+  @selectedItems={{this.selectedItems}}
+  @onChange={{this.checkboxGroupChanged}}
+  as |group|
+>
+  <group.checkbox
+    @label={{group.item.name}}
+    value={{group.item.id}} />
+</Rose::Form::Checkbox::Group>
+
+<p>
+  Items selected:
+  {{#each this.selectedItems as |selected|}}
+    {{selected.id}},
+  {{/each}}
+</p>
+
+<Rose::Button @style='primary' {{on 'click' this.clearSelected}}>
+  Clear Selected Items
+</Rose::Button>
+
+<Rose::Separator />
+
 <h2>KeyValue Dropdown</h2>
 <Rose::Dropdown
   @text="Credential library details"

addons/rose/tests/integration/components/rose/badge-test.js

@@ -22,7 +22,8 @@ module('Integration | Component | rose/badge', function (hooks) {
   });
 
   test('it styles content using @style', async function (assert) {
-    let styles = [
+    assert.expect(14);
+    const styles = [
       'outline',
       'dark',
       'informational',

addons/rose/tests/integration/components/rose/button-test.js

@@ -23,7 +23,7 @@ module('Integration | Component | rose/button', function (hooks) {
 
   test('it is disabled when @disabled={{true}}', async function (assert) {
     await render(hbs`<Rose::Button @disabled={{true}} />`);
-    assert.equal(find('button').disabled, true);
+    assert.true(find('button').disabled);
   });
 
   test('it adds a style class', async function (assert) {

addons/rose/tests/integration/components/rose/dropdown/button-test.js

@@ -23,7 +23,7 @@ module('Integration | Component | rose/dropdown/button', function (hooks) {
 
   test('it is disabled when @disabled={{true}}', async function (assert) {
     await render(hbs`<Rose::Dropdown::Button @disabled={{true}} />`);
-    assert.equal(find('button').disabled, true);
+    assert.true(find('button').disabled);
   });
 
   test('it adds a style class', async function (assert) {

addons/rose/tests/integration/components/rose/form/checkbox-test.js

@@ -60,17 +60,17 @@ module('Integration | Component | rose/form/checkbox', function (hooks) {
 
   test('it is not checked by default', async function (assert) {
     await render(hbs`<Rose::Form::Checkbox />`);
-    assert.equal(find('input').checked, false);
+    assert.false(find('input').checked);
   });
 
   test('it is not disabled by default', async function (assert) {
     await render(hbs`<Rose::Form::Checkbox />`);
-    assert.equal(find('input').disabled, false);
+    assert.false(find('input').disabled);
   });
 
   test('it is checked when @checked={{true}}', async function (assert) {
     await render(hbs`<Rose::Form::Checkbox @checked={{true}} />`);
-    assert.equal(find('input').checked, true);
+    assert.true(find('input').checked);
   });
 
   test('it marks error when @error={{true}}', async function (assert) {
@@ -80,6 +80,6 @@ module('Integration | Component | rose/form/checkbox', function (hooks) {
 
   test('it is disabled when @disabled={{true}}', async function (assert) {
     await render(hbs`<Rose::Form::Checkbox @disabled={{true}} />`);
-    assert.equal(find('input').disabled, true);
+    assert.true(find('input').disabled);
   });
 });

addons/rose/tests/integration/components/rose/form/checkbox/group-test.js

@@ -0,0 +1,100 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, findAll, click } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/form/checkbox/group', function (hooks) {
+  setupRenderingTest(hooks);
+
+  let items;
+  let selectedItems;
+
+  hooks.beforeEach(function () {
+    items = [
+      { id: 1, name: 'Foo' },
+      { id: 2, name: 'Bar' },
+      { id: 3, name: 'Baz' },
+    ];
+    selectedItems = [items[2]];
+  });
+
+  test('it renders checkboxes equal in length to an array of items', async function (assert) {
+    assert.expect(1);
+    this.items = items;
+    await render(hbs`
+      <Rose::Form::Checkbox::Group
+        @items={{this.items}}
+        as |group|
+      >
+        <group.checkbox
+          @label={{group.item.name}}
+          value={{group.item.id}} />
+      </Rose::Form::Checkbox::Group>
+    `);
+    assert.equal(findAll('input').length, 3);
+  });
+
+  test('it checks checkboxes for items present in a selectedItems array', async function (assert) {
+    assert.expect(1);
+    this.items = items;
+    this.selectedItems = selectedItems;
+    await render(hbs`
+      <Rose::Form::Checkbox::Group
+        @items={{this.items}}
+        @selectedItems={{this.selectedItems}}
+        as |group|
+      >
+        <group.checkbox
+          @label={{group.item.name}}
+          value={{group.item.id}} />
+      </Rose::Form::Checkbox::Group>
+    `);
+    assert.equal(findAll(':checked').length, 1);
+  });
+
+  test('it fires onChange when items are checked, passing an array of selected items', async function (assert) {
+    assert.expect(2);
+    this.items = items;
+    this.selectedItems = selectedItems;
+    this.onChange = (newlySelectedItems) => {
+      assert.equal(selectedItems.length, 1);
+      assert.equal(newlySelectedItems.length, 2);
+    };
+    await render(hbs`
+      <Rose::Form::Checkbox::Group
+        @items={{this.items}}
+        @selectedItems={{this.selectedItems}}
+        @onChange={{this.onChange}}
+        as |group|
+      >
+        <group.checkbox
+          @label={{group.item.name}}
+          value={{group.item.id}} />
+      </Rose::Form::Checkbox::Group>
+    `);
+    await click('.rose-form-checkbox:first-child input');
+  });
+
+  test('it fires onChange when items are unchecked, passing an array of selected items', async function (assert) {
+    assert.expect(2);
+    this.items = items;
+    this.selectedItems = selectedItems;
+    this.onChange = (newlySelectedItems) => {
+      assert.equal(selectedItems.length, 1);
+      assert.equal(newlySelectedItems.length, 0);
+    };
+    await render(hbs`
+      <Rose::Form::Checkbox::Group
+        @items={{this.items}}
+        @selectedItems={{this.selectedItems}}
+        @onChange={{this.onChange}}
+        as |group|
+      >
+        <group.checkbox
+          @label={{group.item.name}}
+          value={{group.item.id}} />
+      </Rose::Form::Checkbox::Group>
+    `);
+    await click('.rose-form-checkbox:last-child input');
+  });
+});

addons/rose/tests/integration/components/rose/form/radio/group-test.js

@@ -43,13 +43,13 @@ module('Integration | Component | rose/form/radio/group', function (hooks) {
       </Rose::Form::Radio::Group>
     `);
 
-    assert.equal(findAll('[type="radio"]')[0].checked, false);
-    assert.equal(findAll('[type="radio"]')[1].checked, true);
+    assert.false(findAll('[type="radio"]')[0].checked);
+    assert.true(findAll('[type="radio"]')[1].checked);
 
     await click(findAll('[type="radio"]')[0]);
 
-    assert.equal(findAll('[type="radio"]')[0].checked, true);
-    assert.equal(findAll('[type="radio"]')[1].checked, false);
+    assert.true(findAll('[type="radio"]')[0].checked);
+    assert.false(findAll('[type="radio"]')[1].checked);
   });
 
   test('it reflects active radiofield value in @selectedValue and triggers a @changed function', async function (assert) {
@@ -100,19 +100,19 @@ module('Integration | Component | rose/form/radio/group', function (hooks) {
       </Rose::Form::Radio::Group>
     `);
 
-    assert.equal(findAll('[type="radio"]')[0].checked, false);
-    assert.equal(findAll('[type="radio"]')[1].checked, false);
+    assert.false(findAll('[type="radio"]')[0].checked);
+    assert.false(findAll('[type="radio"]')[1].checked);
 
     this.set('selectedValue', 'flamingo');
-    assert.equal(findAll('[type="radio"]')[0].checked, false);
-    assert.equal(findAll('[type="radio"]')[1].checked, true);
+    assert.false(findAll('[type="radio"]')[0].checked);
+    assert.true(findAll('[type="radio"]')[1].checked);
 
     this.set('selectedValue', 'pegion');
-    assert.equal(findAll('[type="radio"]')[0].checked, true);
-    assert.equal(findAll('[type="radio"]')[1].checked, false);
+    assert.true(findAll('[type="radio"]')[0].checked);
+    assert.false(findAll('[type="radio"]')[1].checked);
 
     this.set('selectedValue', 'dog');
-    assert.equal(findAll('[type="radio"]')[0].checked, false);
-    assert.equal(findAll('[type="radio"]')[1].checked, false);
+    assert.false(findAll('[type="radio"]')[0].checked);
+    assert.false(findAll('[type="radio"]')[1].checked);
   });
 });

addons/rose/tests/integration/components/rose/form/radio/radio-test.js

@@ -28,25 +28,25 @@ module('Integration | Component | rose/form/radio/radio', function (hooks) {
     await render(
       hbs`<Rose::Form::Radio::Radio @value="tree" @selectedValue="tree"/>`
     );
-    assert.equal(await find('input').checked, true);
+    assert.true(await find('input').checked);
   });
 
   test('it is not checked when @value and @selectedValue values are different', async function (assert) {
     await render(hbs`<Rose::Form::Radio::Radio @value="tree"/>`);
-    assert.equal(await find('input').checked, false);
+    assert.false(await find('input').checked);
 
     await render(hbs`<Rose::Form::Radio::Radio @selectedValue="tree"/>`);
-    assert.equal(await find('input').checked, false);
+    assert.false(await find('input').checked);
 
     await render(
       hbs`<Rose::Form::Radio::Radio @value="root" @selectedValue="tree"/>`
     );
-    assert.equal(await find('input').checked, false);
+    assert.false(await find('input').checked);
   });
 
   test('it is not disabled by default', async function (assert) {
     await render(hbs`<Rose::Form::Radio::Radio />`);
-    assert.equal(await find('input').disabled, false);
+    assert.false(await find('input').disabled);
   });
 
   test('it is not in error state by default', async function (assert) {
@@ -56,7 +56,7 @@ module('Integration | Component | rose/form/radio/radio', function (hooks) {
 
   test('it is disabled when @disabled={{true}}', async function (assert) {
     await render(hbs`<Rose::Form::Radio::Radio @disabled={{true}}/>`);
-    assert.equal(await find('input').disabled, true);
+    assert.true(await find('input').disabled);
   });
 
   test('it is in error state when @error={{true}}', async function (assert) {

addons/rose/tests/integration/modifiers/on-click-outside-test.js

@@ -7,6 +7,7 @@ module('Integration | Modifier | on-click-outside', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it fires event when an outside element is clicked', async function (assert) {
+    assert.expect(2);
     this.set('clickedOutside', (element, event) => {
       assert.ok(element);
       assert.equal(event.target.id, 'outside');