Skip to content
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.

Sign up for GitHub

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

Move label / filtering service tests to Playwright #2922

Merged
merged 9 commits into from
Apr 4, 2023
Merged

Move label / filtering service tests to Playwright #2922

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c264509
adding tests for filtering
nataliekorzh Mar 29, 2023
a4e8673
filtering by label, value and integration key
nataliekorzh Mar 29, 2023
faa9a8b
Merge branch 'services-playwright' of https://github.com/target/goale…
nataliekorzh Mar 30, 2023
be252e1
all filtering tests are passing
nataliekorzh Mar 30, 2023
7ab521c
removing old tests covered in playwright
nataliekorzh Apr 3, 2023
e9b4db1
altering old key + new value test, removing old cypress tests now cov…
nataliekorzh Apr 3, 2023
229a34f
Delete service-gen.spec.ts
nataliekorzh Apr 3, 2023
8c27664
Delete index.html
nataliekorzh Apr 3, 2023
4023beb
Update test/integration/service.spec.ts
nataliekorzh Apr 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 122 additions & 1 deletion test/integration/service.spec.ts
View file
Open in desktop
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
Open in desktop
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