Updating spin test page and including second example in the process

[tpmccallum]

Content must go through a pre-merge checklist.

Pre-Merge Content Checklist

This documentation has been checked to ensure that:

• [x] The title, template, and date are all set
• [x] Does this PR have a new menu item (anywhere in templates/*.hbs files) that points to a document .md that is set to publish in the future? If so please only publish the .md and .hbs changes in real-time (otherwise there will be a menu item pointing to a .md file that does not exist)
• [x] File does not use CRLF, but uses plain LF (hint: use cat -ve <filename> | grep $'\r' | wc -l and expect 0 as a result)
• [x] Has passed bart check
• [x] Has been manually tested by running in Spin/Bartholomew (hint: use PREVIEW_MODE=1 and run npm run styles to update styling)
• [x] Headings are using Title Case
• [x] Code blocks have the programming language set to properly highlight syntax and the proper copy directive
• [x] Have tested with npm run test and resolved all errors
• [x] Relates to an existing (potentially outdated) blog article? If so please add URL in blog to point to this content.

[tpmccallum]

Had to add the package lock json files back, sorry. The build failed without new versions of them as part of this pr. Not entirely sure if we can add them both the the .gitignore file or if this will cause future problems.

[itowlson]

We shouldn't gitignore them. I guess this is just a random wonder of NPM,

[karthik2804]

@itowlson it is an artifact of npm install instead of npm ci. npm insatll does not respect the lockfile and upgrades dependencies as long as they satisfy the requirements in package.json. npm ci on the other hand respects the lockfile.