feat(corner-toolbar): set default value for locale option

src/ui/corner-toolbar.ts

@@ -3,32 +3,35 @@ import { CornerToolbarItem } from '../types/corner-toolbar';
 import { safeTemplate } from '../utils/safe-template';
 import { query } from '../utils/query';
 import { Nodes } from '../models/nodes';
+import { i18nObject } from '../i18n';
 
 type CornerToolbarConfig = {
-  locale: TranslationFunctions;
+  locale?: TranslationFunctions;
   root: Nodes;
   items: CornerToolbarItem[];
 }
 
 export class CornerToolbar {
   private config: CornerToolbarConfig;
 
+  private locale: TranslationFunctions;
+
   private root: Nodes;
 
   public container: Nodes;
 
   constructor(config: CornerToolbarConfig) {
     this.config = config;
+    this.locale = this.config.locale || i18nObject('en-US');
     this.root = config.root;
     this.container = query('<div class="lake-corner-toolbar" />');
   }
 
   private appendButton(item: CornerToolbarItem): void {
-    const { locale } = this.config;
     const buttonNode = query(safeTemplate`
       <button type="button" name="${item.name}" tabindex="-1" />
     `);
-    const tooltip = typeof item.tooltip === 'string' ? item.tooltip : item.tooltip(locale);
+    const tooltip = typeof item.tooltip === 'string' ? item.tooltip : item.tooltip(this.locale);
     buttonNode.attr('title', tooltip);
     if (item.icon) {
       buttonNode.append(item.icon);
@@ -50,8 +53,4 @@ export class CornerToolbar {
       this.appendButton(item);
     }
   }
-
-  public unmount(): void {
-    this.container.remove();
-  }
 }

tests/index.ts

@@ -144,6 +144,8 @@ import './ui/button-ui.test';
 import './ui/dropdown.test';
 import './ui/dropdown-ui.test';
 import './ui/resizer.test';
+import './ui/corner-toolbar.test';
+import './ui/corner-toolbar-ui.test';
 import './ui/link-popup.test';
 import './ui/link-popup-ui.test';
 import './ui/menu.test';

tests/ui/corner-toolbar-ui.test.ts

@@ -0,0 +1,44 @@
+import { click } from '../utils';
+import { query } from '../../src/utils';
+import { CornerToolbar } from '../../src/ui/corner-toolbar';
+import { Nodes, icons } from '../../src';
+
+describe('ui / corner-toolbar-ui', () => {
+
+  let rootNode: Nodes;
+
+  before(()=> {
+    rootNode = query('<div class="lake-corner-toolbar-root" style="position:relative;" />');
+    query(document.body).append(rootNode);
+  });
+
+  it('corner toolbar', () => {
+    let buttonValue;
+    const cornerToolbar = new CornerToolbar({
+      root: rootNode,
+      items: [
+        {
+          name: 'view',
+          icon: icons.get('maximize'),
+          tooltip: 'Full screen',
+          onClick: () => {
+            buttonValue = 'view clicked';
+          },
+        },
+        {
+          name: 'remove',
+          icon: icons.get('remove'),
+          tooltip: 'Remove',
+          onClick: () => {
+            buttonValue = 'remove clicked';
+          },
+        },
+      ],
+    });
+    cornerToolbar.render();
+    cornerToolbar.container.show();
+    click(cornerToolbar.container.find('button[name="remove"]'));
+    expect(buttonValue).to.equal('remove clicked');
+  });
+
+});

tests/ui/corner-toolbar.test.ts

@@ -0,0 +1,27 @@
+import { query } from '../../src/utils';
+import { CornerToolbar } from '../../src/ui/corner-toolbar';
+import { Nodes } from '../../src';
+
+describe('ui / corner-toolbar', () => {
+
+  let rootNode: Nodes;
+
+  beforeEach(()=> {
+    rootNode = query('<div class="lake-corner-toolbar-root" style="position:relative;" />');
+    query(document.body).append(rootNode);
+  });
+
+  afterEach(() => {
+    rootNode.remove();
+  });
+
+  it('should not render if items are empty', () => {
+    const cornerToolbar = new CornerToolbar({
+      root: rootNode,
+      items: [],
+    });
+    cornerToolbar.render();
+    expect(rootNode.first().length).to.equal(0);
+  });
+
+});