CodePen Components

& Jasmine unit testing.

obrienluk89@gmail.com
@LukeTObrien

CodePen Components

What?

Why?

  • 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

Template

Styles

Logic

<codepen-component user="..." pen="...">
    <span slot="menu-item">
        <a>Flowers</a>
        <span slot="sub-item">
            <a>Violet</a>
        </span>
    </span>
    ...
</codepen-component>

👇

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

Caveat

  • 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

What?

  • 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;

    expect(a).toBe(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