@tet/tet-components 1.3.157-testing → 1.4.0-production

package/dist/collection/components/simple/structural/tet-accordion/test/tet-accordion.spec.js

@@ -1,108 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { TetAccordion } from "../tet-accordion";
-describe('tet-accordion', () => {
-    it('renders with required props', async () => {
-        const page = await newSpecPage({
-            components: [TetAccordion],
-            html: `<tet-accordion header="test-header">test-content</tet-accordion>`
-        });
-        expect(page.root).toEqualHtml(`
-    <tet-accordion header="test-header">
-      <mock:shadow-root>
-        <div class="tet-accordion light-theme tet-accordion--breakpoint-tablet">
-          <div class="light tet-accordion__header" tabindex="0">
-            <slot name="header">
-              <span class="tet-accordion__header__text">test-header</span>
-              <tet-icon class="tet-accordion__icon" name="chevron-down"></tet-icon>
-            </slot>
-          </div>
-          <div class="tet-accordion__content-wrapper" inert="">
-            <div class="tet-accordion__content">
-              <slot></slot>
-            </div>
-          </div>
-        </div>
-      </mock:shadow-root>
-      test-content
-    </tet-accordion>
-    `);
-    });
-    it('renders with default open state', async () => {
-        const page = await newSpecPage({
-            components: [TetAccordion],
-            html: `<tet-accordion header="test-header" is-open="true">test-content</tet-accordion>`
-        });
-        expect(page.root).toEqualHtml(`
-    <tet-accordion header="test-header" is-open="true">
-      <mock:shadow-root>
-        <div class="tet-accordion light-theme tet-accordion--breakpoint-tablet">
-          <div class="light tet-accordion__header" tabindex="0">
-            <slot name="header">
-              <span class="tet-accordion__header__text">test-header</span>
-              <tet-icon class="open tet-accordion__icon" name="chevron-down"></tet-icon>
-            </slot>
-          </div>
-          <div class="tet-accordion__content-wrapper visible">
-            <div class="tet-accordion__content">
-              <slot></slot>
-            </div>
-          </div>
-        </div>
-      </mock:shadow-root>
-      test-content
-    </tet-accordion>
-    `);
-    });
-    it('renders with border', async () => {
-        const page = await newSpecPage({
-            components: [TetAccordion],
-            html: `<tet-accordion header="test-header" is-open="true" with-border="true">test-content</tet-accordion>`
-        });
-        expect(page.root).toEqualHtml(`
-    <tet-accordion header="test-header" is-open="true" with-border="true">
-      <mock:shadow-root>
-        <div class="tet-accordion light-theme tet-accordion--border tet-accordion--breakpoint-tablet">
-          <div class="light tet-accordion__header" tabindex="0">
-            <slot name="header">
-              <span class="tet-accordion__header__text">test-header</span>
-              <tet-icon class="open tet-accordion__icon" name="chevron-down"></tet-icon>
-            </slot>
-          </div>
-          <div class="tet-accordion__content-wrapper visible">
-            <div class="tet-accordion__content">
-              <slot></slot>
-            </div>
-          </div>
-        </div>
-      </mock:shadow-root>
-        test-content
-    </tet-accordion>
-    `);
-    });
-    it('renders with h1 heading tag', async () => {
-        const page = await newSpecPage({
-            components: [TetAccordion],
-            html: `<tet-accordion header="test-header" is-open="true" with-border="true" heading-tag="h1">test-content</tet-accordion>`
-        });
-        expect(page.root).toEqualHtml(`
-    <tet-accordion header="test-header" is-open="true" with-border="true" heading-tag="h1">
-      <mock:shadow-root>
-        <div class="tet-accordion light-theme tet-accordion--border tet-accordion--breakpoint-tablet">
-          <div class="light tet-accordion__header" tabindex="0">
-            <slot name="header">
-              <h1 class="tet-accordion__header__text">test-header</h1>
-              <tet-icon class="open tet-accordion__icon" name="chevron-down"></tet-icon>
-            </slot>
-          </div>
-          <div class="tet-accordion__content-wrapper visible">
-            <div class="tet-accordion__content">
-              <slot></slot>
-            </div>
-          </div>
-        </div>
-      </mock:shadow-root>
-        test-content
-    </tet-accordion>
-    `);
-    });
-});

package/dist/collection/components/simple/structural/tet-expansion-panel/test/tet-expansion-panel.spec.js

@@ -1,42 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { TetExpansionPanel } from "../tet-expansion-panel";
-describe('tet-expansion-panel', () => {
-    it('renders empty closed', async () => {
-        const page = await newSpecPage({
-            components: [TetExpansionPanel],
-            html: `<tet-expansion-panel></tet-expansion-panel>`
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-expansion-panel>
-        <mock:shadow-root>
-          <div class="tet-expansion-panel">
-            <div class="tet-expansion-panel-content">
-              <slot></slot>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tet-expansion-panel>
-    `);
-    });
-    it('renders open', async () => {
-        const page = await newSpecPage({
-            components: [TetExpansionPanel],
-            html: `
-        <tet-expansion-panel initial-state="open">
-          <p>Expansion panel content</p>
-        </tet-expansion-panel>`
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-expansion-panel initial-state="open">
-        <mock:shadow-root>
-          <div class="open tet-expansion-panel">
-            <div class="tet-expansion-panel-content">
-              <slot></slot>
-            </div>
-          </div>
-        </mock:shadow-root>
-        <p>Expansion panel content</p>
-      </tet-expansion-panel>
-    `);
-    });
-});

package/dist/collection/components/simple/tables-and-graphs/tet-bar-graph/test/tet-bar-graph.spec.js

@@ -1,85 +0,0 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { TetBarGraph } from "../tet-bar-graph";
-describe('tet-bar-graph', () => {
-    const data = [
-        { id: 'test-1', label: 'test 1', value: 10, type: 'primary' },
-        { id: 'test-2', label: 'test 2', value: 20, type: 'secondary' },
-    ];
-    it('renders', async () => {
-        const page = await newSpecPage({
-            components: [TetBarGraph],
-            template: () => h("tet-bar-graph", { data: data, minValue: 0, maxValue: 40 }),
-        });
-        expect(page.root).toEqualHtml(`
-    <tet-bar-graph style="--bar-graph-animation-duration: 0.5s;">
-      <mock:shadow-root>
-        <div class="bar-graph bar-graph--small light">
-            <div class="bar-graph__container">
-            <div class="bar-graph__label-container hidden">
-                <div class="bar-graph__label bar-graph__label--inline bar-graph__label--primary"  
-                data-id="test-1" style="order: 0; transform: translateY(0px);">
-                test 1
-                </div>
-                <div class="bar-graph__label bar-graph__label--inline bar-graph__label--secondary" 
-                data-id="test-2" style="order: 1; transform: translateY(0px);">
-                test 2
-                </div>
-            </div>
-            <div class="bar-graph__graph-container">
-                <div class="bar-graph__data-grid hidden">
-                <div class="bar-graph__data-grid--line"></div>
-                <div class="bar-graph__data-grid--line"></div>
-                <div class="bar-graph__data-grid--line"></div>
-                <div class="bar-graph__data-grid--line"></div>
-                <div class="bar-graph__data-grid--line"></div>
-                <div class="bar-graph__data-grid--line"></div>
-                </div>
-                <div class="bar-graph__item-container">
-                <div class="bar-graph__item" data-id="test-1" data-offset="0" data-order="0" style="z-index: 1; order: 0; transform: translateY(0px);">
-                    <div>
-                    <div class="bar-graph__label bar-graph__label--primary" data-id="test-1">
-                        test 1
-                    </div>
-                    </div>
-                    <div class="bar-graph__bar-container" style="width: 25%;">
-                    <div class="bar-graph__bar bar-graph__bar--primary">
-                        <span class="bar-graph__bar-value">
-                        10
-                        </span>
-                    </div>
-                  </div>
-                  <div class="bar-graph__bar-value-container" style="left: 25%;">
-                    <span class="bar-graph__bar-value bar-graph__bar-value--after hidden">
-                        10
-                    </span>
-                  </div>
-                </div>
-                <div class="bar-graph__item" data-id="test-2" data-offset="0" data-order="1" style="z-index: 0; order: 1; transform: translateY(0px);">
-                    <div>
-                    <div class="bar-graph__label bar-graph__label--secondary" data-id="test-2">
-                        test 2
-                    </div>
-                    </div>
-                    <div class="bar-graph__bar-container" style="width: 50%;">
-                    <div class="bar-graph__bar bar-graph__bar--secondary">
-                        <span class="bar-graph__bar-value">
-                        20
-                        </span>
-                    </div>
-                  </div>
-                  <div class="bar-graph__bar-value-container" style="left: 50%;">
-                    <span class="bar-graph__bar-value bar-graph__bar-value--after hidden">
-                        20
-                    </span>
-                  </div>
-                </div>
-                </div>
-            </div>
-            </div>
-        </div>
-      </mock:shadow-root>
-    </tet-bar-graph>
-    `);
-    });
-});

package/dist/collection/components/simple/tables-and-graphs/tet-table/test/tet-table.spec.js

@@ -1,360 +0,0 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { TetTable } from "../tet-table";
-describe('tet-table', () => {
-    it('renders empty', async () => {
-        const page = await newSpecPage({
-            components: [TetTable],
-            html: `<tet-table></tet-table>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-table>
-         <table class="table light">
-           <thead>
-             <tr>
-              <th scope="col" colspan="1"></th>
-             </tr>
-           </thead>
-           <tbody></tbody>
-        </table>
-        <div class="mobile-table-wrapper"></div>
-      </tet-table>
-    `);
-    });
-    it('renders caption', async () => {
-        const page = await newSpecPage({
-            components: [TetTable],
-            html: `<tet-table caption="Table caption"></tet-table>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-table caption="Table caption">
-         <table class="table light">
-           <caption>Table caption</caption>
-           <thead>
-             <tr>
-               <th scope="col" colspan="1"></th>
-             </tr>
-           </thead>
-           <tbody></tbody>
-        </table>
-        <div class="mobile-table-wrapper"></div>
-      </tet-table>
-    `);
-    });
-    it('renders table data with dark theme, subtitle and tooltip', async () => {
-        const tableData = {
-            columns: [{ value: 'Header 1', tooltip: 'Header 1 tooltip' }, 'Header 2'],
-            rows: [
-                {
-                    label: 'Row Header 1',
-                    subLabel: 'Row Header 1 subtitle',
-                    cells: [{ value: 'Value 1' }, { value: 'Value 2' }],
-                },
-                {
-                    label: 'Row Header 2',
-                    subLabel: 'Row Header 2 subtitle',
-                    tooltip: 'Row Header 2 tooltip',
-                    cells: [{ value: '<strong>Strong Value 1</strong>' }, { value: 'Value 2', tooltip: 'Value 2 tooltip' }],
-                },
-            ],
-        };
-        const page = await newSpecPage({
-            components: [TetTable],
-            template: () => (h("tet-table", { "table-header": "Table Header", tableData: tableData, theme: "dark" })),
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-table table-header="Table Header">
-        <table class="table dark">
-          <thead>
-            <tr>
-              <th scope="col" colspan="1">
-                <div class="cell-content-wrapper">
-                  Table Header
-                </div>
-              </th>
-              <th scope="col" colspan="1">
-                <div class="cell-content-wrapper">
-                  Header 1
-                  <span class="tooltip-wrapper">
-                    <tet-icon class="info-icon" name="info-circle" tabindex="0" theme="dark" type="secondary"></tet-icon>
-                    <tet-tooltip position="top" theme="dark">
-                      Header 1 tooltip
-                   </tet-tooltip>
-                 </span>
-                </div>
-              </th>
-              <th scope="col" colspan="1">
-                <div class="cell-content-wrapper">
-                  Header 2
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-          <tr>
-            <th scope="row" colspan="1">
-              <p class="title">
-                <span>Row Header 1</span>
-              </p>
-              <p class="subtitle">Row Header 1 subtitle</p>
-            </th>
-            <td colspan="1">
-              <div class="cell-content-wrapper">
-                <span>Value 1</span>
-              </div>
-            </td>
-            <td colspan="1">
-              <div class="cell-content-wrapper">
-                <span>Value 2</span>
-              </div>
-            </td>
-          </tr>
-          <tr>
-            <th scope="row" colspan="1">
-              <p class="title">
-                <span>Row Header 2</span>
-                <span class="tooltip-wrapper">
-                  <tet-icon class="info-icon" name="info-circle" tabindex="0" theme="dark" type="secondary"></tet-icon>
-                  <tet-tooltip position="top" theme="dark">
-                    Row Header 2 tooltip
-                  </tet-tooltip>
-                </span>
-              </p>
-            </th>
-            <td colspan="1">
-              <div class="cell-content-wrapper">
-                <span><strong>Strong Value 1</strong></span>
-              </div>
-            </td>
-            <td colspan="1">
-              <div class="cell-content-wrapper">
-                <span>Value 2</span>
-                <span class="tooltip-wrapper">
-                  <tet-icon class="info-icon" name="info-circle" tabindex="0" theme="dark" type="secondary"></tet-icon>
-                  <tet-tooltip position="top" theme="dark">
-                    Value 2 tooltip
-                  </tet-tooltip>
-                </span>
-              </div>
-            </td>
-          </tr>
-          </tbody>
-      </table>
-      <div class="mobile-table-wrapper">
-        <table class="mobile-table dark">
-          <thead>
-            <tr>
-              <th colspan="2" scope="col">
-                <div class="mobile-table-header">
-                  <p>Row Header 1</p>
-                  <span class="tooltip-wrapper">
-                    <tet-icon class="info-icon" name="info-circle" tabindex="0" theme="dark" type="secondary"></tet-icon>
-                    <tet-tooltip position="top" theme="dark">
-                      Row Header 1 subtitle
-                    </tet-tooltip>
-                  </span>
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <th>
-                <div class="cell-content-wrapper">
-                  Header 1
-                  <span class="tooltip-wrapper">
-                    <tet-icon class="info-icon" name="info-circle" tabindex="0" theme="dark" type="secondary"></tet-icon>
-                    <tet-tooltip position="top" theme="dark">
-                      Header 1 tooltip
-                    </tet-tooltip>
-                  </span>
-                </div>
-              </th>
-              <td>
-                <div class="cell-content-wrapper">
-                  <span>Value 1</span>
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <th>
-                <div class="cell-content-wrapper">Header 2</div>
-              </th>
-              <td>
-                <div class="cell-content-wrapper">
-                  <span>Value 2</span>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <table class="mobile-table dark">
-          <thead>
-            <tr>
-              <th colspan="2" scope="col">
-                <div class="mobile-table-header">
-                  <p>Row Header 2</p>
-                  <span class="tooltip-wrapper">
-                    <tet-icon class="info-icon" name="info-circle" tabindex="0" theme="dark" type="secondary"></tet-icon>
-                    <tet-tooltip position="top" theme="dark">
-                      Row Header 2 tooltip
-                    </tet-tooltip>
-                  </span>
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <th>
-                <div class="cell-content-wrapper">
-                  Header 1
-                  <span class="tooltip-wrapper">
-                    <tet-icon class="info-icon" name="info-circle" tabindex="0" theme="dark" type="secondary"></tet-icon>
-                    <tet-tooltip position="top" theme="dark">
-                      Header 1 tooltip
-                    </tet-tooltip>
-                  </span>
-                </div>
-              </th>
-              <td>
-                <div class="cell-content-wrapper">
-                  <span><strong>Strong Value 1</strong></span>
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <th>
-                <div class="cell-content-wrapper">Header 2</div>
-              </th>
-              <td>
-                <div class="cell-content-wrapper">
-                  <span>Value 2</span>
-                  <span class="tooltip-wrapper">
-                    <tet-icon class="info-icon" name="info-circle" tabindex="0" theme="dark" type="secondary"></tet-icon>
-                    <tet-tooltip position="top" theme="dark">
-                      Value 2 tooltip
-                    </tet-tooltip>
-                  </span>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </tet-table>
-    `);
-    });
-    it('renders table data from innerHTML template', async () => {
-        const page = await newSpecPage({
-            components: [TetTable],
-            template: () => (h("tet-table", { "table-header": "Table Header" }, h("template", null, h("table", null, h("thead", null, h("tr", null, h("th", null, "Header 1"), h("th", null, "Header 2"))), h("tbody", null, h("tr", null, h("th", null, "Row Header 1"), h("td", null, "Value 1"), h("td", null, "Value 2")), h("tr", null, h("th", null, "Row Header 2"), h("td", null, h("strong", null, "Strong Value 1")), h("td", null, "Value 2"))))))),
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-table table-header="Table Header">
-        <template></template>
-        <table class="table light">
-          <thead>
-            <tr>
-              <th scope="col" colspan="1"><div class="cell-content-wrapper">Table Header</div></th>
-              <th scope="col" colspan="1"><div class="cell-content-wrapper">Header 1</div></th>
-              <th scope="col" colspan="1"><div class="cell-content-wrapper">Header 2</div></th>
-            </tr>
-          </thead>
-          <tbody>
-          <tr>
-            <th scope="row" colspan="1">
-              <p class="title">
-                <span>Row Header 1</span>
-              </p>
-            </th>
-            <td colspan="1">
-              <div class="cell-content-wrapper">
-                <span>Value 1</span>
-              </div>
-            </td>
-            <td colspan="1">
-              <div class="cell-content-wrapper">
-                <span>Value 2</span>
-              </div>
-            </td>
-          </tr>
-          <tr>
-            <th scope="row" colspan="1">
-              <p class="title">
-                <span>Row Header 2</span>
-              </p>
-            </th>
-            <td colspan="1">
-              <div class="cell-content-wrapper">
-                <span><strong>Strong Value 1</strong></span>
-              </div>
-            </td>
-            <td colspan="1">
-              <div class="cell-content-wrapper">
-                <span>Value 2</span>
-              </div>
-            </td>
-          </tr>
-          </tbody>
-      </table>
-      <div class="mobile-table-wrapper">
-        <table class="mobile-table light">
-          <thead>
-            <tr>
-              <th colspan="2" scope="col">
-                <div class="mobile-table-header"><p>Row Header 1</p></div>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <th><div class="cell-content-wrapper">Header 1</div></th>
-              <td>
-                <div class="cell-content-wrapper">
-                  <span>Value 1</span>
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <th><div class="cell-content-wrapper">Header 2</div></th>
-              <td>
-                <div class="cell-content-wrapper">
-                  <span>Value 2</span>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <table class="mobile-table light">
-          <thead>
-            <tr>
-              <th colspan="2" scope="col">
-                <div class="mobile-table-header"><p>Row Header 2</p></div>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <th><div class="cell-content-wrapper">Header 1</div></th>
-              <td>
-                <div class="cell-content-wrapper">
-                  <span><strong>Strong Value 1</strong></span>
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <th><div class="cell-content-wrapper">Header 2</div></th>
-              <td>
-                <div class="cell-content-wrapper">
-                  <span>Value 2</span>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </tet-table>
-    `);
-    });
-});