-
Notifications
You must be signed in to change notification settings - Fork 63
Media reporting e2e tests, single audio support, style updates, and accessibility improvements #1276
Media reporting e2e tests, single audio support, style updates, and accessibility improvements #1276
Changes from all commits
da2b88b
a12749c
980de76
7ff58a9
2f2ff15
b38e3cf
03831be
0308ce0
455531e
3eb1d59
a2c6839
2de0069
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,12 @@ | ||
<template> | ||
<VButton | ||
variant="plain" | ||
class="report-button font-semibold text-dark-charcoal" | ||
class="report-button font-semibold text-dark-charcoal-70" | ||
> | ||
<span class="md:hidden">{{ | ||
<span class="text-sr md:text-base md:hidden">{{ | ||
$t('media-details.content-report.short') | ||
}}</span> | ||
<span class="hidden md:inline">{{ | ||
<span class="text-sr md:text-base hidden md:inline">{{ | ||
Comment on lines
+4
to
+9
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
$t('media-details.content-report.long') | ||
}}</span> | ||
<VIcon :icon-path="icons.flag" class="ms-2" /> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -40,7 +40,7 @@ | |
}} | ||
</p> | ||
|
||
<form class="text-sm"> | ||
<form class="text-sm" @submit="handleSubmit"> | ||
<fieldset class="flex flex-col"> | ||
<legend class="font-semibold mb-4"> | ||
{{ $t('media-details.content-report.form.question') }} | ||
|
@@ -93,10 +93,11 @@ | |
<VButton | ||
v-else | ||
key="non-dmca" | ||
type="submit" | ||
:disabled="isSubmitDisabled" | ||
:focusable-when-disabled="true" | ||
variant="secondary" | ||
@click="handleSubmit" | ||
:value="$t('media-details.content-report.form.submit')" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fun fact: Playwright's selectors for text ( There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. TIL! I guess we should add |
||
> | ||
{{ $t('media-details.content-report.form.submit') }} | ||
</VButton> | ||
|
@@ -166,11 +167,13 @@ export default defineComponent({ | |
const isSubmitDisabled = computed( | ||
() => selectedReason.value === OTHER && description.value.length < 20 | ||
) | ||
const handleSubmit = async () => { | ||
const handleSubmit = async (event) => { | ||
event.preventDefault() | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Prevents redirection to the api POST request endpoint. |
||
if (selectedReason.value === DMCA) return | ||
// Submit report | ||
try { | ||
await service.sendReport({ | ||
mediaType: props.media.frontendMediaType, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I keep forgetting that we can use the |
||
identifier: props.media.id, | ||
reason: selectedReason.value, | ||
description: description.value, | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,109 @@ | ||
import { test, expect, Page, BrowserContext } from '@playwright/test' | ||
|
||
import { mockProviderApis } from '~~/test/playwright/utils/route' | ||
|
||
/** | ||
* Some helpers for repeated actions. | ||
*/ | ||
|
||
const reportingEndpoint = '**/report/' | ||
|
||
export const visitFirstResult = (page: Page) => | ||
page.click('[data-testid="search-results"] a:first-child') | ||
export const openReportModal = (page: Page) => | ||
page.click('text="Report this content"') | ||
|
||
// Mock a successful reporting response | ||
export const mockReportingEndpoint = (context: BrowserContext) => | ||
context.route(reportingEndpoint, (route) => { | ||
route.fulfill({ | ||
status: 200, | ||
contentType: 'text/json', | ||
headers: { 'access-control-allow-origin': '*' }, | ||
}) | ||
}) | ||
|
||
// Submit the content form and return the network response | ||
export const submitApiReport = (page: Page) => | ||
Promise.all([ | ||
page.waitForResponse(reportingEndpoint), | ||
page.locator('button[type="submit"]:has-text("Report")').click(), | ||
]).then((res) => res[0]) | ||
|
||
/** | ||
* Reports | ||
*/ | ||
|
||
const submitDmcaReport = async (page: Page, context: BrowserContext) => { | ||
// Mock the Google Form to return a successful html document | ||
await context.route('https://docs.google.com/forms/**', (route) => { | ||
route.fulfill({ | ||
status: 200, | ||
contentType: 'text/html', | ||
body: '<div>Fake form!</div>', | ||
}) | ||
}) | ||
await page.click('text="Infringes copyright"') | ||
const [newPage] = await Promise.all([ | ||
context.waitForEvent('page'), | ||
await page.click('text="Open form"'), // Opens a new tab | ||
]) | ||
await newPage.waitForLoadState() | ||
return expect(await newPage.url()).toContain('https://docs.google.com/forms') | ||
} | ||
|
||
// todo: Test a mature report with the optional description field | ||
const submitMatureContentReport = async ( | ||
page: Page, | ||
context: BrowserContext | ||
) => { | ||
await mockReportingEndpoint(context) | ||
await page.click('text="Contains mature content"') | ||
const response = await submitApiReport(page) | ||
return expect(response.status()).toBe(200) | ||
} | ||
|
||
const submitOtherReport = async (page: Page, context: BrowserContext) => { | ||
await mockReportingEndpoint(context) | ||
await page.click('text="Other"') | ||
await page.fill( | ||
'text=Describe the issue', | ||
'This is an example "Other" report submit by Playwright, our automated e2e test tool.' | ||
) | ||
const response = await submitApiReport(page) | ||
return expect(response.status()).toBe(200) | ||
} | ||
|
||
test.beforeEach(async ({ context }) => { | ||
await mockProviderApis(context) | ||
}) | ||
|
||
const mediaTypes = ['Images', 'Audio'] | ||
const reports = { | ||
dmca: submitDmcaReport, | ||
mature: submitMatureContentReport, | ||
other: submitOtherReport, | ||
} | ||
|
||
/** | ||
* Iterate through all the media types and supported reports | ||
* to make sure every permutation works correctly. | ||
*/ | ||
mediaTypes.forEach((mediaType) => { | ||
Object.entries(reports).forEach(([reportName, reportAssertion]) => { | ||
test(`Files ${reportName} report for ${mediaType.toLowerCase()}`, async ({ | ||
page, | ||
context, | ||
}) => { | ||
await page.goto('/') | ||
await page.click(`[aria-label="All content"]`) | ||
await page.click(`button[role="radio"]:has-text("${mediaType}")`) | ||
const searchInput = page.locator('main input[type="search"]') | ||
await searchInput.type('cat') | ||
await page.click('[aria-label="Search"]') | ||
await visitFirstResult(page) | ||
await openReportModal(page) | ||
await reportAssertion(page, context) | ||
}) | ||
}) | ||
}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This adds the report form and button to the single audio results.