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 = jasmine.createSpyObj( - 'SentryErrorReporter', - Object.getOwnPropertyNames(SentryErrorReporter.prototype) - ); - const el = await fixture( - html` ` - ); + 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 = jasmine.createSpyObj( + 'SentryErrorReporter', + Object.getOwnPropertyNames(SentryErrorReporter.prototype) + ); + el = await fixture( + html` + + ` + ); + + 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']); + }); }); });