From b36d2edfdee8eb2e66899c096447168f0fcbcb77 Mon Sep 17 00:00:00 2001
From: Jeremiah Hoyet <jerhoyet@gmail.com>
Date: Mon, 22 Nov 2021 17:17:31 -0500
Subject: [PATCH] Clean up tests

---
 .../radio-group/radio-group.test.ts           | 88 +++++++++++++++++++
 src/components/radio/radio.test.ts            | 17 ----
 src/components/radio/radio.ts                 |  7 --
 3 files changed, 88 insertions(+), 24 deletions(-)
 create mode 100644 src/components/radio-group/radio-group.test.ts

diff --git a/src/components/radio-group/radio-group.test.ts b/src/components/radio-group/radio-group.test.ts
new file mode 100644
index 000000000..60f58ebc0
--- /dev/null
+++ b/src/components/radio-group/radio-group.test.ts
@@ -0,0 +1,88 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+
+import '../../../dist/shoelace.js';
+import type SlRadio from '../radio/radio';
+import type SlRadioGroup from './radio-group';
+
+describe('<sl-radio-group>', () => {
+  it('should toggle selected radio when toggled via keyboard - arrow right key', async () => {
+    const radioGroup = await fixture<SlRadioGroup>(html`
+      <sl-radio-group>
+        <sl-radio id="radio-1" checked></sl-radio>
+        <sl-radio id="radio-2"></sl-radio>
+      </sl-radio-group>
+    `);
+    const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
+    const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
+
+    expect(radio2.checked).to.be.false;
+    expect(radio1.checked).to.be.true;
+
+    radio1.focus();
+    await sendKeys({ press: 'ArrowRight' });
+
+    expect(radio2.checked).to.be.true;
+    expect(radio1.checked).to.be.false;
+  });
+
+  it('should toggle selected radio when toggled via keyboard - arrow down key', async () => {
+    const radioGroup = await fixture<SlRadioGroup>(html`
+      <sl-radio-group>
+        <sl-radio id="radio-1" checked></sl-radio>
+        <sl-radio id="radio-2"></sl-radio>
+      </sl-radio-group>
+    `);
+    const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
+    const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
+
+    expect(radio2.checked).to.be.false;
+    expect(radio1.checked).to.be.true;
+
+    radio1.focus();
+    await sendKeys({ press: 'ArrowDown' });
+
+    expect(radio2.checked).to.be.true;
+    expect(radio1.checked).to.be.false;
+  });
+
+  it('should toggle selected radio when toggled via keyboard - arrow left key', async () => {
+    const radioGroup = await fixture<SlRadioGroup>(html`
+      <sl-radio-group>
+        <sl-radio id="radio-1"></sl-radio>
+        <sl-radio id="radio-2" checked></sl-radio>
+      </sl-radio-group>
+    `);
+    const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
+    const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
+
+    expect(radio2.checked).to.be.true;
+    expect(radio1.checked).to.be.false;
+
+    radio1.focus();
+    await sendKeys({ press: 'ArrowLeft' });
+
+    expect(radio2.checked).to.be.false;
+    expect(radio1.checked).to.be.true;
+  });
+
+  it('should toggle selected radio when toggled via keyboard - arrow up key', async () => {
+    const radioGroup = await fixture<SlRadioGroup>(html`
+      <sl-radio-group>
+        <sl-radio id="radio-1"></sl-radio>
+        <sl-radio id="radio-2" checked></sl-radio>
+      </sl-radio-group>
+    `);
+    const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
+    const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
+
+    expect(radio2.checked).to.be.true;
+    expect(radio1.checked).to.be.false;
+
+    radio1.focus();
+    await sendKeys({ press: 'ArrowUp' });
+
+    expect(radio2.checked).to.be.false;
+    expect(radio1.checked).to.be.true;
+  });
+});
diff --git a/src/components/radio/radio.test.ts b/src/components/radio/radio.test.ts
index f76c1288b..37dbd3bbd 100644
--- a/src/components/radio/radio.test.ts
+++ b/src/components/radio/radio.test.ts
@@ -37,23 +37,6 @@ describe('<sl-radio>', () => {
     expect(el.checked).to.be.true;
   });
 
-  it('should fire sl-change when toggled via keyboard - arrow key', async () => {
-    const radioGroup = await fixture<SlRadioGroup>(html`
-      <sl-radio-group>
-        <sl-radio id="radio-1"></sl-radio>
-        <sl-radio id="radio-2"></sl-radio>
-      </sl-radio-group>
-    `);
-    const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
-    const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
-    const input1 = radio1.shadowRoot?.querySelector('input');
-    input1.focus();
-    setTimeout(() => sendKeys({ press: 'ArrowRight' }));
-    const event = await oneEvent(radio2, 'sl-change');
-    expect(event.target).to.equal(radio2);
-    expect(radio2.checked).to.be.true;
-  });
-
   it('should not fire sl-change when checked is set by javascript', async () => {
     const el = await fixture<SlRadio>(html` <sl-radio></sl-radio> `);
     el.addEventListener('sl-change', () => expect.fail('event fired'));
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index dcb8c8e28..a36d018a4 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -87,13 +87,6 @@ export default class SlRadio extends LitElement {
     emit(this, 'sl-blur');
   }
 
-  @watch('checked', { waitUntilFirstUpdate: true })
-  handleCheckedChange() {
-    if (this.checked) {
-      emit(this, 'sl-change');
-    }
-  }
-
   handleClick() {
     this.checked = true;
     emit(this, 'sl-change');