From c616eb5a0cdcbe1850638a949e6c8ca219153d96 Mon Sep 17 00:00:00 2001 From: rob2d Date: Wed, 31 Mar 2021 10:19:14 -0400 Subject: [PATCH 01/10] CSS changes to address the search x button issues --- .../applicationmenu/_applicationmenu-new.scss | 13 +++++++++ .../applicationmenu/_applicationmenu.scss | 9 +++++++ src/components/button/_button.scss | 2 +- .../searchfield/_searchfield-new.scss | 27 ++++++++++++------- src/components/searchfield/_searchfield.scss | 18 +++++++++---- 5 files changed, 53 insertions(+), 16 deletions(-) diff --git a/src/components/applicationmenu/_applicationmenu-new.scss b/src/components/applicationmenu/_applicationmenu-new.scss index bd4faacc56..a03d2d5fc2 100644 --- a/src/components/applicationmenu/_applicationmenu-new.scss +++ b/src/components/applicationmenu/_applicationmenu-new.scss @@ -12,6 +12,10 @@ margin: 0 $ids-number-spacing-base; width: calc(100% - calc(#{$ids-number-spacing-base} * 2)); + > svg.icon:not(.close) { + top: 13px; + } + .searchfield { height: 40px; @@ -43,6 +47,15 @@ &:first-child { margin-top: 10px; } + + button.close { + height: 24px; + right: 9px; + top: 8px; + & > svg.close.icon { + top: 0px; + } + } } .application-menu-header, diff --git a/src/components/applicationmenu/_applicationmenu.scss b/src/components/applicationmenu/_applicationmenu.scss index 694a60c3f1..f9cc1e4215 100644 --- a/src/components/applicationmenu/_applicationmenu.scss +++ b/src/components/applicationmenu/_applicationmenu.scss @@ -133,6 +133,11 @@ body.is-open-touch { } button.close { + align-items: center; + justify-content: center; + top: 5px; + + &:focus:not(.hide-focus) { box-shadow: 0 0 0 1px $body-color-primary-background, 0 0 0 2px transparent, 0 0 4px 3px rgba(33, 34, 36, 0.3); @@ -140,6 +145,10 @@ body.is-open-touch { color: $ids-color-palette-white; } } + + &:not(.is-empty) { + display: flex; + } } &.has-go-button { diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 4dbc4ce628..7573fc8596 100755 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -2,7 +2,7 @@ //================================================== // // Also see: -// sass/controls/_icons.scss +// sass/_icons.scss button { background-color: transparent; diff --git a/src/components/searchfield/_searchfield-new.scss b/src/components/searchfield/_searchfield-new.scss index 944a05998e..dd000afedb 100644 --- a/src/components/searchfield/_searchfield-new.scss +++ b/src/components/searchfield/_searchfield-new.scss @@ -9,12 +9,10 @@ .searchfield-wrapper { > .icon { - top: 12px; - &.close { - height: 12px; - right: 9px; - top: 13px; + padding: 1px 3px; + top: 50%; + transform: translateY(-50%); } } @@ -50,8 +48,9 @@ padding-top: 6px; } - .icon.close { - top: 12px; + > .icon, + > .icon:not(.close) { + top: 10px; } } @@ -61,15 +60,23 @@ } } - &.has-text .icon.close { - top: 11px; + .btn-icon.close { + overflow: visible; + &:not(.is-empty) { + top: 6px; + } + + & > svg.close.icon { + top: calc( 50% - 6px ); + transform: translateY(-50%); + } } } .toolbar-searchfield-wrapper { &.searchfield-wrapper { &.non-collapsible { - svg.icon { + svg.icon:not(.close) { top: 11px; } } diff --git a/src/components/searchfield/_searchfield.scss b/src/components/searchfield/_searchfield.scss index 8ca8a0754f..dbaf8e8dfd 100644 --- a/src/components/searchfield/_searchfield.scss +++ b/src/components/searchfield/_searchfield.scss @@ -41,8 +41,7 @@ &.close { outline: none; - right: 5px; - top: 10px; + right: 8px; } &.icon-error { @@ -95,6 +94,10 @@ white-space: nowrap; width: 100%; + > button.close { + top: 5px; + } + > .searchfield { background-color: $searchfield-context-bg; border-bottom: 1px solid $searchfield-context-border-color; @@ -125,7 +128,8 @@ } &.close { - right: 6px; + padding: 1px 3px; + right: 8px; } } @@ -320,8 +324,12 @@ } button.close { - right: 35px; - top: 4px; + align-items: center; + display: flex; + height: 100%; + justify-content: center; + position: absolute; + top: 0; @media (min-width: $breakpoint-phone-to-tablet) { right: 45px; From ded22c45b9efb0099be99cf5a8a250dc9e9919ed Mon Sep 17 00:00:00 2001 From: rob2d Date: Wed, 31 Mar 2021 10:24:02 -0400 Subject: [PATCH 02/10] Update/iterate on TESTING.md --- docs/TESTING.md | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/docs/TESTING.md b/docs/TESTING.md index d87fa74f9b..74c81c9c3f 100644 --- a/docs/TESTING.md +++ b/docs/TESTING.md @@ -2,6 +2,16 @@ The IDS components are backed by both functional and end-to-end (e2e) test suites. When contributing to the IDS enterprise project, before we can accept pull requests we expect that new tests will be provided to prove that new functionality works, and that all existing tests pass. +- [Test Stack](#test-stack) +- [Writing Tests](#writing-tests) +- [Running functional tests](#running-functional-tests) +- [Running e2e tests silently for continuous integration](#running-e2e-tests-silently-for-continuous-integration) +- [Running E2E Tests Locally](#running-e2e-tests-locally) +- [Debugging Functional Tests](#debugging-functional-tests) +- [Working with Visual Regression Tests](#working-with-visual-regression-tests) +- [Making Accessibility e2e Tests with Axe](#making-accessibility-e2e-tests-with-axe) +- [Testing Resources](#testing-resources) + ## Test Stack - [Karma](https://karma-runner.github.io/2.0/index.html) test runner for all tests. @@ -169,8 +179,13 @@ Following the process below will safely create baseline images the CI can use du We created a docker image to help manage baselines. This is located in the [Infor Design System Docker Repos](https://hub.docker.com/r/infords/travis/tags). 1. Download the docker image with `docker run --name travis-debug -dit infords/travis:v2`. -1. Once downloaded, login to the VM with `docker exec -it travis-debug bash -l`. -1. If you had a previous VM with travis-debug you may need to rename it. Do a rename and then login again to the VM: +1. Once the image has been downloaded, you can login to the VM/Docker container by running bash through `exec` e.g. + +```sh +docker exec -it travis-debug bash -l +``` + +If you had a previous VM with travis-debug you may need to rename it. Do a rename and then login again to the VM: ```sh docker rename travis-debug travis-debug-old @@ -190,8 +205,8 @@ In order to do this we clean the folders, update chrome and do a fresh `npm i`. rm -rf node_modules wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb sudo dpkg -i google-chrome*.deb - npm i rm google-chrome-stable_current_amd64.deb + npm i ``` This is good step to follow if you see an error similar to this one when running the test suite: @@ -238,7 +253,7 @@ We used this set of instructions we needed to make the travis VM originally. 1. Update/Install Node.js ```sh - nvm install 10 + nvm install 14 nvm alias default {insert exact version} nvm use default ``` @@ -362,4 +377,4 @@ You should make a test for any states the component has, like closed vs open, se - + \ No newline at end of file From 36d4f9b03bd8d35448212660f8dcd6bf2d5545f5 Mon Sep 17 00:00:00 2001 From: rob2d Date: Wed, 31 Mar 2021 10:26:32 -0400 Subject: [PATCH 03/10] Update CHANGELOG.md (+ #4989) --- docs/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 334acc9e08..1fcc124483 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -42,6 +42,7 @@ - `[Radar Chart]` Added support for double click. ([#3229](https://github.com/infor-design/enterprise/issues/3229)) - `[Rating]` Fixed color of unclick rating star. ([#4853](https://github.com/infor-design/enterprise/issues/4853)) - `[Popupmenu]` Fixed a lifecycle issue on menus that are shared between trigger elements, where these menus were incorrectly being torn down. ([NG#987](https://github.com/infor-design/enterprise-ng/issues/987)) +- `[Searchfield]` Fixed an issue where certain variants/scenarios had the clear button vertically below center ([#4989](https://github.com/infor-design/enterprise/issues/4989)) - `[Tabs (Horizontal/Header)]` Fixed bug with the placement of the focus state in RTL mode, and other minor visual improvements. ([#4877](https://github.com/infor-design/enterprise/issues/4877)) - `[Tabs Module]` Fixed a bug where clear button was missing when clearable setting is activated in tabs module searchfield. ([#4898](https://github.com/infor-design/enterprise/issues/4898)) - `[Textarea]` Fixed a bug where the textarea options like autogrow, autoGrowMaxHeight doesn't work after the initialization inside of the accordion. ([#4977](https://github.com/infor-design/enterprise/issues/4977)) From 85afbf9342e389920f685ebbb7f395090266b516 Mon Sep 17 00:00:00 2001 From: rob2d Date: Wed, 31 Mar 2021 10:28:37 -0400 Subject: [PATCH 04/10] refactor/iterate on datagrid row deletion tests + add conventions --- test/components/datagrid/datagrid.e2e-spec.js | 87 +++++++++++++++---- 1 file changed, 70 insertions(+), 17 deletions(-) diff --git a/test/components/datagrid/datagrid.e2e-spec.js b/test/components/datagrid/datagrid.e2e-spec.js index 38b6d86c65..77bc7d04bf 100644 --- a/test/components/datagrid/datagrid.e2e-spec.js +++ b/test/components/datagrid/datagrid.e2e-spec.js @@ -1,10 +1,39 @@ +/* eslint-disable compat/compat */ +const { browser, element } = require('protractor'); + const { browserStackErrorReporter } = requireHelper('browserstack-error-reporter'); const utils = requireHelper('e2e-utils'); const config = requireHelper('e2e-config'); +const until = protractor.ExpectedConditions; requireHelper('rejection'); jasmine.getEnv().addReporter(browserStackErrorReporter); +/** + * general CSS selectors used throughout these tests + */ +const S = { + gridRow: ({ row } = {}) => { + const rSelector = row ? `:nth-child(${row})` : ''; + return `#datagrid .datagrid-wrapper tbody tr${rSelector}`; + }, + gridColumn: ({ row, column } = {}) => { + const cSelector = column ? `:nth-child(${column})` : ''; + const rSelector = row ? `:nth-child(${row})` : ''; + return `#datagrid .datagrid-wrapper tbody tr${rSelector} td${cSelector}`; + }, + gridRowCheckbox: ({ row, column = 1, checked }) => { + const checkedState = `${!checked ? ':not(' : ''}.is-checked${!checked ? ')' : ''}`; + + return ( + `#datagrid .datagrid-wrapper tbody tr:nth-child(${row}) ` + + `td:nth-child(${column}) ` + + `[role="checkbox"]${checkedState}` + ); + }, + removeRowButton: () => '#remove-btn' +}; + const openPersonalizationDialog = async () => { await element.all(by.css('.btn-actions')).first().click(); await browser.driver @@ -1345,23 +1374,47 @@ describe('Datagrid multiselect tests', () => { expect(await element.all(by.css('.modal-content input[type="checkbox"]')).count()).toEqual(5); }); - it('Should remove rows in order', async () => { - await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(1) td:nth-child(2)')).click(); - await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(2) td:nth-child(2)')).click(); - await element(by.css('#remove-btn')).click(); - - expect(await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(1) td:nth-child(2)')).getText()).toEqual('2342203'); - expect(await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(2) td:nth-child(2)')).getText()).toEqual('2445204'); - }); - - it('Should remove rows in reverse order', async () => { - await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(2) td:nth-child(2)')).click(); - await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(1) td:nth-child(2)')).click(); - await element(by.css('#remove-btn')).click(); - await browser.driver.sleep(config.sleep); - - expect(await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(1) td:nth-child(2)')).getText()).toEqual('2342203'); - expect(await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(2) td:nth-child(2)')).getText()).toEqual('2445204'); + it('Should remove two rows after selecting them in order', async () => { + await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 1, checked: false })))); + await $(S.gridColumn({ row: 1, column: 2 })).click(); + await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 1, checked: true })))); + + await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 2, checked: false })))); + await $(S.gridColumn({ row: 2, checked: false })).click(); + await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 2, checked: true })))); + + const prevRowCount = await $$(S.gridRow()).count(); + await browser.wait(until.presenceOf($(S.removeRowButton()))); + await $(S.removeRowButton()).click(); + + await Promise.all([ + browser.wait(until.stalenessOf($(S.gridRow({ row: prevRowCount - 1 })))), + browser.wait(until.stalenessOf($(S.gridRow({ row: prevRowCount })))) + ]); + + expect(await $$(S.gridRow()).count()).toEqual(prevRowCount - 2); + expect(await $(S.gridColumn({ row: 1, column: 2 })).getText()).toEqual('2342203'); + expect(await $(S.gridColumn({ row: 2, column: 2 })).getText()).toEqual('2445204'); + }); + + it('Should remove two rows after selecting them in reverse order', async () => { + await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 2, checked: false })))); + await $(S.gridColumn({ row: 2, column: 2 })).click(); + await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 2, checked: true })))); + await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 1, checked: false })))); + await $(S.gridColumn({ row: 1, column: 2 })).click(); + await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 1, checked: true })))); + const prevRowCount = await $$(S.gridRow()).count(); + await browser.wait(until.presenceOf($(S.removeRowButton()))); + await $(S.removeRowButton()).click(); + await Promise.all([ + browser.wait(until.stalenessOf($(S.gridRow({ row: prevRowCount - 1 })))), + browser.wait(until.stalenessOf($(S.gridRow({ row: prevRowCount })))) + ]); + + expect(await ($$(S.gridRow()).count())).toEqual(prevRowCount - 2); + expect(await $(S.gridColumn({ row: 1, column: 2 })).getText()).toEqual('2342203'); + expect(await $(S.gridColumn({ row: 2, column: 2 })).getText()).toEqual('2445204'); }); if (utils.isChrome() && utils.isCI()) { From ef5e93e9d3b76629f2efc52109492562e77c6028 Mon Sep 17 00:00:00 2001 From: rob2d Date: Wed, 31 Mar 2021 11:00:15 -0400 Subject: [PATCH 05/10] mdlint: needed newline at the end of .md file --- docs/TESTING.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/TESTING.md b/docs/TESTING.md index 74c81c9c3f..e356115f20 100644 --- a/docs/TESTING.md +++ b/docs/TESTING.md @@ -178,7 +178,7 @@ Following the process below will safely create baseline images the CI can use du We created a docker image to help manage baselines. This is located in the [Infor Design System Docker Repos](https://hub.docker.com/r/infords/travis/tags). -1. Download the docker image with `docker run --name travis-debug -dit infords/travis:v2`. +1. Download the git show-branchdocker image with `docker run --name travis-debug -dit infords/travis:v2`. 1. Once the image has been downloaded, you can login to the VM/Docker container by running bash through `exec` e.g. ```sh @@ -377,4 +377,4 @@ You should make a test for any states the component has, like closed vs open, se - \ No newline at end of file + From 671105a99605077ba425d931b9ea1096a9bec0d5 Mon Sep 17 00:00:00 2001 From: rob2d Date: Wed, 31 Mar 2021 11:46:45 -0400 Subject: [PATCH 06/10] fix regression on noncollapsible searchfield icon --- src/components/searchfield/_searchfield.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/searchfield/_searchfield.scss b/src/components/searchfield/_searchfield.scss index dbaf8e8dfd..be667e6105 100644 --- a/src/components/searchfield/_searchfield.scss +++ b/src/components/searchfield/_searchfield.scss @@ -22,6 +22,10 @@ margin-bottom: 20px; position: relative; + &.non-collapsible > .icon:not(.close):not(.icon-error) { + top: 12px; + } + @include transition(width 300ms $cubic-ease, left 300ms $cubic-ease, right 300ms $cubic-ease, From e327cea2fb96fbb78ef55f38317b919732ef5171 Mon Sep 17 00:00:00 2001 From: rob2d Date: Wed, 31 Mar 2021 12:27:11 -0400 Subject: [PATCH 07/10] should have put last style fix in searchfield-new vs searchfield --- src/components/searchfield/_searchfield-new.scss | 4 ++++ src/components/searchfield/_searchfield.scss | 4 ---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/searchfield/_searchfield-new.scss b/src/components/searchfield/_searchfield-new.scss index dd000afedb..ae4f9495ae 100644 --- a/src/components/searchfield/_searchfield-new.scss +++ b/src/components/searchfield/_searchfield-new.scss @@ -16,6 +16,10 @@ } } + &.non-collapsible > .icon:not(.close):not(.icon-error) { + top: 12px; + } + .go-button { height: 100%; } diff --git a/src/components/searchfield/_searchfield.scss b/src/components/searchfield/_searchfield.scss index be667e6105..dbaf8e8dfd 100644 --- a/src/components/searchfield/_searchfield.scss +++ b/src/components/searchfield/_searchfield.scss @@ -22,10 +22,6 @@ margin-bottom: 20px; position: relative; - &.non-collapsible > .icon:not(.close):not(.icon-error) { - top: 12px; - } - @include transition(width 300ms $cubic-ease, left 300ms $cubic-ease, right 300ms $cubic-ease, From a628f82ff09a68a8ac0564513efa11415475a247 Mon Sep 17 00:00:00 2001 From: Tim McConechy Date: Wed, 31 Mar 2021 13:17:01 -0400 Subject: [PATCH 08/10] Fix the tests --- test/components/datagrid/datagrid.e2e-spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/components/datagrid/datagrid.e2e-spec.js b/test/components/datagrid/datagrid.e2e-spec.js index 77bc7d04bf..22bb8fca86 100644 --- a/test/components/datagrid/datagrid.e2e-spec.js +++ b/test/components/datagrid/datagrid.e2e-spec.js @@ -1289,9 +1289,9 @@ describe('Datagrid multiselect tests', () => { beforeEach(async () => { await utils.setPage('/components/datagrid/example-multiselect.html?theme=classic&layout=nofrills'); - const datagridEl = await element(by.css('#datagrid tbody tr:nth-child(1)')); + const datagridEl = await element(by.css('#datagrid tbody tr:nth-child(3)')); await browser.driver - .wait(protractor.ExpectedConditions.presenceOf(datagridEl), config.waitsFor); + .wait(protractor.ExpectedConditions.visibilityOf(datagridEl), config.waitsFor); }); it('Should not have errors', async () => { From ccb4bcd123fa997ca3bdefc5aa60a874baef2eba Mon Sep 17 00:00:00 2001 From: rob2d Date: Wed, 31 Mar 2021 15:38:06 -0400 Subject: [PATCH 09/10] applied updated row test patterns to failing case --- test/components/datagrid/datagrid.e2e-spec.js | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/test/components/datagrid/datagrid.e2e-spec.js b/test/components/datagrid/datagrid.e2e-spec.js index 22bb8fca86..9d9baee3b2 100644 --- a/test/components/datagrid/datagrid.e2e-spec.js +++ b/test/components/datagrid/datagrid.e2e-spec.js @@ -1318,14 +1318,27 @@ describe('Datagrid multiselect tests', () => { }); it('Should handle removing selected rows ', async () => { - expect(await element.all(by.css('.datagrid-row')).count()).toEqual(7); + await browser.wait(until.presenceOf($(S.gridRow()))); + const prevRowCount = await $$(S.gridRow()).count(); - await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(1) td:nth-child(1)')).click(); - await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(2) td:nth-child(2)')).click(); + expect(prevRowCount).toEqual(7); - await element(by.id('remove-btn')).click(); + await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 1, checked: false })))); + await $(S.gridColumn({ row: 1, column: 1 })).click(); + await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 1, checked: true })))); - expect(await element.all(by.css('.datagrid-row')).count()).toEqual(5); + await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 2, checked: false })))); + await $(S.gridColumn({ row: 2, column: 1 })).click(); + await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 2, checked: true })))); + + await $(S.removeRowButton()).click(); + + await Promise.all([ + browser.wait(until.stalenessOf($(S.gridRow({ row: prevRowCount - 1 })))), + browser.wait(until.stalenessOf($(S.gridRow({ row: prevRowCount })))) + ]); + + expect(await $$(S.gridRow()).count()).toEqual(prevRowCount - 2); }); it('Should have aria-checked and not aria-selected', async () => { From 6066ff048cf9e222216e2635c17c1f3d8dcea0ec Mon Sep 17 00:00:00 2001 From: rob2d Date: Thu, 1 Apr 2021 09:52:57 -0400 Subject: [PATCH 10/10] fix on category-searchfield --- src/components/searchfield/_searchfield.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/searchfield/_searchfield.scss b/src/components/searchfield/_searchfield.scss index dbaf8e8dfd..496d2a8d45 100644 --- a/src/components/searchfield/_searchfield.scss +++ b/src/components/searchfield/_searchfield.scss @@ -323,7 +323,7 @@ } } - button.close { + button.close:not(.is-empty) { align-items: center; display: flex; height: 100%; @@ -337,7 +337,7 @@ svg.close { left: 0; - top: 0 !important; + top: 8px !important; } } }