initial commit 2

1 files changed, 197 insertions, 0 deletions

diff --git a/addons/pos_restaurant/static/tests/unit/test_FloorScreen.js b/addons/pos_restaurant/static/tests/unit/test_FloorScreen.js
new file mode 100644
index 00000000..34f13671
--- /dev/null
+++ b/addons/pos_restaurant/static/tests/unit/test_FloorScreen.js
@@ -0,0 +1,197 @@
+odoo.define('pos_restaurant.tests.FloorScreen', function (require) {
+    'use strict';
+
+    const PosComponent = require('point_of_sale.PosComponent');
+    const { useListener } = require('web.custom_hooks');
+    const testUtils = require('web.test_utils');
+    const makePosTestEnv = require('point_of_sale.test_env');
+    const { xml } = owl.tags;
+    const { useRef } = owl.hooks;
+
+    QUnit.module('FloorScreen components', {});
+
+    QUnit.test('TableWidget', async function (assert) {
+        assert.expect(9);
+
+        class Parent extends PosComponent {
+            constructor() {
+                super();
+                useListener('select-table', () => assert.step('select-table'));
+            }
+            get table() {
+                // render table T1
+                return Object.values(this.env.pos.tables_by_id).find(
+                    (table) => table.name === 'T1'
+                );
+            }
+        }
+        Parent.env = makePosTestEnv();
+        Parent.template = xml/* html */ `
+            <div><TableWidget table="table" /></div>
+        `;
+
+        const parent = new Parent();
+        await parent.mount(testUtils.prepareTarget());
+
+        const tableEl = parent.el.querySelector('.table');
+        assert.ok(tableEl.querySelector('span.label').textContent.includes('T1'));
+        assert.ok(tableEl.querySelector('span.table-seats').textContent.includes('4'));
+        assert.strictEqual(tableEl.style.width, '100px');
+        assert.strictEqual(tableEl.style.height, '100px');
+        assert.strictEqual(tableEl.style.background, 'rgb(53, 211, 116)');
+        assert.strictEqual(tableEl.style.top, '50px');
+        assert.strictEqual(tableEl.style.left, '50px');
+
+        await testUtils.dom.click(tableEl);
+        assert.verifySteps(['select-table']);
+
+        parent.unmount();
+        parent.destroy();
+    });
+
+    QUnit.test('EditableTable', async function (assert) {
+        assert.expect(11);
+
+        class Parent extends PosComponent {
+            constructor() {
+                super();
+                useListener('save-table', () => assert.step('save-table'));
+                this.tableRef = useRef('table-ref');
+            }
+            get table() {
+                // render table T1
+                return Object.values(this.env.pos.tables_by_id).find(
+                    (table) => table.name === 'T1'
+                );
+            }
+        }
+        Parent.env = makePosTestEnv();
+        Parent.template = xml/* html */ `
+            <div class="floor-map">
+                <EditableTable table="table" t-ref="table-ref" />
+            </div>
+        `;
+
+        const parent = new Parent();
+        await parent.mount(testUtils.prepareTarget());
+
+        const tableEl = parent.el.querySelector('.table.selected');
+        assert.ok(tableEl.querySelector('span.label').textContent.includes('T1'));
+        assert.ok(tableEl.querySelector('span.table-seats').textContent.includes('4'));
+        assert.strictEqual(tableEl.style.width, '100px');
+        assert.strictEqual(tableEl.style.height, '100px');
+        assert.strictEqual(tableEl.style.background, 'rgb(53, 211, 116)');
+        assert.strictEqual(tableEl.style.top, '50px');
+        assert.strictEqual(tableEl.style.left, '50px');
+
+        parent.tableRef.comp.trigger('resize-end', {
+            size: { width: 100, height: 100 },
+            loc: { top: 50, left: 50 },
+        });
+        assert.verifySteps(['save-table']);
+        parent.tableRef.comp.trigger('drag-end', { loc: { top: 50, left: 50 } });
+        assert.verifySteps(['save-table']);
+
+        parent.unmount();
+        parent.destroy();
+    });
+
+    QUnit.test('EditBar', async function (assert) {
+        assert.expect(26);
+
+        class Parent extends PosComponent {
+            constructor() {
+                super();
+                useListener('create-table', () => assert.step('create-table'));
+                useListener('duplicate-table', () => assert.step('duplicate-table'));
+                useListener('rename-table', () => assert.step('rename-table'));
+                useListener('change-seats-num', () => assert.step('change-seats-num'));
+                useListener('change-shape', () => assert.step('change-shape'));
+                useListener('set-table-color', this._onSetTableColor);
+                useListener('set-floor-color', this._onSetFloorColor);
+                useListener('delete-table', () => assert.step('delete-table'));
+            }
+            get table() {
+                // render table T1
+                return Object.values(this.env.pos.tables_by_id).find(
+                    (table) => table.name === 'T1'
+                );
+            }
+            _onSetTableColor({ detail: color }) {
+                assert.step('set-table-color');
+                assert.step(color);
+            }
+            _onSetFloorColor({ detail: color }) {
+                assert.step('set-floor-color');
+                assert.step(color);
+            }
+        }
+        Parent.env = makePosTestEnv();
+
+        // Part 1: Test EditBar with selected table
+
+        Parent.template = xml/* html */ `
+            <div>
+                <EditBar selectedTable="table" />
+            </div>
+        `;
+
+        let parent = new Parent();
+        await parent.mount(testUtils.prepareTarget());
+
+        await testUtils.dom.click(parent.el.querySelector('.edit-button i[aria-label=Add]'));
+        assert.verifySteps(['create-table']);
+        await testUtils.dom.click(parent.el.querySelector('.edit-button i[aria-label=Duplicate]'));
+        assert.verifySteps(['duplicate-table']);
+        await testUtils.dom.click(parent.el.querySelector('.edit-button i[aria-label=Rename]'));
+        assert.verifySteps(['rename-table']);
+        await testUtils.dom.click(parent.el.querySelector('.edit-button i[aria-label=Seats]'));
+        assert.verifySteps(['change-seats-num']);
+        await testUtils.dom.click(
+            parent.el.querySelector('.edit-button i[aria-label="Square Shape"]')
+        );
+        assert.verifySteps(['change-shape']);
+
+        await testUtils.dom.click(parent.el.querySelector('.edit-button i[aria-label=Tint]'));
+        await testUtils.nextTick();
+
+        assert.ok(parent.el.querySelector('.color-picker.fg-picker'));
+        await testUtils.dom.click(parent.el.querySelector('.fg-picker .color.tl'));
+        assert.verifySteps(['set-table-color', '#EB6D6D']);
+
+        await testUtils.dom.click(parent.el.querySelector('.edit-button.trash'));
+        assert.verifySteps(['delete-table']);
+
+        parent.unmount();
+        parent.destroy();
+
+        // Part 2: Test EditBar without selected table
+
+        Parent.template = xml/* html */ `
+            <div>
+                <EditBar />
+            </div>
+        `;
+
+        parent = new Parent();
+        await parent.mount(testUtils.prepareTarget());
+
+        assert.ok(parent.el.querySelector('.edit-button.disabled i[aria-label=Duplicate]'));
+        assert.ok(parent.el.querySelector('.edit-button.disabled i[aria-label=Rename]'));
+        assert.ok(parent.el.querySelector('.edit-button.disabled i[aria-label=Seats]'));
+        assert.ok(parent.el.querySelector('.edit-button.disabled i[aria-label="Square Shape"]'));
+        assert.ok(parent.el.querySelector('.edit-button.disabled i[aria-label=Delete]'));
+
+        await testUtils.dom.click(parent.el.querySelector('.edit-button i[aria-label=Tint]'));
+        await testUtils.nextTick();
+
+        assert.notOk(parent.el.querySelector('.color-picker.fg-picker'));
+        assert.ok(parent.el.querySelector('.color-picker.bg-picker'));
+
+        await testUtils.dom.click(parent.el.querySelector('.bg-picker .color.tl'));
+        assert.verifySteps(['set-floor-color', 'rgb(244, 149, 149)']);
+
+        parent.unmount();
+        parent.destroy();
+    });
+});