@kinora/reporter 0.5.1 → 0.7.0

package/README.md

@@ -37,8 +37,9 @@ Create an API token in the kinora dashboard (Settings → Workspace). Self-hosti
 
 ## Videos and screenshots without tracing
 
-Traces are uploaded by default, and Playwright already embeds a test's screenshots and video
-inside its trace.zip. If you run without tracing, upload them on their own:
+Traces are uploaded by default, along with the expected / actual / diff images of a failed
+`toHaveScreenshot`, which kinora shows as a comparison. Playwright already embeds a test's other
+screenshots and its video inside the trace.zip. If you run without tracing, upload them on their own:
 
 ```ts
 reporter: [['@kinora/reporter', {
@@ -50,6 +51,26 @@ reporter: [['@kinora/reporter', {
 Kinora uploads whatever Playwright attached, so `screenshot: 'only-on-failure'` and
 `video: 'retain-on-failure'` keep deciding what exists in the first place.
 
+## Component tests
+
+Playwright's built-in component testing (the `mount` fixture, Playwright >=1.63) reports like any
+other test. To let kinora know which story each test mounted, import `test` from
+`@kinora/reporter/ct` instead of `@playwright/test`:
+
+```ts
+import { expect, test } from '@kinora/reporter/ct'
+
+test('disabled button is disabled', async ({ mount }) => {
+  const component = await mount('components/Button/Disabled')
+  await expect(component.getByRole('button')).toBeDisabled()
+})
+```
+
+Each mounted story id is recorded on the test as a `kinora:story` annotation. Already extending
+`test` with your own fixtures? Extend this one instead: `test.extend({ ... })`.
+
+More in the [component testing guide](https://docs.kinora.dev/guides/component-testing/).
+
 ## Documentation
 
 Full reporter options, PR/MR comments, CI examples, and self-hosting are in the docs:

package/dist/ct.d.mts

@@ -0,0 +1,12 @@
+import { TestInfo, expect } from "@playwright/test";
+//#region src/ct.d.ts
+type Annotations = TestInfo['annotations'];
+declare function recordStory(annotations: Annotations, storyId: string): void;
+declare function withStoryAnnotations<M extends (storyId: string, ...rest: any[]) => unknown>(mount: M, annotations: Annotations): M;
+/**
+ * Drop-in replacement for `test` from `@playwright/test` in component tests: `mount` records
+ * the mounted story id on the test, which lets kinora group results by component and story.
+ */
+declare const test: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions>;
+//#endregion
+export { expect, recordStory, test, withStoryAnnotations };

package/dist/ct.mjs

@@ -0,0 +1,24 @@
+import { STORY_ANNOTATION } from "@kinora/core";
+import { expect, test as test$1 } from "@playwright/test";
+//#region src/ct.ts
+function recordStory(annotations, storyId) {
+	if (!annotations.some((a) => a.type === STORY_ANNOTATION && a.description === storyId)) annotations.push({
+		type: STORY_ANNOTATION,
+		description: storyId
+	});
+}
+function withStoryAnnotations(mount, annotations) {
+	return ((storyId, ...rest) => {
+		recordStory(annotations, storyId);
+		return mount(storyId, ...rest);
+	});
+}
+/**
+* Drop-in replacement for `test` from `@playwright/test` in component tests: `mount` records
+* the mounted story id on the test, which lets kinora group results by component and story.
+*/
+const test = test$1.extend({ mount: async ({ mount }, use, testInfo) => {
+	await use(withStoryAnnotations(mount, testInfo.annotations));
+} });
+//#endregion
+export { expect, recordStory, test, withStoryAnnotations };

package/dist/index.d.mts

@@ -23,7 +23,8 @@ interface KinoraReporterOptions {
     policy?: 'always' | 'on-failure';
   };
   /**
-   * Which attachment kinds to upload. Defaults to `['trace']`. Add `'video'` / `'screenshot'`
+   * Which attachment kinds to upload. Defaults to `['trace', 'snapshot']` (`snapshot` = the images
+   * of a failed screenshot assertion, shown as a comparison). Add `'video'` / `'screenshot'`
    * to host them on their own, which is what you want when `trace` is off (with tracing on,
    * Playwright already embeds them in the trace.zip).
    */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kinora/reporter",
   "type": "module",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "description": "Playwright reporter that uploads test results to a kinora server",
   "author": "Joris Gallot",
   "license": "MIT",
@@ -20,7 +20,8 @@
     "kinora"
   ],
   "exports": {
-    ".": "./dist/index.mjs"
+    ".": "./dist/index.mjs",
+    "./ct": "./dist/ct.mjs"
   },
   "main": "./dist/index.mjs",
   "files": [
@@ -36,7 +37,7 @@
     "@playwright/test": ">=1.40.0"
   },
   "dependencies": {
-    "@kinora/core": "0.5.1"
+    "@kinora/core": "0.7.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.63.0",