Merge pull request #104 from filiphric/100-xml-request-and-response-show-in-single-line-instead-of-showing-proper-xml

feat: add support for missing or unknown content-type

Author: filiphric

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.10.0](https://github.com/filiphric/cypress-plugin-api/compare/v2.9.1...v2.10.0) (2023-01-15)
+
+
+### Features
+
+* add support for missing or unknown content-type ([d283156](https://github.com/filiphric/cypress-plugin-api/commits/d28315664d1a800ae8a1a0543418c41b10f90f6f))
+
 ### [2.9.1](https://github.com/filiphric/cypress-plugin-api/compare/v2.9.0...v2.9.1) (2023-01-11)
 
 

cypress/e2e/formats.cy.ts

@@ -2,25 +2,31 @@ describe('response formats', () => {
 
   it('works with xml', () => {
 
-    cy.api({
-      url: '/xml'
-    })
+    cy.api('/xml')
+
+    // xml tag is formatted
+    cy.contains('xml')
+      .should('have.css', 'color', 'rgb(100, 112, 243)')
 
   });
 
   it('works with html', () => {
 
-    cy.api({
-      url: '/html'
-    })
+    cy.api('/html')
+
+    // html tag is formatted
+    cy.contains('html')
+      .should('have.css', 'color', 'rgb(255, 87, 112)')
 
   });
 
   it('works with json', () => {
 
-    cy.api({
-      url: '/json'
-    })
+    cy.api('/json')
+
+    // numbers in json are formatted
+    cy.contains('1234')
+      .should('have.css', 'color', 'rgb(31, 169, 113)')
 
   });
 
@@ -34,4 +40,14 @@ describe('response formats', () => {
 
   });
 
+  it('works with undefined format', () => {
+
+    cy.api('/undefined')
+
+    // xml tag is formatted
+    cy.contains('xml')
+      .should('have.css', 'color', 'rgb(100, 112, 243)')
+
+  });
+
 });

package-lock.json

@@ -2,7 +2,7 @@
   "author": "Filip Hric (https://filiphric.com/)",
   "license": "ISC",
   "name": "cypress-plugin-api",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "keywords": [
     "cypress",
     "api",

package.json

@@ -84,6 +84,11 @@ app.get('/xml', (req, res) => {
   res.send(answerXML)
 })
 
+app.get('/undefined', (req, res) => {
+  const answerXML = "<xml>XML</xml>"
+  res.send(answerXML)
+})
+
 app.get('/text', (req, res) => {
   const answerText = "Hey there 👋"
   res.send(answerText)

server/index.js

@@ -6,6 +6,7 @@ import { ApiRequestOptions, ApiResponseBody, RequestProps } from 'src/types';
 import { transform } from "@modules/transform";
 import { getState } from '@utils/getState';
 import { App } from 'vue';
+import { getFormat } from '@utils/getFormat';
 
 export const handleResponse = (res: ApiResponseBody, options: ApiRequestOptions, props: RequestProps[], index: number, app: App<Element>) => {
 
@@ -37,7 +38,9 @@ export const handleResponse = (res: ApiResponseBody, options: ApiRequestOptions,
       'text/html': 'html',
       'text/plain': 'plaintext',
     } as const
-    const language = formats[contentType as keyof typeof formats]
+    const definedFormat = formats[contentType as keyof typeof formats]
+    // if format is in the "formats" object use that, else try to determine by the function
+    const language = definedFormat || getFormat(body)
     // format response
     props[index].responseBody.formatted = transform(body, language)
     props[index].responseBody.body = bodyRaw

src/modules/handleResponse.ts

@@ -1,8 +1,8 @@
 import * as Prism from 'prismjs';
 import 'prismjs/components/prism-json';
-import { isStringValidJson } from '../utils/isStringValidJson';
+import { isValidJson } from '../utils/isValidJson';
 
-export const transform = (body: any, language: 'json' | 'html' | 'xml' | 'plaintext' = 'json') => {
+export const transform = (body: any, language: 'json' | 'html' | 'xml' | 'blob' | 'plaintext' = 'json') => {
   const content = language === 'json' ? JSON.stringify(body, null, 2) : body
   if (body) {
     const formatted = Prism.highlight(content, Prism.languages[language], language)
@@ -13,7 +13,7 @@ export const transform = (body: any, language: 'json' | 'html' | 'xml' | 'plaint
 
 
     // add folding to every json object and array
-    if (isStringValidJson(content)) {
+    if (isValidJson(content)) {
       code = code
         .replaceAll('<span class="token punctuation">{</span>', '<details class="contents" open><summary class="inline-block brace"><span class="token punctuation">{</span></summary>')
         .replaceAll('<span class="token punctuation">[</span>', '<details class="contents" open><summary class="inline-block bracket"><span class="token punctuation">[</span></summary>')

src/modules/transform.ts

@@ -1,4 +1,4 @@
-import { isStringValidJson } from "./isStringValidJson"
+import { isValidJson } from "./isValidJson"
 
 export const calculateSize = (value: object) => {
 
@@ -10,7 +10,7 @@ export const calculateSize = (value: object) => {
   // remove all carriage return symbols
   const cleanString = stringified.replace(/\r\n/g, '\n')
   // replace white spaces if value is a JSON
-  const finalString = isStringValidJson(cleanString) ? cleanString.replace(/\s/g, '') : cleanString
+  const finalString = isValidJson(cleanString) ? cleanString.replace(/\s/g, '') : cleanString
   const byteCount = new Blob([finalString]).size
 
   return byteCount

src/utils/calculateSize.ts

@@ -0,0 +1,18 @@
+import { isValidJson } from "@utils/isValidJson";
+import { isValidXml } from "@utils/isValidXml";
+import { isValidHtml } from "@utils/isValidHtml";
+import { isValidBlob } from "@utils/isValidBlob";
+
+export function getFormat(str: string) {
+  if (isValidJson(str)) {
+    return "json";
+  } else if (isValidXml(str)) {
+    return "xml";
+  } else if (isValidHtml(str)) {
+    return "html";
+  } else if (isValidBlob(str)) {
+    return "blob";
+  } else {
+    return "plaintext";
+  }
+}

src/utils/getFormat.ts

@@ -0,0 +1,3 @@
+export function isValidBlob(str: any) {
+  return str instanceof Blob;
+}