108 lines
3.6 KiB
JavaScript
108 lines
3.6 KiB
JavaScript
import { describe, expect, test } from "@odoo/hoot";
|
|
import { defineSpreadsheetModels } from "@spreadsheet/../tests/helpers/data";
|
|
import { contains, makeMockEnv, mountWithCleanup } from "@web/../tests/web_test_helpers";
|
|
import { Model, stores, LocalTransportService } from "@odoo/o-spreadsheet";
|
|
|
|
import { CollaborativeStatus } from "@spreadsheet_edition/bundle/components/collaborative_status/collaborative_status";
|
|
import { Component, onMounted, onWillUnmount, xml } from "@odoo/owl";
|
|
const { useStoreProvider, ModelStore, ClientFocusStore } = stores;
|
|
|
|
describe.current.tags("desktop");
|
|
defineSpreadsheetModels();
|
|
|
|
class Parent extends Component {
|
|
static template = xml`<CollaborativeStatus/>`;
|
|
static components = { CollaborativeStatus };
|
|
static props = {
|
|
model: Object,
|
|
};
|
|
|
|
setup() {
|
|
const stores = useStoreProvider();
|
|
stores.inject(ModelStore, this.props.model);
|
|
|
|
onMounted(() => {
|
|
this.props.model.on("update", this, () => this.render(true));
|
|
stores.on("store-updated", this, this.render.bind(this, true));
|
|
});
|
|
onWillUnmount(() => {
|
|
this.props.model.off("update", this);
|
|
stores.off("store-updated", this);
|
|
});
|
|
}
|
|
}
|
|
|
|
const CLIENTS = {
|
|
alice: {
|
|
id: "alice",
|
|
name: "Alice",
|
|
position: { sheetId: "AliceSheet", col: 5, row: 5 },
|
|
userId: 1,
|
|
},
|
|
bob: { id: "bob", name: "Bob", position: { sheetId: "BobSheet", col: 20, row: 20 }, userId: 2 },
|
|
fromId(id) {
|
|
return { id, name: id, position: { sheetId: "AliceSheet", col: 2, row: 2 }, userId: id };
|
|
},
|
|
};
|
|
|
|
async function mountCollaborativeStatusComponent(clients = []) {
|
|
const transportService = new LocalTransportService();
|
|
const model = new Model({}, { transportService });
|
|
const env = await makeMockEnv({ model });
|
|
|
|
for (const client of clients) {
|
|
transportService.sendMessage({
|
|
type: "CLIENT_JOINED",
|
|
version: 1,
|
|
client,
|
|
});
|
|
}
|
|
|
|
const parent = await mountWithCleanup(Parent, { env, props: { model: env.model } });
|
|
return { env, model, transportService, parent };
|
|
}
|
|
|
|
test("Show user bubble with less than 10 users", async function () {
|
|
await mountCollaborativeStatusComponent([CLIENTS.alice, CLIENTS.bob]);
|
|
expect(".o_spreadsheet_user").toHaveCount(2);
|
|
});
|
|
|
|
test("Show user bubble with more than 10 users", async function () {
|
|
const clients = [CLIENTS.alice, CLIENTS.bob].concat(
|
|
Array(10)
|
|
.keys()
|
|
.map((x) => CLIENTS.fromId(3 + x))
|
|
.toArray()
|
|
);
|
|
await mountCollaborativeStatusComponent(clients);
|
|
|
|
expect(".o_spreadsheet_user .justify-content-between").toHaveCount(10);
|
|
expect(".o_spreadsheet_more_users").toHaveText("+2");
|
|
|
|
await contains(".o_spreadsheet_more_users").hover();
|
|
expect(".o_spreadsheet_user").toHaveCount(12);
|
|
});
|
|
|
|
test("Jump to user", async function () {
|
|
const { parent } = await mountCollaborativeStatusComponent([CLIENTS.alice, CLIENTS.bob]);
|
|
const clientFocusStore = parent.env.getStore(ClientFocusStore);
|
|
|
|
const funSpy = [];
|
|
clientFocusStore.jumpToClient = (clientId) => {
|
|
funSpy.push(clientId);
|
|
};
|
|
|
|
await contains(".o_spreadsheet_users div:nth-child(1) img").click();
|
|
|
|
expect(funSpy).toInclude("alice");
|
|
});
|
|
|
|
test("Show client tags on hover", async function () {
|
|
const { parent } = await mountCollaborativeStatusComponent([CLIENTS.alice, CLIENTS.bob]);
|
|
const clientFocusStore = parent.env.getStore(ClientFocusStore);
|
|
|
|
await contains(".o_spreadsheet_users div:nth-child(1) img").hover();
|
|
|
|
expect(clientFocusStore.focusedClients).toInclude("alice");
|
|
});
|