@six-group/ui-library 0.0.0-insider.cd0cd0d → 0.0.0-insider.d005298

package/dist/collection/components/six-error-page/six-error-page.js

@@ -1,40 +1,40 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 const TITLE_PER_ERROR_CODE = {
-  403: {
-    en: 'Access Denied',
-    de: 'Kein Zugriff',
-  },
-  404: {
-    en: 'Not Found',
-    de: 'Seite nicht gefunden',
-  },
-  500: {
-    en: 'Ooops!',
-    de: 'Ups!',
-  },
+    403: {
+        en: 'Access Denied',
+        de: 'Kein Zugriff',
+    },
+    404: {
+        en: 'Not Found',
+        de: 'Seite nicht gefunden',
+    },
+    500: {
+        en: 'Ooops!',
+        de: 'Ups!',
+    },
 };
 const DESCRIPTION_PER_ERROR_CODE = {
-  403: {
-    en: [
-      'You don’t have permission to access this page. ',
-      'Please contact an administrator or click the SIX logo on top left.',
-    ],
-    de: [
-      'Sie haben keine Zugriffsberechtigung auf diese Seite.',
-      'Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links.',
-    ],
-  },
-  404: {
-    en: ['We have not found the page you requested.', 'Please click the SIX logo on top left.'],
-    de: ['Wir haben die angeforderte Seite nicht gefunden.', 'Bitte klicken Sie auf das SIX-Logo oben links.'],
-  },
-  500: {
-    en: ['Sorry, we messed up! We try to fix this.', 'Please click the SIX logo on top left.'],
-    de: [
-      'Sorry, das war unser Fehler! Wir versuchen das zu beheben.',
-      'Bitte klicken Sie auf das SIX-Logo oben links.',
-    ],
-  },
+    403: {
+        en: [
+            'You don’t have permission to access this page. ',
+            'Please contact an administrator or click the SIX logo on top left.',
+        ],
+        de: [
+            'Sie haben keine Zugriffsberechtigung auf diese Seite.',
+            'Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links.',
+        ],
+    },
+    404: {
+        en: ['We have not found the page you requested.', 'Please click the SIX logo on top left.'],
+        de: ['Wir haben die angeforderte Seite nicht gefunden.', 'Bitte klicken Sie auf das SIX-Logo oben links.'],
+    },
+    500: {
+        en: ['Sorry, we messed up! We try to fix this.', 'Please click the SIX logo on top left.'],
+        de: [
+            'Sorry, das war unser Fehler! Wir versuchen das zu beheben.',
+            'Bitte klicken Sie auf das SIX-Logo oben links.',
+        ],
+    },
 };
 /*
  * @since 2.2.0
@@ -44,158 +44,158 @@ const DESCRIPTION_PER_ERROR_CODE = {
  * @part separator - The separator between the language labels
  */
 export class SixErrorPage {
-  constructor() {
-    this.errorCode = undefined;
-    this.language = 'en';
-    this.customTitle = undefined;
-    this.customDescription = undefined;
-    this.customIcon = undefined;
-  }
-  getIconName() {
-    if (this.customIcon != null) {
-      return this.customIcon;
+    constructor() {
+        this.errorCode = undefined;
+        this.language = 'en';
+        this.customTitle = undefined;
+        this.customDescription = undefined;
+        this.customIcon = undefined;
     }
-    if (this.errorCode == null) {
-      return;
-    }
-    if (this.errorCode === 403) {
-      return 'lock';
+    getIconName() {
+        if (this.customIcon != null) {
+            return this.customIcon;
+        }
+        if (this.errorCode == null) {
+            return;
+        }
+        if (this.errorCode === 403) {
+            return 'lock';
+        }
+        if (this.errorCode === 404) {
+            return 'find-in-page';
+        }
+        if (this.errorCode === 500) {
+            return 'sentiment-dissatisfied';
+        }
     }
-    if (this.errorCode === 404) {
-      return 'find-in-page';
+    getErrorTitle() {
+        if (this.customTitle != null) {
+            return this.customTitle;
+        }
+        if (this.errorCode == null) {
+            return;
+        }
+        return TITLE_PER_ERROR_CODE[this.errorCode][this.language];
     }
-    if (this.errorCode === 500) {
-      return 'sentiment-dissatisfied';
+    getErrorDescription() {
+        var _a;
+        if (this.errorCode == null && this.customDescription == null) {
+            return;
+        }
+        const descriptions = (_a = this.getDescriptions()) !== null && _a !== void 0 ? _a : [];
+        return descriptions.map((errorMessage) => h("div", null, errorMessage));
     }
-  }
-  getErrorTitle() {
-    if (this.customTitle != null) {
-      return this.customTitle;
+    getDescriptions() {
+        if (this.customDescription !== undefined) {
+            return this.customDescription;
+        }
+        if (this.errorCode == null) {
+            return;
+        }
+        return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];
     }
-    if (this.errorCode == null) {
-      return;
+    render() {
+        return (h("div", { part: "container" }, h("div", { class: "six-error-page__icon-container", part: "icon-container" }, h("six-picto", { size: "4xl", class: "six-error-page__icon", part: "icon" }, this.getIconName())), h("div", { class: "six-error-page__title", part: "title" }, this.getErrorTitle()), h("div", { class: "six-error-page__description", part: "description" }, this.getErrorDescription())));
     }
-    return TITLE_PER_ERROR_CODE[this.errorCode][this.language];
-  }
-  getErrorDescription() {
-    var _a;
-    if (this.errorCode == null && this.customDescription == null) {
-      return;
+    static get is() { return "six-error-page"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-error-page.scss"]
+        };
     }
-    const descriptions = (_a = this.getDescriptions()) !== null && _a !== void 0 ? _a : [];
-    return descriptions.map((errorMessage) => h("div", null, errorMessage));
-  }
-  getDescriptions() {
-    if (this.customDescription !== undefined) {
-      return this.customDescription;
+    static get styleUrls() {
+        return {
+            "$": ["six-error-page.css"]
+        };
     }
-    if (this.errorCode == null) {
-      return;
+    static get properties() {
+        return {
+            "errorCode": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "404 | 403 | 500",
+                    "resolved": "403 | 404 | 500 | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines error Code and thus displays the proper error page."
+                },
+                "attribute": "error-code",
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'en' | 'de'",
+                    "resolved": "\"de\" | \"en\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines language and thus displays the proper error page in the selected language."
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'en'"
+            },
+            "customTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines a custom title."
+                },
+                "attribute": "custom-title",
+                "reflect": false
+            },
+            "customDescription": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines a custom description."
+                }
+            },
+            "customIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines a custom icon."
+                },
+                "attribute": "custom-icon",
+                "reflect": false
+            }
+        };
     }
-    return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];
-  }
-  render() {
-    return (h("div", { part: "container" }, h("div", { class: "six-error-page__icon-container", part: "icon-container" }, h("six-picto", { size: "4xl", class: "six-error-page__icon", part: "icon" }, this.getIconName())), h("div", { class: "six-error-page__title", part: "title" }, this.getErrorTitle()), h("div", { class: "six-error-page__description", part: "description" }, this.getErrorDescription())));
-  }
-  static get is() { return "six-error-page"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-error-page.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-error-page.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "errorCode": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "404 | 403 | 500",
-          "resolved": "403 | 404 | 500 | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Defines error Code and thus displays the proper error page."
-        },
-        "attribute": "error-code",
-        "reflect": false
-      },
-      "language": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'en' | 'de'",
-          "resolved": "\"de\" | \"en\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Defines language and thus displays the proper error page in the selected language."
-        },
-        "attribute": "language",
-        "reflect": false,
-        "defaultValue": "'en'"
-      },
-      "customTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Defines a custom title."
-        },
-        "attribute": "custom-title",
-        "reflect": false
-      },
-      "customDescription": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[] | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Defines a custom description."
-        }
-      },
-      "customIcon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Defines a custom icon."
-        },
-        "attribute": "custom-icon",
-        "reflect": false
-      }
-    };
-  }
 }
 //# sourceMappingURL=six-error-page.js.map

package/dist/collection/components/six-error-page/six-error-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-error-page.js","sourceRoot":"","sources":["../../../src/components/six-error-page/six-error-page.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\ntype ErrorCode = 403 | 404 | 500;\n\nconst TITLE_PER_ERROR_CODE: Record<\n  ErrorCode,\n  {\n    en: string;\n    de: string;\n  }\n> = {\n  403: {\n    en: 'Access Denied',\n    de: 'Kein Zugriff',\n  },\n  404: {\n    en: 'Not Found',\n    de: 'Seite nicht gefunden',\n  },\n  500: {\n    en: 'Ooops!',\n    de: 'Ups!',\n  },\n};\n\nconst DESCRIPTION_PER_ERROR_CODE: Record<ErrorCode, { en: string[]; de: string[] }> = {\n  403: {\n    en: [\n      'You don’t have permission to access this page. ',\n      'Please contact an administrator or click the SIX logo on top left.',\n    ],\n    de: [\n      'Sie haben keine Zugriffsberechtigung auf diese Seite.',\n      'Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links.',\n    ],\n  },\n  404: {\n    en: ['We have not found the page you requested.', 'Please click the SIX logo on top left.'],\n    de: ['Wir haben die angeforderte Seite nicht gefunden.', 'Bitte klicken Sie auf das SIX-Logo oben links.'],\n  },\n  500: {\n    en: ['Sorry, we messed up! We try to fix this.', 'Please click the SIX logo on top left.'],\n    de: [\n      'Sorry, das war unser Fehler! Wir versuchen das zu beheben.',\n      'Bitte klicken Sie auf das SIX-Logo oben links.',\n    ],\n  },\n};\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n\n@Component({\n  tag: 'six-error-page',\n  styleUrl: 'six-error-page.scss',\n  shadow: true,\n})\nexport class SixErrorPage {\n  /**\n   * Defines error Code and thus displays the proper error page.\n   */\n  @Prop() errorCode?: 404 | 403 | 500;\n\n  /**\n   * Defines language and thus displays the proper error page in the selected language.\n   */\n  @Prop() language: 'en' | 'de' = 'en';\n\n  /**\n   * Defines a custom title.\n   */\n  @Prop() customTitle?: string;\n\n  /**\n   * Defines a custom description.\n   */\n  @Prop() customDescription?: string[];\n\n  /**\n   * Defines a custom icon.\n   */\n  @Prop() customIcon?: string;\n\n  private getIconName() {\n    if (this.customIcon != null) {\n      return this.customIcon;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    if (this.errorCode === 403) {\n      return 'lock';\n    }\n\n    if (this.errorCode === 404) {\n      return 'find-in-page';\n    }\n\n    if (this.errorCode === 500) {\n      return 'sentiment-dissatisfied';\n    }\n  }\n\n  private getErrorTitle(): string | undefined {\n    if (this.customTitle != null) {\n      return this.customTitle;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    return TITLE_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  private getErrorDescription() {\n    if (this.errorCode == null && this.customDescription == null) {\n      return;\n    }\n\n    const descriptions = this.getDescriptions() ?? [];\n    return descriptions.map((errorMessage) => <div>{errorMessage}</div>);\n  }\n\n  private getDescriptions() {\n    if (this.customDescription !== undefined) {\n      return this.customDescription;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  render() {\n    return (\n      <div part=\"container\">\n        <div class=\"six-error-page__icon-container\" part=\"icon-container\">\n          <six-picto size=\"4xl\" class=\"six-error-page__icon\" part=\"icon\">\n            {this.getIconName()}\n          </six-picto>\n        </div>\n        <div class=\"six-error-page__title\" part=\"title\">\n          {this.getErrorTitle()}\n        </div>\n        <div class=\"six-error-page__description\" part=\"description\">\n          {this.getErrorDescription()}\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-error-page.js","sourceRoot":"","sources":["../../../src/components/six-error-page/six-error-page.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\ntype ErrorCode = 403 | 404 | 500;\n\nconst TITLE_PER_ERROR_CODE: Record<\n  ErrorCode,\n  {\n    en: string;\n    de: string;\n  }\n> = {\n  403: {\n    en: 'Access Denied',\n    de: 'Kein Zugriff',\n  },\n  404: {\n    en: 'Not Found',\n    de: 'Seite nicht gefunden',\n  },\n  500: {\n    en: 'Ooops!',\n    de: 'Ups!',\n  },\n};\n\nconst DESCRIPTION_PER_ERROR_CODE: Record<ErrorCode, { en: string[]; de: string[] }> = {\n  403: {\n    en: [\n      'You don’t have permission to access this page. ',\n      'Please contact an administrator or click the SIX logo on top left.',\n    ],\n    de: [\n      'Sie haben keine Zugriffsberechtigung auf diese Seite.',\n      'Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links.',\n    ],\n  },\n  404: {\n    en: ['We have not found the page you requested.', 'Please click the SIX logo on top left.'],\n    de: ['Wir haben die angeforderte Seite nicht gefunden.', 'Bitte klicken Sie auf das SIX-Logo oben links.'],\n  },\n  500: {\n    en: ['Sorry, we messed up! We try to fix this.', 'Please click the SIX logo on top left.'],\n    de: [\n      'Sorry, das war unser Fehler! Wir versuchen das zu beheben.',\n      'Bitte klicken Sie auf das SIX-Logo oben links.',\n    ],\n  },\n};\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n\n@Component({\n  tag: 'six-error-page',\n  styleUrl: 'six-error-page.scss',\n  shadow: true,\n})\nexport class SixErrorPage {\n  /**\n   * Defines error Code and thus displays the proper error page.\n   */\n  @Prop() errorCode?: 404 | 403 | 500;\n\n  /**\n   * Defines language and thus displays the proper error page in the selected language.\n   */\n  @Prop() language: 'en' | 'de' = 'en';\n\n  /**\n   * Defines a custom title.\n   */\n  @Prop() customTitle?: string;\n\n  /**\n   * Defines a custom description.\n   */\n  @Prop() customDescription?: string[];\n\n  /**\n   * Defines a custom icon.\n   */\n  @Prop() customIcon?: string;\n\n  private getIconName() {\n    if (this.customIcon != null) {\n      return this.customIcon;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    if (this.errorCode === 403) {\n      return 'lock';\n    }\n\n    if (this.errorCode === 404) {\n      return 'find-in-page';\n    }\n\n    if (this.errorCode === 500) {\n      return 'sentiment-dissatisfied';\n    }\n  }\n\n  private getErrorTitle(): string | undefined {\n    if (this.customTitle != null) {\n      return this.customTitle;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    return TITLE_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  private getErrorDescription() {\n    if (this.errorCode == null && this.customDescription == null) {\n      return;\n    }\n\n    const descriptions = this.getDescriptions() ?? [];\n    return descriptions.map((errorMessage) => <div>{errorMessage}</div>);\n  }\n\n  private getDescriptions() {\n    if (this.customDescription !== undefined) {\n      return this.customDescription;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  render() {\n    return (\n      <div part=\"container\">\n        <div class=\"six-error-page__icon-container\" part=\"icon-container\">\n          <six-picto size=\"4xl\" class=\"six-error-page__icon\" part=\"icon\">\n            {this.getIconName()}\n          </six-picto>\n        </div>\n        <div class=\"six-error-page__title\" part=\"title\">\n          {this.getErrorTitle()}\n        </div>\n        <div class=\"six-error-page__description\" part=\"description\">\n          {this.getErrorDescription()}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-error-page/test/six-error-page.spec.js

@@ -0,0 +1,240 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixErrorPage } from "../six-error-page";
+describe('six-error-page', () => {
+    it('should render right page for error code 403 in english', async () => {
+        // given
+        const config = {
+            components: [SixErrorPage],
+            html: `<six-error-page error-code="403" language="en"></six-error-page>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+    <six-error-page error-code="403" language="en">
+      <mock:shadow-root>
+        <div part="container">
+          <div class="six-error-page__icon-container" part="icon-container">
+            <six-picto class="six-error-page__icon" part="icon" size="4xl">
+              lock
+            </six-picto>
+          </div>
+          <div class="six-error-page__title" part="title">
+            Access Denied
+          </div>
+          <div class="six-error-page__description" part="description">
+            <div>
+              You don’t have permission to access this page.
+            </div>
+            <div>
+              Please contact an administrator or click the SIX logo on top left.
+            </div>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-error-page>
+   `);
+    });
+    it('should render right page for error code 403 in german', async () => {
+        // given
+        const config = {
+            components: [SixErrorPage],
+            html: `<six-error-page error-code="403" language="de"></six-error-page>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+        <six-error-page error-code="403" language="de">
+      <mock:shadow-root>
+        <div part="container">
+          <div class="six-error-page__icon-container" part="icon-container">
+            <six-picto class="six-error-page__icon" part="icon" size="4xl">
+              lock
+            </six-picto>
+          </div>
+          <div class="six-error-page__title" part="title">
+            Kein Zugriff
+          </div>
+          <div class="six-error-page__description" part="description">
+            <div>
+              Sie haben keine Zugriffsberechtigung auf diese Seite.
+            </div>
+            <div>
+              Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links.
+            </div>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-error-page>
+   `);
+    });
+    it('should render right page for error code 404 in english', async () => {
+        // given
+        const config = {
+            components: [SixErrorPage],
+            html: `<six-error-page error-code="404" language="en"></six-error-page>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+    <six-error-page error-code="404" language="en">
+      <mock:shadow-root>
+        <div part="container">
+          <div class="six-error-page__icon-container" part="icon-container">
+            <six-picto class="six-error-page__icon" part="icon" size="4xl">
+              find-in-page
+            </six-picto>
+          </div>
+          <div class="six-error-page__title" part="title">
+            Not Found
+          </div>
+          <div class="six-error-page__description" part="description">
+            <div>
+              We have not found the page you requested.
+            </div>
+            <div>
+              Please click the SIX logo on top left.
+            </div>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-error-page>
+   `);
+    });
+    it('should render right page for error code 404 in german', async () => {
+        // given
+        const config = {
+            components: [SixErrorPage],
+            html: `<six-error-page error-code="404" language="de"></six-error-page>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+    <six-error-page error-code="404" language="de">
+      <mock:shadow-root>
+        <div part="container">
+          <div class="six-error-page__icon-container" part="icon-container">
+            <six-picto class="six-error-page__icon" part="icon" size="4xl">
+              find-in-page
+            </six-picto>
+          </div>
+          <div class="six-error-page__title" part="title">
+            Seite nicht gefunden
+          </div>
+          <div class="six-error-page__description" part="description">
+            <div>
+              Wir haben die angeforderte Seite nicht gefunden.
+            </div>
+            <div>
+              Bitte klicken Sie auf das SIX-Logo oben links.
+            </div>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-error-page>
+   `);
+    });
+    it('should render right page for error code 500 in english', async () => {
+        // given
+        const config = {
+            components: [SixErrorPage],
+            html: `<six-error-page error-code="500" language="en"></six-error-page>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+    <six-error-page error-code="500" language="en">
+      <mock:shadow-root>
+        <div part="container">
+          <div class="six-error-page__icon-container" part="icon-container">
+            <six-picto class="six-error-page__icon" part="icon" size="4xl">
+              sentiment-dissatisfied
+            </six-picto>
+          </div>
+          <div class="six-error-page__title" part="title">
+            Ooops!
+          </div>
+          <div class="six-error-page__description" part="description">
+            <div>
+              Sorry, we messed up! We try to fix this.
+            </div>
+            <div>
+              Please click the SIX logo on top left.
+            </div>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-error-page>
+   `);
+    });
+    it('should render right page for error code 500 in german', async () => {
+        // given
+        const config = {
+            components: [SixErrorPage],
+            html: `<six-error-page error-code="500" language="de"></six-error-page>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+    <six-error-page error-code="500" language="de">
+      <mock:shadow-root>
+        <div part="container">
+          <div class="six-error-page__icon-container" part="icon-container">
+            <six-picto class="six-error-page__icon" part="icon" size="4xl">
+              sentiment-dissatisfied
+            </six-picto>
+          </div>
+          <div class="six-error-page__title" part="title">
+            Ups!
+          </div>
+          <div class="six-error-page__description" part="description">
+            <div>
+              Sorry, das war unser Fehler! Wir versuchen das zu beheben.
+            </div>
+            <div>
+              Bitte klicken Sie auf das SIX-Logo oben links.
+            </div>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-error-page>
+   `);
+    });
+    it('should render right page for custom error', async () => {
+        // given
+        const config = {
+            components: [SixErrorPage],
+            html: `<six-error-page custom-title="my title" id="custom-error-message" custom-icon="home"></six-error-page>
+        <script type="module">
+          const sixErrorPage = document.getElementById('custom-error-message');
+          sixErrorPage.customDescription = ['My', 'Description'];
+        </script>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+    <six-error-page custom-icon="home" custom-title="my title" id="custom-error-message">
+      <mock:shadow-root>
+        <div part="container">
+          <div class="six-error-page__icon-container" part="icon-container">
+            <six-picto class="six-error-page__icon" part="icon" size="4xl">
+              home
+            </six-picto>
+          </div>
+          <div class="six-error-page__title" part="title">
+            my title
+          </div>
+          <div class="six-error-page__description" part="description"></div>
+        </div>
+      </mock:shadow-root>
+    </six-error-page>
+   `);
+    });
+});
+//# sourceMappingURL=six-error-page.spec.js.map