Skip to content

Instantly share code, notes, and snippets.

View YonatanKra's full-sized avatar

Yonatan Kra YonatanKra

52 followers · 1 following
View GitHub Profile
@YonatanKra
YonatanKra / greeter.spec.setup.teardown.ts
Created September 13, 2023 03:24
Tauri-demo: test setup and teardown
beforeEach(() => {
greeter = document.createElement('yag-greeter');
document.body.appendChild(greeter);
});
afterEach(() => {
greeter.remove();
});
@YonatanKra
YonatanKra / greeter.template.ts
Created September 13, 2023 03:01
Tauri-demo: using Vivid to simplify the template
import '@vonage/vivid/button';
import '@vonage/vivid/text-field';
export const template = `
<form class="row" id="greet-form" name="greet-form">
<vwc-text-field id="greet-input"
placeholder="Enter a name..."></vwc-text-field>
<vwc-button type="submit"
label="Greet"
appearance="outlined"></vwc-button>
@YonatanKra
YonatanKra / index.html
Created September 13, 2023 03:00
Tauri-demo: vivid infrastructure
<html lang="en" class="vvd-root">
@YonatanKra
YonatanKra / greeter.template.ts
Created September 12, 2023 06:54
Tauri-demo: template with styles
export const template = `
<style>
input,
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
@YonatanKra
YonatanKra / greeter.greet.logic.ts
Created September 12, 2023 06:03
Tauri-demo: Greet logic inside a web component
this.shadowRoot?.querySelector('#greet-form')?.addEventListener('submit', async (e) => {
e.preventDefault();
const greetInputEl = this.shadowRoot?.querySelector('#greet-input') as HTMLInputElement;
const greetMsgEl = this.shadowRoot?.querySelector('#greet-msg') as HTMLElement;
greetMsgEl.textContent = await invoke('greet', {
name: greetInputEl.value,
});
});
@YonatanKra
YonatanKra / greeter.test.ipc.ts
Last active September 12, 2023 06:09
Tauri-demo: the IPC test
it('should set the greeting message inside the message element', async () => {
const greeter = document.createElement('yag-greeter');
const name = 'John Doe';
const greetForm = greeter.shadowRoot?.querySelector('#greet-form') as HTMLFormElement;
const greetInput = greeter.shadowRoot?.querySelector('#greet-input') as HTMLInputElement;
const greetMsgEl = greeter.shadowRoot?.querySelector('#greet-msg') as HTMLElement;
greetInput.value = name;
mockIPC((cmd, args) => {
@YonatanKra
YonatanKra / greeter.spec.ts
Last active September 12, 2023 06:33
Tauri-demo: add the IPC logic to Greeter
import { mockIPC } from '@tauri-apps/api/mocks';
import { Greeter } from './index';
describe('greeter', () => {
let greeter: Greeter;
beforeAll(() => {
customElements.define('yag-greeter', Greeter);
});
@YonatanKra
YonatanKra / greeter.spec.ts
Created September 12, 2023 03:41
Tauri-demo - adding the DOM elements
import { Greeter } from './index';
describe('greeter', () => {
it('should be defined', () => {
expect(Greeter).toBeDefined();
});
it ('should set a shadow DOM with mode open', () => {
customElements.define('yag-greeter', Greeter);
const greeter = document.createElement('yag-greeter');
@YonatanKra
YonatanKra / greeter.spec.ts
Created September 12, 2023 03:36
Testing that the elements exist in the DOM
it ('should have greet button inside', () => {
const greeter = document.createElement('yag-greeter');
expect(greeter.shadowRoot?.querySelector('#greet-form button')).toBeTruthy();
});
it ('should have greet form inside', () => {
const greeter = document.createElement('yag-greeter');
expect(greeter.shadowRoot?.querySelector('#greet-form')).toBeTruthy();
});
@YonatanKra
YonatanKra / greeter.template.ts
Created September 12, 2023 03:25
const template = `
<form class="row" id="greet-form">
<input id="greet-input" placeholder="Enter a name..." />
<button type="submit">Greet</button>
</form>
<p id="greet-msg"></p>
`;
export const templateElement = document.createElement('template');
templateElement.innerHTML = template;