Swagger/OpenAPI specification in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Swagger UI setup code?

Consider this Express code snippet that sets up Swagger UI for API documentation. What will the user see when they visit /api-docs in their browser?

Express

import express from 'express';
import swaggerUi from 'swagger-ui-express';
import swaggerJsdoc from 'swagger-jsdoc';

const app = express();

const options = {
  definition: {
    openapi: '3.0.0',
    info: {
      title: 'Sample API',
      version: '1.0.0'
    }
  },
  apis: ['./routes/*.js']
};

const swaggerSpec = swaggerJsdoc(options);

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));

app.listen(3000);

A A web page showing interactive API documentation with endpoints from './routes/*.js' files.

B A JSON file download of the OpenAPI specification.

C A blank page because no routes are defined in the Express app.

D An error message because swaggerJsdoc is missing required fields.

💡 Hint

Think about what swaggerUi.serve and swaggerUi.setup do with the swaggerSpec object.

The swaggerJsdoc generates the OpenAPI spec from the specified files. swaggerUi.serve and swaggerUi.setup serve an interactive web page at '/api-docs' showing the API docs.

📝 Syntax

intermediate

Which option correctly defines a basic OpenAPI info object in swagger-jsdoc?

You want to define the API title and version in swagger-jsdoc options. Which snippet is syntactically correct?

A "info: { 'title': 'API', 'version': 1.0.0 }"

B "info: { title: 'API', version: 1.0 }"

C "info: { title: 'API', version: '1.0.0' }"

D "info: { title: API, version: '1.0.0' }"

💡 Hint

Check the quotes around strings and the version format.

The title and version must be strings. Option C correctly uses strings for both keys and values. Option C has version as a number without quotes, which is invalid. Option C uses a number 1.0 instead of string '1.0.0'. Option C misses quotes around API string.

🔧 Debug

advanced

Why does this Swagger UI setup show an empty page?

This Express app uses swagger-ui-express and swagger-jsdoc but the Swagger UI page is empty. What is the likely cause?

Express

import express from 'express';
import swaggerUi from 'swagger-ui-express';
import swaggerJsdoc from 'swagger-jsdoc';

const app = express();

const options = {
  definition: {
    openapi: '3.0.0',
    info: {
      title: 'Empty API',
      version: '1.0.0'
    }
  },
  apis: ['./nonexistent/*.js']
};

const swaggerSpec = swaggerJsdoc(options);

app.use('/docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));

app.listen(3000);

A The 'apis' path './nonexistent/*.js' does not match any files, so no endpoints are documented.

B The swaggerUi.setup function requires a second argument with custom CSS to display content.

C The swaggerJsdoc options object is missing the 'servers' property.

D The Express app is missing a route handler for '/docs'.

💡 Hint

Check if the 'apis' pattern points to existing files with JSDoc comments.

swagger-jsdoc reads JSDoc comments from files matching the 'apis' pattern. If no files match, the generated spec has no paths, so Swagger UI shows an empty page.

❓ state_output

advanced

What is the value of 'swaggerSpec.info.title' after running this code?

Given this swagger-jsdoc options object, what is the value of the title property in the generated swaggerSpec.info?

Express

const options = {
  definition: {
    openapi: '3.0.0',
    info: {
      title: 'My API',
      version: '2.0.0',
      description: 'API description here'
    }
  },
  apis: []
};

const swaggerSpec = swaggerJsdoc(options);

// What is swaggerSpec.info.title?

A '2.0.0'

B 'API description here'

C undefined

D 'My API'

💡 Hint

Look inside the 'definition' object under 'info'.

The 'title' property is set to 'My API' inside the 'info' object. swaggerJsdoc copies this into swaggerSpec.info.title.

🧠 Conceptual

expert

Which option best describes the role of 'swagger-jsdoc' in an Express app?

In an Express app using Swagger/OpenAPI, what is the main purpose of the 'swagger-jsdoc' package?

A It serves the Swagger UI web interface to display API documentation.

B It generates an OpenAPI specification object by parsing JSDoc comments in source files.

C It validates incoming API requests against the OpenAPI schema.

D It automatically generates Express route handlers from the OpenAPI spec.

💡 Hint

Think about what swagger-jsdoc does with your code comments.

swagger-jsdoc reads specially formatted JSDoc comments in your source files and produces a JSON OpenAPI spec object. It does not serve UI or validate requests.