Skip to content

Add tests for Button #246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bendera merged 2 commits into from
Jan 11, 2025
Merged

Add tests for Button #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c2745c4
Add tests for Button
bendera Jan 7, 2025
c6691a7
Add tests for Button
bendera Jan 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions dev/vscode-button/autofocus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VSCode Elements</title>
<link rel="stylesheet" href="/node_modules/@vscode/codicons/dist/codicon.css" id="vscode-codicon-stylesheet">
<script type="module" src="/node_modules/@vscode-elements/webview-playground/dist/index.js"></script>
<script type="module" src="/dist/main.js"></script>
<script>
const logEvents = (selector, eventType) => {
document.querySelector(selector).addEventListener(eventType, (ev) => {
console.log(ev);
});
};
</script>
</head>

<body>
<h1>Autofocus</h1>
<main>
<vscode-demo>
<vscode-button autofocus>Focused</vscode-button>
</vscode-demo>
</main>
</body>

</html>
32 changes: 32 additions & 0 deletions dev/vscode-button/reset.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VSCode Elements</title>
<link rel="stylesheet" href="/node_modules/@vscode/codicons/dist/codicon.css" id="vscode-codicon-stylesheet">
<script type="module" src="/node_modules/@vscode-elements/webview-playground/dist/index.js"></script>
<script type="module" src="/dist/main.js"></script>
<script>
const logEvents = (selector, eventType) => {
document.querySelector(selector).addEventListener(eventType, (ev) => {
console.log(ev);
});
};
</script>
</head>

<body>
<h1>Reset form</h1>
<main>
<vscode-demo>
<form action="/">
<p><input type="text" value="Default value"></p>
<vscode-button type="reset">Reset</vscode-button>
</form>
</vscode-demo>
</main>
</body>

</html>
32 changes: 32 additions & 0 deletions dev/vscode-button/submit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VSCode Elements</title>
<link rel="stylesheet" href="/node_modules/@vscode/codicons/dist/codicon.css" id="vscode-codicon-stylesheet">
<script type="module" src="/node_modules/@vscode-elements/webview-playground/dist/index.js"></script>
<script type="module" src="/dist/main.js"></script>
<script>
const logEvents = (selector, eventType) => {
document.querySelector(selector).addEventListener(eventType, (ev) => {
console.log(ev);
});
};
</script>
</head>

<body>
<h1>Reset form</h1>
<main>
<vscode-demo>
<form action="/">
<p><input type="text" value="Default value" name="text-input"></p>
<vscode-button type="submit">Submit</vscode-button>
</form>
</vscode-demo>
</main>
</body>

</html>
178 changes: 177 additions & 1 deletion src/vscode-button/vscode-button.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,185 @@
import sinon from 'sinon';
import {VscodeButton} from './index.js';
import {expect} from '@open-wc/testing';
import {expect, fixture, html} from '@open-wc/testing';

describe('vscode-button', () => {
it('is defined', () => {
const el = document.createElement('vscode-button');
expect(el).to.instanceOf(VscodeButton);
});

it('is focused automatically', async () => {
const el = await fixture<VscodeButton>(
html`<vscode-button autofocus>test</vscode-button>`
);

expect(el.focused).to.be.true;
});

it('dispatches click event when enter key is pressed', async () => {
const el = await fixture<VscodeButton>(
html`<vscode-button>test</vscode-button>`
);
const spy = sinon.spy();

el.addEventListener('click', spy);
el.focus();
el.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));

expect(spy.called).to.be.true;
});

it('dispatches click event when space key is pressed', async () => {
const el = await fixture<VscodeButton>(
html`<vscode-button>test</vscode-button>`
);
const spy = sinon.spy();

el.addEventListener('click', spy);
el.focus();
el.dispatchEvent(new KeyboardEvent('keydown', {key: ' '}));

expect(spy.called).to.be.true;
});

it('is disabled', async () => {
const el = await fixture<VscodeButton>(
html`<vscode-button></vscode-button>`
);
el.disabled = true;
await el.updateComplete;

expect(el.hasAttribute('disabled')).to.be.true;
expect(el.tabIndex).to.eq(-1);
});

it('is secondary', async () => {
const el = await fixture<VscodeButton>(
html`<vscode-button></vscode-button>`
);
el.secondary = true;
await el.updateComplete;

expect(el.hasAttribute('secondary')).to.be.true;
});

it('icon is set', async () => {
const el = await fixture<VscodeButton>(
html`<vscode-button icon="account"></vscode-button>`
);

expect(el).shadowDom.to.eq(`
<span class="has-icon-before wrapper">
<vscode-icon name="account" class="icon"></vscode-icon>
<slot></slot>
</span>
`);
});

it('iconSpin is set', async () => {
const el = await fixture<VscodeButton>(
html`<vscode-button icon="account" icon-spin></vscode-button>`
);

expect(el).shadowDom.to.eq(`
<span class="has-icon-before wrapper">
<vscode-icon name="account" spin class="icon"></vscode-icon>
<slot></slot>
</span>
`);
});

it('iconSpinDuration is set', async () => {
const el = await fixture<VscodeButton>(
html`<vscode-button
icon="account"
icon-spin-duration="5"
></vscode-button>`
);

expect(el).shadowDom.to.eq(`
<span class="has-icon-before wrapper">
<vscode-icon name="account" class="icon" spin-duration="5"></vscode-icon>
<slot></slot>
</span>
`);
});

it('iconAfter is set', async () => {
const el = await fixture<VscodeButton>(
html`<vscode-button icon-after="account"></vscode-button>`
);

expect(el).shadowDom.to.eq(`
<span class="has-icon-after wrapper">
<slot></slot>
<vscode-icon name="account" class="icon-after"></vscode-icon>
</span>
`);
});

it('iconAfterSpin is set', async () => {
const el = await fixture<VscodeButton>(
html`<vscode-button icon-after="account" icon-after-spin></vscode-button>`
);

expect(el).shadowDom.to.eq(`
<span class="has-icon-after wrapper">
<slot></slot>
<vscode-icon name="account" class="icon-after" spin></vscode-icon>
</span>
`);
});

it('iconAfterSpinDuration is set', async () => {
const el = await fixture<VscodeButton>(
html`<vscode-button
icon-after="account"
icon-after-spin-duration="5"
></vscode-button>`
);

expect(el).shadowDom.to.eq(`
<span class="has-icon-after wrapper">
<slot></slot>
<vscode-icon name="account" class="icon-after" spin-duration="5"></vscode-icon>
</span>
`);
});

it('resets the assigned form', async () => {
const form = document.createElement('form');
const input = document.createElement('input');
input.setAttribute('value', 'Default value');

const el = await fixture<VscodeButton>(
html`<vscode-button type="reset">Reset</vscode-button>`,
{parentNode: form}
);

form.appendChild(input);
input.value = 'Modified value';
el.dispatchEvent(new MouseEvent('click'));

expect(input.value).to.eq('Default value');
});

it('submit the assigned form', async () => {
const submitSpy = sinon.spy((ev) => {
ev.preventDefault();
});
const form = document.createElement('form');
form.addEventListener('submit', submitSpy);

const el = await fixture<VscodeButton>(
html`<vscode-button type="submit">Submit</vscode-button>`,
{parentNode: form}
);

el.dispatchEvent(new MouseEvent('click'));

expect(submitSpy.called).to.be.true;
});

it('sets the form value');
});