How to use where clause in Knex
Create refunds with Stripe
Load HTML with Cheerio
How to send POST request with Axios
Find intersection of array in Lodash
Powered by Official white Bloop logo with a period

Terms / Privacy / Search / Support

  • import {
      Component,
      OnInit,
      Self,
      SkipSelf,
    } from "@angular/core";
    import {
      BROWSER_STORAGE,
      BrowserStorageService,
    } from "./storage.service";
    
    @Component({
      selector: "app-storage",
      template: `
        Open the inspector to see the local/session storage
        keys:
    
        

    Session Storage

    Local Storage

    `, providers: [ BrowserStorageService, { provide: BROWSER_STORAGE, useFactory: () => sessionStorage, }, ], }) export class StorageComponent implements OnInit { constructor( @Self() private sessionStorageService: BrowserStorageService, @SkipSelf() private localStorageService: BrowserStorageService ) {} ngOnInit() {} setSession() { this.sessionStorageService.set( "hero", "Dr Nice - Session" ); } setLocal() { this.localStorageService.set("hero", "Dr Nice - Local"); } }
    Docs
    0
  • import {
      Component,
      OnInit,
      Self,
      SkipSelf,
    } from "@angular/core";
    import {
      BROWSER_STORAGE,
      BrowserStorageService,
    } from "./storage.service";
    
    @Component({
      selector: "app-storage",
      template: `
        Open the inspector to see the local/session storage
        keys:
    
        

    Session Storage

    Local Storage

    `, providers: [ BrowserStorageService, { provide: BROWSER_STORAGE, useFactory: () => sessionStorage, }, ], }) export class StorageComponent implements OnInit { constructor( @Self() private sessionStorageService: BrowserStorageService, @SkipSelf() private localStorageService: BrowserStorageService ) {} ngOnInit() {} setSession() { this.sessionStorageService.set( "hero", "Dr Nice - Session" ); } setLocal() { this.localStorageService.set("hero", "Dr Nice - Local"); } }
    Docs
    0
  • test("loads items eventually", async () => {
      // Click button
      fireEvent.click(getByText(node, "Load"));
    
      // Wait for page to update with query text
      const items = await findByText(node, /Item #[0-9]: /);
      expect(items).toHaveLength(10);
    });
    
    Docs
    0
  • test("movie title appears", async () => {
      // element is initially not present...
    
      // wait for appearance inside an assertion
      await waitFor(() => {
        expect(getByText("the lion king")).toBeInTheDocument();
      });
    });
    
    Docs
    0
  • const puppeteer = require("puppeteer");
    const {
      getDocument,
      queries,
      waitFor,
    } = require("pptr-testing-library");
    
    const { getByTestId, getByLabelText } = queries;
    
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    
    // Grab ElementHandle for document
    const $document = await getDocument(page);
    // Your favorite query methods are available
    const $form = await getByTestId($document, "my-form");
    // returned elements are Puppeteer ElementHandles too!
    const $email = await getByLabelText($form, "Email");
    // interact with puppeteer like usual
    await $email.type("pptr@example.com");
    // waiting works too!
    await waitFor(() => getByText("Loading..."));
    
    Docs
    0
  • await fireEvent.click(getByText("Click me"));
    
    Docs
    0
  • // test-utils.js
    const domTestingLib = require("@testing-library/dom");
    const { queryHelpers } = domTestingLib;
    
    export const queryByTestId =
      queryHelpers.queryByAttribute.bind(null, "data-test-id");
    export const queryAllByTestId =
      queryHelpers.queryAllByAttribute.bind(
        null,
        "data-test-id"
      );
    
    export function getAllByTestId(container, id, ...rest) {
      const els = queryAllByTestId(container, id, ...rest);
      if (!els.length) {
        throw queryHelpers.getElementError(
          `Unable to find an element by: [data-test-id="${id}"]`,
          container
        );
      }
      return els;
    }
    
    export function getByTestId(...args) {
      // result >= 1
      const result = getAllByTestId(...args);
      if (result.length > 1) {
        throw queryHelpers.getElementError(
          `Found multiple elements with the [data-test-id="${id}"]`,
          container
        );
      }
      return result[0];
    }
    
    // re-export with overrides
    module.exports = {
      ...domTestingLib,
      getByTestId,
      getAllByTestId,
      queryByTestId,
      queryAllByTestId,
    };
    
    Docs
    0
  • import {
      Component,
      EventEmitter,
      HostBinding,
      Input,
      Output,
    } from "@angular/core";
    import {
      animate,
      state,
      style,
      transition,
      trigger,
    } from "@angular/animations";
    
    @Component({
      selector: "my-popup",
      template: `
        Popup: {{ message }}
        
      `,
      animations: [
        trigger("state", [
          state(
            "opened",
            style({ transform: "translateY(0%)" })
          ),
          state(
            "void, closed",
            style({ transform: "translateY(100%)", opacity: 0 })
          ),
          transition("* => *", animate("100ms ease-in")),
        ]),
      ],
      styles: [
        `
          :host {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: #009cff;
            height: 48px;
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid black;
            font-size: 24px;
          }
    
          button {
            border-radius: 50%;
          }
        `,
      ],
    })
    export class PopupComponent {
      @HostBinding("@state")
      state: "opened" | "closed" = "closed";
    
      @Input()
      get message(): string {
        return this._message;
      }
      set message(message: string) {
        this._message = message;
        this.state = "opened";
      }
      private _message = "";
    
      @Output()
      closed = new EventEmitter();
    }
    
    Docs
    0
  • export class ItemOutputComponent {
      @Output() newItemEvent = new EventEmitter();
    
      addNewItem(value: string) {
        this.newItemEvent.emit(value);
      }
    }
    
    Docs
    0
  • export class SizerComponent {
      @Input() size!: number | string;
      @Output() sizeChange = new EventEmitter();
    
      dec() {
        this.resize(-1);
      }
      inc() {
        this.resize(+1);
      }
    
      resize(delta: number) {
        this.size = Math.min(
          40,
          Math.max(8, +this.size + delta)
        );
        this.sizeChange.emit(this.size);
      }
    }
    
    Docs
    0
  • @Output() newItemEvent = new EventEmitter();
    Docs
    0
  • @Component({
      selector: "app-zippy",
      template: `
        
    Toggle
    `, }) export class ZippyComponent { visible = true; @Output() open = new EventEmitter(); @Output() close = new EventEmitter(); toggle() { this.visible = !this.visible; if (this.visible) { this.open.emit(null); } else { this.close.emit(null); } } }
    Docs
    0
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples