luisgulo/focalboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cypress test for new URL property behaviour added:

Browse Source 
- using `cypress-real-events` for real hover
 - label for view header menu changed to 'View header menu'
 - label for view menu added
 - snapshots for unit tests updated
This commit is contained in:
kamre 2022-01-25 14:56:26 +03:00
parent 400738db76
commit f4bf7db996
16 changed files with 186 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
webapp/cypress/integration/cardURLProperty.ts Normal file
View File

@ -0,0 +1,110 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
describe('Card URL Property', () => {
beforeEach(() => {
cy.apiInitServer()
cy.apiResetBoards()
localStorage.setItem('welcomePageViewed', 'true')
})
const url = 'https://mattermost.com'
const changedURL = 'https://mattermost.com/blog'
it('Allows to create and edit URL property', () => {
cy.visit('/')
// Create new board
cy.uiCreateNewBoard('Testing')
// Add a new card
cy.uiAddNewCard('Card')
// Add URL property
cy.log('**Add URL property**')
cy.findByRole('button', {name: '+ Add a property'}).click()
cy.findByRole('button', {name: 'URL'}).click()
cy.findByRole('textbox', {name: 'URL'}).type('{enter}')
// Enter URL
cy.log('**Enter URL**')
cy.findByPlaceholderText('Empty').type(`${url}{enter}`)
// Check buttons
cy.log('**Check buttons**')
cy.findByRole('link', {name: url}).realHover()
cy.findByRole('button', {name: 'Edit'}).should('exist')
cy.findByRole('button', {name: 'Copy'}).should('exist')
// Change URL
cy.log('**Change URL**')
cy.findByRole('link', {name: url}).realHover()
cy.findByRole('button', {name: 'Edit'}).click()
cy.findByRole('textbox', {name: url}).clear().type(`${changedURL}{enter}`)
cy.findByRole('link', {name: changedURL}).should('exist')
// Close card dialog
cy.log('**Close card dialog**')
cy.findByRole('button', {name: 'Close dialog'}).click()
cy.findByRole('dialog').should('not.exist')
// Show URL property
showURLProperty()
// Copy URL to clipboard
cy.log('**Copy URL to clipboard**')
cy.document().then((doc) => cy.spy(doc, 'execCommand')).as('exec')
cy.findByRole('link', {name: changedURL}).realHover()
cy.findByRole('button', {name: 'Edit'}).should('not.exist')
cy.findByRole('button', {name: 'Copy'}).click()
cy.findByText('Copied!').should('exist')
cy.findByText('Copied!').should('not.exist')
cy.get('@exec').should('have.been.calledOnceWith', 'copy')
// Add table view
addView('Table')
// Check buttons
cy.log('**Check buttons**')
cy.findByRole('link', {name: changedURL}).realHover()
cy.findByRole('button', {name: 'Edit'}).should('exist')
cy.findByRole('button', {name: 'Copy'}).should('not.exist')
// Add gallery view
addView('Gallery')
showURLProperty()
// Check buttons
cy.log('**Check buttons**')
cy.findByRole('link', {name: changedURL}).realHover()
cy.findByRole('button', {name: 'Edit'}).should('not.exist')
cy.findByRole('button', {name: 'Copy'}).should('exist')
// Add calendar view
addView('Calendar')
showURLProperty()
// Check buttons
cy.log('**Check buttons**')
cy.findByRole('link', {name: changedURL}).realHover()
cy.findByRole('button', {name: 'Edit'}).should('not.exist')
cy.findByRole('button', {name: 'Copy'}).should('exist')
})
type ViewType = 'Board' | 'Table' | 'Gallery' | 'Calendar'
const addView = (type: ViewType) => {
cy.log(`**Add ${type} view**`)
cy.findByRole('button', {name: 'View menu'}).click()
cy.findByText('Add view').click()
cy.findByRole('button', {name: type}).click()
cy.findByRole('textbox', {name: `${type} view`}).should('exist')
}
const showURLProperty = () => {
cy.log('**Show URL property**')
cy.findByRole('button', {name: 'Properties'}).click()
cy.findByRole('button', {name: 'URL'}).click()
cy.findByRole('link', {name: changedURL}).should('exist')
}
})

2
webapp/cypress/support/api_commands.ts
View File

@ -1,8 +1,6 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import '@testing-library/cypress/add-commands'
import {Board} from '../../src/blocks/board'
Cypress.Commands.add('apiRegisterUser', (data: Cypress.UserData, token?: string, failOnError?: boolean) => {

4
webapp/cypress/support/index.ts
View File

@ -1,5 +1,9 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import '@testing-library/cypress/add-commands'
import 'cypress-real-events/support'
import './api_commands'
import './ui_commands'

1
webapp/cypress/tsconfig.json
View File

@ -4,6 +4,7 @@
"noEmit": true,
"types": [
"cypress",
"cypress-real-events",
"@testing-library/cypress"
]
},

2
webapp/i18n/en.json
View File

@ -208,7 +208,7 @@
"View.DuplicateView": "Duplicate view",
"View.Gallery": "Gallery",
"View.NewBoardTitle": "Board view",
"View.NewCalendarTitle": "Calendar View",
"View.NewCalendarTitle": "Calendar view",
"View.NewGalleryTitle": "Gallery view",
"View.NewTableTitle": "Table view",
"View.NewTemplateTitle": "Untitled Template",

2
webapp/i18n/en_AU.json
View File

@ -208,7 +208,7 @@
"View.DuplicateView": "Duplicate view",
"View.Gallery": "Gallery",
"View.NewBoardTitle": "Board view",
"View.NewCalendarTitle": "Calendar View",
"View.NewCalendarTitle": "Calendar view",
"View.NewGalleryTitle": "Gallery view",
"View.NewTableTitle": "Table view",
"View.NewTemplateTitle": "Untitled Template",

17
webapp/package-lock.json generated
View File

@ -71,6 +71,7 @@
"copy-webpack-plugin": "^8.1.0",
"cross-env": "^7.0.3",
"css-loader": "^5.2.0",
"cypress-real-events": "^1.6.0",
"eslint": "^7.22.0",
"eslint-import-resolver-webpack": "0.13.0",
"eslint-plugin-babel": "^5.3.1",
@ -5444,6 +5445,15 @@
"node": ">=10.0.0"
}
},
"node_modules/cypress-real-events": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/cypress-real-events/-/cypress-real-events-1.6.0.tgz",
"integrity": "sha512-QxXm0JsQkCrb2uH+fMXNDQ5kNWTzX3OtndBafdsZmNV19j+6JuTK9n52B1YVxrDrr/qzPAojcHJc5PNoQvwp+w==",
"dev": true,
"peerDependencies": {
"cypress": "^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x"
}
},
"node_modules/cypress/node_modules/@types/node": {
"version": "12.12.50",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.50.tgz",
@ -24190,6 +24200,13 @@
}
}
},
"cypress-real-events": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/cypress-real-events/-/cypress-real-events-1.6.0.tgz",
"integrity": "sha512-QxXm0JsQkCrb2uH+fMXNDQ5kNWTzX3OtndBafdsZmNV19j+6JuTK9n52B1YVxrDrr/qzPAojcHJc5PNoQvwp+w==",
"dev": true,
"requires": {}
},
"dashdash": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",

1
webapp/package.json
View File

@ -105,6 +105,7 @@
"copy-webpack-plugin": "^8.1.0",
"cross-env": "^7.0.3",
"css-loader": "^5.2.0",
"cypress-real-events": "^1.6.0",
"eslint": "^7.22.0",
"eslint-import-resolver-webpack": "0.13.0",
"eslint-plugin-babel": "^5.3.1",

58
webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
View File

@ -151,7 +151,7 @@ exports[`components/centerPanel return centerPanel and click on card to show car
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -233,7 +233,7 @@ exports[`components/centerPanel return centerPanel and click on card to show car
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -710,7 +710,7 @@ exports[`components/centerPanel return centerPanel and click on new card to edit
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -792,7 +792,7 @@ exports[`components/centerPanel return centerPanel and click on new card to edit
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -1314,7 +1314,7 @@ exports[`components/centerPanel return centerPanel and press touch 1 with readon
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -1772,7 +1772,7 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -1854,7 +1854,7 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -2391,7 +2391,7 @@ exports[`components/centerPanel return centerPanel and press touch del for one c
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -2473,7 +2473,7 @@ exports[`components/centerPanel return centerPanel and press touch del for one c
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -3010,7 +3010,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -3092,7 +3092,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -3629,7 +3629,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -3711,7 +3711,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -4248,7 +4248,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -4330,7 +4330,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -4867,7 +4867,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -4949,7 +4949,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -5486,7 +5486,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -5568,7 +5568,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -6105,7 +6105,7 @@ exports[`components/centerPanel return centerPanel and select one card and click
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -6187,7 +6187,7 @@ exports[`components/centerPanel return centerPanel and select one card and click
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -6724,7 +6724,7 @@ exports[`components/centerPanel return centerPanel and select one card and click
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -6806,7 +6806,7 @@ exports[`components/centerPanel return centerPanel and select one card and click
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -7343,7 +7343,7 @@ exports[`components/centerPanel should match snapshot for Gallery 1`] = `
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -7407,7 +7407,7 @@ exports[`components/centerPanel should match snapshot for Gallery 1`] = `
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -7632,7 +7632,7 @@ exports[`components/centerPanel should match snapshot for Kanban 1`] = `
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -7714,7 +7714,7 @@ exports[`components/centerPanel should match snapshot for Kanban 1`] = `
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -8157,7 +8157,7 @@ exports[`components/centerPanel should match snapshot for Table 1`] = `
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -8239,7 +8239,7 @@ exports[`components/centerPanel should match snapshot for Table 1`] = `
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>

12
webapp/src/components/__snapshots__/workspace.test.tsx.snap
View File

@ -384,7 +384,7 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -466,7 +466,7 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -935,7 +935,7 @@ exports[`src/components/workspace return workspace readonly and showcard 1`] = `
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -1544,7 +1544,7 @@ exports[`src/components/workspace should match snapshot 1`] = `
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -1626,7 +1626,7 @@ exports[`src/components/workspace should match snapshot 1`] = `
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -2095,7 +2095,7 @@ exports[`src/components/workspace should match snapshot with readonly 1`] = `
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>

6
webapp/src/components/viewHeader/__snapshots__/viewHeader.test.tsx.snap
View File

@ -13,7 +13,7 @@ exports[`components/viewHeader/viewHeader return viewHeader 1`] = `
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>
@ -100,7 +100,7 @@ exports[`components/viewHeader/viewHeader return viewHeader 1`] = `
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -154,7 +154,7 @@ exports[`components/viewHeader/viewHeader return viewHeader readonly 1`] = `
value="view title"
/>
<div
aria-label="menuwrapper"
aria-label="View menu"
class="MenuWrapper"
role="button"
>

8
webapp/src/components/viewHeader/__snapshots__/viewHeaderActionsMenu.test.tsx.snap
View File

@ -6,7 +6,7 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu and verify call
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -116,7 +116,7 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu and verify call
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -226,7 +226,7 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu with Share Boar
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>
@ -336,7 +336,7 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu without Share B
class="ModalWrapper"
>
<div
aria-label="View menu"
aria-label="View header menu"
class="MenuWrapper"
role="button"
>

5
webapp/src/components/viewHeader/viewHeader.tsx
View File

@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useState, useEffect} from 'react'
import {FormattedMessage} from 'react-intl'
import {FormattedMessage, useIntl} from 'react-intl'
import ViewMenu from '../../components/viewMenu'
import mutator from '../../mutator'
@ -44,6 +44,7 @@ type Props = {
const ViewHeader = React.memo((props: Props) => {
const [showFilter, setShowFilter] = useState(false)
const intl = useIntl()
const {board, activeView, views, groupByProperty, cards, showShared, dateDisplayProperty} = props
@ -76,7 +77,7 @@ const ViewHeader = React.memo((props: Props) => {
spellCheck={true}
autoExpand={false}
/>
<MenuWrapper>
<MenuWrapper label={intl.formatMessage({id: 'ViewHeader.view-menu', defaultMessage: 'View menu'})}>
<IconButton icon={<DropdownIcon/>}/>
<ViewMenu
board={board}

8
webapp/src/components/viewHeader/viewHeaderActionsMenu.test.tsx
View File

@ -57,7 +57,7 @@ describe('components/viewHeader/viewHeaderActionsMenu', () => {
),
)
const buttonElement = screen.getByRole('button', {
name: 'View menu',
name: 'View header menu',
})
userEvent.click(buttonElement)
expect(container).toMatchSnapshot()
@ -77,7 +77,7 @@ describe('components/viewHeader/viewHeaderActionsMenu', () => {
),
)
const buttonElement = screen.getByRole('button', {
name: 'View menu',
name: 'View header menu',
})
userEvent.click(buttonElement)
expect(container).toMatchSnapshot()
@ -95,7 +95,7 @@ describe('components/viewHeader/viewHeaderActionsMenu', () => {
</ReduxProvider>,
),
)
const buttonElement = screen.getByRole('button', {name: 'View menu'})
const buttonElement = screen.getByRole('button', {name: 'View header menu'})
userEvent.click(buttonElement)
expect(container).toMatchSnapshot()
const buttonExportCSV = screen.getByRole('button', {name: 'Export to CSV'})
@ -116,7 +116,7 @@ describe('components/viewHeader/viewHeaderActionsMenu', () => {
</ReduxProvider>,
),
)
const buttonElement = screen.getByRole('button', {name: 'View menu'})
const buttonElement = screen.getByRole('button', {name: 'View header menu'})
userEvent.click(buttonElement)
expect(container).toMatchSnapshot()
const buttonExportBoardArchive = screen.getByRole('button', {name: 'Export board archive'})

2
webapp/src/components/viewHeader/viewHeaderActionsMenu.tsx
View File

@ -108,7 +108,7 @@ const ViewHeaderActionsMenu = React.memo((props: Props) => {
return (
<ModalWrapper>
<MenuWrapper label={intl.formatMessage({id: 'ViewHeader.view-menu', defaultMessage: 'View menu'})}>
<MenuWrapper label={intl.formatMessage({id: 'ViewHeader.view-header-menu', defaultMessage: 'View header menu'})}>
<IconButton icon={<OptionsIcon/>}/>
<Menu>
<Menu.Text

2
webapp/src/components/viewMenu.tsx
View File

@ -174,7 +174,7 @@ const ViewMenu = React.memo((props: Props) => {
Utils.log('addview-calendar')
const view = createBoardView()
view.title = intl.formatMessage({id: 'View.NewCalendarTitle', defaultMessage: 'Calendar View'})
view.title = intl.formatMessage({id: 'View.NewCalendarTitle', defaultMessage: 'Calendar view'})
view.fields.viewType = 'calendar'
view.parentId = board.id
view.rootId = board.rootId