overleaf/services/web/test/frontend/components/shared/split-test-badge.spec.tsx
Tim Down e60885aa88 Merge pull request #19347 from overleaf/td-bs5-cypress-css
Move CSS loading in Cypress to individual test spec files

GitOrigin-RevId: 92bb5167cfa81b0bd54acc724efb23b397421ccb
2024-07-25 08:05:16 +00:00

225 lines
5.8 KiB
TypeScript

import '../../helpers/bootstrap-3'
import SplitTestBadge from '../../../../frontend/js/shared/components/split-test-badge'
import { EditorProviders } from '../../helpers/editor-providers'
describe('split test badge', function () {
it('renders an alpha badge with the url and tooltip text', function () {
cy.window().then(win => {
win.metaAttributesCache.set('ol-splitTestVariants', {
'cypress-test': 'active',
})
win.metaAttributesCache.set('ol-splitTestInfo', {
'cypress-test': {
phase: 'alpha',
badgeInfo: {
url: '/alpha/participate',
tooltipText: 'This is an alpha feature',
},
},
})
})
cy.mount(
<EditorProviders>
<SplitTestBadge
splitTestName="cypress-test"
displayOnVariants={['active']}
/>
</EditorProviders>
)
cy.get('a.badge.alpha-badge[href="/alpha/participate"]').contains(
'This is an alpha feature'
)
})
it('does not render the alpha badge when user is not assigned to the variant', function () {
cy.window().then(win => {
win.metaAttributesCache.set('ol-splitTestVariants', {
'cypress-test': 'default',
})
win.metaAttributesCache.set('ol-splitTestInfo', {
'cypress-test': {
phase: 'alpha',
badgeInfo: {
url: '/alpha/participate',
tooltipText: 'This is an alpha feature',
},
},
})
})
cy.mount(
<EditorProviders>
<SplitTestBadge
splitTestName="cypress-test"
displayOnVariants={['active']}
/>
</EditorProviders>
)
cy.get('.badge').should('not.exist')
})
it('renders a beta badge with the url and tooltip text', function () {
cy.window().then(win => {
win.metaAttributesCache.set('ol-splitTestVariants', {
'cypress-test': 'active',
})
win.metaAttributesCache.set('ol-splitTestInfo', {
'cypress-test': {
phase: 'beta',
badgeInfo: {
url: '/beta/participate',
tooltipText: 'This is a beta feature',
},
},
})
})
cy.mount(
<EditorProviders>
<SplitTestBadge
splitTestName="cypress-test"
displayOnVariants={['active']}
/>
</EditorProviders>
)
cy.get('a.badge.beta-badge[href="/beta/participate"]').contains(
'This is a beta feature'
)
})
it('does not render the beta badge when user is not assigned to the variant', function () {
cy.window().then(win => {
win.metaAttributesCache.set('ol-splitTestVariants', {
'cypress-test': 'default',
})
win.metaAttributesCache.set('ol-splitTestInfo', {
'cypress-test': {
phase: 'beta',
badgeInfo: {
url: '/beta/participate',
tooltipText: 'This is a beta feature',
},
},
})
})
cy.mount(
<EditorProviders>
<SplitTestBadge
splitTestName="cypress-test"
displayOnVariants={['active']}
/>
</EditorProviders>
)
cy.get('.badge').should('not.exist')
})
it('renders an info badge with the url and tooltip text', function () {
cy.window().then(win => {
win.metaAttributesCache.set('ol-splitTestVariants', {
'cypress-test': 'active',
})
win.metaAttributesCache.set('ol-splitTestInfo', {
'cypress-test': {
phase: 'release',
badgeInfo: {
url: '/feedback/form',
tooltipText: 'This is a new feature',
},
},
})
})
cy.mount(
<EditorProviders>
<SplitTestBadge
splitTestName="cypress-test"
displayOnVariants={['active']}
/>
</EditorProviders>
)
cy.get('a.badge.info-badge[href="/feedback/form"]').contains(
'This is a new feature'
)
})
it('does not render the info badge when user is not assigned to the variant', function () {
cy.window().then(win => {
win.metaAttributesCache.set('ol-splitTestVariants', {
'cypress-test': 'default',
})
win.metaAttributesCache.set('ol-splitTestInfo', {
'cypress-test': {
phase: 'release',
badgeInfo: {
url: '/feedback/form',
tooltipText: 'This is a new feature',
},
},
})
})
cy.mount(
<EditorProviders>
<SplitTestBadge
splitTestName="cypress-test"
displayOnVariants={['active']}
/>
</EditorProviders>
)
cy.get('.badge').should('not.exist')
})
it('does not render the badge when no split test info is available', function () {
cy.window().then(win => {
win.metaAttributesCache.set('ol-splitTestVariants', {
'cypress-test': 'active',
})
win.metaAttributesCache.set('ol-splitTestInfo', {})
})
cy.mount(
<EditorProviders>
<SplitTestBadge
splitTestName="cypress-test"
displayOnVariants={['active']}
/>
</EditorProviders>
)
cy.get('.badge').should('not.exist')
})
it('default badge url and text are used when not provided', function () {
cy.window().then(win => {
win.metaAttributesCache.set('ol-splitTestVariants', {
'cypress-test': 'active',
})
win.metaAttributesCache.set('ol-splitTestInfo', {
'cypress-test': {
phase: 'release',
},
})
})
cy.mount(
<EditorProviders>
<SplitTestBadge
splitTestName="cypress-test"
displayOnVariants={['active']}
/>
</EditorProviders>
)
cy.get('a.badge.info-badge[href="/beta/participate"]')
.contains('We are testing this new feature.')
.contains('Click to give feedback')
})
})