Merge branch 'main' into toolbar

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) {