split stories and tests into modules

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,

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) {

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<UmbInstallerConsentElement> = () =>
+	html`<umb-installer-consent></umb-installer-consent>`;
+Step2Telemetry.storyName = 'Step 2: Telemetry data';
+Step2Telemetry.parameters = {
+	actions: {
+		handles: ['previous', 'next'],
+	},
+};

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`<umb-installer-consent></umb-installer-consent>`);
+	});
+
+	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);
+	});
+});

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) {

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<UmbInstallerDatabaseElement> = () =>
+	html`<umb-installer-database></umb-installer-database>`;
+Step3Database.storyName = 'Step 3: Database';
+Step3Database.parameters = {
+	actions: {
+		handles: ['previous', 'submit'],
+	},
+};
+
+export const Step3DatabasePreconfigured: Story<UmbInstallerDatabaseElement> = () =>
+	html`<umb-installer-database></umb-installer-database>`;
+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<UmbracoInstaller>({
+							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,
+								},
+							],
+						})
+					);
+				}),
+			],
+		},
+	},
+};

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`<umb-installer-database></umb-installer-database>`);
+	});
+
+	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);
+	});
+});

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 {

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<UmbInstallerErrorElement> = ({ error }) =>
+	html`<umb-installer-error .error=${error}></umb-installer-error>`;
+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'],
+	},
+};

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`<umb-installer-error></umb-installer-error>`);
+	});
+
+	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);
+	});
+});

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';

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';

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`<umb-context-provider
-				style="display: block;margin: 2rem 25%;padding: 1rem;border: 1px solid #ddd;"
-				key="umbInstallerContext"
-				.value=${new UmbInstallerContext()}>
-				${story()}
-			</umb-context-provider>`,
-	],
+	id: 'umb-installer',
 } as Meta;
 
-export const Step1User: Story<UmbInstallerUserElement> = () => html`<umb-installer-user></umb-installer-user>`;
-Step1User.storyName = 'Step 1: User';
-Step1User.parameters = {
-	actions: {
-		handles: ['next'],
-	},
-};
-
-export const Step2Telemetry: Story = () => html`<umb-installer-consent></umb-installer-consent>`;
-Step2Telemetry.storyName = 'Step 2: Telemetry data';
-Step2Telemetry.parameters = {
-	actions: {
-		handles: ['previous', 'next'],
-	},
-};
-
-export const Step3Database: Story = () => html`<umb-installer-database></umb-installer-database>`;
-Step3Database.storyName = 'Step 3: Database';
-Step3Database.parameters = {
-	actions: {
-		handles: ['previous', 'submit'],
-	},
-};
-
-export const Step3DatabasePreconfigured: Story = () => html`<umb-installer-database></umb-installer-database>`;
-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<UmbracoInstaller>({
-							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`<umb-installer-installing></umb-installer-installing>`;
-Step4Installing.storyName = 'Step 4: Installing';
-
-export const Step5Error: Story<UmbInstallerErrorElement> = ({ error }) =>
-	html`<umb-installer-error .error=${error}></umb-installer-error>`;
-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`<umb-installer></umb-installer>`;

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`<umb-installer-layout></umb-installer-layout>`);
-	});
-
-	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`<umb-installer-user></umb-installer-user>`);
-	});
-
-	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`<umb-installer-consent></umb-installer-consent>`);
-	});
-
-	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`<umb-installer-database></umb-installer-database>`);
-	});
-
-	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`<umb-installer-installing></umb-installer-installing>`);
-	});
-
-	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);
-	});
-});

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<UmbInstallerInstallingElement> = () =>
+	html`<umb-installer-installing></umb-installer-installing>`;
+Step4Installing.storyName = 'Step 4: Installing';

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`<umb-installer-installing></umb-installer-installing>`);
+	});
+
+	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);
+	});
+});

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<UmbInstallerLayoutElement> = () => html`<umb-installer-layout></umb-installer-layout>`;

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`<umb-installer-layout></umb-installer-layout>`);
+	});
+
+	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);
+	});
+});

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`
+	<umb-context-provider
+		style="display: block;margin: 2rem 25%;padding: 1rem;border: 1px solid #ddd;"
+		key="umbInstallerContext"
+		.value=${new UmbInstallerContext()}>
+		${story()}
+	</umb-context-provider>
+`;

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) {

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<UmbInstallerUserElement> = () => html`<umb-installer-user></umb-installer-user>`;
+Step1User.storyName = 'Step 1: User';
+Step1User.parameters = {
+	actions: {
+		handles: ['next'],
+	},
+};

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`<umb-installer-user></umb-installer-user>`);
+	});
+
+	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);
+	});
+});

src/Umbraco.Web.UI.Client/src/stories/installer-page.stories.ts

@@ -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`<umb-installer></umb-installer>`;

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';