KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta Join TestMu Conference

How to use instanceEl method in ng-mocks

Best JavaScript code snippet using ng-mocks

Canvas.ts

Source:Canvas.ts

1import * as AFRAME from 'aframe';2import * as $ from 'jquery';3import { objects, VECTOR } from '../../Objects';4import { Vector3, Math as THREEMath, Euler } from 'three';5import { resize, recenter } from '../../utils/SizeConstraints';6import { scene, Node, ObjNode } from 'frp-backend';7import { googlePoly } from '../../utils/GooglePoly';8import { containerID } from '../controllers/absorb-controller';9import { savedContainerId, instantiateContainer, ctnWidth, ctnDepth, savedInPorts, savedOutPorts } from '../frp/operators/container';10import { createOnePlug } from '../utils/operator-model';11import { getColorsByType } from '../../utils/TypeVis';12export let canvasSize = {13    width: 1.6, 14    height: 1,15    depth: 0.0216};17export const menuSize = {18    width: 0.7,19    height: 1,20    depth: 0.0221}22export const buttonSize = {23    width: 0.1,24    height: 0.125}26export const itemSize = {27    width: 0.2,28    height: 0.229}30export let canvasConstraint = {31    negx: -canvasSize.width/2,32    posx: canvasSize.width/2,33    negy: -canvasSize.height/2,34    posy: canvasSize.height/2,35    constz: itemSize.width/236}37export const canvasColor = {38    background: '#ececec',39    unselected: '#ffffff',40    hovered: '#19b5fe',41    selected: '#0078d4'42}43export const itemColor = {44    unselected: '#3CBCFC',45    hovered: '#8C2C0D',46    selected: '#EC5C2D'47}48export const objColor = {49    unselected: '#3CBCFC',50    hovered: '#0078F8'51}52export interface Item {53    name: string,54    type: string,55    itemUrl: string,56    inputs?: {name: string, type: string, behavior: string}[],57    outputs?: {name: string, type: string, behavior: string}[]58}59export const itemLimit: number = 12;60export const itemOffset: Vector3 = new Vector3(-menuSize.width/2 + buttonSize.width + itemSize.width/2, menuSize.height/2 - buttonSize.height - itemSize.height/2, itemSize.width/2);61const toolBox = ['Operators', 'Data', 'Avatars', 'Canvas'];62let canvases = ['Canvas#1'];63let pageIdx: number = 0;64let currentCanvas: string = 'canvas-world';65export const canvasGenerator = AFRAME.registerComponent('canvas-generator', {66    init: function(): void {67        this.mainCam = document.querySelector('#head');68        const canvasEl: any = document.createElement('a-entity');69        const menuEl: any = document.createElement('a-entity');70        const desEl: any = document.createElement('a-entity');71        canvasEl.setAttribute('id', 'canvas-world');72        menuEl.setAttribute('id', 'menu-world');73        desEl.setAttribute('id', 'description-world');74        initCanvasBg(canvasEl, this.el);75        canvasEl.addEventListener('clicked', (event) => {76            const canvas2El: any = document.getElementById('canvas-world-2');77            canvas2El.object3D.position.set(canvas2El.object3D.position.x, canvas2El.object3D.position.y, canvasEl.object3D.position.z);78            canvasEl.object3D.position.set(canvasEl.object3D.position.x, canvasEl.object3D.position.y, canvasEl.object3D.position.z + 0.2);79            currentCanvas = 'canvas-world';80        });81        initMenu(menuEl, this.el);82        initDes(desEl, menuEl);83        loadItems(menuEl, 'button-0');84        // Event Listener to open and close menu.85        this.el.object3D.visible = false;86        this.el.addEventListener('showcanvas', (event) => {87            this.el.object3D.visible = !this.el.object3D.visible;88            const edges: any = document.querySelector('#edges');89            edges.object3D.visible = this.el.object3D.visible;90            if (this.el.object3D.visible) {91                this.mainCam.object3D.updateMatrix();92                this.mainCam.object3D.updateWorldMatrix();93                const position = this.mainCam.object3D.localToWorld(new Vector3(0.8, 0, -1.5));94                const camPosition = this.mainCam.object3D.localToWorld(new Vector3(0, 0, 0));95                const rotation = this.mainCam.object3D.rotation.y;96                97                this.el.object3D.position.copy(position);98                this.el.object3D.setRotationFromEuler(new Euler(0, rotation, 0));99                this.el.object3D.position.set(position.x, camPosition.y - 0.5, position.z);100                // Show all the attributes101                const els = document.querySelectorAll('.attribute');102                els.forEach((el: any) => {103                    el.object3D.visible = true;104                });105                const el2s = document.querySelectorAll('.assist-obj');106                el2s.forEach((el2: any) => {107                    el2.object3D.visible = true;108                });109            }110            else {111                // Hide all the attributes112                const els = document.querySelectorAll('.attribute');113                els.forEach((el: any) => {114                    el.object3D.visible = false;115                });116                const el2s = document.querySelectorAll('.assist-obj');117                el2s.forEach((el2: any) => {118                    el2.object3D.visible = false;119                });120            }121        });122    }123});124/**125 * Initiate a plane and specify parameters126 */127function initCanvasBg(canvasEl: any, parentEl: any): void {   128    canvasEl.setAttribute('geometry', {129        primitive: 'box',130        width: canvasSize.width,131        height: canvasSize.height,132        depth: canvasSize.depth133    });134    canvasEl.setAttribute('material', {135        color: canvasColor.background,136        transparent: true,137        opacity: 0.3138    });139    canvasEl.classList.add('ui');140    parentEl.appendChild(canvasEl);141    const expandEl: any = document.createElement('a-entity');142    expandEl.setAttribute('id', `canvas-expand`);143    expandEl.setAttribute('geometry', {144            primitive: 'plane',145            width: buttonSize.width * 0.9,146            height: buttonSize.height * 0.9147        });148        expandEl.setAttribute('material', {149            src: `#expand_icon`,150            color: canvasColor.unselected,151            side: 'double',152            transparent: true153        });154        // Place the button155        canvasEl.appendChild(expandEl);156        expandEl.object3D.position.set(canvasSize.width / 2 - buttonSize.width / 2, canvasSize.height / 2 - buttonSize.height / 2, canvasSize.depth / 2 + 0.001);157        // Add reactions to the button158        expandEl.classList.add('ui');159        expandEl.addEventListener('raycaster-intersected', (event) => {160            expandEl.setAttribute('material', 'color', canvasColor.hovered);161            setDescription('expand canvas');162        });163        expandEl.addEventListener('raycaster-intersected-cleared', (event) => {164            expandEl.setAttribute('material', 'color', canvasColor.unselected);165        });166        expandEl.addEventListener('clicked', (event) => {167            expandEl.setAttribute('material', 'color', canvasColor.selected);168            canvasEl.object3D.position.set(canvasEl.object3D.position.x + canvasSize.width / 2, 0, 0);169            canvasSize.width *= 2;170            canvasSize.height *= 2;171            canvasEl.setAttribute('geometry', {172                primitive: 'box',173                width: canvasSize.width,174                height: canvasSize.height,175                depth: canvasSize.depth176            });177            canvasConstraint = {178                negx: -canvasSize.width/2,179                posx: canvasSize.width/2,180                negy: -canvasSize.height/2,181                posy: canvasSize.height/2,182                constz: itemSize.width/2183            };184            expandEl.object3D.position.set(canvasSize.width / 2 - buttonSize.width / 2, canvasSize.height / 2 - buttonSize.height / 2, canvasSize.depth / 2 + 0.001);185        });186        expandEl.addEventListener('clicked-cleared', (event) => {187            expandEl.setAttribute('material', 'color', canvasColor.unselected);188        });    189}190/**191 * Initiate a menu panel for selecting items192 * @param parentEl The parent entity193 */194function initMenu(menuEl: any, parentEl: any): void {195    menuEl.setAttribute('geometry', {196        primitive: 'box',197        width: menuSize.width,198        height: menuSize.height,199        depth: menuSize.depth200    });201    menuEl.setAttribute('material', {202        color: canvasColor.background,203        transparent: true,204        opacity: 0.3205    });206    const offset: number = canvasSize.width/2 + menuSize.width/2 + 0.1;207    menuEl.object3D.position.set(-offset, 0, 0);208    parentEl.appendChild(menuEl);209    initButtons(menuEl);210}211/**212 * Initiate submenu buttons for switching objects213 * @param menuEl The menu entity214 */215function initButtons(menuEl: any): void {216    const offset: Vector3 = new Vector3(-menuSize.width/2 + buttonSize.width/2, menuSize.height/2 - buttonSize.height/2, menuSize.depth + 0.001);217    toolBox.forEach((key: string, i: number) => {218        const bnEl: any = document.createElement('a-entity');219        bnEl.setAttribute('id', `button-${i}`);220        bnEl.setAttribute('geometry', {221            primitive: 'plane',222            width: buttonSize.width * 0.9,223            height: buttonSize.height * 0.9224        });225        bnEl.setAttribute('material', {226            src: `#${key}_icon`,227            color: canvasColor.unselected,228            side: 'double',229            transparent: true230        });231        console.log(`#${key}_icon`);232        // Place the button233        menuEl.appendChild(bnEl);234        bnEl.object3D.position.set(offset.x, offset.y - buttonSize.height * i, offset.z);235        // Add reactions to the button236        bnEl.classList.add('ui');237        bnEl.addEventListener('raycaster-intersected', (event) => {238            bnEl.setAttribute('material', 'color', canvasColor.hovered);239            setDescription(key);240        });241        bnEl.addEventListener('raycaster-intersected-cleared', (event) => {242            bnEl.setAttribute('material', 'color', canvasColor.unselected);243        });244        bnEl.addEventListener('clicked', (event) => {245            bnEl.setAttribute('material', 'color', canvasColor.selected);246            loadItems(menuEl, bnEl.getAttribute('id'));247        });248        bnEl.addEventListener('clicked-cleared', (event) => {249            bnEl.setAttribute('material', 'color', canvasColor.unselected);250        });251    });252    const prevEl: any = document.createElement('a-entity');253    prevEl.setAttribute('id', `canvas-prev`);254    prevEl.setAttribute('geometry', {255            primitive: 'plane',256            width: buttonSize.width * 0.9,257            height: buttonSize.height * 0.9258        });259        prevEl.setAttribute('material', {260            src: `#prev_icon`,261            color: canvasColor.unselected,262            side: 'double',263            transparent: true264        });265        // Place the button266        menuEl.appendChild(prevEl);267        prevEl.object3D.position.set(offset.x + buttonSize.width, offset.y, offset.z);268        // Add reactions to the button269        prevEl.classList.add('ui');270        prevEl.addEventListener('raycaster-intersected', (event) => {271            prevEl.setAttribute('material', 'color', canvasColor.hovered);272            setDescription('last page');273        });274        prevEl.addEventListener('raycaster-intersected-cleared', (event) => {275            prevEl.setAttribute('material', 'color', canvasColor.unselected);276        });277        prevEl.addEventListener('clicked', (event) => {278            prevEl.setAttribute('material', 'color', canvasColor.selected);279            if (pageIdx == 0)280                loadItems(menuEl, 'button-0', pageIdx);281            else282                loadItems(menuEl, 'button-0', (--pageIdx) * 12);283        });284        prevEl.addEventListener('clicked-cleared', (event) => {285            prevEl.setAttribute('material', 'color', canvasColor.unselected);286        });287        const nextEl: any = document.createElement('a-entity');288        nextEl.setAttribute('id', `canvas-next`);289        nextEl.setAttribute('geometry', {290            primitive: 'plane',291            width: buttonSize.width * 0.9,292            height: buttonSize.height * 0.9293        });294        nextEl.setAttribute('material', {295            src: `#next_icon`,296            color: canvasColor.unselected,297            side: 'double',298            transparent: true299        });300        // Place the button301        menuEl.appendChild(nextEl);302        nextEl.object3D.position.set(menuSize.width / 2 - buttonSize.width, offset.y, offset.z);303        // Add reactions to the button304        nextEl.classList.add('ui');305        nextEl.addEventListener('raycaster-intersected', (event) => {306            nextEl.setAttribute('material', 'color', canvasColor.hovered);307            setDescription('next page');308        });309        nextEl.addEventListener('raycaster-intersected-cleared', (event) => {310            nextEl.setAttribute('material', 'color', canvasColor.unselected);311        });312        nextEl.addEventListener('clicked', (event) => {313            nextEl.setAttribute('material', 'color', canvasColor.selected);314            loadItems(menuEl, 'button-0', (++pageIdx) * 12);315        });316        nextEl.addEventListener('clicked-cleared', (event) => {317            nextEl.setAttribute('material', 'color', canvasColor.unselected);318        });319}320/**321 * Initiate menu description322 * @param desEl Text entity323 * @param parentEl Parent entity to attach to324 */325function initDes(desEl: any, parentEl: any): void {326    parentEl.appendChild(desEl);327    desEl.setAttribute('text', {328        align: 'center',329        wrapCount: 25,330    });331    desEl.object3D.position.set(0, menuSize.height/2 - buttonSize.height/2, menuSize.depth);332}333/**334 * Load items based on selected submenu335 * @param menuEl The menu entity as parent entity to attach items336 * @param buttonID The ID of submenu button337 * @param itemIndex Starting intem index since each page can only display 9 items338 */339export function loadItems(menuEl: any, buttonID: string, itemIndex: number = 0, pageToken: string = ''): void {340    // Clear items on the current page if there are any.341    const oldItemList: any = document.querySelector('#item-list');342    if (oldItemList) oldItemList.parentNode.removeChild(oldItemList);343    // Extract submenu's name based on buttonID344    const submenuID: number = Number(buttonID.split('-')[1]);345    const submenuName: string = toolBox[submenuID];346    const itemList: any = document.createElement('a-entity');347    itemList.setAttribute('id', 'item-list');348    menuEl.appendChild(itemList);349    let i = 0;350    for (; i < itemLimit; i++) {351        if (itemIndex + i >= objects[submenuName].length) break;352        // Fetch the Item from objects353        const item: Item = objects[submenuName][itemIndex + i];354        const itemEl: any = document.createElement('a-entity');355        itemEl.setAttribute('id', item.name);356        if (item.type === 'primitive') {357            // Set up item geometry and material358            itemEl.setAttribute('geometry', 'primitive', item.name);359            itemEl.setAttribute('material', {360                color: itemColor.unselected,361                transparent: true,362                opacity: 0.8363            });364            // Resize the model into item size365            itemEl.addEventListener('loaded', () => {366                resize(itemEl, itemSize.width);367            });368        }369        else if (item.type === 'img') {370            // Set up item geometry and material371            itemEl.setAttribute('geometry', 'primitive', 'plane');372            itemEl.setAttribute('material', {373                src: `#Plus_icon`,374                color: canvasColor.unselected,375                side: 'double',376                transparent: true377            });378            // Resize the model into item size379            itemEl.addEventListener('loaded', () => {380                resize(itemEl, itemSize.width);381            });382        }383        else if (item.type === 'data') {384            itemEl.setAttribute('geometry', {385                primitive: 'cone',386                height: 0.06,387                radiusTop: 0.02,388                radiusBottom: 0.04389            });390            itemEl.setAttribute('material', {391                color: itemColor.unselected,392                transparent: true,393                opacity: 0.8394            });395            396            // Resize the model into item size397            itemEl.addEventListener('loaded', () => {398                resize(itemEl, itemSize.width);399            });400        }401        else {402            // Set up item geometry and material403            itemEl.setAttribute('obj-model', {404                obj: item.itemUrl405            });406            itemEl.setAttribute('material', {407                color: itemColor.unselected,408                transparent: true,409                opacity: 0.8410            });411            // Resize the model into item size412            itemEl.addEventListener('model-loaded', () => {413                resize(itemEl, itemSize.width);414            });415        }416        // Place the item417        itemList.appendChild(itemEl);418        itemEl.object3D.position.set(itemOffset.x +  (i%3) * itemSize.width, itemOffset.y - Math.floor(i/3) * itemSize.height, itemOffset.z);419        // Add reaction to the item.420        itemEl.classList.add('ui');421        itemEl.addEventListener('raycaster-intersected', (event) => {422            itemEl.setAttribute('material', 'color', itemColor.hovered);423            setDescription(item.name);424        });425        itemEl.addEventListener('raycaster-intersected-cleared', (event) => {426            itemEl.setAttribute('material', 'color', itemColor.unselected);427        });428        itemEl.addEventListener('clicked', (event) => {429            itemEl.setAttribute('material', 'color', itemColor.selected);430            // Use different methods of visualization when the item is an operator431            // 0: Operators; 1: Data; 2: Avatars;432            if (submenuID == 0) // 0: Operators433                instantiateOp(item);434            else if (submenuID == 1) // 1: Data435                instantiateData(item);436            else if (submenuID == 2) // 2: Avatars437                instantiateObj(item, submenuID);438            else if (submenuID == 3 && item.type === 'img') {439                const canvas2El: any = document.createElement('a-entity');440                canvas2El.setAttribute('id', 'canvas-world-2');441                const canvas1El: any = document.getElementById('canvas-world');442                const parent: any = document.getElementById('canvas');443                initCanvasBg(canvas2El, parent);444                canvas2El.object3D.position.set(canvas1El.object3D.position.x + canvasSize.width + 0.1, canvas1El.object3D.position.y, canvas1El.object3D.position.z);445                canvas2El.addEventListener('clicked', (event) => {446                    canvas1El.object3D.position.set(canvas1El.object3D.position.x, canvas1El.object3D.position.y, canvas2El.object3D.position.z);447                    canvas2El.object3D.position.set(canvas2El.object3D.position.x, canvas2El.object3D.position.y, canvas2El.object3D.position.z + 0.2);448                    currentCanvas = 'canvas-world-2';449                });450            }451        });452        itemEl.addEventListener('clicked-cleared', (event) => {453            itemEl.setAttribute('material', 'color', itemColor.unselected);454        });455    }456    if (submenuID == 3) {457    }458    if (submenuID == 4) {459        if (savedContainerId > 0) {460            const itemEl: any = document.createElement('a-entity');461            itemEl.setAttribute('id', 'op-container-0');462            // Place the item463            itemList.appendChild(itemEl);464    465            itemEl.setAttribute('obj-model', {466                obj: "#processor-obj"467            });468            itemEl.setAttribute('material', {469                color: itemColor.unselected,470                transparent: true,471                opacity: 0.8472            });473    474            // Resize the model into item size475            itemEl.addEventListener('model-loaded', () => {476                resize(itemEl, itemSize.width);477            });478            479            // Place the model.480            itemEl.object3D.position.set(itemOffset.x +  (i%3) * itemSize.width, itemOffset.y - Math.floor(i/3) * itemSize.height, itemOffset.z);481             // Add reaction to the item.482            itemEl.classList.add('ui');483            itemEl.addEventListener('raycaster-intersected', (event) => {484                itemEl.setAttribute('material', 'color', itemColor.hovered);485                setDescription('op-container-0');486            });487            itemEl.addEventListener('raycaster-intersected-cleared', (event) => {488                itemEl.setAttribute('material', 'color', itemColor.unselected);489            });490            itemEl.addEventListener('clicked', (event) => {491                itemEl.setAttribute('material', 'color', itemColor.selected);492                instantiateCtn();493            });494            itemEl.addEventListener('clicked-cleared', (event) => {495                itemEl.setAttribute('material', 'color', itemColor.unselected);496            });497        }498    }499}500/**501 * Set the text of description panel on the menu502 * @param des Text value503 */504function setDescription(des: string): void {505    const desEl: any = document.querySelector('#description-world');506    desEl.setAttribute('text', 'value', des);507}508function instantiateCtn(): void {509    const opEl: any = document.createElement('a-entity');510    const canvas: any = document.querySelector('#canvas-world');511    canvas.appendChild(opEl);512    // Add a new node into the scene and assign the id to the entity513    // opEl.setAttribute('op-node-update', {514    //     name: item.name,515    //     inputs: item.inputs,516    //     outputs: item.outputs517    // });518    // Initiate `operator-model` component519    opEl.setAttribute('geometry', {520        primitive: 'box',521        width: ctnWidth,522        height: 0.3,523        depth: ctnDepth524    });525    opEl.setAttribute('material', {526        color: '#FCA044',527        transparent: true,528        opacity: 0.5529    });530    // Place the model531    opEl.object3D.position.set(canvasConstraint.negx + itemSize.width/2, canvasConstraint.posy - itemSize.height/2, itemSize.width/2);532    // Initiate inputs.533    const lineHeight: number = 0.1;534    const ctnHeight: number = lineHeight * Math.max(savedInPorts.length, savedOutPorts.length);535    let i: number = 0;536    for (const inPort of savedInPorts) {537        const name: string = inPort.name;538        const type: string = inPort.type;539        const behavior: string = inPort.behavior;540        // Create a plug and then save it into the array.541        const plug: any = createOnePlug(name, type, behavior, -ctnWidth/2, ctnHeight/2 - lineHeight*(i+0.5), true, opEl);542        i++;543    }544    // Initiate output.545    let j: number = 0;546    for (const outPort of savedOutPorts) {547        const name: string = outPort.name;548        const type: string = outPort.type;549        const behavior: string = outPort.behavior;550        // Create a plug and then save it tinto the array.551        const plug: any = createOnePlug(name, type, behavior, ctnWidth/2, ctnHeight/2 - lineHeight*(j+0.5), false, opEl);552        j++;553    }554    // Add reactions when gripping555    opEl.classList.add('canvasObj');556    opEl.classList.add('movable');557    // Add class for identifying operators558    opEl.classList.add('operator');559}560/**561 * Create an instance operator on the canvas after clicking on the item562 * @param item The item563 */564function instantiateOp(item: Item): void {565    const opEl: any = document.createElement('a-entity');566    const canvas: any = document.querySelector('#'+currentCanvas);567    canvas.appendChild(opEl);568    // Add a new node into the scene and assign the id to the entity569    opEl.setAttribute('op-node-update', {570        name: item.name,571        inputs: item.inputs,572        outputs: item.outputs573    });574    // Initiate `operator-model` component575    const functionInputs: Array<string> = new Array<string>();576    const behaviorInputs: Array<string> = new Array<string>();577    const typeInputs: Array<string> = new Array<string>();578    const functionOutputs: Array<string> = new Array<string>();579    const behaviorOutputs: Array<string> = new Array<string>();580    const typeOutputs: Array<string> = new Array<string>();581    item.inputs.forEach((input: {name: string, type: string, behavior: string}) => {582        functionInputs.push(input.name);583        behaviorInputs.push(input.behavior);584        typeInputs.push(input.type);585    });586    item.outputs.forEach((output: {name: string, type: string, behavior: string}) => {587        functionOutputs.push(output.name);588        behaviorOutputs.push(output.behavior);589        typeOutputs.push(output.type);590    });591    opEl.setAttribute('operator-model', {592        functionName: item.name,593        functionInputs: functionInputs,594        functionOutputs: functionOutputs,595        behaviorInputs: behaviorInputs,596        behaviorOutputs: behaviorOutputs,597        typeInputs: typeInputs,598        typeOutputs: typeOutputs599    });600    // Resize the model into item size601    opEl.addEventListener('model-loaded', () => {602        resize(opEl, itemSize.width);603    });604    // Place the model605    opEl.object3D.position.set(canvasConstraint.negx + itemSize.width/2, canvasConstraint.posy - itemSize.height/2, itemSize.width/2);606    // Add reactions when gripping607    opEl.classList.add('canvasObj');608    opEl.classList.add('movable');609    // Add class for identifying operators610    opEl.classList.add('operator');611}612/**613 * Instantiate primitive data types on the panel614 * @param item The itme to initiate615 */616function instantiateData(item: Item): void {617    const instanceEl: any = document.createElement('a-entity');618    const canvas: any = document.querySelector('#canvas-world');619    canvas.appendChild(instanceEl);620    // Set up item geometry and material621    instanceEl.setAttribute('geometry', {622        primitive: 'plane',623        width: 0.2,624        height: 0.08625    });626    instanceEl.setAttribute('material', {627        color: 'white',628        transparent: true,629        roughness: 1,630        opacity: 0.8631    });632    instanceEl.setAttribute('text', {633        align: 'center',634        width: 0.6,635        wrapCount: 12,636        value: '0'637    });638    instanceEl.setAttribute('pmt-val', 'name', item.name);639    640    // Place the model641    instanceEl.object3D.position.set(canvasConstraint.negx + itemSize.width/2, canvasConstraint.posy - itemSize.height/2, itemSize.width/2);642    // Add reactions when gripping643    instanceEl.classList.add('canvasObj');644    instanceEl.classList.add('movable');645    // Add class for identifying objects646    instanceEl.classList.add('data-receiver');647    instanceEl.addEventListener('raycaster-intersected', (event) => {648        // instanceEl.setAttribute('material', 'color', objColor.hovered);649        // setDescription(item.name);650    });651    instanceEl.addEventListener('raycaster-intersected-cleared', (event) => {652        // instanceEl.setAttribute('material', 'color', objColor.unselected);653    });654}655/**656 * Create an instance object on the canvas after clicking on the item657 * @param item The item658 * @param submenuID Current submenuID659 */660function instantiateObj(item: Item, submenuID: number): void {661    const instanceEl: any = document.createElement('a-entity');662    const canvas: any = document.querySelector('#canvas-world');663    canvas.appendChild(instanceEl);664    // Set up item geometry and material665    if (item.type != 'primitive') {666        instanceEl.setAttribute('obj-model', {667            obj: item.itemUrl668        });669        instanceEl.setAttribute('material', {670            color: itemColor.unselected,671            transparent: true,672            opacity: 0.8673        });674        // Resize the model into item size675        instanceEl.addEventListener('model-loaded', () => {676            resize(instanceEl, itemSize.width);677        });678    } else {679        instanceEl.setAttribute('geometry', 'primitive', item.name);680        instanceEl.setAttribute('material', {681            color: objColor.unselected,682            transparent: true,683            opacity: 0.8684        });685        instanceEl.addEventListener('loaded', () => {686            resize(instanceEl, itemSize.width);687        });688    }689    690    // 0: Operators; 1: Data; 2: Avatars691    if ( submenuID === 2 )  {692        instanceEl.setAttribute('avatar-node-update', 'name', item.name);693        // Visualize attributes for objects as well as connectors694        const attrHeight: number = itemSize.height / item.outputs.length;695        const attrWidth: number = 0.08;696        item.outputs.forEach((output: {name: string, type: string, behavior: string}, i: number) => {697            createAttr(instanceEl, output.name, output.behavior, output.type, attrHeight, attrWidth, itemSize.height/2 - attrHeight/2 - (i*attrHeight));698        });699    }700    // Place the model701    instanceEl.object3D.position.set(canvasConstraint.negx + itemSize.width/2, canvasConstraint.posy - itemSize.height/2, itemSize.width/2);702    // Add reactions when gripping703    instanceEl.classList.add('canvasObj');704    instanceEl.classList.add('movable');705    // Add class for identifying objects706    instanceEl.classList.add('data-receiver');707    instanceEl.addEventListener('raycaster-intersected', (event) => {708        instanceEl.setAttribute('material', 'color', objColor.hovered);709        setDescription(item.name);710    });711    instanceEl.addEventListener('raycaster-intersected-cleared', (event) => {712        instanceEl.setAttribute('material', 'color', objColor.unselected);713    });714}715/**716 * Create an attribute for the selected node (Generic Models/Data/Avatars)717 * @param instanceEl The instance entity718 * @param name The label of the attribute719 * @param behavior Whether it's a signal or an event720 * @param attrHeight The geometry height721 * @param attrWidth The geometry width722 * @param posY The position Y of the attribute723 */724function createAttr(instanceEl: any, name: string, behavior: string, type: string, attrHeight: number, attrWidth: number, posY: number = 0): void {725    const attrEl: any = document.createElement('a-entity');726    instanceEl.appendChild(attrEl);727    728    // Set up geometry and material of the attribute729    attrEl.setAttribute('geometry', {730        primitive: 'plane', 731        width: attrWidth,732        height: attrHeight * 0.95733    });734    attrEl.setAttribute('material', {735        color: 'grey',736        side: 'double',737        transparent: true,738        opacity: 0.5739    });740    attrEl.setAttribute('text', {741        value: name,742        side: 'double',743        wrapCount: 9,744        align: 'center'745    });746    // Place the attribute747    attrEl.object3D.position.set(itemSize.width - attrWidth/2, posY, 0);748    // Create only one connector along with their geometries and materials749    const outCon: any = document.createElement('a-entity');750    outCon.setAttribute('geometry', {751        primitive: 'sphere', 752        radius: 0.085 * itemSize.width753    });754    755    // Set connectors' positions and add reactions.756    attrEl.appendChild(outCon);757    outCon.object3D.position.set(0.8 * attrWidth, 0, 0);758    outCon.object3D.rotation.set(0, 0, THREEMath.degToRad(-90));759    outCon.classList.add('connectable');760    if (behavior === 'signal') {761        outCon.setAttribute('geometry', {762            primitive: 'cone',763            height: 0.04,764            radiusTop: 0.01,765            radiusBottom: 0.02766        });767        outCon.object3D.rotation.set(0, 0, THREEMath.degToRad(-90));768    }769        770    if (behavior === 'event') {771        outCon.setAttribute('geometry', {772            primitive: 'sphere', 773            radius: 0.085 * itemSize.width774        });775    }776    let unselectedColor: string = getColorsByType(type)[0];777    let hoveredColor: string = getColorsByType(type)[1];778    outCon.setAttribute('material', 'color', unselectedColor);779    outCon.addEventListener('raycaster-intersected', (event) => {780        event.stopPropagation();781        outCon.setAttribute('material', 'color', hoveredColor);782    });783    outCon.addEventListener('raycaster-intersected-cleared', (event) => {784        event.stopPropagation();785        outCon.setAttribute('material', 'color', unselectedColor);786    });787}788/**789 * Load Google Poly Items based on selected submenu790 * @param itemList The item list entity791 * @param pageToken pageToken defines the which page to load792 */793export function loadPoly(itemList: any, pageToken: string): void {794    const param: object = {795        keywords: '',796        format: 'GLTF',797        pageSize: 9,798        pageToken: pageToken799    }800    $.get(googlePoly.getUrl(), param, function (data,status,xhr) {801        if (status == 'success') {802            const assets = data.assets;803            googlePoly.lastPageToken = googlePoly.nextPageToken;804            googlePoly.nextPageToken = data.nextPageToken;805            console.log(assets);806            assets.forEach((asset, i: number)=>{807                const itemEl: any = document.createElement('a-entity');808                itemEl.setAttribute('id', 'poly'+i);809                itemList.appendChild(itemEl);810                itemEl.setAttribute('geometry', {811                    primitive: 'plane',812                    width: itemSize.width,813                    height: itemSize.height814                });815                itemEl.setAttribute('material', {816                    src: asset.thumbnail.url817                });818                // Place the item819                itemEl.object3D.position.set(itemOffset.x +  (i%3) * itemSize.width, itemOffset.y - Math.floor(i/3) * itemSize.height, 0.001);820                // Add reaction to the item.821                itemEl.classList.add('ui');822                itemEl.addEventListener('raycaster-intersected', (event) => {823                    itemEl.setAttribute('material', 'color', itemColor.hovered);824                    setDescription(asset.displayName);825                });826                itemEl.addEventListener('raycaster-intersected-cleared', (event) => {827                    itemEl.setAttribute('material', 'color', itemColor.unselected);828                });829                itemEl.addEventListener('clicked', (event) => {830                    itemEl.setAttribute('material', 'color', itemColor.selected);831                    // Use different methods of visualization when the item is an operator832                    // 0: Models; 1: Data; 2: Operators; 3: Avatars; 4: Poly833                    834                    const formats = asset.formats;835                    for (let i = 0; i < formats.length; i++) {836                        if (formats[i].formatType == 'GLTF2' ) {837                            const polyEl: any = document.createElement('a-entity');838                            polyEl.setAttribute('id', asset.displayName);839                            const redux: any = document.querySelector('#redux');840                            redux.appendChild(polyEl);841                            polyEl.setAttribute('gltf-model', 'url(' + formats[i].root.url + ')');842                            polyEl.addEventListener('model-loaded', () => {843                                resize(polyEl, 1.0);844                                recenter(polyEl);845                                // resize(polyEl, 1.0);846                            });847                            const rightHand: any = document.querySelector('#rightHand');848                            rightHand.object3D.updateMatrix();849                            rightHand.object3D.updateMatrixWorld();850                            const position = rightHand.object3D.localToWorld(new Vector3(0, -0.4, -0.5));851                            polyEl.object3D.position.copy(position.clone());852                            polyEl.classList.add('movable');853                            polyEl.setAttribute('attribute-list', {854                                attrList: ['position', 'rotation'],855                                behaviorList: ['signal', 'signal'],856                                typeList: ['vector3', 'vector3']857                            });858                            // Create a object node in frp-backend, attribute updates are front-end driven. Also extract all properties from object file859                            const props: any = [{ name: 'object', default: `node-${Node.getNodeCount()}` }, { name: 'position', default: position }];860                            // Using JSON does not seem efficient861                            const objNode = scene.addObj(asset.displayName, props);862                            polyEl.setAttribute('id', objNode.getID()); // Set up node ID863                            polyEl.setAttribute('obj-node-update', 'name', asset.displayName); // Set up node update for frp864                            polyEl.classList.add('data-receiver');865                            break;866                        }867                    }868                });869                itemEl.addEventListener('clicked-cleared', (event) => {870                    itemEl.setAttribute('material', 'color', itemColor.unselected);871                });872            });873        }874    });875    return;...

rocketbelt.uploaders.js

Source:rocketbelt.uploaders.js

1'use strict';2((rb, document, $) => {3  const activeClass = 'uploader-dragged-on';4  const maxFilesClass = 'uploader-max-files';5  // Prevent default drag behaviors6  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {7    document.body.addEventListener(eventName, preventDefaults);8  });9  rb.uploaders = rb.uploaders || {};10  rb.uploaders.addUploader = (uploaderConfig) => {11    let uploader;12    if (uploaderConfig &&13        uploaderConfig.selector) {14      uploader = document.querySelector(uploaderConfig.selector);15      uploader.id = uploader.id || `rb_${rb.getShortId()}`;16      uploaderConfig.id = uploader.id;17      uploaderConfig.isMobile =18        uploaderConfig.isMobile ||19        (uploader && uploader.classList && uploader.classList.contains('uploader-mobile')) ||20        document.querySelectorAll('.mobile .uploader, .tablet .uploader').length > 0;21      if (uploader && uploader.classList) {22        if (uploaderConfig.isMobile) {23          uploader.classList.add('uploader-mobile');24          uploader.addEventListener('click', mobileOpenPhotos);25        }26        if (!uploader.classList.contains('uploader-expanded')) {27          uploader.setAttribute(rb.aria.role, 'button');28          uploader.setAttribute('tabindex', 0);29        }30      }31      if (!uploaderConfig.isMobile) {32        uploader.addEventListener('click', expandClickHandler);33        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {34          uploader.addEventListener(eventName, preventDefaults);35        });36        ['dragenter', 'dragover'].forEach(eventName => {37          uploader.addEventListener(eventName, draggedOn);38        });39        ['dragleave', 'drop'].forEach(eventName => {40          uploader.addEventListener(eventName, draggedOff);41        });42        uploader.addEventListener('drop', handleDrop);43        // Add scrim elements44        const scrim = document.createElement('div');45        scrim.classList.add('scrim');46        uploader.insertAdjacentElement('afterbegin', scrim);47        // Register drag-related listeners48        const scrimIcon = document.createElement('div');49        scrimIcon.classList.add('scrim_icon');50        scrim.insertAdjacentElement('afterend', scrimIcon);51      }52      rb.uploaders.instances = rb.uploaders.instances || [];53      rb.uploaders.instances.push({54        config: uploaderConfig,55        files: []56      });57      // Register listener for keyboard input58      $(uploader).find('.uploader_file-label').keydown((e) => {59        // Since the browser's file input UI is hidden, we need to60        // allow the label it's replaced with to be triggered via61        // keyboard.62        if ((e.which === 13 || e.which === 32)) {63          $(e.target).click();64        }65      });66      const $input = $(uploader).find('input[type="file"]');67      const inputId = $input[0].id || `rb_${rb.getShortId()}`;68      $input.attr('id', inputId);69      $(uploader).find('.uploader_file-label')70        .attr('for', inputId)71        .attr('aria-role', 'button')72        .attr('tabindex', 0);73      $input.change(fileInputOnchange);74    }75    return uploader.id;76  };77  function getClosestUploader(el) {78    let actualUploader;79    if (el.classList) {80      actualUploader =81      el.classList.contains('uploader') ? el : el.closest('.uploader');82    }83    return actualUploader;84  }85  function mobileOpenPhotos(e) {86    if(getClosestUploader(e.target)) {87      $(`#${getClosestUploader(e.target).id} input[type="file"]`).click();88    }89  }90  function expandClickHandler(e) {91    expandUploader(getClosestUploader(e.target));92  }93  function expandUploader(uploader) {94    if (uploader && uploader.classList) {95      if (uploader.classList) {96        uploader.classList.add('uploader-expanded');97      }98      uploader.removeAttribute(rb.aria.role);99      uploader.removeAttribute('tabindex');100      uploader.removeEventListener('click', mobileOpenPhotos);101      uploader.removeEventListener('click', expandClickHandler);102    }103  }104  function getInstanceForId(id) {105    return rb.uploaders.instances.filter((i) => {106      return i.config.id === id;107    })[0];108  }109  rb.uploaders.getInstanceForId = getInstanceForId;110  function fileInputOnchange(e) {111    const id = getClosestUploader(e.target).id;112    const instance = getInstanceForId(id);113    const config = instance.config;114    if (config.isMobile) {115      expandClickHandler(e);116    }117    rb.uploaders.handleFiles(this.files, config.id);118  }119  function preventDefaults(e) {120    e.preventDefault();121    e.stopPropagation();122  }123  function draggedOn(e) {124    const $target = $(e.target);125    const $dropArea =126      $target.hasClass(activeClass) ? $target : $target.closest('.uploader');127    if (!$dropArea.hasClass(activeClass)) {128      $dropArea.find('.scrim, .scrim_icon').css('z-index', '1');129      $dropArea.addClass(activeClass);130    }131  }132  function draggedOff(e) {133    const $target = $(e.target);134    const $dropArea =135      $target.hasClass(activeClass) ? $target : $target.closest('.uploader');136    if ($dropArea.hasClass(activeClass)) {137      $dropArea.removeClass(activeClass);138      $dropArea.find('.scrim, .scrim_icon').css('z-index', '-1');139    }140  }141  rb.uploaders.numCanAdd = (id) => {142    const uploaderInstance = getInstanceForId(id);143    const numFiles = uploaderInstance.files ? uploaderInstance.files.length : 0;144    const maxFiles = uploaderInstance.config.maxFiles || Number.POSITIVE_INFINITY;145    return maxFiles - numFiles;146  };147  function handleDrop(e) {148    const uploader = getClosestUploader(e.target);149    if (rb.uploaders.numCanAdd(uploader.id) > 0) {150      const dt = e.dataTransfer;151      const files = dt.files;152      rb.uploaders.handleFiles(files, uploader.id);153    }154  }155  rb.uploaders.handleFiles = function handleFiles(files, uploaderId) {156    const numCanAdd = rb.uploaders.numCanAdd(uploaderId);157    const filesToAdd = [...files].slice(0, numCanAdd);158    filesToAdd.forEach(file => { processFile(file, uploaderId); });159  };160  function getNewDimensions(oldDimensions) {161    const width = oldDimensions.width;162    const height = oldDimensions.height;163    const maxWidth = 1500;164    const maxHeight = 1500;165    let newWidth;166    let newHeight;167    if (width <= maxWidth && height <= maxHeight) {168      return { 'width': width, 'height': height };169    }170    if (height > width) {171      if (height > maxHeight) {172        newHeight = maxHeight;173        newWidth = Math.floor((width / height) * newHeight);174      } else {175        return { 'width': width, 'height': height };176      }177    } else {178      if (width > maxWidth) {179        newWidth = maxWidth;180        newHeight = Math.floor((height / width) * newWidth);181      } else {182        return { 'width': width, 'height': height };183      }184    }185    return { 'width': newWidth, 'height': newHeight };186  }187  function downscaleImage(data) {188    return new Promise((resolve, reject) => {189      // Provide default values190      const imageType = 'image/png';191      const encoderOptions = 0.9;192      // Create a temporary image so that we can compute the height of the downscaled image.193      let image = new Image();194      image.src = data;195      image.onload = () => {196        let srcOrientation = 1;197        jQuery.ajax({198          url: 'https://cdn.jsdelivr.net/npm/exif-js',199          dataType: 'script',200          cache: true201        }).done(function () {202          EXIF.getData(image, function () {203            srcOrientation = EXIF.getTag(this, 'Orientation');204            const newDimensions = getNewDimensions({ 'width': image.width, 'height': image.height });205            const newWidth = newDimensions.width;206            const newHeight = newDimensions.height;207            // Create a temporary canvas to draw the downscaled image on.208            let canvas = document.createElement('canvas');209            if (srcOrientation > 4 && srcOrientation < 9) {210              canvas.width = newHeight;211              canvas.height = newWidth;212            } else {213              canvas.width = newWidth;214              canvas.height = newHeight;215            }216            // Draw the downscaled image on the canvas and return the new data URL.217            // Have to use 'let' instead of 'const' so it can be mutable218            let ctx = canvas.getContext('2d');219            switch (srcOrientation) {220            case 2: ctx.transform(-1, 0, 0, 1, newWidth, 0); break;221            case 3: ctx.transform(-1, 0, 0, -1, newWidth, newHeight); break;222            case 4: ctx.transform(1, 0, 0, -1, 0, newHeight); break;223            case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;224            case 6: ctx.transform(0, 1, -1, 0, newHeight, 0); break;225            case 7: ctx.transform(0, -1, -1, 0, newHeight, newWidth); break;226            case 8: ctx.transform(0, -1, 1, 0, 0, newWidth); break;227            default: break;228            }229            ctx.drawImage(image, 0, 0, newWidth, newHeight);230            const newDataUrl = canvas.toDataURL(imageType, encoderOptions);231            const newFileSize = Math.ceil(newDataUrl.split(',')[1].length * 0.75);232            resolve({ 'file': newDataUrl, 'size': newFileSize });233          });234        });235      };236      image.onerror = reject;237    });238  }239  function createPreview(filesAsBinary, instance, instanceEl, reader, scaledImageObj) {240    const img = document.createElement('img');241    img.src = filesAsBinary ? reader.result : scaledImageObj.file;242    img.id = `rb_${rb.getShortId()}`;243    img.classList.add('uploader_thumb');244    const f = {245      id: img.id,246      file: filesAsBinary ? rb.dataURItoBlob(reader.result) : scaledImageObj.file,247      size: filesAsBinary ? reader.size : scaledImageObj.size248    };249    instance.files.push(f);250    instanceEl251      .dispatchEvent(new CustomEvent('rb.uploaders.fileAdded', { detail: f }));252    const button = document.createElement('button');253    button.dataset.targetId = img.id;254    button.classList.add('uploader_thumbs_remove-button');255    button.innerHTML = '&times;';256    button.setAttribute(rb.aria.label, 'Remove this image');257    rb.once(button, 'click', (e) => {258      const id = e.target.dataset.targetId;259      const imgToRemove = document.querySelector(`#${id}`);260      const container = e.target.closest('.uploader');261      const uploader = document.querySelector(instance.config.selector);262      imgToRemove.parentNode.removeChild(imgToRemove);263      e.target.parentNode.removeChild(e.target);264      $(uploader).find('input[type="file"]').val('');265      if (container && container.querySelectorAll('.uploader_thumb').length === 0) {266        container.classList.remove('uploader-has-thumbs');267        if (instance.config.isMobile) {268          container.classList.remove('uploader-expanded');269          uploader.addEventListener('click', mobileOpenPhotos);270        }271      }272      instance.files = instance.files.filter((el) => {273        return el.id !== id;274      });275      if (rb.uploaders.numCanAdd(instanceEl.id) > 0) {276        const $dropArea = $(`#${instanceEl.id}`);277        $(`#${instanceEl.id} .uploader_file-input, #${instanceEl.id} .uploader_file-label`)278          .removeAttr('disabled');279        $dropArea.removeClass(maxFilesClass);280      }281      const i = { removedId: id };282      document.getElementById(instanceEl.id)283        .dispatchEvent(new CustomEvent('rb.uploaders.fileRemoved', { detail: i }));284    });285    document.querySelector(`#${instanceEl.id} .uploader_thumbs`).appendChild(img);286    document.querySelector(`#${img.id}`).insertAdjacentElement('afterend', button);287    const u = document.querySelector(`#${instanceEl.id}`);288    if (u) {289      u.classList.add('uploader-has-thumbs');290    }291    if (!rb.uploaders.numCanAdd(instanceEl.id)) {292      const $dropArea = $(`#${instanceEl.id}`);293      $(`#${instanceEl.id} .uploader_file-input, #${instanceEl.id} .uploader_file-label`)294        .attr('disabled', '');295      $dropArea.addClass(maxFilesClass);296    }297  }298  function processFile(file, uploaderId) {299    const instance = getInstanceForId(uploaderId);300    const instanceEl = document.getElementById(uploaderId);301    const reader = new FileReader();302    reader.size = file.size;303    instanceEl304      .dispatchEvent(new CustomEvent('rb.uploaders.addingFile'));305    reader.readAsDataURL(file);306    reader.onloadend = () => {307      const fileContents =308        instance.config.filesAsBinary ?309          rb.dataURItoBlob(reader.result) :310          reader.result311      ;312      if (instance.config.filesAsBinary) {313        createPreview(true, instance, instanceEl, reader);314      } else {315        downscaleImage(fileContents).then(scaledImageObj => {316          createPreview(false, instance, instanceEl, reader, scaledImageObj);317        });318      }319    };320  }...

Instances.js

Source:Instances.js

1import d3      from 'd3/d3';2import volumes from './Volumes';3import layout  from './../Layout';4export default function (clickHandler) {5    return function () {6        var instances = this.selectAll('.instance')7            .data(d => d.instances)8        ;9        // Enter10        instances.enter().append('g')11            .attr('transform', instance => `translate(${ instance.box.center.x }, ${ instance.box.center.y })`)12            .attr('class', 'instance')13            .style('opacity', 0)14            .each(function (instance) {15                var instanceEl = d3.select(this);16                var icon = instanceEl.append('rect')17                    .attr('class', 'instance__wrapper')18                    .attr({ width: 1, height: 1 })19                    .attr({ rx: layout.instance.borderRadius, ry: layout.instance.borderRadius })20                ;21                icon.on('click', function (instance) {22                    clickHandler('instance', instance);23                });24                instanceEl.append('circle')25                    .attr('class', `instance__state instance__state--${ instance.state }`)26                    .attr('r', layout.instance.stateSize / 2)27                    .attr('cx', 12)28                    .attr('cy', 15)29                ;30                instanceEl.append('text')31                    .attr('class', 'instance__name')32                    .attr('x', 24)33                    .attr('y', 20)34                    .text(instance.tags.name ? instance.tags.name : instance.id)35                ;36            })37        ;38        // Update39        instances40            .attr('class', instance => `instance${ instance.active ? ' _is-active' : '' }`)41            .each(function (instance, i) {42                var instanceEl = d3.select(this);43                instanceEl.select('.instance__wrapper')44                    .transition()45                    .delay(i * 60 + 400)46                    .duration(900)47                    .ease('elastic')48                    .attr({ width: instance.box.width, height: instance.box.height })49                ;50            })51            .transition()52            .delay((d, i) => i * 60 + 400)53            .duration(900)54            .ease('elastic')55            .style('opacity', 1)56            .attr('transform', instance => `translate(${ instance.box.origin.x }, ${ instance.box.origin.y })`)57        ;58        // Exit59        instances.exit()60            .remove()61        ;62        instances.call(volumes(clickHandler));63    };...

Using AI Code Generation

1import { instanceEl } from 'ng-mocks';2describe('TestComponent', () => {3  let component: TestComponent;4  let fixture: ComponentFixture<TestComponent>;5  beforeEach(async(() => {6    TestBed.configureTestingModule({7    })8    .compileComponents();9  }));10  beforeEach(() => {11    fixture = TestBed.createComponent(TestComponent);12    component = fixture.componentInstance;13    fixture.detectChanges();14  });15  it('should create', () => {16    expect(component).toBeTruthy();17  });18  it('should have an h1 tag with text "Test"', () => {19    const h1 = instanceEl(fixture, 'h1');20    expect(h1.nativeElement.textContent).toEqual('Test');21  });22});23import { Component, OnInit } from '@angular/core';24@Component({25})26export class TestComponent implements OnInit {27  constructor() { }28  ngOnInit(): void {29  }30}31import { async, ComponentFixture, TestBed } from '@angular/core/testing';32import { TestComponent } from './test.component';33describe('TestComponent', () => {34  let component: TestComponent;35  let fixture: ComponentFixture<TestComponent>;36  beforeEach(async(() => {37    TestBed.configureTestingModule({38    })39    .compileComponents();40  }));41  beforeEach(() => {42    fixture = TestBed.createComponent(TestComponent);43    component = fixture.componentInstance;44    fixture.detectChanges();45  });46  it('should create', () => {47    expect(component).toBeTruthy();48  });49});50import { Component, OnInit } from '@angular/core';51@Component({52})53export class TestComponent implements OnInit {54  constructor() { }55  ngOnInit(): void {56  }57}58import { async, ComponentFixture, TestBed } from '@angular/core/testing';59import { TestComponent } from './test.component';60describe('TestComponent', () => {61  let component: TestComponent;

Using AI Code Generation

1import { instanceEl } from 'ng-mocks';2import { createComponent } from 'ng-mocks';3import { mockProvider } from 'ng-mocks';4import { TestBed } from '@angular/core/testing';5import { Component } from '@angular/core';6import { TestComponentBuilder } from '@angular/compiler/testing';7import { By } from '@angular/platform-browser';8import { DebugElement } from '@angular/core';9import { Observable } from 'rxjs';10import 'rxjs/add/observable/of';11import 'rxjs/add/operator/async';12import 'rxjs/add/operator/map';13import 'rxjs/add/operator/take';14import { TestScheduler } from 'rxjs/testing';15import { fakeAsync } from '@angular/core/testing';16import { tick } from '@angular/core/testing';17import { flush } from '@angular/core/testing';18import { flushMicrotasks } from '@angular/core/testing';19import { async } from '@angular/core/testing';20import { ComponentFixture } from '@angular/core/testing';21import { ComponentFixtureAutoDetect } from '@angular/core/testing';22import { inject } from '@angular/core/testing';23import { injectAsync } from '@angular/core/testing';

Using AI Code Generation

1import { instanceEl } from 'ng-mocks';2import { MyComponent } from './my.component';3describe('MyComponent', () => {4  it('should render', () => {5    const fixture = TestBed.createComponent(MyComponent);6    fixture.detectChanges();7    const instance = instanceEl(fixture.debugElement, MyComponent);8    expect(instance).toBeDefined();9  });10});11import { Component } from '@angular/core';12@Component({13})14export class MyComponent {}15import { TestBed } from '@angular/core/testing';16import { MyComponent } from './my.component';17describe('MyComponent', () => {18  beforeEach(() => {19    TestBed.configureTestingModule({20    }).compileComponents();21  });22  it('should create the app', () => {23    const fixture = TestBed.createComponent(MyComponent);24    const app = fixture.debugElement.componentInstance;25    expect(app).toBeTruthy();26  });27});28div {29  color: red;30}31div {32  color: red;33}34div {35  color: red;36}37import { Component } from '@angular/core';38@Component({39})40export class MyComponent {}41import { TestBed } from '@angular/core/testing';42import { MyComponent } from './my.component';43describe('MyComponent', () => {44  beforeEach(() => {45    TestBed.configureTestingModule({46    }).compileComponents();47  });48  it('should create the app', () => {49    const fixture = TestBed.createComponent(MyComponent);50    const app = fixture.debugElement.componentInstance;51    expect(app).toBeTruthy();52  });53});54div {55  color: red;56}57div {58  color: red;59}

Using AI Code Generation

1import {instanceEl} from 'ng-mocks';2import {Component} from '@angular/core';3import {TestBed} from '@angular/core/testing';4@Component({5})6export class TestComponent {}7describe('TestComponent', () => {8  beforeEach(() => {9    TestBed.configureTestingModule({10    }).compileComponents();11  });12  it('should create the app', () => {13    const fixture = TestBed.createComponent(TestComponent);14    const app = instanceEl(fixture.debugElement);15    expect(app).toBeTruthy();16  });17});18import {instanceEl} from 'ng-mocks';19import {Component} from '@angular/core';20import {TestBed} from '@angular/core/testing';21@Component({22})23export class TestComponent {}24describe('TestComponent', () => {25  beforeEach(() => {26    TestBed.configureTestingModule({27    }).compileComponents();28  });29  it('should create the app', () => {30    const fixture = TestBed.createComponent(TestComponent);31    const app = instanceEl(fixture.debugElement);32    expect(app).toBeTruthy();33  });34});35import {instanceEl} from 'ng-mocks';36import {Component} from '@angular/core';37import {TestBed} from '@angular/core/testing';38@Component({39})40export class TestComponent {}41describe('TestComponent', () => {42  beforeEach(() => {43    TestBed.configureTestingModule({44    }).compileComponents();45  });46  it('should create the app', () => {47    const fixture = TestBed.createComponent(TestComponent);48    const app = instanceEl(fixture.debugElement);49    expect(app).toBeTruthy();50  });51});52import {instanceEl} from 'ng-mocks';53import {Component} from '@angular/core';54import {TestBed} from '@angular/core/testing';55@Component({56})57export class TestComponent {}58describe('TestComponent', () => {59  beforeEach(() =>

Using AI Code Generation

1import {instanceEl} from 'ng-mocks';2const component = instanceEl(TestComponent);3const component = instanceEl(TestComponent, {name: 'John'});4const component = instanceEl(TestComponent, {name: 'John'}, true);5import {mockComponent} from 'ng-mocks';6const component = mockComponent(TestComponent);7const component = mockComponent(TestComponent, {name: 'John'});8const component = mockComponent(TestComponent, {name: 'John'}, true);9import {mockDirective} from 'ng-mocks';10const directive = mockDirective(TestDirective);11const directive = mockDirective(TestDirective, {name: 'John'});12const directive = mockDirective(TestDirective, {name: 'John'}, true);13import {mockPipe} from 'ng-mocks';14const pipe = mockPipe(TestPipe);15const pipe = mockPipe(TestPipe, {name: 'John'});16const pipe = mockPipe(TestPipe, {name: 'John'}, true);17import {mockProvider} from 'ng-mocks';18const service = mockProvider(TestService);19const service = mockProvider(TestService, {name: 'John'});20const service = mockProvider(TestService, {name: 'John'}, true);21import {mockModule} from 'ng-mocks';22const module = mockModule(TestModule);23const module = mockModule(TestModule, {name: 'John'});24const module = mockModule(TestModule, {name: 'John'}, true);25import {mockModule} from 'ng-mocks';

Using AI Code Generation

1var instanceEl = ngMocks.instanceEl(El);2var instanceEl = ngMocks.instanceEl(El, {mocks: {mock1: 'mock1'}});3var instanceEl = ngMocks.instanceEl(El, {mocks: {mock1: 'mock1'}, inject: {inject1: 'inject1'}});4var instanceEl = ngMocks.instanceEl(El, {mocks: {mock1: 'mock1'}, inject: {inject1: 'inject1'}, providers: [Provider]});5var instanceEl = ngMocks.instanceEl(El, {mocks: {mock1: 'mock1'}, inject: {inject1: 'inject1'}, providers: [Provider]}, {mocks: {mock2: 'mock2'}});6var instanceEl = ngMocks.instanceEl(El, {mocks: {mock1: 'mock1'}, inject: {inject1: 'inject1'}, providers: [Provider]}, {mocks: {mock2: 'mock2'}, inject: {inject2: 'inject2'}});7var instanceEl = ngMocks.instanceEl(El, {mocks: {mock1: 'mock1'}, inject: {inject1: 'inject1'}, providers: [Provider]}, {mocks: {mock2: 'mock2'}, inject: {inject2: 'inject2'}, providers: [Provider]});8var instanceEl = ngMocks.instanceEl(El, {mocks: {mock1: 'mock1'}, inject: {inject1: 'inject1'}, providers: [Provider]}, {mocks: {mock2: 'mock2'}, inject: {inject2: 'inject2'}, providers: [Provider]}, {mocks: {mock3: 'mock3'}});9var instanceEl = ngMocks.instanceEl(El, {mocks: {mock1: 'mock1'}, inject: {inject

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.