Skip to content

Commit

Permalink
Merge pull request #2922 from target/services-playwright-cont
Browse files Browse the repository at this point in the history 
Move label / filtering service tests to Playwright
  • Loading branch information
@mastercactapus
mastercactapus authored Apr 4, 2023
2 parents 2d8cf9f + 4023beb commit c60a68c
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 207 deletions.
123 changes: 122 additions & 1 deletion test/integration/service.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,133 @@ test('Service', async ({ page, isMobile }) => {

await expect(page.getByRole('heading', { name, level: 1 })).toBeVisible()

// Create a label and value for the service
const key = `${c.word({ length: 4 })}/${c.word({ length: 3 })}`
const value = c.word({ length: 8 })
await page.getByRole('link', { name: 'Labels' }).click()
if (isMobile) {
await page.getByRole('button', { name: 'Add' }).click()
} else {
await page.getByTestId('create-label').click()
}

await page.getByLabel('Key', { exact: true }).fill(key)
await page.getByText('Create "' + key + '"').click()
await page.getByLabel('Value', { exact: true }).fill(value)
await page.click('[role=dialog] button[type=submit]')

await expect(page.getByText(key)).toBeVisible()
await expect(page.getByText(value)).toBeVisible()

// Return to the service
if (isMobile) {
await page.getByRole('button', { name: 'Back' }).click()
} else {
await page.getByRole('link', { name, exact: true }).click()
}

// Make an integration key
const intKey = c.word({ length: 5 }) + ' Key'
await page.getByRole('link', { name: 'Integration Keys' }).click()
if (isMobile) {
await page.getByRole('button', { name: 'Create Integration Key' }).click()
} else {
await page.getByTestId('create-key').click()
}
await page.getByLabel('Name').fill(intKey)
await page.getByRole('button', { name: 'Submit' }).click()

// Make another service
const diffName = 'pw-service ' + c.name()
const diffDescription = c.sentence()

await page.goto('./services')
await page.getByRole('button', { name: 'Create Service' }).click()

// We should be on the services list page, so let's try searching for the service we just created. We add a space to the beginning of the name to ensure we are searching for the full name and not a substring.
await page.fill('input[name=name]', diffName)
await page.fill('textarea[name=description]', diffDescription)

await page.click('[role=dialog] button[type=submit]')

// Set the label with the existing key and a new value
const diffValue = c.word({ length: 8 })
await page.getByRole('link', { name: 'Labels' }).click()
if (isMobile) {
await page.getByRole('button', { name: 'Add' }).click()
} else {
await page.getByTestId('create-label').click()
}

await page.getByLabel('Key', { exact: true }).fill(key)
await page.getByRole('option', { name: key }).getByRole('listitem').click()
await page.getByLabel('Value', { exact: true }).fill(diffValue)
await page.click('[role=dialog] button[type=submit]')

await expect(page.getByText(key)).toBeVisible()
await expect(page.getByText(diffValue)).toBeVisible()

await page.goto('./services')

// Check that filter content doesn't exist yet
await expect(
page.getByRole('button', { name: 'filter-done' }),
).not.toBeVisible()

// Open filter
if (isMobile) {
await page.getByRole('button', { name: 'Search' }).click()
}
await page.getByRole('button', { name: 'Search Services by Filters' }).click()

// Should not allow filtering by label value without a key selected
await expect(page.getByLabel('Select Label Value')).toBeDisabled()

// Filter by label key
await page.getByLabel('Select Label Key').click()
await page.getByRole('option', { name: key }).getByRole('listitem').click()
await page.getByRole('button', { name: 'Done' }).click()

// Check if filtered, should have found both services
await expect(
page.getByRole('link', { name: name + ' ' + description }),
).toBeVisible()
await expect(
page.getByRole('link', { name: diffName + ' ' + diffDescription }),
).toBeVisible()

// Filter by key and the first service's value
await page.getByRole('button', { name: 'Search Services by Filters' }).click()
await page.getByLabel('Select Label Value').click()
await page.getByRole('option', { name: value }).getByRole('listitem').click()
await page.getByRole('button', { name: 'Done' }).click()

// Check if filtered, should have found only the first service
await expect(
page.getByRole('link', { name: name + ' ' + description }),
).toBeVisible()
await expect(
page.getByRole('link', { name: diffName + ' ' + diffDescription }),
).not.toBeVisible()

// Reset filters
await page.getByRole('button', { name: 'Search Services by Filters' }).click()
await page.getByRole('button', { name: 'Reset' }).click()

// Filter by integration key, should find the service
await page.getByLabel('Select Integration Key').click()
await page.getByRole('option', { name: intKey }).getByRole('listitem').click()
await page.getByRole('button', { name: 'Done' }).click()
await expect(
page.getByRole('link', { name: name + ' ' + description }),
).toBeVisible()

// Load in filters from URL, should find the service
await page.goto('./services?search=' + key + '=*')
await expect(
page.getByRole('link', { name: name + ' ' + description }),
).toBeVisible()

// We should be on the services list page, so let's try searching for the service we just created. We add a space to the beginning of the name to ensure we are searching for the full name and not a substring.
await page.fill('input[name=search]', ' ' + name + ' ')

// We should find the service in the list, lets go to it
Expand Down
206 changes: 0 additions & 206 deletions web/src/cypress/e2e/services.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,158 +7,6 @@ function testServices(screen: ScreenFormat): void {
beforeEach(() => {
window.localStorage.setItem('show_services_new_feature_popup', 'false')
})
describe('List Page', () => {
describe('Filtering', () => {
let label1: Label
let label2: Label // uses key/value from label1
let intKey: IntegrationKey
beforeEach(() => {
cy.createLabel().then((l: Label) => {
label1 = l

cy.createLabel({
key: label1.key, // same key, random value
}).then((l: Label) => {
label2 = l
})
})
cy.createIntKey().then((i: IntegrationKey) => {
intKey = i
})
cy.visit('/services')
})

it('should open and close the filter popover', () => {
// check that filter content doesn't exist yet
cy.get('div[data-cy="label-key-container"]').should('not.exist')
cy.get('div[data-cy="label-value-container"]').should('not.exist')
cy.get('button[data-cy="filter-done"]').should('not.exist')
cy.get('button[data-cy="filter-reset"]').should('not.exist')

// open filter
if (screen === 'mobile') {
cy.get('[data-cy=app-bar] button[data-cy=open-search]').click()
}
cy.get('button[data-cy="services-filter-button"]').click()

// check that filter content exists
cy.get('div[data-cy="label-key-container"]').should('be.visible')
cy.get('div[data-cy="label-value-container"]').should('be.visible')
cy.get('button[data-cy="filter-done"]').should('be.visible')
cy.get('button[data-cy="filter-reset"]').should('be.visible')

// close filter
cy.get('button[data-cy="filter-done"]').click()

// check that filter content is removed from the dom
cy.get('div[data-cy="label-key-container"]').should('not.exist')
cy.get('div[data-cy="label-value-container"]').should('not.exist')
cy.get('button[data-cy="filter-done"]').should('not.exist')
cy.get('button[data-cy="filter-reset"]').should('not.exist')
})

it('should filter by label key', () => {
// open filter
if (screen === 'mobile') {
cy.get('[data-cy=app-bar] button[data-cy=open-search]').click()
}
cy.get('button[data-cy="services-filter-button"]').click()

cy.get('input[name="label-key"]').selectByLabel(label1.key)

// close filter
cy.get('button[data-cy="filter-done"]').click()

cy.get('body')
.should('contain', label1.svc.name)
.should('contain', label1.svc.description)

cy.get('body')
.should('contain', label2.svc.name)
.should('contain', label2.svc.description)
})

it('should not allow searching by label value with no key selected', () => {
// open filter
if (screen === 'mobile') {
cy.get('[data-cy=app-bar] button[data-cy=open-search]').click()
}
cy.get('button[data-cy="services-filter-button"]').click()

cy.get('input[name="label-value"]').should(
'have.attr',
'disabled',
'disabled',
)
})

it('should filter by label key and value', () => {
// open filter
if (screen === 'mobile') {
cy.get('[data-cy=app-bar] button[data-cy=open-search]').click()
}
cy.get('button[data-cy="services-filter-button"]').click()

cy.get('input[name="label-key"]').selectByLabel(label1.key)
cy.get('input[name="label-value"]').selectByLabel(label1.value)

// close filter
cy.get('button[data-cy="filter-done"]').click()

cy.get('body')
.should('contain', label1.svc.name)
.should('contain', label1.svc.description)

// check that the second label with the same key but different value doesn't show
cy.get('body')
.should('not.contain', label2.svc.name)
.should('not.contain', label2.svc.description)
})

it('should filter by integration key', () => {
// open filter
if (screen === 'mobile') {
cy.get('[data-cy=app-bar] button[data-cy=open-search]').click()
}
cy.get('button[data-cy="services-filter-button"]').click()

cy.get('input[name="integration-key"]').selectByLabel(intKey.id)

// close filter
cy.get('button[data-cy="filter-done"]').click()

cy.get('body')
.should('contain', intKey.svc.name)
.should('contain', intKey.svc.description)
})

it('should reset label filters', () => {
// open filter
if (screen === 'mobile') {
cy.get('[data-cy=app-bar] button[data-cy=open-search]').click()
}
cy.get('button[data-cy="services-filter-button"]').click()

cy.get('input[name="label-key"]').selectByLabel(label1.key)
cy.get('input[name="label-value"]').selectByLabel(label1.value)

cy.get('input[name="label-key"]').should('have.value', label1.key)
cy.get('input[name="label-value"]').should('have.value', label1.value)
})

it('should load in filter values from URL', () => {
cy.visit('/services?search=' + label1.key + '=*')

cy.get('body')
.should('contain', label1.svc.name)
.should('contain', label1.svc.description)

cy.get('body')
.should('contain', label2.svc.name)
.should('contain', label2.svc.description)
})
})
})

describe('Details Page', () => {
let svc: Service
Expand Down Expand Up @@ -189,16 +37,6 @@ function testServices(screen: ScreenFormat): void {
)
})

it('should navigate to and from integration keys', () => {
cy.navigateToAndFrom(
screen,
'Services',
svc.name,
'Integration Keys',
`${svc.id}/integration-keys`,
)
})

it('should navigate to and from heartbeat monitors', () => {
cy.navigateToAndFrom(
screen,
Expand All @@ -208,16 +46,6 @@ function testServices(screen: ScreenFormat): void {
`${svc.id}/heartbeat-monitors`,
)
})

it('should navigate to and from labels', () => {
cy.navigateToAndFrom(
screen,
'Services',
svc.name,
'Labels',
`${svc.id}/labels`,
)
})
})

describe('Heartbeat Monitors', () => {
Expand Down Expand Up @@ -454,40 +282,6 @@ function testServices(screen: ScreenFormat): void {
}),
)

it('should create a label', () => {
const key = label.key
const value = c.word({ length: 10 })

if (screen === 'mobile') {
cy.pageFab()
} else {
cy.get('button[data-testid="create-label"]').click()
}
cy.dialogForm({ key, value })
cy.dialogFinish('Submit')
cy.get('li').should('contain', key)
})

it('should set an existing label', () => {
const key = label.key
const value = c.word({ length: 10 })

cy.createService().then((svc: Service) => {
cy.visit(`/services/${svc.id}/labels`)
})

if (screen === 'mobile') {
cy.pageFab()
} else {
cy.get('button[data-testid="create-label"]').click()
}
cy.dialogForm({ key, value })
cy.dialogFinish('Submit')

cy.get('li').should('contain', key)
cy.get('li').should('contain', value)
})

it('should edit a label', () => {
const key = label.key
const value = c.word({ length: 10 })
Expand Down

0 comments on commit c60a68c

Please sign in to comment.