From 89e22e1579b8d83eeb87200bfd5840f4661b500f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 5 Sep 2022 17:19:45 +0200 Subject: [PATCH] split stories and tests into modules --- .../.storybook/preview.js | 6 + .../installer-consent.element.ts | 6 +- .../consent/installer-consent.stories.ts | 22 ++++ .../consent/installer-content.test.ts | 20 +++ .../installer-database.element.ts | 8 +- .../database/installer-database.stories.ts | 63 ++++++++++ .../database/installer-database.test.ts | 20 +++ .../{ => error}/installer-error.element.ts | 2 +- .../error/installer-error.stories.ts | 37 ++++++ .../installer/error/installer-error.test.ts | 20 +++ .../src/installer/index.ts | 12 +- .../src/installer/installer.element.ts | 12 +- .../src/installer/installer.stories.ts | 116 +----------------- .../src/installer/installer.test.ts | 87 ------------- .../installer-installing.element.ts | 0 .../installer-installing.stories.ts | 17 +++ .../installing/installer-installing.test.ts | 20 +++ .../layout}/installer-layout.element.ts | 0 .../shared/layout/installer-layout.stories.ts | 13 ++ .../shared/layout/installer-layout.test.ts | 20 +++ .../installer/shared/utils.story-helpers.ts | 12 ++ .../{ => user}/installer-user.element.ts | 4 +- .../installer/user/installer-user.stories.ts | 21 ++++ .../src/installer/user/installer-user.test.ts | 20 +++ .../src/stories/installer-page.stories.ts | 13 -- .../src/upgrader/upgrader.element.ts | 2 +- 26 files changed, 339 insertions(+), 234 deletions(-) rename src/Umbraco.Web.UI.Client/src/installer/{ => consent}/installer-consent.element.ts (95%) create mode 100644 src/Umbraco.Web.UI.Client/src/installer/consent/installer-consent.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/installer/consent/installer-content.test.ts rename src/Umbraco.Web.UI.Client/src/installer/{ => database}/installer-database.element.ts (98%) create mode 100644 src/Umbraco.Web.UI.Client/src/installer/database/installer-database.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/installer/database/installer-database.test.ts rename src/Umbraco.Web.UI.Client/src/installer/{ => error}/installer-error.element.ts (96%) create mode 100644 src/Umbraco.Web.UI.Client/src/installer/error/installer-error.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/installer/error/installer-error.test.ts rename src/Umbraco.Web.UI.Client/src/installer/{ => installing}/installer-installing.element.ts (100%) create mode 100644 src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.test.ts rename src/Umbraco.Web.UI.Client/src/installer/{ => shared/layout}/installer-layout.element.ts (100%) create mode 100644 src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts rename src/Umbraco.Web.UI.Client/src/installer/{ => user}/installer-user.element.ts (97%) create mode 100644 src/Umbraco.Web.UI.Client/src/installer/user/installer-user.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/installer/user/installer-user.test.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/stories/installer-page.stories.ts diff --git a/src/Umbraco.Web.UI.Client/.storybook/preview.js b/src/Umbraco.Web.UI.Client/.storybook/preview.js index 760a1f33e7..c3e0b3c0c5 100644 --- a/src/Umbraco.Web.UI.Client/.storybook/preview.js +++ b/src/Umbraco.Web.UI.Client/.storybook/preview.js @@ -47,6 +47,12 @@ export const decorators = [ ]; export const parameters = { + options: { + storySort: { + method: 'alphabetical', + includeNames: true, + }, + }, actions: { argTypesRegex: '^on.*' }, controls: { expanded: true, diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer-consent.element.ts b/src/Umbraco.Web.UI.Client/src/installer/consent/installer-consent.element.ts similarity index 95% rename from src/Umbraco.Web.UI.Client/src/installer/installer-consent.element.ts rename to src/Umbraco.Web.UI.Client/src/installer/consent/installer-consent.element.ts index 27747d82c3..dfa84596bf 100644 --- a/src/Umbraco.Web.UI.Client/src/installer/installer-consent.element.ts +++ b/src/Umbraco.Web.UI.Client/src/installer/consent/installer-consent.element.ts @@ -3,9 +3,9 @@ import { customElement, state } from 'lit/decorators.js'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import { Subscription } from 'rxjs'; -import { UmbContextConsumerMixin } from '../core/context'; -import type { TelemetryModel } from '../core/models'; -import { UmbInstallerContext } from './installer-context'; +import { UmbContextConsumerMixin } from '../../core/context'; +import type { TelemetryModel } from '../../core/models'; +import { UmbInstallerContext } from '../installer-context'; @customElement('umb-installer-consent') export class UmbInstallerConsentElement extends UmbContextConsumerMixin(LitElement) { diff --git a/src/Umbraco.Web.UI.Client/src/installer/consent/installer-consent.stories.ts b/src/Umbraco.Web.UI.Client/src/installer/consent/installer-consent.stories.ts new file mode 100644 index 0000000000..2fd4db2b48 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/installer/consent/installer-consent.stories.ts @@ -0,0 +1,22 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import { installerContextProvider } from '../shared/utils.story-helpers'; +import type { UmbInstallerConsentElement } from './installer-consent.element'; +import './installer-consent.element'; + +export default { + title: 'Components/Installer/Steps', + component: 'umb-installer-consent', + id: 'umb-installer-consent', + decorators: [installerContextProvider], +} as Meta; + +export const Step2Telemetry: Story = () => + html``; +Step2Telemetry.storyName = 'Step 2: Telemetry data'; +Step2Telemetry.parameters = { + actions: { + handles: ['previous', 'next'], + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/installer/consent/installer-content.test.ts b/src/Umbraco.Web.UI.Client/src/installer/consent/installer-content.test.ts new file mode 100644 index 0000000000..d4f910f739 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/installer/consent/installer-content.test.ts @@ -0,0 +1,20 @@ +import { expect, fixture, html } from '@open-wc/testing'; + +import { defaultA11yConfig } from '../../core/helpers/chai'; +import { UmbInstallerConsentElement } from './installer-consent.element'; + +describe('UmbInstallerConsent', () => { + let element: UmbInstallerConsentElement; + + beforeEach(async () => { + element = await fixture(html``); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbInstallerConsentElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer-database.element.ts b/src/Umbraco.Web.UI.Client/src/installer/database/installer-database.element.ts similarity index 98% rename from src/Umbraco.Web.UI.Client/src/installer/installer-database.element.ts rename to src/Umbraco.Web.UI.Client/src/installer/database/installer-database.element.ts index 7df15beb20..0674e2a756 100644 --- a/src/Umbraco.Web.UI.Client/src/installer/installer-database.element.ts +++ b/src/Umbraco.Web.UI.Client/src/installer/database/installer-database.element.ts @@ -3,10 +3,10 @@ import { css, CSSResultGroup, html, LitElement, nothing } from 'lit'; import { customElement, property, query, state } from 'lit/decorators.js'; import { Subscription } from 'rxjs'; -import { postInstallSetup, postInstallValidateDatabase } from '../core/api/fetcher'; -import { UmbContextConsumerMixin } from '../core/context'; -import type { UmbracoInstallerDatabaseModel, UmbracoPerformInstallDatabaseConfiguration } from '../core/models'; -import { UmbInstallerContext } from './installer-context'; +import { postInstallSetup, postInstallValidateDatabase } from '../../core/api/fetcher'; +import { UmbContextConsumerMixin } from '../../core/context'; +import type { UmbracoInstallerDatabaseModel, UmbracoPerformInstallDatabaseConfiguration } from '../../core/models'; +import { UmbInstallerContext } from '../installer-context'; @customElement('umb-installer-database') export class UmbInstallerDatabaseElement extends UmbContextConsumerMixin(LitElement) { diff --git a/src/Umbraco.Web.UI.Client/src/installer/database/installer-database.stories.ts b/src/Umbraco.Web.UI.Client/src/installer/database/installer-database.stories.ts new file mode 100644 index 0000000000..75a0193a2b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/installer/database/installer-database.stories.ts @@ -0,0 +1,63 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; +import { rest } from 'msw'; + +import type { UmbInstallerDatabaseElement } from './installer-database.element'; +import type { UmbracoInstaller } from '../../core/models'; +import { installerContextProvider } from '../shared/utils.story-helpers'; +import './installer-database.element'; + +export default { + title: 'Components/Installer/Steps', + component: 'umb-installer-database', + id: 'umb-installer-database', + decorators: [installerContextProvider], +} as Meta; + +export const Step3Database: Story = () => + html``; +Step3Database.storyName = 'Step 3: Database'; +Step3Database.parameters = { + actions: { + handles: ['previous', 'submit'], + }, +}; + +export const Step3DatabasePreconfigured: Story = () => + html``; +Step3DatabasePreconfigured.storyName = 'Step 3: Database (preconfigured)'; +Step3DatabasePreconfigured.parameters = { + actions: { + handles: ['previous', 'submit'], + }, + msw: { + handlers: { + global: null, + others: [ + rest.get('/umbraco/backoffice/install/settings', (_req, res, ctx) => { + return res( + ctx.status(200), + ctx.json({ + user: { consentLevels: [], minCharLength: 2, minNonAlphaNumericLength: 2 }, + databases: [ + { + id: '1', + sortOrder: -1, + displayName: 'SQLite', + defaultDatabaseName: 'Umbraco', + providerName: 'Microsoft.Data.SQLite', + isConfigured: true, + requiresServer: false, + serverPlaceholder: null, + requiresCredentials: false, + supportsIntegratedAuthentication: false, + requiresConnectionTest: false, + }, + ], + }) + ); + }), + ], + }, + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/installer/database/installer-database.test.ts b/src/Umbraco.Web.UI.Client/src/installer/database/installer-database.test.ts new file mode 100644 index 0000000000..46b9e6fbdc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/installer/database/installer-database.test.ts @@ -0,0 +1,20 @@ +import { expect, fixture, html } from '@open-wc/testing'; + +import { defaultA11yConfig } from '../../core/helpers/chai'; +import { UmbInstallerDatabaseElement } from './installer-database.element'; + +describe('UmbInstallerDatabase', () => { + let element: UmbInstallerDatabaseElement; + + beforeEach(async () => { + element = await fixture(html``); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbInstallerDatabaseElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer-error.element.ts b/src/Umbraco.Web.UI.Client/src/installer/error/installer-error.element.ts similarity index 96% rename from src/Umbraco.Web.UI.Client/src/installer/installer-error.element.ts rename to src/Umbraco.Web.UI.Client/src/installer/error/installer-error.element.ts index 006f0f65ce..fcc834f595 100644 --- a/src/Umbraco.Web.UI.Client/src/installer/installer-error.element.ts +++ b/src/Umbraco.Web.UI.Client/src/installer/error/installer-error.element.ts @@ -1,7 +1,7 @@ import { css, CSSResultGroup, html, LitElement, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import type { ProblemDetails } from '../core/models'; +import type { ProblemDetails } from '../../core/models'; @customElement('umb-installer-error') export class UmbInstallerErrorElement extends LitElement { diff --git a/src/Umbraco.Web.UI.Client/src/installer/error/installer-error.stories.ts b/src/Umbraco.Web.UI.Client/src/installer/error/installer-error.stories.ts new file mode 100644 index 0000000000..bfd08ffbf9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/installer/error/installer-error.stories.ts @@ -0,0 +1,37 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbInstallerErrorElement } from './installer-error.element'; +import { installerContextProvider } from '../shared/utils.story-helpers'; +import './installer-error.element'; + +export default { + title: 'Components/Installer/Steps', + component: 'umb-installer-error', + id: 'umb-installer-error', + decorators: [installerContextProvider], +} as Meta; + +export const Step5Error: Story = ({ error }) => + html``; +Step5Error.storyName = 'Step 5: Error'; +Step5Error.args = { + error: { + type: 'validation', + status: 400, + detail: 'The form did not pass validation', + title: 'Validation error', + errors: { + 'user.password': [ + 'The password must be at least 6 characters long', + 'The password must contain at least one number', + ], + databaseName: ['The database name is required'], + }, + }, +}; +Step5Error.parameters = { + actions: { + handles: ['reset'], + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/installer/error/installer-error.test.ts b/src/Umbraco.Web.UI.Client/src/installer/error/installer-error.test.ts new file mode 100644 index 0000000000..2992367f52 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/installer/error/installer-error.test.ts @@ -0,0 +1,20 @@ +import { expect, fixture, html } from '@open-wc/testing'; + +import { defaultA11yConfig } from '../../core/helpers/chai'; +import { UmbInstallerErrorElement } from './installer-error.element'; + +describe('UmbInstallerError', () => { + let element: UmbInstallerErrorElement; + + beforeEach(async () => { + element = await fixture(html``); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbInstallerErrorElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/installer/index.ts b/src/Umbraco.Web.UI.Client/src/installer/index.ts index c04bec1ae7..e122f942da 100644 --- a/src/Umbraco.Web.UI.Client/src/installer/index.ts +++ b/src/Umbraco.Web.UI.Client/src/installer/index.ts @@ -1,7 +1,7 @@ -export * from './installer-consent.element'; -export * from './installer-database.element'; -export * from './installer-installing.element'; -export * from './installer-user.element'; -export * from './installer-layout.element'; -export * from './installer-error.element'; +export * from './consent/installer-consent.element'; +export * from './database/installer-database.element'; +export * from './installing/installer-installing.element'; +export * from './user/installer-user.element'; +export * from './error/installer-error.element'; export * from './installer.element'; +export * from './shared/layout/installer-layout.element'; diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer.element.ts b/src/Umbraco.Web.UI.Client/src/installer/installer.element.ts index f5795d2e73..16706b2bfa 100644 --- a/src/Umbraco.Web.UI.Client/src/installer/installer.element.ts +++ b/src/Umbraco.Web.UI.Client/src/installer/installer.element.ts @@ -1,9 +1,9 @@ -import './installer-consent.element'; -import './installer-database.element'; -import './installer-error.element'; -import './installer-installing.element'; -import './installer-layout.element'; -import './installer-user.element'; +import './consent/installer-consent.element'; +import './database/installer-database.element'; +import './error/installer-error.element'; +import './installing/installer-installing.element'; +import './shared/layout/installer-layout.element'; +import './user/installer-user.element'; import { css, CSSResultGroup, html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer.stories.ts b/src/Umbraco.Web.UI.Client/src/installer/installer.stories.ts index 0cb5978580..14935eada3 100644 --- a/src/Umbraco.Web.UI.Client/src/installer/installer.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/installer/installer.stories.ts @@ -1,118 +1,12 @@ -import '../core/context/context-provider.element'; -import './installer-consent.element'; -import './installer-database.element'; -import './installer-error.element'; -import './installer-installing.element'; -import './installer-user.element'; - -import { Meta, Story } from '@storybook/web-components'; +import { Meta } from '@storybook/web-components'; import { html } from 'lit-html'; -import { rest } from 'msw'; -import { UmbInstallerContext } from './installer-context'; +import '.'; -import type { UmbInstallerErrorElement, UmbInstallerUserElement } from '.'; -import type { UmbracoInstaller } from '../core/models'; export default { - title: 'Components/Installer/Steps', + title: 'Components/Installer', component: 'umb-installer', - id: 'installer', - decorators: [ - (story) => - html` - ${story()} - `, - ], + id: 'umb-installer', } as Meta; -export const Step1User: Story = () => html``; -Step1User.storyName = 'Step 1: User'; -Step1User.parameters = { - actions: { - handles: ['next'], - }, -}; - -export const Step2Telemetry: Story = () => html``; -Step2Telemetry.storyName = 'Step 2: Telemetry data'; -Step2Telemetry.parameters = { - actions: { - handles: ['previous', 'next'], - }, -}; - -export const Step3Database: Story = () => html``; -Step3Database.storyName = 'Step 3: Database'; -Step3Database.parameters = { - actions: { - handles: ['previous', 'submit'], - }, -}; - -export const Step3DatabasePreconfigured: Story = () => html``; -Step3DatabasePreconfigured.storyName = 'Step 3: Database (preconfigured)'; -Step3DatabasePreconfigured.parameters = { - actions: { - handles: ['previous', 'submit'], - }, - msw: { - handlers: { - global: null, - others: [ - rest.get('/umbraco/backoffice/install/settings', (_req, res, ctx) => { - return res( - ctx.status(200), - ctx.json({ - user: { consentLevels: [], minCharLength: 2, minNonAlphaNumericLength: 2 }, - databases: [ - { - id: '1', - sortOrder: -1, - displayName: 'SQLite', - defaultDatabaseName: 'Umbraco', - providerName: 'Microsoft.Data.SQLite', - isConfigured: true, - requiresServer: false, - serverPlaceholder: null, - requiresCredentials: false, - supportsIntegratedAuthentication: false, - requiresConnectionTest: false, - }, - ], - }) - ); - }), - ], - }, - }, -}; - -export const Step4Installing: Story = () => html``; -Step4Installing.storyName = 'Step 4: Installing'; - -export const Step5Error: Story = ({ error }) => - html``; -Step5Error.storyName = 'Step 5: Error'; -Step5Error.args = { - error: { - type: 'validation', - status: 400, - detail: 'The form did not pass validation', - title: 'Validation error', - errors: { - 'user.password': [ - 'The password must be at least 6 characters long', - 'The password must contain at least one number', - ], - databaseName: ['The database name is required'], - }, - }, -}; -Step5Error.parameters = { - actions: { - handles: ['reset'], - }, -}; +export const Installer = () => html``; diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer.test.ts b/src/Umbraco.Web.UI.Client/src/installer/installer.test.ts index ef6817887e..9f6b57a962 100644 --- a/src/Umbraco.Web.UI.Client/src/installer/installer.test.ts +++ b/src/Umbraco.Web.UI.Client/src/installer/installer.test.ts @@ -1,13 +1,6 @@ -import '.'; - import { expect, fixture, html } from '@open-wc/testing'; import { defaultA11yConfig } from '../core/helpers/chai'; -import { UmbInstallerConsentElement } from './installer-consent.element'; -import { UmbInstallerDatabaseElement } from './installer-database.element'; -import { UmbInstallerInstallingElement } from './installer-installing.element'; -import { UmbInstallerLayoutElement } from './installer-layout.element'; -import { UmbInstallerUserElement } from './installer-user.element'; import { UmbInstallerElement } from './installer.element'; describe('UmbInstaller', () => { @@ -25,83 +18,3 @@ describe('UmbInstaller', () => { await expect(element).to.be.accessible(defaultA11yConfig); }); }); - -describe('UmbInstallerLayout', () => { - let element: UmbInstallerLayoutElement; - - beforeEach(async () => { - element = await fixture(html``); - }); - - it('is defined with its own instance', () => { - expect(element).to.be.instanceOf(UmbInstallerLayoutElement); - }); - - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); -}); - -describe('UmbInstallerUser', () => { - let element: UmbInstallerUserElement; - - beforeEach(async () => { - element = await fixture(html``); - }); - - it('is defined with its own instance', () => { - expect(element).to.be.instanceOf(UmbInstallerUserElement); - }); - - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); -}); - -describe('UmbInstallerConsent', () => { - let element: UmbInstallerConsentElement; - - beforeEach(async () => { - element = await fixture(html``); - }); - - it('is defined with its own instance', () => { - expect(element).to.be.instanceOf(UmbInstallerConsentElement); - }); - - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); -}); - -describe('UmbInstallerDatabase', () => { - let element: UmbInstallerDatabaseElement; - - beforeEach(async () => { - element = await fixture(html``); - }); - - it('is defined with its own instance', () => { - expect(element).to.be.instanceOf(UmbInstallerDatabaseElement); - }); - - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); -}); - -describe('UmbInstallerInstalling', () => { - let element: UmbInstallerInstallingElement; - - beforeEach(async () => { - element = await fixture(html``); - }); - - it('is defined with its own instance', () => { - expect(element).to.be.instanceOf(UmbInstallerInstallingElement); - }); - - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); -}); diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer-installing.element.ts b/src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/installer/installer-installing.element.ts rename to src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.stories.ts b/src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.stories.ts new file mode 100644 index 0000000000..6a526c88c3 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.stories.ts @@ -0,0 +1,17 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbInstallerInstallingElement } from './installer-installing.element'; +import { installerContextProvider } from '../shared/utils.story-helpers'; +import './installer-installing.element'; + +export default { + title: 'Components/Installer/Steps', + component: 'umb-installer-installing', + id: 'umb-installer-installing', + decorators: [installerContextProvider], +} as Meta; + +export const Step4Installing: Story = () => + html``; +Step4Installing.storyName = 'Step 4: Installing'; diff --git a/src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.test.ts b/src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.test.ts new file mode 100644 index 0000000000..12ebff3b86 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.test.ts @@ -0,0 +1,20 @@ +import { expect, fixture, html } from '@open-wc/testing'; + +import { defaultA11yConfig } from '../../core/helpers/chai'; +import { UmbInstallerInstallingElement } from './installer-installing.element'; + +describe('UmbInstallerInstalling', () => { + let element: UmbInstallerInstallingElement; + + beforeEach(async () => { + element = await fixture(html``); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbInstallerInstallingElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer-layout.element.ts b/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/installer/installer-layout.element.ts rename to src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.stories.ts new file mode 100644 index 0000000000..e0879f40fc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.stories.ts @@ -0,0 +1,13 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbInstallerLayoutElement } from './installer-layout.element'; +import './installer-layout.element'; + +export default { + title: 'Components/Installer/Shared', + component: 'umb-installer-layout', + id: 'umb-installer-layout', +} as Meta; + +export const Layout: Story = () => html``; diff --git a/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.test.ts b/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.test.ts new file mode 100644 index 0000000000..64e0a4240f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.test.ts @@ -0,0 +1,20 @@ +import { expect, fixture, html } from '@open-wc/testing'; + +import { defaultA11yConfig } from '../../../core/helpers/chai'; +import { UmbInstallerLayoutElement } from './installer-layout.element'; + +describe('UmbInstallerLayoutElement', () => { + let element: UmbInstallerLayoutElement; + + beforeEach(async () => { + element = await fixture(html``); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbInstallerLayoutElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts b/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts new file mode 100644 index 0000000000..fa8f444933 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts @@ -0,0 +1,12 @@ +import { html } from 'lit-html'; +import { UmbInstallerContext } from '../installer-context'; +import '../../core/context/context-provider.element'; + +export const installerContextProvider = (story: any) => html` + + ${story()} + +`; diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer-user.element.ts b/src/Umbraco.Web.UI.Client/src/installer/user/installer-user.element.ts similarity index 97% rename from src/Umbraco.Web.UI.Client/src/installer/installer-user.element.ts rename to src/Umbraco.Web.UI.Client/src/installer/user/installer-user.element.ts index e31b16fc58..6a8992c1ee 100644 --- a/src/Umbraco.Web.UI.Client/src/installer/installer-user.element.ts +++ b/src/Umbraco.Web.UI.Client/src/installer/user/installer-user.element.ts @@ -2,8 +2,8 @@ import { css, CSSResultGroup, html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { Subscription } from 'rxjs'; -import { UmbContextConsumerMixin } from '../core/context'; -import { UmbInstallerContext } from './installer-context'; +import { UmbContextConsumerMixin } from '../../core/context'; +import { UmbInstallerContext } from '../installer-context'; @customElement('umb-installer-user') export class UmbInstallerUserElement extends UmbContextConsumerMixin(LitElement) { diff --git a/src/Umbraco.Web.UI.Client/src/installer/user/installer-user.stories.ts b/src/Umbraco.Web.UI.Client/src/installer/user/installer-user.stories.ts new file mode 100644 index 0000000000..59a6fb099b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/installer/user/installer-user.stories.ts @@ -0,0 +1,21 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbInstallerUserElement } from './installer-user.element'; +import { installerContextProvider } from '../shared/utils.story-helpers'; +import './installer-user.element'; + +export default { + title: 'Components/Installer/Steps', + component: 'umb-installer-user', + id: 'umb-installer-user', + decorators: [installerContextProvider], +} as Meta; + +export const Step1User: Story = () => html``; +Step1User.storyName = 'Step 1: User'; +Step1User.parameters = { + actions: { + handles: ['next'], + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/installer/user/installer-user.test.ts b/src/Umbraco.Web.UI.Client/src/installer/user/installer-user.test.ts new file mode 100644 index 0000000000..c34665e724 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/installer/user/installer-user.test.ts @@ -0,0 +1,20 @@ +import { expect, fixture, html } from '@open-wc/testing'; + +import { defaultA11yConfig } from '../../core/helpers/chai'; +import { UmbInstallerUserElement } from './installer-user.element'; + +describe('UmbInstallerUser', () => { + let element: UmbInstallerUserElement; + + beforeEach(async () => { + element = await fixture(html``); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbInstallerUserElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/stories/installer-page.stories.ts b/src/Umbraco.Web.UI.Client/src/stories/installer-page.stories.ts deleted file mode 100644 index 28e68ff25a..0000000000 --- a/src/Umbraco.Web.UI.Client/src/stories/installer-page.stories.ts +++ /dev/null @@ -1,13 +0,0 @@ -import '../core/context/context-provider.element'; -import '../installer/installer.element'; - -import { Meta } from '@storybook/web-components'; -import { html } from 'lit-html'; - -export default { - title: 'Pages/Installer', - component: 'umb-installer', - id: 'installer-page', -} as Meta; - -export const Installer = () => html``; diff --git a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.element.ts b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.element.ts index 8b1a339c60..f69883a0d3 100644 --- a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.element.ts +++ b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.element.ts @@ -1,4 +1,4 @@ -import '../installer/installer-layout.element'; +import '../installer/shared/layout/installer-layout.element'; import './upgrader-view.element'; import { html, LitElement } from 'lit';