From a8baa751a0dd649e27e695c9d2e66fc6ad09507c Mon Sep 17 00:00:00 2001
From: Sander Bruens <sbruens@users.noreply.github.com>
Date: Mon, 2 Oct 2023 15:59:32 -0400
Subject: [PATCH] Refactor tests to separate different behaviors.

---
 src/www/views/contact_view/index.spec.ts | 79 ++++++++++++++++--------
 1 file changed, 52 insertions(+), 27 deletions(-)

diff --git a/src/www/views/contact_view/index.spec.ts b/src/www/views/contact_view/index.spec.ts
index d5efbd71d23..f3af08e8f23 100644
--- a/src/www/views/contact_view/index.spec.ts
+++ b/src/www/views/contact_view/index.spec.ts
@@ -20,7 +20,8 @@ import {fixture, html, nextFrame, oneEvent} from '@open-wc/testing';
 import {SupportForm} from './support_form';
 import {OutlineErrorReporter, SentryErrorReporter} from '../../shared/error_reporter';
 import {localize} from '../../testing/localize';
-import {ListItem} from '@material/mwc-list';
+import {ListItemBase} from '@material/mwc-list/mwc-list-item-base';
+import {Select} from '@material/mwc-select';
 
 describe('ContactView client variant', () => {
   let el: ContactView;
@@ -59,20 +60,30 @@ describe('ContactView client variant', () => {
     expect(exitCard.textContent).toContain('experiencing high support volume');
   });
 
-  it('shows issue selector if the user selects that they have no open tickets', async () => {
-    const radioButton = el.shadowRoot!.querySelectorAll('mwc-formfield mwc-radio')[1] as HTMLElement;
-    radioButton.click();
-    await nextFrame();
+  describe('when the user selects that they have no open tickets', () => {
+    let issueSelector: Select;
+
+    beforeEach(async () => {
+      const radioButton = el.shadowRoot!.querySelectorAll('mwc-formfield mwc-radio')[1] as HTMLElement;
+      radioButton.click();
+      await nextFrame();
+
+      issueSelector = el.shadowRoot!.querySelector('mwc-select')!;
+    });
+
+    it('shows the issue selector', () => {
+      expect(issueSelector.hasAttribute('hidden')).toBeFalse();
+    });
 
-    const issueSelector = el.shadowRoot!.querySelector('mwc-select')!;
-    expect(issueSelector.hasAttribute('hidden')).toBeFalse();
-    const issueItemEls = issueSelector.querySelectorAll('mwc-list-item');
-    const issueTypes = Array.from(issueItemEls).map((el: ListItem) => el.value);
-    expect(issueTypes).toEqual(['no-server', 'cannot-add-server', 'connection', 'performance', 'general']);
+    it('shows the correct items in the selector', () => {
+      const issueItemEls = issueSelector.querySelectorAll('mwc-list-item');
+      const issueTypes = Array.from(issueItemEls).map((el: ListItemBase) => el.value);
+      expect(issueTypes).toEqual(['no-server', 'cannot-add-server', 'connection', 'performance', 'general']);
+    });
   });
 
   describe('when the user selects issue', () => {
-    let issueSelector: HTMLElement;
+    let issueSelector: Select;
 
     beforeEach(async () => {
       issueSelector = el.shadowRoot!.querySelector('mwc-select')!;
@@ -158,23 +169,37 @@ describe('ContactView client variant', () => {
 });
 
 describe('ContactView manager variant', () => {
-  it('shows issue selector if the user selects that they have no open tickets', async () => {
-    const mockErrorReporter: jasmine.SpyObj<OutlineErrorReporter> = jasmine.createSpyObj(
-      'SentryErrorReporter',
-      Object.getOwnPropertyNames(SentryErrorReporter.prototype)
-    );
-    const el = await fixture(
-      html` <contact-view .localize=${localize} variant="manager" .errorReporter=${mockErrorReporter}></contact-view> `
-    );
+  let el: ContactView;
 
-    const radioButton = el.shadowRoot!.querySelectorAll('mwc-formfield mwc-radio')[1] as HTMLElement;
-    radioButton.click();
-    await nextFrame();
+  describe('when the user selects that they have no open tickets', () => {
+    let issueSelector: Select;
+
+    beforeEach(async () => {
+      const mockErrorReporter: jasmine.SpyObj<OutlineErrorReporter> = jasmine.createSpyObj(
+        'SentryErrorReporter',
+        Object.getOwnPropertyNames(SentryErrorReporter.prototype)
+      );
+      el = await fixture(
+        html`
+          <contact-view .localize=${localize} variant="manager" .errorReporter=${mockErrorReporter}></contact-view>
+        `
+      );
+
+      const radioButton = el.shadowRoot!.querySelectorAll('mwc-formfield mwc-radio')[1] as HTMLElement;
+      radioButton.click();
+      await nextFrame();
+
+      issueSelector = el.shadowRoot!.querySelector('mwc-select')!;
+    });
+
+    it('shows the issue selector', () => {
+      expect(issueSelector.hasAttribute('hidden')).toBeFalse();
+    });
 
-    const issueSelector = el.shadowRoot!.querySelector('mwc-select')!;
-    expect(issueSelector.hasAttribute('hidden')).toBeFalse();
-    const issueItemEls = issueSelector.querySelectorAll('mwc-list-item');
-    const issueTypes = Array.from(issueItemEls).map((el: ListItem) => el.value);
-    expect(issueTypes).toEqual(['cannot-add-server', 'connection', 'managing', 'general']);
+    it('shows the correct items in the selector', () => {
+      const issueItemEls = issueSelector.querySelectorAll('mwc-list-item');
+      const issueTypes = Array.from(issueItemEls).map((el: ListItemBase) => el.value);
+      expect(issueTypes).toEqual(['cannot-add-server', 'connection', 'managing', 'general']);
+    });
   });
 });