Fix tests that rely on localization.

src/www/.storybook/localize.ts → src/www/testing/localize.ts

@@ -32,8 +32,8 @@ export const localize: Localizer = (messageID: string, ...formatKeyValueList: Fo
     return `${messageID}(${JSON.stringify(formatConfigObject)})`;
   }
 
-  // we support only english messages in the storybook, for now.
-  // blocked on modern-web.dev adding support for addons:
+  // We support only english messages for now.
+  // Blocked on modern-web.dev adding support for addons:
   // https://github.com/modernweb-dev/web/issues/1341
   return String(new IntlMessageFormat(message, 'en').format(formatConfigObject));
 };

src/www/views/contact_view/index.spec.ts

@@ -19,6 +19,7 @@ import {ContactView} from './index';
 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';
 
 describe('ContactView', () => {
   let el: ContactView;
@@ -29,15 +30,15 @@ describe('ContactView', () => {
       'SentryErrorReporter',
       Object.getOwnPropertyNames(SentryErrorReporter.prototype)
     );
-    el = await fixture(html` <contact-view .errorReporter=${mockErrorReporter}></contact-view> `);
+    el = await fixture(html` <contact-view .localize=${localize} .errorReporter=${mockErrorReporter}></contact-view> `);
   });
 
   it('is defined', async () => {
     expect(el).toBeInstanceOf(ContactView);
   });
 
   it('hides issue selector by default', async () => {
-    const issueSelector = el.shadowRoot?.querySelector('mwc-select[label="Outline issue"]');
+    const issueSelector = el.shadowRoot?.querySelector('mwc-select');
     expect(issueSelector?.hasAttribute('hidden')).toBeTrue();
   });
 
@@ -47,7 +48,7 @@ describe('ContactView', () => {
   });
 
   it('shows exit message if the user selects that they have an open ticket', async () => {
-    const radioButton = el.shadowRoot!.querySelector('mwc-formfield[label="Yes"] mwc-radio')! as HTMLElement;
+    const radioButton = el.shadowRoot!.querySelectorAll('mwc-formfield mwc-radio')[0] as HTMLElement;
     radioButton.click();
     await nextFrame();
 
@@ -56,20 +57,20 @@ describe('ContactView', () => {
   });
 
   it('shows issue selector if the user selects that they have no open tickets', async () => {
-    const radioButton = el.shadowRoot!.querySelector('mwc-formfield[label="No"] mwc-radio')! as HTMLElement;
+    const radioButton = el.shadowRoot!.querySelectorAll('mwc-formfield mwc-radio')[1] as HTMLElement;
     radioButton.click();
     await nextFrame();
 
-    const issueSelector = el.shadowRoot!.querySelector('mwc-select[label="Outline issue"]');
+    const issueSelector = el.shadowRoot!.querySelector('mwc-select');
     expect(issueSelector?.hasAttribute('hidden')).toBeFalse();
   });
 
   describe('when the user selects issue', () => {
     let issueSelector: HTMLElement;
 
     beforeEach(async () => {
-      issueSelector = el.shadowRoot!.querySelector('mwc-select[label="Outline issue"]')!;
-      const radioButton: HTMLElement = el.shadowRoot!.querySelector('mwc-formfield[label="No"] mwc-radio')!;
+      issueSelector = el.shadowRoot!.querySelector('mwc-select')!;
+      const radioButton = el.shadowRoot!.querySelectorAll('mwc-formfield mwc-radio')[1] as HTMLElement;
       radioButton.click();
       await nextFrame();
     });

src/www/views/contact_view/stories.ts

@@ -20,7 +20,7 @@ import {html} from 'lit';
 
 import './index';
 import {AppType} from './app_type';
-import {localize} from '../../.storybook/localize';
+import {localize} from '../../testing/localize';
 
 export default {
   title: 'Contact View',
@@ -40,9 +40,11 @@ export default {
 };
 
 export const Example = ({variant, onSupportContacted}: {variant: AppType; onSupportContacted: Function}) =>
-  html` <contact-view
+  html`
+    <contact-view
       .localize=${localize}
       .variant=${variant}
       .errorReporter=${{report: console.log}}
       @SupportContacted=${onSupportContacted}
-    ></contact-view> `;
+    ></contact-view>
+  `;

src/www/views/contact_view/support_form/index.spec.ts

@@ -78,7 +78,7 @@ describe('SupportForm', () => {
 
   it('submit button is disabled by default', async () => {
     const el = await fixture(html` <support-form></support-form> `);
-    const submitButton = el.shadowRoot!.querySelector('mwc-button[label="Submit"]')!;
+    const submitButton = el.shadowRoot!.querySelectorAll('mwc-button')[1] as HTMLElement;
     expect(submitButton.hasAttribute('disabled')).toBeTrue();
   });
 
@@ -98,7 +98,7 @@ describe('SupportForm', () => {
       const descriptionInput: TextField = el.shadowRoot!.querySelector('mwc-textarea[name="description"')!;
       await setValue(descriptionInput, 'Test Description');
 
-      submitButton = el.shadowRoot!.querySelector('mwc-button[label="Submit"]')!;
+      submitButton = el.shadowRoot!.querySelectorAll('mwc-button')[1] as HTMLElement;
     });
 
     it('submit button is enabled', async () => {
@@ -119,7 +119,7 @@ describe('SupportForm', () => {
     const el: SupportForm = await fixture(html` <support-form></support-form> `);
     const listener = oneEvent(el, 'cancel');
 
-    const cancelButton: HTMLElement = el.shadowRoot!.querySelector('mwc-button[label="Cancel"]')!;
+    const cancelButton = el.shadowRoot!.querySelectorAll('mwc-button')[0] as HTMLElement;
     cancelButton.click();
 
     const {detail} = await listener;

src/www/views/contact_view/support_form/stories.ts

@@ -21,7 +21,7 @@ import {html} from 'lit';
 import './index';
 import {AppType} from '../app_type';
 import {FormValues} from './index';
-import {localize} from '../../../.storybook/localize';
+import {localize} from '../../../testing/localize';
 
 export default {
   title: 'Contact View/Support Form',

src/www/views/servers_view/server_list/stories.ts

@@ -19,7 +19,7 @@ import './index';
 
 import {html} from 'lit';
 
-import {localize} from '../../../.storybook/localize';
+import {localize} from '../../../testing/localize';
 import {ServerList} from './index';
 import {ServerConnectionState} from '../server_connection_indicator';
 
@@ -53,6 +53,4 @@ export default {
 };
 
 export const Example = ({servers}: ServerList) =>
-  html`
-    <server-list .localize="${localize}" .servers="${servers}"></server-list>
-  `;
+  html` <server-list .localize="${localize}" .servers="${servers}"></server-list> `;

src/www/views/servers_view/server_list_item/server_card/stories.ts

@@ -19,7 +19,7 @@ import {html} from 'lit';
 
 import '../../index';
 
-import {localize} from '../../../../.storybook/localize';
+import {localize} from '../../../../testing/localize';
 import {ServerConnectionState} from '../../server_connection_indicator';
 import {ServerListItemElement} from '..';