From aeb1e3be6dc740c8ab1779ee10076a3d9c116953 Mon Sep 17 00:00:00 2001 From: Mathieu Anderson Date: Fri, 3 Nov 2023 10:31:35 +0100 Subject: [PATCH 1/3] feat: add `overflowTooltip` to `editableLabel` Signed-off-by: Mathieu Anderson --- app/client/lib/koForm.js | 5 ++++- test/client/lib/koForm.js | 13 +++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/app/client/lib/koForm.js b/app/client/lib/koForm.js index 37c28c4ae4..e7a2e553b8 100644 --- a/app/client/lib/koForm.js +++ b/app/client/lib/koForm.js @@ -26,6 +26,8 @@ var koArray = require('./koArray'); var modelUtil = require('../models/modelUtil'); +const { overflowTooltip } = require("app/client/ui/tooltips"); + var setSaveValue = modelUtil.setSaveValue; @@ -902,7 +904,8 @@ exports.editableLabel = function(valueObservable, optToggleObservable) { return dom('div.kf_editable_label', dom('div.kf_elabel_text', kd.text(valueObservable), - kd.hide(isEditing) + kd.hide(isEditing), + overflowTooltip({placement: 'top'}) ), contentSizer = dom('div.elabel_content_measure'), (!optToggleObservable ? dom.on('click', () => isEditing(true)) : null), diff --git a/test/client/lib/koForm.js b/test/client/lib/koForm.js index 69b187bee2..843726c91b 100644 --- a/test/client/lib/koForm.js +++ b/test/client/lib/koForm.js @@ -189,6 +189,19 @@ describe('koForm', function() { }); }); + describe("editableLabel", function() { + it("should bind an observable", function () { + var obs = ko.observable("Tools, projects, things and others"); + var el = kf.editableLabel(obs).querySelector("div.kf_elabel_text"); + + assert.equal(el.textContent, "Tools, projects, things and others"); + }); + + it("should show a tooltip when textContent overflows", function () { + // How to test this? Should it be tested here? + }); + }); + describe("select", function() { it("should bind an observable", function() { var obs = ko.observable("b"); From 40b2e39af70f319d32316f17511955a7ca69bd70 Mon Sep 17 00:00:00 2001 From: Mathieu Anderson Date: Sun, 12 Nov 2023 15:41:05 +0100 Subject: [PATCH 2/3] reafctor: remove superfluous unit test Signed-off-by: Mathieu Anderson --- test/client/lib/koForm.js | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/test/client/lib/koForm.js b/test/client/lib/koForm.js index 843726c91b..69b187bee2 100644 --- a/test/client/lib/koForm.js +++ b/test/client/lib/koForm.js @@ -189,19 +189,6 @@ describe('koForm', function() { }); }); - describe("editableLabel", function() { - it("should bind an observable", function () { - var obs = ko.observable("Tools, projects, things and others"); - var el = kf.editableLabel(obs).querySelector("div.kf_elabel_text"); - - assert.equal(el.textContent, "Tools, projects, things and others"); - }); - - it("should show a tooltip when textContent overflows", function () { - // How to test this? Should it be tested here? - }); - }); - describe("select", function() { it("should bind an observable", function() { var obs = ko.observable("b"); From f4c5929a76d96b22c497211c1688cfdb1a973d0b Mon Sep 17 00:00:00 2001 From: Mathieu Anderson Date: Sun, 12 Nov 2023 15:41:33 +0100 Subject: [PATCH 3/3] feat: add test case for tooltip Signed-off-by: Mathieu Anderson --- test/nbrowser/GridView.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/test/nbrowser/GridView.ts b/test/nbrowser/GridView.ts index 9357835e6c..7c842279d0 100644 --- a/test/nbrowser/GridView.ts +++ b/test/nbrowser/GridView.ts @@ -41,4 +41,15 @@ describe('GridView', function() { // This throws an error, as the cell is not rendered. assert.equal(await gu.getCell(0, 2).getText(), "2021-09-27 Mo\n2021-10-04 Mo"); }); + + it("should show a tooltip for ellided column names", async function () { + const columnName = "AReallyReallyReallyLongColumnName"; + await gu.addColumn(columnName); + await gu.getColumnHeader({ col: columnName }).mouseMove(); + await driver.wait( + () => driver.findWait(".test-tooltip", 500).isDisplayed(), + 3000 + ); + assert.equal(await driver.find(".test-tooltip").getText(), columnName); + }); });