[CSR-593] Custom file names based on spec name

apps/web/src/components/CyEventItem.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/Button';
 import { useCypressEventsContext } from '@/context/cypressEvents';
+import { testStateVariants } from '@/lib/testState';
 import { cn } from '@/lib/utils';
 import { cva } from 'class-variance-authority';
 import clsx from 'clsx';
@@ -53,15 +54,10 @@ function CyEventItem({
  role="presentation"
  >
  <span
- className={clsx('pr-2', [
- payload.state === 'pending'
- ? 'text-amber-500 dark:text-yellow-300'
- : '',
- payload.state === 'passed'
- ? 'text-emerald-700 dark:text-emerald-500'
- : '',
- payload.state === 'failed' ? 'text-red-600 dark:text-red-400' : '',
- ])}
+ className={clsx(
+ 'pr-2',
+ cn(testStateVariants({ state: payload.state }))
+ )}
  >
  [{payload.state}]
  </span>

apps/web/src/components/EventDetails.tsx

@@ -1,3 +1,5 @@
+import { testStateVariants } from '@/lib/testState';
+import { cn } from '@/lib/utils';
 import formatMillis from '@/utils/formatMillis';
 import clsx from 'clsx';
 import { CypressEvent } from 'cypress-debugger';
@@ -52,17 +54,10 @@ export function EventDetails({ event }: { event: CypressEvent | null }) {
  <div className="max-h-[calc(100vh-8rem)] overflow-auto ">
  <div className="pl-4 pr-2 py-3 border-b">
  <span
- className={clsx('pr-2', [
- event.payload.state === 'pending'
- ? 'text-amber-500 dark:text-yellow-300'
- : '',
- event.payload.state === 'passed'
- ? 'text-emerald-700 dark:text-emerald-500'
- : '',
- event.payload.state === 'failed'
- ? 'text-red-600 dark:text-red-400'
- : '',
- ])}
+ className={clsx(
+ 'pr-2',
+ cn(testStateVariants({ state: event.payload.state }))
+ )}
  >
  [{event.payload.state}]
  </span>

apps/web/src/components/Layout.tsx

@@ -3,6 +3,8 @@ import { useCypressEventsContext } from '@/context/cypressEvents';
 import { useHttpArchiveContext } from '@/context/httpArchiveEntries';
 import { useReplayerContext } from '@/context/replayer';
 import { usePayloadQueryParam } from '@/hooks/useQuery';
+import { testStateVariants } from '@/lib/testState';
+import { cn } from '@/lib/utils';
 import Console from './Console';
 import CyEvents from './CyEvents';
 import DarkModeToggle from './DarkModeToggle';
@@ -97,7 +99,24 @@ function GridLayout() {
  {meta?.spec}
  </div>
  <div className="font-base">{meta?.test.join(' > ')}</div>
- <div className="font-thin">retry: {meta.retryAttempt}</div>
+ <div className="font-base">
+ <strong>state</strong>:{' '}
+ <span
+ className={cn(
+ testStateVariants({
+ state: meta.state,
+ })
+ )}
+ >
+ {' '}
+ {meta.state}
+ </span>
+ </div>
+ {meta.retryAttempt > 0 && (
+ <div className="font-thin">
+ attempt: {meta.retryAttempt + 1}
+ </div>
+ )}
  </div>
  )}
  <Tabs defaultValue="steps" className="w-[400px]">

apps/web/src/lib/testState.ts

@@ -0,0 +1,19 @@
+import { cva } from 'class-variance-authority';
+import { TestState } from 'cypress-debugger';
+
+export const testStateVariants = cva<{
+ state: Record<TestState | 'default', string>;
+}>('', {
+ variants: {
+ state: {
+ default: '',
+ passed: 'text-emerald-700 dark:text-emerald-500',
+ pending: 'text-amber-500 dark:text-yellow-300',
+ failed: 'text-red-600 dark:text-red-400',
+ skipped: '',
+ },
+ },
+ defaultVariants: {
+ state: 'default',
+ },
+});

packages/cypress-debugger/index.ts

@@ -29,6 +29,7 @@ export type {
  RRWebEvent,
  RawEvent,
  RunContextData,
+ TestState,
 } from '@currents/cypress-debugger-support';
 
 export const debuggerSupport = attachHandlers;

packages/plugin/src/install.ts

@@ -17,7 +17,15 @@ const harDir = 'dump_har';
 
 const createDumpFile = (data: TestExecutionResult, dumpDir: string): string => {
  createDir(dumpDir);
- const resultsPath = path.join(dumpDir, `${data.id}.raw.json`);
+
+ const specDirPath = path.join(dumpDir, data.meta.spec);
+ createDir(specDirPath);
+
+ const filename = `${data.meta.test.join(' -- ')} (${data.meta.state})${
+ data.meta.retryAttempt > 0 ? ` (attempt ${data.meta.retryAttempt + 1})` : ''
+ }`;
+
+ const resultsPath = path.join(specDirPath, `${filename}.json`);
  writeFile(resultsPath, JSON.stringify(data, null, 2));
  return resultsPath;
 };

packages/plugin/src/types.ts

@@ -3,6 +3,7 @@ import {
  HttpArchiveLog,
  RRWebEvent,
  RunContextData,
+ TestState,
 } from '@currents/cypress-debugger-support';
 
 export type LogEntryLevel = 'verbose' | 'info' | 'warning' | 'error';
@@ -122,7 +123,7 @@ export type BrowserLog = {
 
 export type TestExecutionResult = {
  id: string;
- meta: RunContextData;
+ meta: RunContextData & { state: TestState };
  cy: CypressEvent[];
  rr: RRWebEvent[];
  har: HttpArchiveLog | null;

packages/support/src/cy/testHandlers.ts

@@ -46,7 +46,7 @@ export function handleAfterEach() {
  // get cy and rr events + test meta
  cy.task('dumpEvents', {
  id: eventsBatch.testId,
- meta: getRunContext(),
+ meta: { ...getRunContext(), state },
  cy: eventsBatch.events.cy,
  rr: eventsBatch.events.rr,
  harFilename,

packages/support/src/events/event.ts

@@ -1,6 +1,13 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { eventWithTime } from '@rrweb/types';
 
+export enum TestState {
+ Failed = 'failed',
+ Passed = 'passed',
+ Pending = 'pending',
+ Skipped = 'skipped',
+}
+
 export type RRWebRawEvent = eventWithTime;
 export type CypressRawEvent = {
  chainerId?: string;
@@ -11,7 +18,7 @@ export type CypressRawEvent = {
  instrument: string;
  message: string;
  name: string;
- state: string;
+ state: TestState;
  testCurrentRetry: number;
  testId: string;
  type?: string;