-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Search page] Add search input and filters #22
Merged
Merged
Changes from all commits
Commits
Show all changes
21 commits
Select commit
Hold shift + click to select a range
fc010d4
feat(search-form): add a search-form with basic UI
tkohr fbd8415
feat(search-filters): add filter component
tkohr 8246701
feat(search-filters): extend components for dropdown
tkohr 952bb53
feat(dropdown-select): display selected counter and arrow
tkohr a6d8a99
chore(package.json): update gn-ui
tkohr 6127e7b
type(dropdown-select): remove workarounds for gn-ui typing issues
tkohr 4a057cf
feat(results-list-grid): add show more button
tkohr 2c1b9f3
feat(results-list): display content ghost on grid list as well
tkohr 6d9e2bf
feat(search-form): rework layout
tkohr ed3293f
feat(search-page): ajust result hits and spacings to mel design
tkohr fbb2f47
refactor(search-page): move template around grid to search-results
tkohr e6fd7dc
feat(search-results): add spinning loader to show more button
tkohr 951f87f
refactor(search-page): use control flow syntax
tkohr b540d1a
refactor(filter-dropdown): rename components extended from gn-ui with…
tkohr 8687a72
test(search-results): fix e2e tests
tkohr 11cb654
chore(i18n): run `npm run i18n:extract` after rebase
tkohr 2e96f58
feat(search-form): use mel fuzzy-search.component
tkohr 521388f
refactor(style): use mel-title-line class
tkohr b33f1cb
fix(content-ghost): change condition to isLoading
tkohr 3f1a049
test(e2e): add and restructure tests
tkohr c763763
review: address comments
tkohr File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,85 +1,180 @@ | ||
| describe('datahub-e2e', () => { | ||
| describe('search', () => { | ||
| beforeEach(() => cy.visit('/search')) | ||
|
|
||
| it('should display the title', () => { | ||
| cy.get('.mel-page-title').should('be.visible') | ||
| }) | ||
| it('should display the number of result hits', () => { | ||
| cy.get('gn-ui-results-hits-number').should('contain', 14) | ||
| }) | ||
| it('should display the footer', () => { | ||
| cy.get('mel-datahub-footer').should('be.visible') | ||
| }) | ||
| it('should display the result hits in search card', () => { | ||
| cy.get('mel-datahub-results-card-search').should('have.length', 14) | ||
| }) | ||
|
|
||
| // If not logged in or no favorites exists | ||
| it('should display record results in last created cards inside a carousel', () => { | ||
| cy.get('mel-datahub-custom-carousel') | ||
| .find('mel-datahub-results-card-last-created') | ||
| .eq(0) | ||
| .find('h1') | ||
| .should( | ||
| 'have.text', | ||
| ' Metadata for E2E testing purpose. (this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut) ' | ||
| ) | ||
|
|
||
| cy.get('mel-datahub-results-card-last-created') | ||
| .find('h1') | ||
| .should('be.visible') | ||
|
|
||
| cy.get('mel-datahub-results-card-last-created') | ||
| .find('.mel-badge-button') | ||
| .should('be.visible') | ||
| }) | ||
|
|
||
| describe('interactions with dataset', () => { | ||
| beforeEach(() => { | ||
| cy.get('mel-datahub-results-card-last-created').first().as('firstResult') | ||
| describe('search page defaults', () => { | ||
| it('should display the title', () => { | ||
| cy.get('.mel-page-title').should('be.visible') | ||
| }) | ||
| it('should display the number of result hits', () => { | ||
| cy.get('[data-cy="searchResults"]').should('contain', 14) | ||
| }) | ||
| it('should open the dataset page in the same application on click', () => { | ||
| cy.get('@firstResult').click() | ||
| cy.url().should('include', 'dataset') | ||
| cy.get('mel-datahub-dataset-page').should('be.visible') | ||
| it('should display the footer', () => { | ||
| cy.get('mel-datahub-footer').should('be.visible') | ||
| }) | ||
| it('should display the result hits in search card', () => { | ||
| cy.get('mel-datahub-results-card-search').should('have.length', 14) | ||
| }) | ||
| }) | ||
|
|
||
| // If logged in and favorites exist | ||
| describe('User logged in', () => { | ||
| beforeEach(() => { | ||
| cy.login() | ||
| cy.visit('/search') | ||
| cy.get('mel-datahub-heart-toggle').first().click() | ||
| }) | ||
| it('should display record results in favorite cards inside a carousel', () => { | ||
| describe('search header carousel', () => { | ||
| // If not logged in or no favorites exists | ||
| it('should display record results in last created cards inside a carousel', () => { | ||
| cy.get('mel-datahub-custom-carousel') | ||
| .find('mel-datahub-results-card-favorite') | ||
| .eq(0) | ||
| .find('mel-datahub-results-card-last-created') | ||
| .first() | ||
| .find('h1') | ||
| .should( | ||
| 'have.text', | ||
| ' Metadata for E2E testing purpose. (this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut) ' | ||
| ) | ||
|
|
||
| cy.get('mel-datahub-results-card-favorite') | ||
| .find('.mel-badge-button') | ||
| cy.get('mel-datahub-results-card-last-created') | ||
| .find('h1') | ||
| .should('be.visible') | ||
|
|
||
| cy.get('mel-datahub-results-card-favorite') | ||
| .find('mel-datahub-metadata-quality') | ||
| cy.get('mel-datahub-results-card-last-created') | ||
| .find('.mel-badge-button') | ||
| .should('be.visible') | ||
| }) | ||
|
|
||
| describe('interactions with dataset', () => { | ||
| beforeEach(() => { | ||
| cy.get('mel-datahub-results-card-favorite').first().as('firstResult') | ||
| cy.get('mel-datahub-results-card-last-created') | ||
| .first() | ||
| .as('firstResult') | ||
| }) | ||
| it('should open the dataset page in the same application on click', () => { | ||
| cy.get('@firstResult').find('h1').click() | ||
| cy.get('@firstResult').click() | ||
| cy.url().should('include', 'dataset') | ||
| cy.get('mel-datahub-dataset-page').should('be.visible') | ||
| }) | ||
| }) | ||
|
|
||
| // If logged in and favorites exist | ||
| describe('User logged in', () => { | ||
| beforeEach(() => { | ||
| cy.login() | ||
| cy.visit('/search') | ||
| cy.get('mel-datahub-heart-toggle').first().click() | ||
| }) | ||
| it('should display record results in favorite cards inside a carousel', () => { | ||
| cy.get('mel-datahub-custom-carousel') | ||
| .find('mel-datahub-results-card-favorite') | ||
| .first() | ||
| .find('h1') | ||
| .should( | ||
| 'have.text', | ||
| ' Metadata for E2E testing purpose. (this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut) ' | ||
| ) | ||
|
|
||
| cy.get('mel-datahub-results-card-favorite') | ||
| .find('.mel-badge-button') | ||
| .should('be.visible') | ||
|
|
||
| cy.get('mel-datahub-results-card-favorite') | ||
| .find('mel-datahub-metadata-quality') | ||
| .should('be.visible') | ||
| }) | ||
|
|
||
| describe('interactions with dataset', () => { | ||
| beforeEach(() => { | ||
| cy.get('mel-datahub-results-card-favorite').first().as('firstResult') | ||
| }) | ||
| it('should open the dataset page in the same application on click', () => { | ||
| cy.get('@firstResult').find('h1').click() | ||
| cy.url().should('include', 'dataset') | ||
| cy.get('mel-datahub-dataset-page').should('be.visible') | ||
| }) | ||
| }) | ||
| }) | ||
| }) | ||
|
|
||
| describe('search form and results', () => { | ||
| const getFilterOptions = () => { | ||
| cy.get('[id^=dropdown-multiselect-] label').as('options') | ||
| } | ||
|
|
||
| beforeEach(() => { | ||
| cy.get('mel-datahub-filter-dropdown').as('filters') | ||
| cy.get('mel-datahub-results-card-search').as('result-cards') | ||
| }) | ||
|
|
||
| it('should display the search form', () => { | ||
| cy.get('mel-datahub-search-form').should('be.visible') | ||
| }) | ||
| it('should display the search filters', () => { | ||
| cy.get('mel-datahub-search-filters').should('be.visible') | ||
| }) | ||
| it('should display the search results', () => { | ||
| cy.get('mel-datahub-search-results').should('be.visible') | ||
| }) | ||
| it('should display the search results in a grid', () => { | ||
| cy.get('mel-datahub-results-list-grid').should('be.visible') | ||
| }) | ||
| it('should filter the results when selecting a filter value (topic)', () => { | ||
| cy.get('@filters').first().click() | ||
| getFilterOptions() | ||
| cy.get('@options').first().click() | ||
| cy.get('@result-cards').should('have.length', 2) | ||
| cy.get('@result-cards') | ||
| .first() | ||
| .find('h1') | ||
| .should('have.text', ' Alpenkonvention ') | ||
| cy.get('@result-cards') | ||
| .eq(1) | ||
| .find('h1') | ||
| .should( | ||
| 'have.text', | ||
| ' Patrimoine - Biens classés et zones de protection - Série ' | ||
| ) | ||
| }) | ||
| it('should filter the results when selecting multiple filter values (producer)', () => { | ||
| cy.get('@filters').eq(1).click() | ||
| getFilterOptions() | ||
| cy.get('@options').first().click() | ||
| cy.get('@options').eq(1).click() | ||
| cy.get('@options').eq(2).click() | ||
| cy.get('mel-datahub-results-card-search').should('have.length', 3) | ||
| }) | ||
| it('should filter the results when executing a search', () => { | ||
| cy.get('mel-datahub-autocomplete input').type('velo') | ||
| cy.get('mel-datahub-autocomplete .material-symbols-outlined') | ||
| .contains('search') | ||
| .click() | ||
| cy.get('@result-cards').should('have.length', 1) | ||
| cy.get('@result-cards') | ||
| .first() | ||
| .find('h1') | ||
| .should('have.text', ' Accroches vélos MEL ') | ||
| }) | ||
| it('should combine search input and filters (producer)', () => { | ||
| cy.get('mel-datahub-autocomplete input').type('test') | ||
| cy.get('mel-datahub-autocomplete .material-symbols-outlined') | ||
| .contains('search') | ||
| .click() | ||
| cy.get('@result-cards').should('have.length', 3) | ||
| cy.get('@filters').eq(1).click() | ||
| getFilterOptions() | ||
| cy.get('@options').eq(12).click() | ||
| cy.get('@result-cards').should('have.length', 1) | ||
| cy.get('@result-cards') | ||
| .first() | ||
| .find('h1') | ||
| .should('have.text', ' Accroches vélos MEL ') | ||
| }) | ||
| it('should combine search input and filters and display a message if no results found', () => { | ||
| cy.get('mel-datahub-autocomplete input').type('test') | ||
| cy.get('mel-datahub-autocomplete .material-symbols-outlined') | ||
| .contains('search') | ||
| .click() | ||
| cy.get('@result-cards').should('have.length', 3) | ||
| cy.get('@filters').eq(1).click() | ||
| getFilterOptions() | ||
| cy.get('@options').eq(10).click() | ||
| cy.get('[data-cy=searchResults]').should( | ||
| 'have.text', | ||
| ' Aucune correspondance. ' | ||
| ) | ||
| }) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for cleaning this up! I don't know why I implemented it with overrides...