From 0c51e294d1d9b0cebc80b86fcf13d0bdbab5ab0e Mon Sep 17 00:00:00 2001 From: Winston Liu <50Wliu@users.noreply.github.com> Date: Fri, 11 Jan 2019 20:52:55 -0500 Subject: [PATCH 01/10] Make item scroll tests more legible Also make them pass on my laptop. --- spec/tabs-spec.coffee | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/spec/tabs-spec.coffee b/spec/tabs-spec.coffee index af1fefa5..f018c866 100644 --- a/spec/tabs-spec.coffee +++ b/spec/tabs-spec.coffee @@ -329,10 +329,13 @@ describe "TabBarView", -> container.appendChild(tabBar.element) jasmine.attachToDOM(container) + # 240 px, so there should be a scrollbar + document.querySelectorAll('.tab').forEach((tab) -> tab.style.minWidth = '60px') + # Expect there to be content to scroll expect(tabBar.element.scrollWidth).toBeGreaterThan tabBar.element.clientWidth - it "does not scroll to the item when it is visible", -> + it "does not scroll to the item when it is at least partially visible", -> pane.activateItem(item1) expect(tabBar.element.scrollLeft).toBe 0 @@ -345,15 +348,23 @@ describe "TabBarView", -> pane.activateItem(item3) expect(tabBar.element.scrollLeft).not.toBe 0 - it "scrolls to the item when it isn't completely visible", -> - tabBar.element.scrollLeft = 5 - expect(tabBar.element.scrollLeft).toBe 5 # This can be 0 if there is no horizontal scrollbar + it "scrolls to the item when it isn't visible", -> + tabBar.element.scrollLeft = 20 + + # Ceil it because scrollLeft can be a decimal with display scaling + # https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop + expect(Math.ceil(tabBar.element.scrollLeft)).toBe 20 # This can be 0 if there is no horizontal scrollbar + # Last 40 pixels of item1 are still visible pane.activateItem(item1) - expect(tabBar.element.scrollLeft).toBe 0 + expect(Math.ceil(tabBar.element.scrollLeft)).toBe 20 + # item3 is not visible (visible area goes to 150 + 20 = 170px, item3 starts at 180px) pane.activateItem(item3) - expect(tabBar.element.scrollLeft).toBe tabBar.element.scrollWidth - tabBar.element.clientWidth + expect(Math.ceil(tabBar.element.scrollLeft)).toBe tabBar.element.scrollWidth - tabBar.element.clientWidth + + pane.activateItem(item1) + expect(Math.floor(tabBar.element.scrollLeft)).toBe 0 describe "when a tab item's title changes", -> it "updates the title of the item's tab", -> From 56907555a50bc7eba7cb8ef4a1f38456a0297e48 Mon Sep 17 00:00:00 2001 From: Winston Liu <50Wliu@users.noreply.github.com> Date: Fri, 11 Jan 2019 20:53:11 -0500 Subject: [PATCH 02/10] Use new version of scrollIntoView for clarity --- lib/tab-bar-view.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/tab-bar-view.coffee b/lib/tab-bar-view.coffee index d3f9e0e0..fe833e8a 100644 --- a/lib/tab-bar-view.coffee +++ b/lib/tab-bar-view.coffee @@ -168,7 +168,7 @@ class TabBarView @activeTab?.element.classList.remove('active') @activeTab = tabView @activeTab.element.classList.add('active') - @activeTab.element.scrollIntoView(false) + @activeTab.element.scrollIntoView({inline: 'nearest'}) getActiveTab: -> @tabForItem(@pane.getActiveItem()) From bad217cff9f396cc7848b3153edd1b68907773d9 Mon Sep 17 00:00:00 2001 From: Winston Liu <50Wliu@users.noreply.github.com> Date: Fri, 11 Jan 2019 21:17:21 -0500 Subject: [PATCH 03/10] Debug time --- spec/tabs-spec.coffee | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/spec/tabs-spec.coffee b/spec/tabs-spec.coffee index f018c866..5ca4d312 100644 --- a/spec/tabs-spec.coffee +++ b/spec/tabs-spec.coffee @@ -330,7 +330,9 @@ describe "TabBarView", -> jasmine.attachToDOM(container) # 240 px, so there should be a scrollbar - document.querySelectorAll('.tab').forEach((tab) -> tab.style.minWidth = '60px') + tabBar.getTabs().forEach((tab) -> tab.style.minWidth = '60px') + + tabBar.getTabs().forEach((tab) -> console.log(getComputedStyle(tab.element).width)) # Expect there to be content to scroll expect(tabBar.element.scrollWidth).toBeGreaterThan tabBar.element.clientWidth From 33c66280757f71bc9a675144ae2e0137a7c08635 Mon Sep 17 00:00:00 2001 From: Winston Liu <50Wliu@users.noreply.github.com> Date: Fri, 11 Jan 2019 21:17:49 -0500 Subject: [PATCH 04/10] Oops --- spec/tabs-spec.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/tabs-spec.coffee b/spec/tabs-spec.coffee index 5ca4d312..7885544a 100644 --- a/spec/tabs-spec.coffee +++ b/spec/tabs-spec.coffee @@ -330,7 +330,7 @@ describe "TabBarView", -> jasmine.attachToDOM(container) # 240 px, so there should be a scrollbar - tabBar.getTabs().forEach((tab) -> tab.style.minWidth = '60px') + tabBar.getTabs().forEach((tab) -> tab.element.style.minWidth = '60px') tabBar.getTabs().forEach((tab) -> console.log(getComputedStyle(tab.element).width)) From 36201935404e693173c66f5ab801ee5351a0d659 Mon Sep 17 00:00:00 2001 From: Winston Liu <50Wliu@users.noreply.github.com> Date: Fri, 11 Jan 2019 21:20:13 -0500 Subject: [PATCH 05/10] Check the scroll width?? --- spec/tabs-spec.coffee | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/spec/tabs-spec.coffee b/spec/tabs-spec.coffee index 7885544a..0b197064 100644 --- a/spec/tabs-spec.coffee +++ b/spec/tabs-spec.coffee @@ -332,9 +332,8 @@ describe "TabBarView", -> # 240 px, so there should be a scrollbar tabBar.getTabs().forEach((tab) -> tab.element.style.minWidth = '60px') - tabBar.getTabs().forEach((tab) -> console.log(getComputedStyle(tab.element).width)) - # Expect there to be content to scroll + expect(tabBar.element.scrollWidth).toBe 240 expect(tabBar.element.scrollWidth).toBeGreaterThan tabBar.element.clientWidth it "does not scroll to the item when it is at least partially visible", -> From c6ddde81f3ea155bd88bfbdd32a7b9f8b1236cb8 Mon Sep 17 00:00:00 2001 From: Winston Liu <50Wliu@users.noreply.github.com> Date: Fri, 11 Jan 2019 21:29:52 -0500 Subject: [PATCH 06/10] Check individual offsets --- spec/tabs-spec.coffee | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/spec/tabs-spec.coffee b/spec/tabs-spec.coffee index 0b197064..78ae388f 100644 --- a/spec/tabs-spec.coffee +++ b/spec/tabs-spec.coffee @@ -333,20 +333,23 @@ describe "TabBarView", -> tabBar.getTabs().forEach((tab) -> tab.element.style.minWidth = '60px') # Expect there to be content to scroll - expect(tabBar.element.scrollWidth).toBe 240 expect(tabBar.element.scrollWidth).toBeGreaterThan tabBar.element.clientWidth it "does not scroll to the item when it is at least partially visible", -> pane.activateItem(item1) + expect(tabBar.tabForItem(item1).element.offsetLeft).toBe 0 expect(tabBar.element.scrollLeft).toBe 0 pane.activateItem(editor1) + expect(tabBar.tabForItem(editor1).element.offsetLeft).toBe 60 expect(tabBar.element.scrollLeft).toBe 0 pane.activateItem(item2) + expect(tabBar.tabForItem(item2).element.offsetLeft).toBe 120 expect(tabBar.element.scrollLeft).toBe 0 pane.activateItem(item3) + expect(tabBar.tabForItem(item3).element.offsetLeft).toBe 180 expect(tabBar.element.scrollLeft).not.toBe 0 it "scrolls to the item when it isn't visible", -> From 33ab845afcb9e056d80ae3be7c1619850f5af0c8 Mon Sep 17 00:00:00 2001 From: Winston Liu <50Wliu@users.noreply.github.com> Date: Fri, 11 Jan 2019 21:34:11 -0500 Subject: [PATCH 07/10] Check clientWidth --- spec/tabs-spec.coffee | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/spec/tabs-spec.coffee b/spec/tabs-spec.coffee index 78ae388f..2b923600 100644 --- a/spec/tabs-spec.coffee +++ b/spec/tabs-spec.coffee @@ -333,23 +333,20 @@ describe "TabBarView", -> tabBar.getTabs().forEach((tab) -> tab.element.style.minWidth = '60px') # Expect there to be content to scroll + expect(tabBar.element.clientWidth).toBe 150 expect(tabBar.element.scrollWidth).toBeGreaterThan tabBar.element.clientWidth it "does not scroll to the item when it is at least partially visible", -> pane.activateItem(item1) - expect(tabBar.tabForItem(item1).element.offsetLeft).toBe 0 expect(tabBar.element.scrollLeft).toBe 0 pane.activateItem(editor1) - expect(tabBar.tabForItem(editor1).element.offsetLeft).toBe 60 expect(tabBar.element.scrollLeft).toBe 0 pane.activateItem(item2) - expect(tabBar.tabForItem(item2).element.offsetLeft).toBe 120 expect(tabBar.element.scrollLeft).toBe 0 pane.activateItem(item3) - expect(tabBar.tabForItem(item3).element.offsetLeft).toBe 180 expect(tabBar.element.scrollLeft).not.toBe 0 it "scrolls to the item when it isn't visible", -> From 06846a2d7b2c57e4e74ed49dccd1b401658b6412 Mon Sep 17 00:00:00 2001 From: Winston Liu <50Wliu@users.noreply.github.com> Date: Fri, 11 Jan 2019 21:39:19 -0500 Subject: [PATCH 08/10] Check jasmine-content's width --- spec/tabs-spec.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/tabs-spec.coffee b/spec/tabs-spec.coffee index 2b923600..f94e144d 100644 --- a/spec/tabs-spec.coffee +++ b/spec/tabs-spec.coffee @@ -333,7 +333,7 @@ describe "TabBarView", -> tabBar.getTabs().forEach((tab) -> tab.element.style.minWidth = '60px') # Expect there to be content to scroll - expect(tabBar.element.clientWidth).toBe 150 + console.log(document.querySelector('#jasmine-content').clientWidth) expect(tabBar.element.scrollWidth).toBeGreaterThan tabBar.element.clientWidth it "does not scroll to the item when it is at least partially visible", -> From f3473f28ac997152704e09419245a7d81ee8e52a Mon Sep 17 00:00:00 2001 From: Winston Liu <50Wliu@users.noreply.github.com> Date: Fri, 11 Jan 2019 21:42:56 -0500 Subject: [PATCH 09/10] Well, that didn't help much --- spec/tabs-spec.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/tabs-spec.coffee b/spec/tabs-spec.coffee index f94e144d..221e8b61 100644 --- a/spec/tabs-spec.coffee +++ b/spec/tabs-spec.coffee @@ -333,7 +333,7 @@ describe "TabBarView", -> tabBar.getTabs().forEach((tab) -> tab.element.style.minWidth = '60px') # Expect there to be content to scroll - console.log(document.querySelector('#jasmine-content').clientWidth) + expect(document.querySelector('#jasmine-content').clientWidth).not.toBeLessThan 150 expect(tabBar.element.scrollWidth).toBeGreaterThan tabBar.element.clientWidth it "does not scroll to the item when it is at least partially visible", -> From bd10c021f4137d0fa78bf633de3e3be3b81f9753 Mon Sep 17 00:00:00 2001 From: Winston Liu <50Wliu@users.noreply.github.com> Date: Fri, 11 Jan 2019 21:44:59 -0500 Subject: [PATCH 10/10] Find out what this value actually is on CI --- spec/tabs-spec.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/tabs-spec.coffee b/spec/tabs-spec.coffee index 221e8b61..6226dc59 100644 --- a/spec/tabs-spec.coffee +++ b/spec/tabs-spec.coffee @@ -333,7 +333,7 @@ describe "TabBarView", -> tabBar.getTabs().forEach((tab) -> tab.element.style.minWidth = '60px') # Expect there to be content to scroll - expect(document.querySelector('#jasmine-content').clientWidth).not.toBeLessThan 150 + expect(document.querySelector('#jasmine-content').clientWidth).not.toBeLessThan 50000 expect(tabBar.element.scrollWidth).toBeGreaterThan tabBar.element.clientWidth it "does not scroll to the item when it is at least partially visible", ->