test: fix vitests

Author: wuda-io

components/appbar/appbar.mjs

@@ -0,0 +1,38 @@
+import { Component } from '../atomic/component.mjs';
+
+// AppBar is the old *Navbar*
+
+/*
+<nav class="nav navbar">
+  <div class="nav-wrapper">
+    <a href="#" class="brand-logo">Logo</a>
+    <ul id="nav-mobile" class="right hide-on-med-and-down">
+      <li><a href="sass.html">Sass</a></li>
+      <li><a href="badges.html">Components</a></li>
+      <li><a href="collapsible.html">JavaScript</a></li>
+    </ul>
+  </div>
+</nav>
+*/
+
+class AppBar extends Component {
+  constructor(options) {
+    super(options);
+    this.setTagName('nav').addClassname('nav navbar');
+  }
+
+  toHTML() {
+    const html = `<div class="nav-wrapper">
+      <a href="#" class="brand-logo">Logo</a>
+      <ul id="nav-mobile" class="right hide-on-med-and-down">
+        <li><a href="sass.html">Sass</a></li>
+        <li><a href="badges.html">Components</a></li>
+        <li><a href="collapsible.html">JavaScript</a></li>
+      </ul>
+    </div>`;
+    this.setChildren(html);
+    return super.toHTML();
+  }
+}
+
+export { AppBar };

components/appbar/appbar.test.mjs

@@ -0,0 +1,9 @@
+import { describe, expect, test } from 'vitest';
+import { AppBar } from './appbar.mjs';
+
+describe('appBar', () => {
+  test('create html', () => {
+    const appBar = new AppBar();
+    expect(appBar.toHTML()).toContain('<nav');
+  });
+});

components/chip/chip.test.mjs

@@ -1,4 +1,10 @@
+import { describe, expect, test } from 'vitest';
 import { Chip } from './chip.mjs';
 
-const chip = new Chip().setText('John Doe');
-console.log(chip.toHTML());
+describe('chip', () => {
+  test('create html', () => {
+    const chip = new Chip().setText('John Doe');
+    //console.log(list.toHTML());
+    expect(chip.toHTML()).toContain('John');
+  });
+});

components/datepicker/datepicker.ts

@@ -1,6 +1,6 @@
 import { Utils } from '../../src/utils';
 import { BaseOptions, Component, I18nOptions, InitElements, MElement } from '../../src/component';
-import { FormSelect } from '../text-field/select';
+import { FormSelect } from '../textfield/select';
 import { DockedDisplayPlugin } from '../../src/dockedDisplayPlugin';
 import { ModalDisplayPlugin } from '../../src/modalDisplayPlugin';
 

components/list/list.test.mjs

@@ -1,11 +1,16 @@
+import { describe, expect, test } from 'vitest';
 import { List, ListItem } from './list.mjs';
 
-const data = ['HP Pavilion dv6-6013cl', 'Dell XPS 15 (Sandy Bridge)', 'Lenovo ThinkPad X220'];
+describe('list', () => {
+  const testData = ['HP Pavilion dv6-6013cl', 'Dell XPS 15 (Sandy Bridge)', 'Lenovo ThinkPad X220'];
 
-const list = new List();
-data.map((raw) => {
-  const item = new ListItem().setText(raw);
-  list.addItem(item);
+  test('create html', () => {
+    const list = new List();
+    testData.map((raw) => {
+      const item = new ListItem().setText(raw);
+      list.addItem(item);
+    });
+    //console.log(list.toHTML());
+    expect(list.toHTML()).toContain('Pavilion');
+  });
 });
-
-console.log(list.toHTML());

components/loading/loading.test.mjs

@@ -1,4 +1,10 @@
+import { describe, expect, test } from 'vitest';
 import { LoadingIndicator } from './loading.mjs';
 
-const loading = new LoadingIndicator();
-console.log(loading.toHTML());
+describe('loading', () => {
+  test('create html', () => {
+    const loading = new LoadingIndicator();
+    //console.log(list.toHTML());
+    expect(loading.toHTML()).toContain('circle');
+  });
+});

components/textfield/text-field.mjs

@@ -1,4 +1,4 @@
-import { Component } from '../component.mjs';
+import { Component } from '../atomic/component.mjs';
 
 class TextField extends Component {
   #labelText;

components/textfield/text-field.test.mjs

@@ -1,4 +1,10 @@
-import { TextField } from './text-field.mjs';
+import { describe, expect, test } from 'vitest';
+import { TextField } from './textfield.mjs';
 
-const textfield = new TextField().setLabel('Name');
-console.log(textfield.toHTML());
+describe('textfields', () => {
+  test('create html', () => {
+    const textfield = new TextField().setLabel('Name');
+    //console.log(list.toHTML());
+    expect(textfield.toHTML()).toContain('<input');
+  });
+});