Skip to content

Commit

Permalink
feature #177 Create component search with custom filter tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@korel-san
korel-san committed Feb 22, 2023
1 parent 28f813f commit 29ab8fd
Show file tree
Hide file tree
Showing 126 changed files with 4,109 additions and 10,055 deletions.
85 changes: 66 additions & 19 deletions README.DEV.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,34 +8,39 @@

- ###spline-api

Represents DTO layer for the Spline consumer API.
Represents DTO layer for the Spline consumer API.

- ###spline-utils

Generic stuff, which can be reused in any application. There cannot be any dependency on any other part of the application.

Generic stuff, which can be reused in any application. There cannot be any dependency on any other part of the
application.

- ###spline-common

Generic UI related components/modules. These components can be reused in other applications. It can have dependencies on spline-utils.

Generic UI related components/modules. These components can be reused in other applications. It can have
dependencies on spline-utils.

- ###spline-shared

Spline UI application specific stuff. Smarter components/containers which need to be shared between application modules.
It can have dependencies on spline-utils, spline-common, spline-api.
Spline UI application specific stuff. Smarter components/containers which need to be shared between application
modules.
It can have dependencies on spline-utils, spline-common, spline-api.


- Feature modules placed in the `/ui/src/modules`

Each module can depend on any shared library from `/ui/projects`, but cannot have any dependencies on any other module from `/ui/src/modules` or `/ui/src/app`.

Each module can depend on any shared library from `/ui/projects`, but cannot have any dependencies on any other module
from `/ui/src/modules` or `/ui/src/app`.


- AppModule, from `/ui/src/app` defines the skeleton of the application, it is a glue for the feature modules. It defines the application layout and routing, but it cannot have any dependencies on feature modules except routing definitions. It can be depended only on stuff from /ui/projects.
- AppModule, from `/ui/src/app` defines the skeleton of the application, it is a glue for the feature modules. It
defines the application layout and routing, but it cannot have any dependencies on feature modules except routing
definitions. It can be depended only on stuff from /ui/projects.

---

##The structure of shared libraries


```
library-name
main
Expand Down Expand Up @@ -74,7 +79,8 @@

- Each library has the main and secondary entry points:

- Main entry point directory structure (all code in the directory `main` & the package.json should be at the level of the `main` directory)
- Main entry point directory structure (all code in the directory `main` & the package.json should be at the level
of the `main` directory)

```
library-name
Expand All @@ -97,33 +103,74 @@
package.json
```

- All SCSS files should be placed in the relevant `styles` directory instead of styles definition directly in the component with `styleUrls` property.
- All SCSS files should be placed in the relevant `styles` directory instead of styles definition directly in the
component with `styleUrls` property.
- All i18n files should be placed in the relevant i18n directory.

### Styles directory naming

1. Styles directory should contain the root (main entry) SCSS file & directory with the same name where all other files should be placed.

1. Styles directory should contain the root (main entry) SCSS file & directory with the same name where all other files
should be placed.

projects/spline-common/data-view/styles:
spline-common.data-view/
...
index.scss
spline-common.data-view.scss

1.1 The name of the relevant entry file/directory is relevant to its placement in the `projects` directory, each directory level is separated with `.` in the file name. The main directory is it is the main entry point.

1.1 The name of the relevant entry file/directory is relevant to its placement in the `projects` directory, each
directory level is separated with `.` in the file name. The main directory is it is the main entry point.

projects/spline-common/main/styles:
spline-common/
...
index.scss
spline-common.scss

projects/spline-common/dynamic-filter/main/styles:
spline-common.dynamic-filter/
...
index.scss
spline-common.dynamic-filter.scss

### Troubles-shooting

1. If during installation of dev dependencies you see next issue:

```
npm ERR! [FAILED] Error: unable to get local issuer certificate
```

You must follow one of 2 variants:

- Download root certificate (from Chrome browser) and export it it env variable:

```
export NODE_EXTRA_CA_CERTS=<path/to/certfile>
```

- Set npm config variable to state false (globally)

```
npm config set ssl-strict=false
```

2. If you've got the following error during npm packages installation

```
npm ERR! code ERR_SOCKET_TIMEOUT
```

Just increase the timeout for npm config:

```
npm config set fetch-retry-mintimeout 200000
npm config set fetch-retry-maxtimeout 1200000
```

3.

---

Copyright 2020 ABSA Group Limited
Expand Down
2 changes: 2 additions & 0 deletions ui/angular.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,8 @@
]
},
"localhost": {
"sourceMap": true,
"optimization": false,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
Expand Down
89 changes: 86 additions & 3 deletions ui/cypress/e2e/main-tests-spec.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ describe('Main Tests', () => {
cy.get('ngx-daterangepicker-material .ranges .ng-star-inserted:nth-child(5) button').click()
cy.get('ngx-daterangepicker-material .buttons_input button.btn:nth-child(3)')
.should('contain.text', 'Apply').click()
cy.get('mat-table mat-row').should('have.length.lessThan', 10)
cy.get('mat-table mat-row').should('have.length.lessThan', 11)
cy.get('ngx-daterangepicker-material').should('exist')
})

Expand All @@ -66,11 +66,12 @@ describe('Main Tests', () => {
describe('Issue: On event-overview page', () => {
it('back button should restore the state of the previous page', () => {
cy.visit('/')
cy.get('mat-row:nth-child(9) .link').first().click()
cy.get('mat-row:nth-child(7) .link').first().click()
cy.wait(1000)
cy.get('sg-overview-control button').last().click()
cy.wait(1000)
cy.get('ngx-graph .node-group:nth-child(3)').click()
cy.get('.spline-card-header__title').should('contain.text', 'my-other-job-output')
cy.get('.spline-card-header__title').should('contain.text', 'otherJobResults')
cy.get('spline-data-widget .spline-data-record__value a').last().click()
cy.get('h2.text-center').should('contain.text', 'Data Source State History')
cy.go('back')
Expand All @@ -81,4 +82,86 @@ describe('Main Tests', () => {
})
})

describe('Feature #177 Filter plans and events by labels', () => {
it('search text `a` that is matched by autocomplete and option `appName` was chosen', () => {
cy.visit('/')
cy.get('spline-search-box-with-filter input').click()
cy.wait(1000).get('.mat-autocomplete-panel spline-loader mat-spinner', { timeout: 10000 })
.should('not.exist')
cy.get('.mat-autocomplete-panel mat-option')
.should('have.length.at.least', 3)

cy.get('spline-search-box-with-filter input').type('a')
cy.wait(1000).get('.mat-autocomplete-panel spline-loader mat-spinner', { timeout: 10000 })
.should('not.exist')
cy.get('.mat-autocomplete-panel mat-option')
.should('have.length.at.least', 2)
cy.get('.mat-autocomplete-panel mat-option')
.contains('.spline-search-attribute__option-name', 'appName').click()
cy.wait(1000).get(`spline-search-box-with-filter input`)
.should('have.value', 'appName:')
cy.get('.mat-autocomplete-panel mat-option')
.should('have.length.greaterThan', 5)
})

it('search text `appName:` that is matched as keyFragment, should filter autocomplete panel with typed value correctly', () => {
cy.visit('/')
cy.get('spline-search-box-with-filter input').click().type('appName:')
cy.wait(1000).get('.mat-autocomplete-panel spline-loader mat-spinner', { timeout: 10000 })
.should('not.exist')
cy.get('.mat-autocomplete-panel mat-option')
.contains('.spline-search-attribute__option-name', 'Excel Job')

cy.get('spline-search-box-with-filter input')
.type('"Excel')
cy.get('.mat-autocomplete-panel mat-option')
.contains('.spline-search-attribute__option-name', 'Excel')
cy.get('spline-search-box-with-filter input')
.type('{backspace}{backspace}{backspace}{backspace}{backspace}Other ')

cy.get('.mat-autocomplete-panel mat-option')
.contains('.spline-search-attribute__option-name', 'Other Job C')
.click()
cy.wait(1000).get(`spline-search-box-with-filter input`)
.should('have.value', 'appName:"Other Job C" ')
cy.get('mat-table mat-row')
.should('have.length.at.least', 2)
})
it('search text `appName:"Other Job C" ` that is matched as keyFragment, should propose to autocomplete new filter', () => {
cy.visit('/')
cy.get('spline-search-box-with-filter input').click().type('appName:')
cy.wait(1000).get('.mat-autocomplete-panel spline-loader mat-spinner', { timeout: 10000 })
.should('not.exist')
cy.get('spline-search-box-with-filter input')
.type('Other ')
cy.get('.mat-autocomplete-panel mat-option')
.contains('.spline-search-attribute__option-name', 'Other Job C')
.click()
cy.wait(1000).get(`spline-search-box-with-filter input`)
.should('have.value', 'appName:"Other Job C" ')

cy.wait(1000).get('.mat-autocomplete-panel spline-loader mat-spinner', { timeout: 10000 })
.should('not.exist')
cy.get('.mat-autocomplete-panel mat-option')
.should('have.length.at.least', 3)
cy.get('spline-search-box-with-filter input')
.type('t')
cy.wait(1000).get('.mat-autocomplete-panel spline-loader mat-spinner', { timeout: 10000 })
.should('not.exist')
cy.get('.mat-autocomplete-panel mat-option')
.should('have.length.at.least', 1)
cy.get('.mat-autocomplete-panel mat-option')
.contains('.spline-search-attribute__option-name', 'tag')
.click()
cy.wait(1000).get(`spline-search-box-with-filter input`)
.should('have.value', 'appName:"Other Job C" tags:')
cy.get('.mat-autocomplete-panel mat-option')
.should('have.length.greaterThan', 3)
cy.get('.mat-autocomplete-panel mat-option')
.contains('.spline-search-attribute__option-name', 'example')
.click()
cy.wait(1000).get(`spline-search-box-with-filter input`)
.should('have.value', 'appName:"Other Job C" tags:example ')
})
})
})
12 changes: 11 additions & 1 deletion ui/jest.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,16 @@ module.exports = {
'<rootDir>/setup-jest.ts'
],
'rootDir': __dirname,
'testPathIgnorePatterns': [
'projects/spline-shared/dynamic-table/main/src/components/search-dynamic-table/__tests__'
],
'transformIgnorePatterns': [
'node_modules/(?!@ngrx)'
],
// transform: {
// "^.+\\.jsx?$": "babel-jest",
// "^.+\\.mjs$": "babel-jest",
// },
'testResultsProcessor': 'jest-teamcity-reporter',
'coverageReporters': [
'text',
Expand All @@ -33,6 +40,7 @@ module.exports = {
],
'coverageDirectory': 'target/coverage',
'moduleNameMapper': {
// '^ngx-daterangepicker-material$': __dirname + 'node_modules/ngx-daterangepicker-material/fesm2015/ngx-daterangepicker-material.mjs',
'^lodash-es$': __dirname + '/node_modules/lodash/index.js',
'/spline-api/': __dirname + '/projects/spline-api/src/public-api',
'^spline-api$': __dirname + '/projects/spline-api/src/public-api',
Expand All @@ -44,6 +52,8 @@ module.exports = {
'^spline-common\/graph$': __dirname + '/projects/spline-common/graph/src/public-api',
'/spline-common\/layout/': __dirname + '/projects/spline-common/layout/src/public-api',
'^spline-common\/layout$': __dirname + '/projects/spline-common/layout/src/public-api',
'/spline-common\/main/': __dirname + '/projects/spline-common/main/src/public-api',
'^spline-common\/main': __dirname + '/projects/spline-common/main/src/public-api',
'/spline-common\/dynamic-table/': __dirname + '/projects/spline-common/dynamic-table/src/public-api',
'^spline-common\/dynamic-table$': __dirname + '/projects/spline-common/dynamic-table/src/public-api',
'/spline-common\/dynamic-filter\/filter-controls/': __dirname + '/projects/spline-common/dynamic-filter/filter-controls/src/public-api',
Expand Down Expand Up @@ -72,7 +82,7 @@ module.exports = {
'resolver': null,
'globals': {
'ts-jest': {
tsConfig: '<rootDir>/tsconfig.spec.json'
tsconfig: '<rootDir>/tsconfig.spec.json'
}
}
};
Loading

0 comments on commit 29ab8fd

Please sign in to comment.