onenote-local-dev-loop

name	onenote-local-dev-loop
description	Set up a local development loop for OneNote integrations with mock Graph API responses. Use when developing OneNote features without Azure credentials or to avoid rate limits during development. Trigger with "onenote local dev", "onenote mock", "onenote testing setup".
allowed-tools	Read, Write, Edit, Bash(npm:*), Bash(pip:*), Grep
version	1.6.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","onenote","microsoft"]
compatibility	Designed for Claude Code

OneNote Local Dev Loop

Overview

Testing OneNote integrations typically requires Azure AD credentials and live Graph API calls, which means authentication friction on every dev session and risk of hitting the 600 req/60s rate limit during rapid iteration. This skill sets up a local development loop with mock Graph responses so you can develop and test OneNote features without Azure credentials, without rate limits, and with instant feedback.

The mock layer intercepts HTTP calls to graph.microsoft.com and returns realistic fixture data, including the XHTML output format that differs from input format. You can switch between mock and live Graph with a single environment variable.

Prerequisites

• Node.js 18+ or Python 3.10+
• Familiarity with your project's test framework (vitest/jest for Node, pytest for Python)
• Optional: completed onenote-install-auth for live mode switching

Instructions

Step 1: Project Structure

my-onenote-app/
├── .env                          # GRAPH_MODE=mock or GRAPH_MODE=live
├── .env.example                  # Template (commit this, not .env)
├── src/
│   ├── client.ts                 # Graph client factory (mock/live switching)
│   ├── onenote.ts                # Business logic (testable)
│   └── types.ts                  # OneNote type definitions
├── tests/
│   ├── fixtures/
│   │   ├── notebooks.json        # Mock notebook list response
│   │   ├── sections.json         # Mock section list response
│   │   ├── pages.json            # Mock page list response
│   │   ├── page-content.html     # Mock page HTML (output format)
│   │   └── error-responses.json  # Mock error responses for testing
│   ├── mocks/
│   │   └── graph-handlers.ts     # MSW request handlers
│   └── onenote.test.ts           # Unit tests
├── package.json
└── tsconfig.json

Step 2: Mock Graph API Server (TypeScript with MSW)

MSW (Mock Service Worker) intercepts HTTP requests at the network level, so your production code does not need any changes to work with mocks.

// tests/mocks/graph-handlers.ts
import { http, HttpResponse } from "msw";

const BASE = "https://graph.microsoft.com/v1.0";

// Import fixture data
import notebooksFixture from "../fixtures/notebooks.json";
 sectionsFixture  ;
 pagesFixture  ;
 { readFileSync }  ;
 { join }  ;

 pageContentFixture = (
  (__dirname, ),
  
);

  graphHandlers = [
  
  http.(,  {
     .(notebooksFixture);
  }),

  
  http.(,  ({ request }) => {
     body = ( request.())  { :  };
     .(
      {
        : ,
        : body.,
        :  ().(),
        :  ().(),
        : ,
        : ,
        : ,
        : ,
      },
      { :  }
    );
  }),

  
  http.(,  {
     .(sectionsFixture);
  }),

  
  http.(
    ,
     ({ request }) => {
       body = ( request.())  { :  };
       .(
        {
          : ,
          : body.,
          :  ().(),
          : ,
        },
        { :  }
      );
    }
  ),

  
  http.(,  {
     .(pagesFixture);
  }),

  
  http.(,  ({ request }) => {
     html =  request.();
     titleMatch = html.();
     .(
      {
        : ,
        : titleMatch?.[] ?? ,
        :  ().(),
        : ,
      },
      { :  }
    );
  }),

  
  http.(,  {
      (pageContentFixture, {
      : { :  },
    });
  }),

  
  http.(,  {
      (, { :  });
  }),

  
  http.(,  {
      (
      .({ : { : , :  } }),
      {
        : ,
        : { : , :  },
      }
    );
  }),
];