Is there a way of composing a template in Lit using a dynamically derived Lit Element?
I'm talking something like this:
import { chooseCorrectComponent } from "./chooseCorrectComponent.js";
let myLitElement = chooseCorrectComponent(arguments);
render () {
return html`
${new myLitElement(propsGoHerePerhaps)}
`
}
Was easier than I thought.
function chooseCorrectCoupon(arg) {
if(arg === "foo") {
return new MyLitElementA();
} else {
return new MyLitElementB();
}
}
render () {
let myLitElement = chooseCorrectComponent("bar");
myLitElement.propA = 123;
myLitElement.propB = "hello";
return html`
${myLitElement}
`
}
Say I have v-img component and I want to render image source using require() statement.
<v-img :src="require(`#/some-folder/my-img.png`)"></v-img>
However, my application breaks completely if I don't have my-img.png in the folder.
So far I've tried:
<v-img :src="require(...) || require(...)"></v-img>
<v-img :src="require(...)">
<template v-slot:placeholder>
// placeholder component.
</template>
</v-img>
<v-img :src="resolveHandler()"></v-img>
methods: {
resolveHandler() {
let image;
try { ... } catch (error) { ... } finally { ... };
return image;
}
}
None of the above worked. Any suggestion please? Thanks.
Try this
<template>
<v-img :src="imageSrc">
<template #placeholder>
No image
</template>
</v-img>
</template>
<script>
export default {
...
mounted() {
try {
this.imageSrc = require(...);
} catch (e) {
this.imageSrc = null;
}
},
};
</script>
I am using jest.js for testing with my angular app. here is the directive I use in html:
<textarea errorHighlighter formControlName="Url" name="Url" cols="50" rows="5"
placeholder="Enter Page URL" (ngModelChange)="pageUrlChanges($event)"></textarea>
here is my directive.ts file:
import { Directive, ElementRef, SimpleChanges, HostListener, Renderer2 } from '#angular/core';
import { NgControl } from '#angular/forms';
#Directive({
selector: '[errorHighlighter]'
})
export class ErrorHighlighterDirective {
constructor(private el: ElementRef, private control: NgControl, private renderer: Renderer2) { }
#HostListener('input') oninput() {
if (this.el.nativeElement && this.control) {
if (this.control.control.status === 'INVALID') {
this.renderer.addClass(this.el.nativeElement, 'has-err');
} else {
this.renderer.removeClass(this.el.nativeElement, 'has-err');
}
}
}
}
this is written to show the error border around the input field. I am trying to test the same like this:
import { ErrorHighlighterDirective } from './error-highlighter.directive';
import { Directive, ElementRef, SimpleChanges, HostListener, Renderer2, Component, DebugElement } from '#angular/core';
import { NgControl, FormGroup, FormsModule, FormControl, ReactiveFormsModule } from '#angular/forms';
import { TestBed, ComponentFixture } from '#angular/core/testing';
#Component({
template: `<input errorHighlighter formControlName="Url" type="text">`
})
class TestHighlighterComponent { }
describe('ErrorHighlighterDirective', () => {
let component: TestHighlighterComponent;
let fixture: ComponentFixture<TestHighlighterComponent>;
let inputEl: DebugElement;
const fg: FormGroup = new FormGroup({
'Url': new FormControl('')
});
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestHighlighterComponent, ErrorHighlighterDirective],
imports: [FormsModule, ReactiveFormsModule],
providers: [
{ provide: NgControl, useValue: fg }
]
});
fixture = TestBed.createComponent(TestHighlighterComponent);
component = fixture.componentInstance;
inputEl = fixture.debugElement.query(By.css('input'));
});
it('should create an instance', () => {
const directive = new ErrorHighlighterDirective(inputEl, fg, Renderer2);
expect(directive).toBeTruthy();
});
});
But the test not succeeds. getting error like below:
● Test suite failed to run
TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
src/app/directives/error-highlighter.directive.spec.ts:33:46 - error TS2304: Cannot find name 'By'.
33 inputEl = fixture.debugElement.query(By.css('input'));
~~
src/app/directives/error-highlighter.directive.spec.ts:38:66 - error TS2345: Argument of type 'FormGroup' is not assignable to parameter of type 'NgControl'.
Type 'FormGroup' is missing the following properties from type 'NgControl': name, valueAccessor, viewToModelUpdate, control, path
38 const directive = new ErrorHighlighterDirective(inputEl, fg, Renderer2);
Any one help me to understand and fix these issue? I am not much familiar with angular test either jest.js.
You can use By.directive
e.g.
const directiveEl = fixture.debugElement.query(By.directive(MyDirective));
expect(directiveEl).not.toBeNull();
You need to import By from angular.platform-browser
import { By } from '#angular/platform-browser
You can further read here.
You can use any selector By.css that you can use with css. And a selector for a class is simply .classname.
e.g.
By.css(.classname)
or
By.css('input[type=radio]')
or
By.css('textarea')
in SCSS
we can do nest seletor like htis
div
{
&[id*='gemini-ad-']
{
#content;
}
}
will return div[id*='gemini-ad-']
but any way can make something like this?
[id*='gemini-ad-']
{
div&
{
#content;
}
}
return div[id*='gemini-ad-'] too?
body:hover {}
a:hover {}
div:hover {}
:hover a {}
vs
:hover
{
body& {}
a& {}
div& {}
a {}
}
You can achieve what you want like this:
[id*='gemini-ad-']{
#at-root div#{&}{
/* CSS rules */
}
}
Outputs:
div[id*='gemini-ad-'] {
/* CSS rules */
}
I'm writing a simple React application with a Button component, which looks like this:
import React, { Component } from 'react';
// shim to find stuff
Array.prototype.contains = function (needle) {
for (var i = 0; i < this.length; i++) {
if (this[i] == needle) return true;
}
return false;
};
class Button extends Component {
propTypes: {
text: React.PropTypes.string.isRequired,
modifiers: React.PropTypes.array
}
render() {
return(
<span className={this.displayModifiers()}>{this.props.text}</span>
);
}
displayModifiers() {
const modifiers = this.props.modifiers || ["default"];
if (modifiers.contains("default") ||
modifiers.contains("danger") ||
modifiers.contains("success")) {
// do nothing
} else {
// add default
modifiers.push("defualt");
}
var classNames = "btn"
for (var i = 0; i < modifiers.length; i++) {
classNames += " btn-" + modifiers[i]
}
return(classNames);
}
}
export default Button;
I then wrote this to test it:
it("contains the correct bootstrap classes", () => {
expect(mount(<Button modifiers={["flat"]}/>).html()).toContain("<span class=\"btn btn-flat btn-default\"></span>");
});
That code should pass, but I receive the following error message:
expect(string).toContain(value)
Expected string:
"<span class=\"btn btn-flat btn-defualt\"></span>"
To contain value:
"<span class=\"btn btn-flat btn-default\"></span>"
at Object.it (src\__tests__\Button.test.js:42:293)
Any ideas why this is not passing?
From the docs:
Use .toContain when you want to check that an item is in a list.
To test strings you should use toBe or toEqual
it("contains the correct bootstrap classes", () => {
expect(mount(<Button modifiers={["flat"]}/>).html()).toBe("<span class=\"btn btn-flat btn-default\"></span>");
});
But there is a better way of testing the output rendered components: snapshots.
it("contains the correct bootstrap classes", () => {
expect(mount(<Button modifiers={["flat"]}/>).html()).toMatchSnapshot();
});
Note that you will need enzymeToJson for snapshot testing using enzyme.