fix(api-reference): can not render operation without responses (#6317)

* fix: can not render operation without responses

* docs(changeset): fix: can not render operation without responses

* refactor: use new workspace types

* fix: TS errors

* fix: another TS error

* fix: does not fallback to example key when no summary is provided

* fix: a few tests and the hasMultipleExamples check

* fix: doesn’t properly render first example

Author: hanspagel

.changeset/light-turkeys-rush.md

@@ -0,0 +1,5 @@
+---
+'@scalar/api-reference': patch
+---
+
+fix: can not render operation without responses

packages/api-reference/src/features/example-responses/ExampleResponse.vue

@@ -1,18 +1,20 @@
 <script lang="ts" setup>
 import { ScalarCodeBlock } from '@scalar/components'
 import { getExampleFromSchema } from '@scalar/oas-utils/spec-getters'
-import type { OpenAPI } from '@scalar/openapi-types'
+import type { ExampleObject } from '@scalar/workspace-store/schemas/v3.1/strict/example'
+import type { MediaTypeObject } from '@scalar/workspace-store/schemas/v3.1/strict/media-header-encoding'
 
 defineProps<{
-  response: OpenAPI.ResponseObject
+  response: MediaTypeObject | undefined
+  example: ExampleObject
 }>()
 </script>
 <template>
   <!-- Example -->
   <ScalarCodeBlock
-    v-if="response?.example !== undefined"
+    v-if="example !== undefined"
     class="bg-b-2 -outline-offset-2"
-    :content="response?.example"
+    :content="example?.value"
     lang="json" />
 
   <!-- Schema -->

packages/api-reference/src/features/example-responses/ExampleResponses.test.ts

@@ -12,7 +12,9 @@ describe('ExampleResponses', () => {
             description: 'Successful response',
             content: {
               'application/json': {
-                example: { message: 'Success' },
+                examples: {
+                  example1: { value: { message: 'Success' } },
+                },
               },
             },
           },
@@ -28,6 +30,7 @@ describe('ExampleResponses', () => {
     expect(tabs[0].text()).toContain('200')
     expect(codeBlock.length).toBe(1)
     expect(wrapper.text()).toContain('Success')
+    expect(wrapper.text()).not.toContain('value')
     expect(examplePicker.exists()).toBe(false)
   })
 
@@ -76,7 +79,9 @@ describe('ExampleResponses', () => {
             description: 'XML response',
             content: {
               'application/xml': {
-                example: '<user><name>John</name><age>30</age></user>',
+                examples: {
+                  example1: { value: '<user><name>John</name><age>30</age></user>' },
+                },
               },
             },
           },
@@ -89,7 +94,7 @@ describe('ExampleResponses', () => {
     const examplePicker = wrapper.findComponent({ name: 'ExamplePicker' })
 
     expect(tabs.length).toBe(1)
-    expect(tabs[0].text()).toContain('200')
+    expect(tabs[0].text()).toContain('Status: 200')
     expect(codeBlock.length).toBe(1)
     expect(wrapper.text()).toContain('XML response')
     expect(wrapper.text()).toContain('<user><name>John</name><age>30</age></user>')
@@ -104,7 +109,9 @@ describe('ExampleResponses', () => {
             description: 'Plain text response',
             content: {
               'text/plain': {
-                example: 'Hello world',
+                examples: {
+                  example1: { value: 'Hello world' },
+                },
               },
             },
           },
@@ -132,7 +139,9 @@ describe('ExampleResponses', () => {
             description: 'HTML response',
             content: {
               'text/html': {
-                example: '<div>Hello <strong>world</strong></div>',
+                examples: {
+                  example1: { value: '<div>Hello <strong>world</strong></div>' },
+                },
               },
             },
           },
@@ -160,23 +169,29 @@ describe('ExampleResponses', () => {
             description: 'Success response',
             content: {
               'application/json': {
-                example: { status: 'success' },
+                examples: {
+                  example1: { value: { status: 'success' } },
+                },
               },
             },
           },
           '400': {
             description: 'Error response',
             content: {
               'application/json': {
-                example: { error: 'Bad request' },
+                examples: {
+                  example1: { value: { error: 'Bad request' } },
+                },
               },
             },
           },
           '500': {
             description: 'Server error',
             content: {
               'application/json': {
-                example: { error: 'Internal server error' },
+                examples: {
+                  example1: { value: { error: 'Internal server error' } },
+                },
               },
             },
           },
@@ -207,23 +222,29 @@ describe('ExampleResponses', () => {
             description: 'Success response',
             content: {
               'application/json': {
-                example: { status: 'success' },
+                examples: {
+                  example1: { value: { status: 'success' } },
+                },
               },
             },
           },
           'default': {
             description: 'Default error response',
             content: {
               'application/json': {
-                example: { error: 'Unexpected error' },
+                examples: {
+                  example1: { value: { error: 'Unexpected error' } },
+                },
               },
             },
           },
           '404': {
             description: 'Not found error',
             content: {
               'application/json': {
-                example: { error: 'Resource not found' },
+                examples: {
+                  example1: { value: { error: 'Resource not found' } },
+                },
               },
             },
           },
@@ -254,23 +275,29 @@ describe('ExampleResponses', () => {
             description: 'Not found error',
             content: {
               'application/json': {
-                example: { error: 'Resource not found' },
+                examples: {
+                  example1: { value: { error: 'Resource not found' } },
+                },
               },
             },
           },
           '500': {
             description: 'Server error',
             content: {
               'application/json': {
-                example: { error: 'Internal server error' },
+                examples: {
+                  example1: { value: { error: 'Internal server error' } },
+                },
               },
             },
           },
           '403': {
             description: 'Forbidden error',
             content: {
               'application/json': {
-                example: { error: 'Access denied' },
+                examples: {
+                  example1: { value: { error: 'Access denied' } },
+                },
               },
             },
           },
@@ -301,15 +328,17 @@ describe('ExampleResponses', () => {
             description: 'OK',
             content: {
               'application/json': {
-                example: { foo: 'bar' },
+                examples: {
+                  example1: { value: { foo: 'bar' } },
+                },
               },
             },
           },
         },
       },
     })
 
-    const copyButton = wrapper.find('.code-copy')
+    const copyButton = wrapper.find('.copy-button')
     expect(copyButton.exists()).toBe(true)
 
     await copyButton.trigger('click')
@@ -377,7 +406,9 @@ describe('ExampleResponses', () => {
             description: 'OK',
             content: {
               '*/*': {
-                example: { message: 'Wildcard mimetype' },
+                examples: {
+                  example1: { value: { message: 'Wildcard mimetype' } },
+                },
               },
             },
           },