CodePen Components

& Jasmine unit testing.

CodePen Components



  • Whilst developing my Presentation Generators.

    • Adding basic animations... Filp, Slide...
    • Created own JavaScript Widgets.
    • Wanted to allow users to create & share.
  • How can I harness Code My UI. 🤔

  • Competitors like PowerPoint have finite number of built in animations.

  • With CodePen Components we have infinite.

Component make up




<codepen-component user="..." pen="...">
    <span slot="menu-item">
        <span slot="sub-item">


<ul class="cpc-root">
            <li><slot name="sub-item">Sub</slot></li>
            <li class="cpc-ignore">Example</li>


  • Standard V1.
    • Only in FireFox and Chrome.
  • Using reactions to init code.
    • connectedCallback... But no created callback.
  • No way to query selector inside shadow DOM.

Next time you create a CodePen.

Don't forget the slot! 🤦‍♂

Jasmine Unit Tests


  • Jasmine is a testing frame work and runner.
    • Batteries included.
  • Behavioural Driven Design (BDD).
    • Describe a group of test, what it should do.

describe("A suite is just a function", function() {
  var a;

  it("and so is a spec", function() {
    a = true;


Test Explorer

  • Extension for VS Code.
  • Detects Jasmine tests to run.

Note: To use breakpoints tests should be written in JavaScript.

Mocking and Injecting

  • CodePen Components uses jQuery.
    • Each Unit needs to be tested separately.
    • jQuery needs to be injected into each unit.
  • Use jsdom to 'mock' the browser DOM.
    • 'Inject' into constructor.

That's all folks!

Take a look at some code!

© Luke O'Brien 2019