+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- <${KolHeadingWcTag} _label="" _level="${props._level}" class="accordion__heading collapsible__heading">
- <${KolButtonWcTag}
- class="accordion__heading-button collapsible__heading-button"
- slot="expert"
- _ariaControls="nonce-control"
- ${props._open ? '_ariaExpanded=""' : ''}
- ${props._disabled ? '_disabled=""' : ''}
- _icons="codicon codicon-${props._open ? 'remove' : 'add'}"
- _label="${props._label}"
- >
-
-
- (
- 'Accordion',
- async (props): Promise => {
- const page = await newSpecPage({
- components: [KolAccordion],
- template: () => (
+ KolAccordionTag,
+ [KolAccordion],
+ [
+ { ...baseObject },
+ ...([1, 2, 3, 4, 5, 6].map((_level) => ({ ...baseObject, _level })) as AccordionProps[]),
+ { ...baseObject, _level: 1, _open: false, _disabled: false },
+ { ...baseObject, _level: 1, _open: false, _disabled: true },
+ { ...baseObject, _level: 1, _open: true, _disabled: true },
+ { ...baseObject, _level: 1, _open: true, _disabled: false },
+ ],
);
diff --git a/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..08378d3abf
--- /dev/null
+++ b/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,1261 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=1 _type="default" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=1 _type="error" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=1 _type="info" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=1 _type="success" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=1 _type="warning" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=2 _type="default" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=2 _type="error" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=2 _type="info" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=2 _type="success" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=2 _type="warning" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=3 _type="default" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=3 _type="error" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=3 _type="info" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=3 _type="success" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=3 _type="warning" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=4 _type="default" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=4 _type="error" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=4 _type="info" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=4 _type="success" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=4 _type="warning" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=5 _type="default" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=5 _type="error" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=5 _type="info" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=5 _type="success" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=5 _type="warning" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=6 _type="default" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=6 _type="error" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=6 _type="info" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=6 _type="success" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=false _level=6 _type="warning" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1 _type="default" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1 _type="error" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1 _type="info" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1 _type="success" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1 _type="warning" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2 _type="default" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2 _type="error" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2 _type="info" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2 _type="success" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2 _type="warning" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3 _type="default" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3 _type="error" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3 _type="info" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3 _type="success" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3 _type="warning" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4 _type="default" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4 _type="error" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4 _type="info" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4 _type="success" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4 _type="warning" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5 _type="default" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5 _type="error" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5 _type="info" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5 _type="success" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5 _type="warning" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6 _type="default" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6 _type="error" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6 _type="info" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6 _type="success" 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6 _type="warning" 1`] = `
+
+
+
+
+
+
+
+`;
diff --git a/packages/components/src/components/alert/test/html.mock.ts b/packages/components/src/components/alert/test/html.mock.ts
deleted file mode 100644
index 9e33bf6697..0000000000
--- a/packages/components/src/components/alert/test/html.mock.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { mixMembers } from 'stencil-awesome-test';
-
-import { translate } from '../../../i18n';
-
-import type { AlertProps } from '../../../schema';
-import { KolIconTag, KolHeadingWcTag, KolButtonWcTag } from '../../../core/component-names';
-export const getAlertHtml = (props: AlertProps, innerHTML = '', additionalHTML = ''): string => {
- props = mixMembers(
- {
- _level: 1,
- },
- props,
- );
- const type: string = props._type !== undefined ? props._type : 'default';
- props._type = props._type || 'default';
- props._variant = props._variant || 'msg';
-
- return `
-
-
-
-
- ${innerHTML}
-`;
-};
diff --git a/packages/components/src/components/alert/test/snapshot.spec.tsx b/packages/components/src/components/alert/test/snapshot.spec.tsx
index d9fb651985..f64f00e647 100644
--- a/packages/components/src/components/alert/test/snapshot.spec.tsx
+++ b/packages/components/src/components/alert/test/snapshot.spec.tsx
@@ -1,32 +1,29 @@
-import { executeTests } from 'stencil-awesome-test';
+import { KolAlertTag } from '@component-names';
+import type { AlertProps } from '@schema';
+import { executeSnapshotTests } from '@testing';
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getAlertHtml } from './html.mock';
-
-import type { AlertProps } from '../../../schema';
-import type { SpecPage } from '@stencil/core/testing';
import { KolAlert } from '../shadow';
import { KolAlertWc } from '../component';
-executeTests(
- 'Alert',
- async (props): Promise => {
- const page = await newSpecPage({
- components: [KolAlert, KolAlertWc],
- template: () => (
+ KolAlertTag,
+ [KolAlert, KolAlertWc],
+ [...buildByType('default'), ...buildByType('error'), ...buildByType('info'), ...buildByType('success'), ...buildByType('warning')],
);
diff --git a/packages/components/src/components/badge/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/badge/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..201867ed90
--- /dev/null
+++ b/packages/components/src/components/badge/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-badge should render with _label="**Te**xt" 1`] = `
+
+
+
+
+`;
+
+exports[`kol-badge should render with _label="Text" _color="#000000" 1`] = `
+
+
+
+
+`;
+
+exports[`kol-badge should render with _label="Text" _icons="codicon codicon-home" _color="#000000" 1`] = `
+
+
+
+
+`;
+
+exports[`kol-badge should render with _label="Text" _icons="codicon codicon-home" 1`] = `
+
+
+
+
+`;
+
+exports[`kol-badge should render with _label="Text" 1`] = `
+
+
+
+
+`;
diff --git a/packages/components/src/components/badge/test/html.mock.ts b/packages/components/src/components/badge/test/html.mock.ts
deleted file mode 100644
index 7e255cd40f..0000000000
--- a/packages/components/src/components/badge/test/html.mock.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { mixMembers } from 'stencil-awesome-test';
-
-import { handleColorChange } from '../../../schema';
-
-import type { BadgeProps, BadgeStates } from '../../../schema';
-import type { SpanOptions } from '../../span/test/html.mock';
-import { KolSpanWcTag } from '../../../core/component-names';
-
-export const getBadgeHtml = (props: BadgeProps, options?: SpanOptions): string => {
- const state = mixMembers(
- {
- _color: {
- backgroundColor: '#000',
- foregroundColor: '#fff',
- },
- },
- props,
- );
-
- state._color = handleColorChange(props._color || '#000');
-
- return `
-
-
- <${KolSpanWcTag} _allowMarkdown ${props._icons ? `_icons="${props._icons as string}"` : ''} ${props._label ? `_label="${props._label}"` : ''}>
-
-
-`;
-};
diff --git a/packages/components/src/components/badge/test/snapshot.spec.tsx b/packages/components/src/components/badge/test/snapshot.spec.tsx
index 9e6ba4de14..150ba59a7f 100644
--- a/packages/components/src/components/badge/test/snapshot.spec.tsx
+++ b/packages/components/src/components/badge/test/snapshot.spec.tsx
@@ -1,30 +1,17 @@
-import { executeTests } from 'stencil-awesome-test';
+import { KolBadgeTag } from '@component-names';
+import type { BadgeProps } from '@schema';
+import { executeSnapshotTests } from '@testing';
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getBadgeHtml } from './html.mock';
-
-import type { BadgeProps } from '../../../schema';
-import type { SpecPage } from '@stencil/core/testing';
import { KolBadge } from '../shadow';
-executeTests(
- 'Badge',
- async (props): Promise => {
- const page = await newSpecPage({
- components: [KolBadge],
- template: () => (
+ KolBadgeTag,
+ [KolBadge],
+ [
+ { _label: 'Text' },
+ { _label: '**Te**xt' },
+ { _label: 'Text', _color: '#000000' },
+ { _label: 'Text', _icons: 'codicon codicon-home' },
+ { _label: 'Text', _icons: 'codicon codicon-home', _color: '#000000' },
+ ],
);
diff --git a/packages/components/src/components/breadcrumb/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/breadcrumb/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..766eb4788c
--- /dev/null
+++ b/packages/components/src/components/breadcrumb/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-breadcrumb should render with _label="Aria-Label" _links=[{"_href":"www.google.de","_label":"Label"}] 1`] = `
+
+
+
+
+
+`;
diff --git a/packages/components/src/components/breadcrumb/test/html.mock.ts b/packages/components/src/components/breadcrumb/test/html.mock.ts
deleted file mode 100644
index bb9407d53d..0000000000
--- a/packages/components/src/components/breadcrumb/test/html.mock.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { mixMembers } from 'stencil-awesome-test';
-
-import { KolIconTag, KolLinkTag } from '../../../core/component-names';
-
-import type { AnyIconFontClass, BreadcrumbLinkProps, BreadcrumbProps, LabelPropType } from '../../../schema';
-
-export const getBreadcrumbHtml = (props: BreadcrumbProps): string => {
- const state = mixMembers(
- {
- _label: '', // ⚠ required
- _links: [],
- },
- props,
- );
-
- const lastIndex = state._links.length - 1;
- let list = '';
- (state._links as BreadcrumbLinkProps[]).forEach((link, index) => {
- list += `
-
- ${index !== 0 ? `<${KolIconTag} _label="" _icons="codicon codicon-chevron-right" /> ` : ''}
- ${
- lastIndex === index
- ? `${link._hideLabel ? `<${KolIconTag} _label="${link._label}" _icons="${link._icons as AnyIconFontClass}" />` : link._label}`
- : `<${KolLinkTag} {...link}>`
- }
-
- `;
- });
-
- return `
-
-
-
-
- `;
-};
diff --git a/packages/components/src/components/breadcrumb/test/snapshot.spec.tsx b/packages/components/src/components/breadcrumb/test/snapshot.spec.tsx
index 65ab62ed7d..211ac4c708 100644
--- a/packages/components/src/components/breadcrumb/test/snapshot.spec.tsx
+++ b/packages/components/src/components/breadcrumb/test/snapshot.spec.tsx
@@ -1,29 +1,7 @@
-import { executeTests } from 'stencil-awesome-test';
+import { KolBreadcrumbTag } from '@component-names';
+import type { BreadcrumbProps } from '@schema';
+import { executeSnapshotTests } from '@testing';
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getBreadcrumbHtml } from './html.mock';
-
-import type { SpecPage } from '@stencil/core/testing';
-import type { BreadcrumbProps } from '../../../schema';
import { KolBreadcrumb } from '../shadow';
-executeTests(
- 'Breadcrumb',
- async (props): Promise => {
- const page = await newSpecPage({
- components: [KolBreadcrumb],
- template: () => (KolBreadcrumbTag, [KolBreadcrumb], [{ _label: 'Aria-Label', _links: [{ _href: 'www.google.de', _label: 'Label' }] }]);
diff --git a/packages/components/src/components/button-group/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/button-group/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..5cf217f009
--- /dev/null
+++ b/packages/components/src/components/button-group/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-button-group should render with 1`] = `
+
+
+
+
+
+
+
+`;
diff --git a/packages/components/src/components/button-group/test/html.mock.ts b/packages/components/src/components/button-group/test/html.mock.ts
deleted file mode 100644
index 40e0671f5c..0000000000
--- a/packages/components/src/components/button-group/test/html.mock.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const getButtonGroupHtml = (): string => {
- return `
-
-
-
-
- `;
-};
diff --git a/packages/components/src/components/button-group/test/snapshot.spec.tsx b/packages/components/src/components/button-group/test/snapshot.spec.tsx
index fbca294779..944c7d0690 100644
--- a/packages/components/src/components/button-group/test/snapshot.spec.tsx
+++ b/packages/components/src/components/button-group/test/snapshot.spec.tsx
@@ -1,26 +1,8 @@
-import { executeTests } from 'stencil-awesome-test';
+import { KolButtonGroupTag } from '@component-names';
+// import type { ButtonGroupAPI } from '@schema';
+import { executeSnapshotTests } from '@testing';
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getButtonGroupHtml } from './html.mock';
-
-import type { SpecPage } from '@stencil/core/testing';
-import type { ButtonGroupProps } from '../../../schema';
import { KolButtonGroup } from '../shadow';
import { KolButtonGroupWc } from '../component';
-executeTests(
- 'ButtonGroup',
- async (props): Promise => {
- return await newSpecPage({
- components: [KolButtonGroup, KolButtonGroupWc],
- template: () =>
+
+
+
+
+
+`;
diff --git a/packages/components/src/components/button-link/test/html.mock.ts b/packages/components/src/components/button-link/test/html.mock.ts
deleted file mode 100644
index a432c2c28e..0000000000
--- a/packages/components/src/components/button-link/test/html.mock.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { mixMembers } from 'stencil-awesome-test';
-import type { ButtonLinkProps, ButtonLinkStates } from '../../../schema';
-import { KolButtonWcTag } from '../../../core/component-names';
-
-export const getButtonLinkHtml = (props: ButtonLinkProps): string => {
- const state = mixMembers(
- {
- _icons: {},
- _label: '', // ⚠ required
- _on: {},
- _type: 'button',
- _variant: 'normal',
- },
- props,
- );
-
- return `
-
- <${KolButtonWcTag}
- _role="link"
- _type="button"
- ${state._label ? `_label="${state._label}"` : ''}
- _tooltipalign="top"
- >
-
- `;
-};
diff --git a/packages/components/src/components/button-link/test/snapshot.spec.tsx b/packages/components/src/components/button-link/test/snapshot.spec.tsx
index 814a85ed1e..dded60070f 100644
--- a/packages/components/src/components/button-link/test/snapshot.spec.tsx
+++ b/packages/components/src/components/button-link/test/snapshot.spec.tsx
@@ -1,24 +1,7 @@
-import { executeTests } from 'stencil-awesome-test';
+import { KolButtonLinkTag } from '@component-names';
+import type { ButtonLinkProps } from '@schema';
+import { executeSnapshotTests } from '@testing';
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getButtonLinkHtml } from './html.mock';
-
-import type { ButtonLinkProps } from '../../../schema';
-import type { SpecPage } from '@stencil/core/testing';
import { KolButtonLink } from '../shadow';
-executeTests(
- 'ButtonLink',
- async (props): Promise => {
- return await newSpecPage({
- components: [KolButtonLink],
- template: () => (KolButtonLinkTag, [KolButtonLink], [{ _label: 'Beschreibung' }]);
diff --git a/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..598e2bf0af
--- /dev/null
+++ b/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,164 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-button should render with _label="Label" _ariaDescription="Aria Description" 1`] = `
+
+
+
+
+
+
+
+ Aria Description
+
+
+
+
+`;
+
+exports[`kol-button should render with _label="Label" _disabled=false 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`kol-button should render with _label="Label" _disabled=true 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`kol-button should render with _label="Label" _value="Hello" 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`kol-button should render with _label="Label" _variant="danger" 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`kol-button should render with _label="Label" _variant="ghost" 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`kol-button should render with _label="Label" _variant="normal" 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`kol-button should render with _label="Label" _variant="primary" 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`kol-button should render with _label="Label" _variant="secondary" 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`kol-button should render with _label="Label" 1`] = `
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/components/src/components/button/test/html.mock.ts b/packages/components/src/components/button/test/html.mock.ts
deleted file mode 100644
index 4ca2c287b1..0000000000
--- a/packages/components/src/components/button/test/html.mock.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { mixMembers } from 'stencil-awesome-test';
-
-import { showExpertSlot } from '../../../schema';
-
-import clsx from 'clsx';
-
-import type { ButtonProps, ButtonStates } from '../../../schema';
-import { KolSpanWcTag, KolTooltipWcTag } from '../../../core/component-names';
-
-export const getButtonWcHtml = (props: ButtonProps, additionalAttrs = ''): string => {
- const state = mixMembers(
- {
- _icons: {},
- _label: '', // ⚠ required
- _on: {},
- _type: 'button',
- _variant: 'normal',
- },
- props,
- );
- const ariaControls = typeof state._ariaControls === 'string' ? state._ariaControls : undefined;
- const ariaExpanded = typeof state._ariaExpanded === 'boolean' ? state._ariaExpanded : undefined;
- const hasExpertSlot = showExpertSlot(state._label);
- const type = typeof state._type === 'string' ? state._type : 'button';
- const variant = typeof state._variant === 'string' ? state._variant : 'normal';
-
- const classNames = clsx({
- button: true,
- disabled: state._disabled,
- 'hide-label': state._hideLabel,
- [variant]: true,
- });
-
- return `
-
-
- <${KolSpanWcTag}
- class="button-inner"
- _label="${hasExpertSlot ? '' : state._label}"
- >
- (
- {
- _icons: {},
- _label: '', // ⚠ required
- _type: 'button',
- _variant: 'normal',
- },
- props,
- );
- return `
-
- ${getButtonWcHtml(props, ` class="kol-button-wc button ${state._variant}"`)}
-
- `;
-};
diff --git a/packages/components/src/components/button/test/snapshot.spec.tsx b/packages/components/src/components/button/test/snapshot.spec.tsx
index 54ce9c91ad..2eb9781743 100644
--- a/packages/components/src/components/button/test/snapshot.spec.tsx
+++ b/packages/components/src/components/button/test/snapshot.spec.tsx
@@ -1,28 +1,29 @@
-import { executeTests } from 'stencil-awesome-test';
+import { KolButtonTag } from '@component-names';
+import type { ButtonProps } from '@schema';
+import { executeSnapshotTests } from '@testing';
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getButtonHtml } from './html.mock';
-
-import type { SpecPage } from '@stencil/core/testing';
-import type { ButtonProps } from '../../../schema';
import { KolButton } from '../shadow';
import { KolButtonWc } from '../component';
-executeTests(
- 'Button',
- async (props): Promise => {
- const page = await newSpecPage({
- components: [KolButton, KolButtonWc],
- template: () => (
+ KolButtonTag,
+ [KolButton, KolButtonWc],
+ [
+ { _label: 'Label' },
+
+ { _label: 'Label', _disabled: false },
+ { _label: 'Label', _disabled: true },
+
+ ...['primary', 'secondary', 'normal', 'danger', 'ghost'].map(
+ (_variant) =>
+ ({
+ _label: 'Label',
+ _variant,
+ }) as ButtonProps,
+ ),
+
+ { _label: 'Label', _value: 'Hello' },
+
+ { _label: 'Label', _ariaDescription: 'Aria Description' },
+ ],
);
diff --git a/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..e5d971dc1e
--- /dev/null
+++ b/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,338 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=false 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=true 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=0 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=false 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=true 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=1 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=false 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=true 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=2 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=false 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=true 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=3 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=false 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=true 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=4 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=false 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=true 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=5 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=false 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=true 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" _level=6 1`] = `
+
+
+
+`;
+
+exports[`kol-card should render with _label="Überschrift" 1`] = `
+
+
+
+`;
diff --git a/packages/components/src/components/card/test/html.mock.ts b/packages/components/src/components/card/test/html.mock.ts
deleted file mode 100644
index cd95fa5f27..0000000000
--- a/packages/components/src/components/card/test/html.mock.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { mixMembers } from 'stencil-awesome-test';
-
-import type { CardProps } from '../../../schema';
-import { KolHeadingWcTag, KolButtonWcTag } from '../../../core/component-names';
-
-export const getCardHtml = (props: CardProps): string => {
- props = mixMembers(
- {
- _label: '', // ⚠ required
- },
- props,
- );
- return `
-
-
- `;
-};
diff --git a/packages/components/src/components/card/test/snapshot.spec.tsx b/packages/components/src/components/card/test/snapshot.spec.tsx
index b0194ea281..4fde5b1e85 100644
--- a/packages/components/src/components/card/test/snapshot.spec.tsx
+++ b/packages/components/src/components/card/test/snapshot.spec.tsx
@@ -1,30 +1,37 @@
-import { executeTests } from 'stencil-awesome-test';
+import { KolCardTag } from '@component-names';
+import type { CardProps } from '@schema';
+import { executeSnapshotTests } from '@testing';
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
+import { KolCard } from '../shadow';
-import { getCardHtml } from './html.mock';
+executeSnapshotTests(
+ KolCardTag,
+ [KolCard],
+ [
+ { _label: 'Überschrift' },
-import type { SpecPage } from '@stencil/core/testing';
-import type { CardProps } from '../../../schema';
-import { KolCard } from '../shadow';
+ { _label: 'Überschrift', _level: 0 },
+ { _label: 'Überschrift', _level: 1 },
+ { _label: 'Überschrift', _level: 2 },
+ { _label: 'Überschrift', _level: 3 },
+ { _label: 'Überschrift', _level: 4 },
+ { _label: 'Überschrift', _level: 5 },
+ { _label: 'Überschrift', _level: 6 },
+
+ { _label: 'Überschrift', _level: 0, _hasCloser: false },
+ { _label: 'Überschrift', _level: 1, _hasCloser: false },
+ { _label: 'Überschrift', _level: 2, _hasCloser: false },
+ { _label: 'Überschrift', _level: 3, _hasCloser: false },
+ { _label: 'Überschrift', _level: 4, _hasCloser: false },
+ { _label: 'Überschrift', _level: 5, _hasCloser: false },
+ { _label: 'Überschrift', _level: 6, _hasCloser: false },
-executeTests(
- 'Card',
- async (props): Promise => {
- const page = await newSpecPage({
- components: [KolCard],
- template: () =>
+
+
+`;
+
+exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] _hideError=false 1`] = `
+
+
+
+`;
+
+exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] _hideError=true 1`] = `
+
+
+
+`;
+
+exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+
+
+
+`;
+
+exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] _required=false 1`] = `
+
+
+
+`;
+
+exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] _required=true 1`] = `
+
+
+
+`;
+
+exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] _touched=false 1`] = `
+
+
+
+`;
+
+exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] _touched=true 1`] = `
+
+
+
+`;
+
+exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] 1`] = `
+
+
+
+`;
diff --git a/packages/components/src/components/combobox/test/html.mock.ts b/packages/components/src/components/combobox/test/html.mock.ts
deleted file mode 100644
index 6116b01c96..0000000000
--- a/packages/components/src/components/combobox/test/html.mock.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { mixMembers } from 'stencil-awesome-test';
-import { nonce } from '../../../utils/dev.utils';
-
-import { showExpertSlot, type ComboboxProps, type ComboboxStates } from '../../../schema';
-import { KolInputTag } from '../../../core/component-names';
-import clsx from 'clsx';
-
-interface ExtendedComboboxStates extends ComboboxStates {
- _isOpen?: boolean;
- blockSuggestionMouseOver?: boolean;
-}
-
-export const getComboboxHtml = (props: ComboboxProps): string => {
- const state = mixMembers(
- {
- _hasValue: true,
- _hideError: false,
- _id: `id-${nonce()}`,
- _label: '', // ⚠ required
- _suggestions: [],
- _value: '',
- _isOpen: false,
- blockSuggestionMouseOver: false,
- },
- props,
- );
- const hasExpertSlot = showExpertSlot(state._label);
-
- return `
-
-
-
- `;
-};
diff --git a/packages/components/src/components/combobox/test/snapshot.spec.tsx b/packages/components/src/components/combobox/test/snapshot.spec.tsx
index 87d46225b9..f317c11078 100644
--- a/packages/components/src/components/combobox/test/snapshot.spec.tsx
+++ b/packages/components/src/components/combobox/test/snapshot.spec.tsx
@@ -1,28 +1,21 @@
-import { executeTests } from 'stencil-awesome-test';
+import { KolComboboxTag } from '@component-names';
+import type { ComboboxProps } from '@schema';
+import { executeSnapshotTests } from '@testing';
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getComboboxHtml } from './html.mock';
-
-import type { ComboboxProps } from '../../../schema';
-import type { SpecPage } from '@stencil/core/testing';
import { KolCombobox } from '../shadow';
-executeTests(
- 'Combobox',
- async (props): Promise => {
- const page = await newSpecPage({
- components: [KolCombobox],
- template: () => (
+ KolComboboxTag,
+ [KolCombobox],
+ [
+ { ...baseObj },
+ { ...baseObj, _hideError: false },
+ { ...baseObj, _hideError: true },
+ {
+ ...baseObj,
+ _icons: {
left: {
icon: 'codicon codicon-arrow-left',
},
@@ -30,14 +23,11 @@ executeTests(
icon: 'codicon codicon-arrow-right',
},
},
- ],
- _required: [false, true],
- _touched: [false, true],
- _label: ['Label'],
- },
- getComboboxHtml,
- {
- execMode: 'default', // ready
- needTimers: true,
- },
+ },
+ { ...baseObj, _required: false },
+ { ...baseObj, _required: true },
+ { ...baseObj, _touched: false },
+ { ...baseObj, _touched: true },
+ { ...baseObj, _disabled: true },
+ ],
);
diff --git a/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..0ab64f094b
--- /dev/null
+++ b/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,229 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-details should render with _label="Zusammenfassung" _disabled=false _open=false 1`] = `
+
+
+
+`;
+
+exports[`kol-details should render with _label="Zusammenfassung" _disabled=false _open=true 1`] = `
+
+
+
+`;
+
+exports[`kol-details should render with _label="Zusammenfassung" _disabled=true _open=false 1`] = `
+
+
+
+`;
+
+exports[`kol-details should render with _label="Zusammenfassung" _disabled=true _open=true 1`] = `
+
+
+
+`;
+
+exports[`kol-details should render with _label="Zusammenfassung" _level=0 1`] = `
+
+
+
+`;
+
+exports[`kol-details should render with _label="Zusammenfassung" _level=1 1`] = `
+
+
+
+`;
+
+exports[`kol-details should render with _label="Zusammenfassung" _level=2 1`] = `
+
+
+
+`;
+
+exports[`kol-details should render with _label="Zusammenfassung" _level=3 1`] = `
+
+
+
+`;
+
+exports[`kol-details should render with _label="Zusammenfassung" _level=4 1`] = `
+
+
+
+`;
+
+exports[`kol-details should render with _label="Zusammenfassung" _level=5 1`] = `
+
+
+
+`;
+
+exports[`kol-details should render with _label="Zusammenfassung" _level=6 1`] = `
+
+
+
+`;
+
+exports[`kol-details should render with _label="Zusammenfassung" 1`] = `
+
+
+
+`;
diff --git a/packages/components/src/components/details/test/html.mock.ts b/packages/components/src/components/details/test/html.mock.ts
deleted file mode 100644
index d27cd78a12..0000000000
--- a/packages/components/src/components/details/test/html.mock.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { mixMembers } from 'stencil-awesome-test';
-
-import type { DetailsProps } from '../../../schema';
-import { KolButtonWcTag, KolHeadingWcTag } from '../../../core/component-names';
-
-export const getDetailsHtml = (props: DetailsProps): string => {
- props = mixMembers(
- {
- _label: '', // ⚠ required
- },
- props,
- );
-
- return `
-
-
-
-
-
- ${slots.default !== undefined ? slots.default : ''}
- ${slots.footer !== undefined ? slots.footer : ''}
-`;
-};
diff --git a/packages/components/src/components/accordion/test/snapshot.spec.tsx b/packages/components/src/components/accordion/test/snapshot.spec.tsx
index cd39d91a1e..fe85a0b78f 100644
--- a/packages/components/src/components/accordion/test/snapshot.spec.tsx
+++ b/packages/components/src/components/accordion/test/snapshot.spec.tsx
@@ -1,31 +1,25 @@
-import { executeTests } from 'stencil-awesome-test';
+import { KolAccordionTag } from '@component-names';
+import type { AccordionProps } from '@schema';
+import { executeSnapshotTests } from '@testing';
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
+import { KolAccordion } from '../shadow';
-import { getAccordionHtml } from './html.mock';
+// _disabled: [true, false],
+// _label: ['Überschrift'],
+// _level: [1, 2, 3, 4, 5, 6],
+// _open: [true, false],
-import type { AccordionProps } from '../../../schema';
-import type { SpecPage } from '@stencil/core/testing';
-import { KolAccordion } from '../shadow';
+const baseObject = { _label: 'Überschrift' };
-executeTests
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
- <${KolIconTag}
- class="heading-icon"
- _label="${
- props._type === 'success'
- ? 'kol-success'
- : props._type === 'error'
- ? 'kol-error'
- : props._type === 'warning'
- ? 'kol-warning'
- : props._type === 'info'
- ? 'kol-info'
- : 'kol-message'
- }"
- _icons="${
- props._type === 'success'
- ? 'codicon codicon-pass'
- : props._type === 'error'
- ? 'codicon codicon-error'
- : props._type === 'warning'
- ? 'codicon codicon-warning'
- : props._type === 'info'
- ? 'codicon codicon-info'
- : 'codicon codicon-comment'
- }"
- >
-
-
-
-
${
- props._variant === 'card'
- ? `
- ${typeof props._label === 'string' && props._label.length > 0 ? `<${KolHeadingWcTag} _label="${props._label}" _level="${props._level}"> ` : ''}
-
- ${
- props._variant === 'msg'
- ? `
- ${
- props._hasCloser
- ? `<${KolButtonWcTag}
- class="close"
- _hideLabel
- _icons={{
- left: {
- icon: 'codicon codicon-close',
- },
- }}
- _label="${translate('kol-close')}"
- _tooltipAlign="left"
- >`
- : ''
- }
-
-
`
- : ''
- }
-
-
`
- : ''
- }
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
- <${KolHeadingWcTag} _label="${props._label}" _level="${props._level ? props._level : '1'}">
-
-
-
- ${
- props._hasCloser
- ? `<${KolButtonWcTag}
- class="close"
- _hideLabel=""
- _label='kol-close'
- _tooltipAlign="left"
- >`
- : ``
- }
-
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
- <${KolInputTag}
- ${state._hideError ? '_hideerror=""' : ''}
- _hint=""
- _id="id-nonce"
- _label="${typeof state._label === 'string' ? state._label : ''}"
- _tooltipalign="top"
- role="presentation"
- ${state._required ? ' _required=""' : ''}
- ${state._touched ? ' _touched=""' : ''}
- ${(state._alert === undefined && state._touched) || state._alert ? `_alert=""` : ''}
- >
-
- ${
- hasExpertSlot
- ? `
-
-
-
-
-
-
-
-
- ${
- state._isOpen && !(state._disabled === true)
- ? `- ${
- Array.isArray(state._suggestions) &&
- state._suggestions.length > 0 &&
- state._suggestions
- .map((option, index) => {
- return `
- ${option} `; - }) - .join('') - }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- <${KolHeadingWcTag} _label="" _level="${1}" class="collapsible__heading details__heading">
- <${KolButtonWcTag}
- class="collapsible__heading-button details__heading-button"
- slot="expert"
- _ariaControls="nonce-control"
- ${props._open ? '_ariaExpanded=""' : ''}
- ${props._disabled ? '_disabled=""' : ''}
- _icons="codicon codicon-chevron-right"
- _label="${props._label}"
- >
-
-
-
-
-
-
- 
+
+
+
+
+
+-
+
-
+
+
+ -
+
+
+ -
+
+
+
-
+
-
+
+
+ -
+
+
+ -
+
+
+
-
+
-
+
+
+ -
+
+
+ -
+
+
+
-
+
-
+
+
+ -
+
+
+ -
+
+
+
+
+
+
+
- ${
- entryIsLink(link)
- ? `<${KolLinkWcTag} ${typeof icons === 'string' ? `_icons="${icons}"` : ''} ${props._hideLabel ? '_hidelabel=""' : ''} ${link._active ? '_active=""' : ''} _href="${link._href}" _label="${link._label}" class="entry-item">`
- : `<${KolButtonWcTag} ${props._hideLabel ? '_hidelabel=""' : ''} _label="${link._label}" class="entry-item" ${typeof icons === 'string' ? `_icons="${icons}"` : ''} >`
- } ${
- link._children
- ? `<${KolButtonWcTag} _hidelabel="" _label="${expanded ? translate('kol-nav-label-close', { placeholders: { label: link._label as string } }) : translate('kol-nav-label-open', { placeholders: { label: link._label as string } })}" class="expand-button" _icons="codicon codicon-${expanded ? 'remove' : 'add'}" >`
- : ''
- }
-
-
-
- ${
- props._hasCompactButton
- ? `
-
-
- <${KolButtonTag}
- _ariacontrols="nav"
- ${props._hideLabel ? '' : '_ariaexpanded=""'} ${props._hideLabel ? '_hidelabel=""' : '_hidelabel=""'}
- _icons="${props._hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left'}"
- _label="${translate(props._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}"
- _tooltipalign="right"
- _variant="ghost"
- >
-
-
`
- : ''
- }
-
+
+
+
+
+
+
+
+
+
+
+
+
-
- ${slots.default !== undefined ? slots.default : ''}
-
- + Text of the Quote + ++
+ Text of the Quote + ++
+ Text of the Quote + ++
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- <${KolSpanWcTag} class="tooltip-area tooltip-content" ${state._id ? `id="${state._id}"` : ''} _label="${state._label}">
-
`
- }
-`;
-};
diff --git a/packages/components/src/components/tooltip/test/snapshot.spec.tsx b/packages/components/src/components/tooltip/test/snapshot.spec.tsx
index e8eeec374c..fda2111925 100644
--- a/packages/components/src/components/tooltip/test/snapshot.spec.tsx
+++ b/packages/components/src/components/tooltip/test/snapshot.spec.tsx
@@ -1,30 +1,17 @@
-import { executeTests } from 'stencil-awesome-test';
+import { KolTooltipWcTag } from '@component-names';
+import type { TooltipProps } from '@schema';
+import { executeSnapshotTests } from '@testing';
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getTooltipHtml } from './html.mock';
-
-import type { TooltipProps } from '../../../schema';
-import type { SpecPage } from '@stencil/core/testing';
import { KolTooltipWc } from '../component';
-executeTests-
+
-
+
-
+
-
+
-
+
-
-