From db4cb9181967a1e1eecc51ef00303605ed358c0d Mon Sep 17 00:00:00 2001 From: Sander Bruens Date: Mon, 2 Oct 2023 15:32:06 -0400 Subject: [PATCH] Fix tests that rely on localization. --- src/www/{.storybook => testing}/localize.ts | 4 ++-- src/www/views/contact_view/index.spec.ts | 15 ++++++++------- src/www/views/contact_view/stories.ts | 8 +++++--- .../views/contact_view/support_form/index.spec.ts | 6 +++--- .../views/contact_view/support_form/stories.ts | 2 +- src/www/views/servers_view/server_list/stories.ts | 6 ++---- .../server_list_item/server_card/stories.ts | 2 +- 7 files changed, 22 insertions(+), 21 deletions(-) rename src/www/{.storybook => testing}/localize.ts (92%) diff --git a/src/www/.storybook/localize.ts b/src/www/testing/localize.ts similarity index 92% rename from src/www/.storybook/localize.ts rename to src/www/testing/localize.ts index 7f2b7ee256f..00a736a8c05 100644 --- a/src/www/.storybook/localize.ts +++ b/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)); }; diff --git a/src/www/views/contact_view/index.spec.ts b/src/www/views/contact_view/index.spec.ts index 76a082da740..b9a2c777c36 100644 --- a/src/www/views/contact_view/index.spec.ts +++ b/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,7 +30,7 @@ describe('ContactView', () => { 'SentryErrorReporter', Object.getOwnPropertyNames(SentryErrorReporter.prototype) ); - el = await fixture(html` `); + el = await fixture(html` `); }); it('is defined', async () => { @@ -37,7 +38,7 @@ describe('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,11 +57,11 @@ 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(); }); @@ -68,8 +69,8 @@ describe('ContactView', () => { 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(); }); diff --git a/src/www/views/contact_view/stories.ts b/src/www/views/contact_view/stories.ts index 6fa1996a1b1..079e6cfe425 100644 --- a/src/www/views/contact_view/stories.ts +++ b/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` `; + > + `; diff --git a/src/www/views/contact_view/support_form/index.spec.ts b/src/www/views/contact_view/support_form/index.spec.ts index fae9f7d1062..f00a85cfffe 100644 --- a/src/www/views/contact_view/support_form/index.spec.ts +++ b/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` `); - 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` `); 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; diff --git a/src/www/views/contact_view/support_form/stories.ts b/src/www/views/contact_view/support_form/stories.ts index 3326ddeb882..4cf436d33f2 100644 --- a/src/www/views/contact_view/support_form/stories.ts +++ b/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', diff --git a/src/www/views/servers_view/server_list/stories.ts b/src/www/views/servers_view/server_list/stories.ts index 9c7bc88e12e..6b56c04c967 100644 --- a/src/www/views/servers_view/server_list/stories.ts +++ b/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` - - `; + html` `; diff --git a/src/www/views/servers_view/server_list_item/server_card/stories.ts b/src/www/views/servers_view/server_list_item/server_card/stories.ts index 0146927a969..e330ea16f2b 100644 --- a/src/www/views/servers_view/server_list_item/server_card/stories.ts +++ b/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 '..';