-
Notifications
You must be signed in to change notification settings - Fork 95
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
SKOS XL popup on concept page #1718
Open
osma
wants to merge
14
commits into
main
Choose a base branch
from
issue1714-concept-page-skos-xl
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from 10 commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
79d8a45
typo fix in twig template
osma 721260e
basic CSS tooltips showing SKOS XL info for terms in other languages
osma a3af35b
initial Cypress test for SKOS XL popup
osma 2ec9ad2
extract xl-label into separate twig template file so it can be reused
osma 8f2add1
SKOS XL tooltips for concept prefLabel shown as heading
osma d0b7bf1
add SKOS XL tooltips for literal property values
osma 27f6dc3
prevent extra whitespace in HTML that broke some Cypress tests
osma e3e06ed
split off full vs. partial page load tests from concept.cy.js, for ea…
osma fee97ff
add Cypress test for SKOS XL tooltip on concept prefLabel
osma 4e27299
add Cypress test for SKOS XL popups on altLabels
osma faa8fe7
cypress test for altLabel tooltip also verifies hiding of tooltip
osma 8beb86e
add aria-describedby attributes that link to tooltips
osma c3247e0
add aria-label and aria-controls attributes to button that triggers X…
osma 4024873
made the clickable area larger for XL info icons
osma 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
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 |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <div class="tooltip-html"> | ||
| <button class="btn p-0 m-0"><i class="fa-solid fa-circle-info"></i></button> | ||
osma marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <dl class="tooltip-html-content"> | ||
| {% for key, val in xlLabel.properties %} | ||
| <dt>{{ key|trans }}</dt> | ||
| <dd>{{ val }}</dd> | ||
| {% endfor %} | ||
| </dl> | ||
| </div> | ||
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 |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| describe('Concept page, full vs. partial page loads', () => { | ||
| const pageLoadTypes = ["full", "partial"] | ||
|
|
||
| // tests that should be executed both with and without partial page load | ||
| pageLoadTypes.forEach((pageLoadType) => { | ||
| it('contains concept preflabel / ' + pageLoadType, () => { | ||
| if (pageLoadType == "full") { | ||
| cy.visit('/yso/en/page/p39473') // go to "burial mounds" concept page | ||
| } else { | ||
| cy.visit('/yso/en/page/p5714') // go to "prehistoric graves" concept page | ||
| // click on the link to "burial mounds" to trigger partial page load | ||
| cy.get('#tab-hierarchy').contains('a', 'burial mounds').click() | ||
| } | ||
|
|
||
| // check that the vocabulary title is correct | ||
| cy.get('#vocab-title > a').invoke('text').should('equal', 'YSO - General Finnish ontology (archaeology)') | ||
|
|
||
| // check the concept prefLabel | ||
| cy.get('#concept-heading h1').invoke('text').should('equal', 'burial mounds') | ||
| }) | ||
| it('concept preflabel can be copied to clipboard / ' + pageLoadType, () => { | ||
| if (pageLoadType == "full") { | ||
| cy.visit('/yso/en/page/p39473') // go to "burial mounds" concept page | ||
| } else { | ||
| cy.visit('/yso/en/page/p5714') // go to "prehistoric graves" concept page | ||
| // click on the link to "burial mounds" to trigger partial page load | ||
| cy.get('#tab-hierarchy').contains('a', 'burial mounds').click() | ||
| } | ||
|
|
||
| // click the copy to clipboard button next to the prefLabel | ||
| cy.get('#copy-preflabel').click() | ||
|
|
||
| // check that the clipboard now contains "music pyramids" | ||
| // NOTE: This test may fail when running Cypress interactively in a browser. | ||
| // The reason is browser security policies for accessing the clipboard. | ||
| // If that happens, make sure the browser window has focus and re-run the test. | ||
| cy.window().its('navigator.clipboard').invoke('readText').then((result) => {}).should('equal', 'burial mounds'); | ||
| }) | ||
| it('contains concept URI / ' + pageLoadType, () => { | ||
| if (pageLoadType == "full") { | ||
| cy.visit('/yso/en/page/p39473') // go to "burial mounds" concept page | ||
| } else { | ||
| cy.visit('/yso/en/page/p5714') // go to "prehistoric graves" concept page | ||
| // click on the link to "burial mounds" to trigger partial page load | ||
| cy.get('#tab-hierarchy').contains('a', 'burial mounds').click() | ||
| } | ||
|
|
||
| // check the property name | ||
| cy.get('.prop-uri .property-label').invoke('text').should('equal', 'URI') | ||
|
|
||
| // check the concept URI | ||
| cy.get('#concept-uri').invoke('text').should('equal', 'http://www.yso.fi/onto/yso/p39473') | ||
| }) | ||
| it('concept URI can be copied to clipboard / ' + pageLoadType, () => { | ||
| if (pageLoadType == "full") { | ||
| cy.visit('/yso/en/page/p39473') // go to "burial mounds" concept page | ||
| } else { | ||
| cy.visit('/yso/en/page/p5714') // go to "prehistoric graves" concept page | ||
| // click on the link to "burial mounds" to trigger partial page load | ||
| cy.get('#tab-hierarchy').contains('a', 'burial mounds').click() | ||
| } | ||
|
|
||
| // click the copy to clipboard button next to the URI | ||
| cy.get('#copy-uri').click() | ||
|
|
||
| // check that the clipboard now contains "http://www.yso.fi/onto/yso/p39473" | ||
| // NOTE: This test may fail when running Cypress interactively in a browser. | ||
| // The reason is browser security policies for accessing the clipboard. | ||
| // If that happens, make sure the browser window has focus and re-run the test. | ||
| cy.window().its('navigator.clipboard').invoke('readText').then((result) => {}).should('equal', 'http://www.yso.fi/onto/yso/p39473'); | ||
| }) | ||
| it('concept notation can be copied to clipboard / ' + pageLoadType, () => { | ||
| if (pageLoadType == "full") { | ||
| cy.visit('/test-notation-sort/en/page/?uri=http%3A%2F%2Fwww.skosmos.skos%2Ftest%2Fta0115') // go to "Eel" concept page | ||
| } else { | ||
| cy.visit('/test-notation-sort/en/page/?uri=http%3A%2F%2Fwww.skosmos.skos%2Ftest%2Fta0114') // go to "Buri" concept page | ||
| // click on the link to "Eel" to trigger partial page load | ||
| cy.get('#tab-hierarchy').contains('a', 'Eel').click() | ||
| } | ||
|
|
||
| // click the copy to clipboard button next to the URI | ||
| cy.get('#copy-notation').click() | ||
|
|
||
| // check that the clipboard now contains "33.2" | ||
| // NOTE: This test may fail when running Cypress interactively in a browser. | ||
| // The reason is browser security policies for accessing the clipboard. | ||
| // If that happens, make sure the browser window has focus and re-run the test. | ||
| cy.window().its('navigator.clipboard').invoke('readText').then((result) => {}).should('equal', '33.2'); | ||
| }) | ||
| it('contains mappings / ' + pageLoadType, () => { | ||
| if (pageLoadType == "full") { | ||
| cy.visit('/yso/en/page/p14174') // go to "labyrinths" concept page | ||
| } else { | ||
| cy.visit('/yso/en/page/p5714') // go to "prehistoric graves" concept page | ||
| // click on the link to "labyrinths" to trigger partial page load | ||
| cy.get('#tab-hierarchy').contains('a', 'labyrinths').click() | ||
| } | ||
|
|
||
| // check that we have some mappings | ||
| cy.get('#concept-mappings').should('not.be.empty') | ||
| // check that spinner does not exist after load | ||
| cy.get('#concept-mappings i.fa-spinner', {'timeout': 15000}).should('not.exist') | ||
|
|
||
| // check the first mapping property name | ||
| // NOTE: we need to increase the timeout as the mappings can take a long time to load | ||
| cy.get('.prop-mapping h2', {'timeout': 20000}).eq(0).contains('Closely matching concepts') | ||
| // check the first mapping property values | ||
| cy.get('.prop-mapping').eq(0).find('.prop-mapping-label').eq(0).contains('Labyrinths') | ||
| cy.get('.prop-mapping').eq(0).find('.prop-mapping-label').eq(0).find('a').should('have.attr', 'href', 'http://id.loc.gov/authorities/subjects/sh85073793') | ||
| cy.get('.prop-mapping').eq(0).find('.prop-mapping-vocab').eq(0).contains('Library of Congress Subject Headings') | ||
| // check that the first mapping property has the right number of entries | ||
| cy.get('.prop-mapping').eq(0).find('.prop-mapping-label').should('have.length', 1) | ||
|
|
||
| // check the second mapping property name | ||
| cy.get('.prop-mapping h2').eq(1).contains('Exactly matching concepts') | ||
| // check the second mapping property values | ||
| cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(0).contains('labyrinter (sv)') | ||
| cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(0).find('a').invoke('text').should('equal', 'labyrinter') | ||
| cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(0).find('a').should('have.attr', 'href', 'http://www.yso.fi/onto/allars/Y21700') | ||
| cy.get('.prop-mapping').eq(1).find('.prop-mapping-vocab').eq(0).contains('Allärs - General thesaurus in Swedish') | ||
| // skipping the middle one (mapping to KOKO concept) as it's similar to the others | ||
| cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(2).contains('labyrintit (fi)') | ||
| cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(2).find('a').invoke('text').should('equal', 'labyrintit') | ||
| cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(2).find('a').should('have.attr', 'href', 'http://www.yso.fi/onto/ysa/Y108389') | ||
| cy.get('.prop-mapping').eq(1).find('.prop-mapping-vocab').eq(2).contains('YSA - Yleinen suomalainen asiasanasto') | ||
| // check that the second mapping property has the right number of entries | ||
| cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').should('have.length', 3) | ||
| }) | ||
|
|
||
| }); | ||
| }) |
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.
I would add a compensation for the border in the margin like so:
So that the text doesn't jitter when the button is pushed (Chromium, not sure how it would be with other browsers).