Skip to content
This repository has been archived by the owner on Feb 22, 2023. It is now read-only.

Commit

Permalink
Reuse the breakpoints helper utilities
Browse files Browse the repository at this point in the history
  • Loading branch information
@obulat
obulat committed Oct 27, 2022
1 parent 4b8c529 commit 040f75e
Show file tree
Hide file tree
Showing 10 changed files with 262 additions and 293 deletions.
2 changes: 1 addition & 1 deletion src/components/VCopyButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
type="button"
variant="secondary-filled"
size="disabled"
class="py-2 px-3 text-sr"
class="py-2 px-3 text-sr font-semibold"
:data-clipboard-target="el"
>
<span v-if="!success">
Expand Down
300 changes: 146 additions & 154 deletions test/playwright/e2e/filters.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,7 @@ import {

import { mockProviderApis } from '~~/test/playwright/utils/route'

import { TestScreen, testScreens } from '~~/test/playwright/utils/breakpoints'

import { SCREEN_SIZES } from '~~/src/constants/screens'
import breakpoints from '~~/test/playwright/utils/breakpoints'

import {
supportedSearchTypes,
Expand Down Expand Up @@ -45,181 +43,175 @@ const FILTER_COUNTS = {
[IMAGE]: 70,
}

for (const breakpoint of testScreens) {
test.describe(`filters on ${breakpoint}`, () => {
const width = SCREEN_SIZES.get(breakpoint as TestScreen) as number
breakpoints.describeMobileAndDesktop(() => {
test.beforeEach(async ({ context, page }) => {
await mockProviderApis(context)
await enableNewHeader(page)
})
for (const searchType of supportedSearchTypes) {
test(`correct total number of filters is displayed for ${searchType}`, async ({
page,
}) => {
await goToSearchTerm(page, 'cat', { searchType })

test.use({ viewport: { width, height: 700 } })
await openFilters(page)

test.beforeEach(async ({ context, page }) => {
await mockProviderApis(context)
await enableNewHeader(page)
await assertCheckboxCount(page, 'total', FILTER_COUNTS[searchType])
})
}

for (const searchType of supportedSearchTypes) {
test(`correct total number of filters is displayed for ${searchType}`, async ({
page,
}) => {
await goToSearchTerm(page, 'cat', { searchType })

await openFilters(page)
test('initial filters are applied based on the url', async ({ page }) => {
await page.goto(
'/search/?q=cat&license_type=commercial&license=cc0&searchBy=creator'
)
await openFilters(page)
const expectedFilters = ['cc0', 'commercial', 'creator']

await assertCheckboxCount(page, 'total', FILTER_COUNTS[searchType])
})
for (const checkbox of expectedFilters) {
await assertCheckboxStatus(page, checkbox)
}
})

test('initial filters are applied based on the url', async ({ page }) => {
await page.goto(
'/search/?q=cat&license_type=commercial&license=cc0&searchBy=creator'
)
await openFilters(page)
const expectedFilters = ['cc0', 'commercial', 'creator']
test('common filters are retained when media type changes from all media to single type', async ({
page,
}) => {
await page.goto(
'/search/?q=cat&license_type=commercial&license=cc0&searchBy=creator'
)
await openFilters(page)
const expectedFilters = ['cc0', 'commercial', 'creator']

for (const checkbox of expectedFilters) {
await assertCheckboxStatus(page, checkbox)
}
await changeContentType(page, 'Images')

await expect(page).toHaveURL(
'/search/image?q=cat&license_type=commercial&license=cc0&searchBy=creator'
)
await openFilters(page)
for (const checkbox of expectedFilters) {
await assertCheckboxStatus(page, checkbox)
}
})

for (const checkbox of expectedFilters) {
await assertCheckboxStatus(page, checkbox)
}
})
test('common filters are retained when media type changes from single type to all media', async ({
page,
}) => {
await page.goto(
'/search/image?q=cat&license_type=commercial&license=cc0&searchBy=creator'
)
await openFilters(page)

test('common filters are retained when media type changes from all media to single type', async ({
page,
}) => {
await page.goto(
'/search/?q=cat&license_type=commercial&license=cc0&searchBy=creator'
)
await openFilters(page)
const expectedFilters = ['cc0', 'commercial', 'creator']
for (const checkbox of ['cc0', 'commercial', 'creator']) {
await assertCheckboxStatus(page, checkbox)
}

for (const checkbox of expectedFilters) {
await assertCheckboxStatus(page, checkbox)
}
await changeContentType(page, 'Images')
await changeContentType(page, 'All content')

await expect(page).toHaveURL(
'/search/image?q=cat&license_type=commercial&license=cc0&searchBy=creator'
)
await openFilters(page)
for (const checkbox of expectedFilters) {
await assertCheckboxStatus(page, checkbox)
}
})
await openFilters(page)
await expect(page.locator('input[type="checkbox"]:checked')).toHaveCount(3)

test('common filters are retained when media type changes from single type to all media', async ({
page,
}) => {
await page.goto(
'/search/image?q=cat&license_type=commercial&license=cc0&searchBy=creator'
)
await openFilters(page)
await expect(page).toHaveURL(
'/search/?q=cat&license_type=commercial&license=cc0&searchBy=creator'
)
})

for (const checkbox of ['cc0', 'commercial', 'creator']) {
await assertCheckboxStatus(page, checkbox)
}
test('selecting some filters can disable dependent filters', async ({
page,
}) => {
await page.goto('/search/audio?q=cat&license_type=commercial')
await openFilters(page)

// by-nc is special because we normally test for fuzzy match, and by-nc matches 3 labels.
const byNc = page.locator('input[value="by-nc"]')
await expect(byNc).toBeDisabled()
for (const checkbox of ['by-nc-sa', 'by-nc-nd']) {
await assertCheckboxStatus(page, checkbox, '', 'disabled')
}
await assertCheckboxStatus(page, 'commercial')

await changeContentType(page, 'All content')
await page.click('label:has-text("commercial")')

await openFilters(page)
for (const checkbox of ['cc0', 'commercial', 'creator']) {
await assertCheckboxStatus(page, checkbox)
}
await expect(page).toHaveURL(
'/search/?q=cat&license_type=commercial&license=cc0&searchBy=creator'
)
})
await assertCheckboxStatus(page, 'commercial', '', 'unchecked')
await expect(byNc).not.toBeDisabled()
for (const checkbox of ['commercial', 'by-nc-sa', 'by-nc-nd']) {
await assertCheckboxStatus(page, checkbox, '', 'unchecked')
}
})

test('selecting some filters can disable dependent filters', async ({
page,
}) => {
await page.goto('/search/audio?q=cat&license_type=commercial')
await openFilters(page)
/**
* When the search type changes:
* - image-specific filter (aspect_ration=tall) is discarded
* - common filter (license_type=CC0) is kept
* - filter button text updates
* - URL updates
* Tests for the missing checkbox with `toHaveCount` are flaky, so we use filter button
* text and the URL instead.
*/
test('filters are updated when media type changes', async ({ page }) => {
await page.goto('/search/image?q=cat&aspect_ratio=tall&license=cc0')
await openFilters(page)

await assertCheckboxStatus(page, 'tall')
await assertCheckboxStatus(page, 'cc0')

await changeContentType(page, 'Audio')
await openFilters(page)

// Only CC0 checkbox is checked, and the filter button label is
// '1 Filter' on `xl` or '1' on `lg` screens
await assertCheckboxStatus(page, 'cc0')
await closeFilters(page)
if (isPageDesktop(page)) {
const filterButtonText = await page
.locator('[aria-controls="filters"] span:visible')
.textContent({ timeout: 100 })
expect(filterButtonText).toContain('1')
} else {
const filtersAriaLabel =
(await page
.locator('[aria-controls="content-settings-modal"]')
.getAttribute('aria-label')) ?? ''
expect(filtersAriaLabel.trim()).toEqual('Menu. 1 filter applied')
}

// by-nc is special because we normally test for fuzzy match, and by-nc matches 3 labels.
const byNc = page.locator('input[value="by-nc"]')
await expect(byNc).toBeDisabled()
for (const checkbox of ['by-nc-sa', 'by-nc-nd']) {
await assertCheckboxStatus(page, checkbox, '', 'disabled')
}
await assertCheckboxStatus(page, 'commercial')

await page.click('label:has-text("commercial")')

await assertCheckboxStatus(page, 'commercial', '', 'unchecked')
await expect(byNc).not.toBeDisabled()
for (const checkbox of ['commercial', 'by-nc-sa', 'by-nc-nd']) {
await assertCheckboxStatus(page, checkbox, '', 'unchecked')
}
})
await expect(page).toHaveURL('/search/audio?q=cat&license=cc0')
})

/**
* When the search type changes:
* - image-specific filter (aspect_ration=tall) is discarded
* - common filter (license_type=CC0) is kept
* - filter button text updates
* - URL updates
* Tests for the missing checkbox with `toHaveCount` are flaky, so we use filter button
* text and the URL instead.
*/
test('filters are updated when media type changes', async ({ page }) => {
await page.goto('/search/image?q=cat&aspect_ratio=tall&license=cc0')
await openFilters(page)
test('new media request is sent when a filter is selected', async ({
page,
}) => {
await page.goto('/search/image?q=cat')
await openFilters(page)

await assertCheckboxStatus(page, 'tall')
await assertCheckboxStatus(page, 'cc0')
await assertCheckboxStatus(page, 'cc0', '', 'unchecked')

await changeContentType(page, 'Audio')
await openFilters(page)
const [response] = await Promise.all([
page.waitForResponse((response) => response.url().includes('cc0')),
page.click('label:has-text("CC0")'),
])

// Only CC0 checkbox is checked, and the filter button label is '1 Filter'
await assertCheckboxStatus(page, 'cc0')
await closeFilters(page)
if (isPageDesktop(page)) {
await expect(
page.locator('[aria-controls="filters"] span:visible')
).toHaveText('1 Filter')
} else {
const filtersAriaLabel =
(await page
.locator('[aria-controls="content-settings-modal"]')
.getAttribute('aria-label')) ?? ''
expect(filtersAriaLabel.trim()).toEqual('Menu. 1 filter applied')
}

await expect(page).toHaveURL('/search/audio?q=cat&license=cc0')
})
await assertCheckboxStatus(page, 'cc0')
// Remove the host url and path because when proxied, the 'http://localhost:49153' is used instead of the
// real API url
const queryString = response.url().split('/images/')[1]
expect(queryString).toEqual('?q=cat&license=cc0')
})

test('new media request is sent when a filter is selected', async ({
for (const [searchType, source] of [
['audio', 'Freesound'],
['image', 'Flickr'],
]) {
test(`Provider filters are correctly initialized from the URL: ${source} - ${searchType}`, async ({
page,
}) => {
await page.goto('/search/image?q=cat')
await page.goto(
`/search/${searchType}?q=birds&source=${source.toLowerCase()}`
)
await openFilters(page)

await assertCheckboxStatus(page, 'cc0', '', 'unchecked')

const [response] = await Promise.all([
page.waitForResponse((response) => response.url().includes('cc0')),
page.click('label:has-text("CC0")'),
])

await assertCheckboxStatus(page, 'cc0')
// Remove the host url and path because when proxied, the 'http://localhost:49153' is used instead of the
// real API url
const queryString = response.url().split('/images/')[1]
expect(queryString).toEqual('?q=cat&license=cc0')
await assertCheckboxStatus(page, source, '', 'checked')
})

for (const [searchType, source] of [
['audio', 'Freesound'],
['image', 'Flickr'],
]) {
test(`Provider filters are correctly initialized from the URL: ${source} - ${searchType}`, async ({
page,
}) => {
await page.goto(
`/search/${searchType}?q=birds&source=${source.toLowerCase()}`
)
await openFilters(page)

await assertCheckboxStatus(page, source, '', 'checked')
})
}
})
}
}
})
Loading

0 comments on commit 040f75e

Please sign in to comment.