fix(frontend): Fix history e2e tests

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-12-18 20:28:57 +01:00
parent e1f0d0c3a0
commit 68e2a9518c
3 changed files with 29 additions and 12 deletions

View file

@ -91,16 +91,24 @@ describe('History', () => {
it('Cards', () => { it('Cards', () => {
cy.getByCypressId('history-card').should('be.visible') cy.getByCypressId('history-card').should('be.visible')
cy.getByCypressId('history-entry-pin-button').first().as('pin-button') cy.get('[data-cypress-card-title=Features]')
cy.get('@pin-button').should('have.attr', 'data-cypress-pinned', 'true').click() .findByCypressId('history-entry-pin-button')
cy.get('@pin-button').should('have.attr', 'data-cypress-pinned', 'false') .should('have.attr', 'data-cypress-pinned', 'true')
.click()
cy.get('[data-cypress-card-title=Features]')
.findByCypressId('history-entry-pin-button')
.should('have.attr', 'data-cypress-pinned', 'false')
}) })
it('Table', () => { it('Table', () => {
cy.getByCypressId('history-mode-table').click() cy.getByCypressId('history-mode-table').click()
cy.getByCypressId('history-entry-pin-button').first().as('pin-button') cy.get('[data-cypress-entry-title=Features]')
cy.get('@pin-button').should('have.attr', 'data-cypress-pinned', 'true').click() .findByCypressId('history-entry-pin-button')
cy.get('@pin-button').should('have.attr', 'data-cypress-pinned', 'false') .should('have.attr', 'data-cypress-pinned', 'true')
.click()
cy.get('[data-cypress-entry-title=Features]')
.findByCypressId('history-entry-pin-button')
.should('have.attr', 'data-cypress-pinned', 'false')
}) })
}) })
@ -113,13 +121,19 @@ describe('History', () => {
it('Cards', () => { it('Cards', () => {
cy.getByCypressId('history-card').should('be.visible') cy.getByCypressId('history-card').should('be.visible')
cy.getByCypressId('history-entry-pin-button').first().click() cy.get('[data-cypress-card-title=Features]')
.findByCypressId('history-entry-pin-button')
.should('have.attr', 'data-cypress-pinned', 'true')
.click()
cy.getByCypressId('notification-toast').should('be.visible') cy.getByCypressId('notification-toast').should('be.visible')
}) })
it('Table', () => { it('Table', () => {
cy.getByCypressId('history-mode-table').click() cy.getByCypressId('history-mode-table').click()
cy.getByCypressId('history-entry-pin-button').first().click() cy.get('[data-cypress-entry-title=Features]')
.findByCypressId('history-entry-pin-button')
.should('have.attr', 'data-cypress-pinned', 'true')
.click()
cy.getByCypressId('notification-toast').should('be.visible') cy.getByCypressId('notification-toast').should('be.visible')
}) })
}) })

View file

@ -3,7 +3,7 @@
* *
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
import { cypressId } from '../../../utils/cypress-attribute' import { cypressAttribute, cypressId } from '../../../utils/cypress-attribute'
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon' import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
import { EntryMenu } from '../entry-menu/entry-menu' import { EntryMenu } from '../entry-menu/entry-menu'
import type { HistoryEntryProps, HistoryEventHandlers } from '../history-content/history-content' import type { HistoryEntryProps, HistoryEventHandlers } from '../history-content/history-content'
@ -57,7 +57,10 @@ export const HistoryCard: React.FC<HistoryEntryProps & HistoryEventHandlers> = (
const lastVisited = useMemo(() => formatHistoryDate(entry.lastVisitedAt), [entry.lastVisitedAt]) const lastVisited = useMemo(() => formatHistoryDate(entry.lastVisitedAt), [entry.lastVisitedAt])
return ( return (
<div className='p-2 col-xs-12 col-sm-6 col-md-6 col-lg-4' {...cypressId('history-card')}> <div
className='p-2 col-xs-12 col-sm-6 col-md-6 col-lg-4'
{...cypressId('history-card')}
{...cypressAttribute('card-title', entryTitle)}>
<Card className={styles['card-min-height']} text={'dark'} bg={'light'}> <Card className={styles['card-min-height']} text={'dark'} bg={'light'}>
<Card.Body className='p-2 d-flex flex-row justify-content-between'> <Card.Body className='p-2 d-flex flex-row justify-content-between'>
<div className={'d-flex flex-column'}> <div className={'d-flex flex-column'}>

View file

@ -3,7 +3,7 @@
* *
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
import { cypressId } from '../../../utils/cypress-attribute' import { cypressAttribute, cypressId } from '../../../utils/cypress-attribute'
import { EntryMenu } from '../entry-menu/entry-menu' import { EntryMenu } from '../entry-menu/entry-menu'
import type { HistoryEntryProps, HistoryEventHandlers } from '../history-content/history-content' import type { HistoryEntryProps, HistoryEventHandlers } from '../history-content/history-content'
import { PinButton } from '../pin-button/pin-button' import { PinButton } from '../pin-button/pin-button'
@ -42,7 +42,7 @@ export const HistoryTableRow: React.FC<HistoryEntryProps & HistoryEventHandlers>
}, [onDeleteNoteClick, entry.identifier]) }, [onDeleteNoteClick, entry.identifier])
return ( return (
<tr> <tr {...cypressAttribute('entry-title', entryTitle)}>
<td> <td>
<Link href={`/n/${entry.identifier}`} className='text-light' {...cypressId('history-entry-title')}> <Link href={`/n/${entry.identifier}`} className='text-light' {...cypressId('history-entry-title')}>
{entryTitle} {entryTitle}