edu-webcomponents 1.17.0 → 1.19.7

package/test/EduProgressBar.test.js

@@ -0,0 +1,173 @@
+// test/edu-progress-bar.test.js
+import { html, fixture, expect } from '@open-wc/testing';
+import '../src/EduProgressBar.js'; // ajusta la ruta si es necesario
+
+describe('EduProgressBar', () => {
+  it('renders with default values', async () => {
+    const el = await fixture(html`<edu-progress-bar></edu-progress-bar>`);
+
+    const bar = el.shadowRoot.querySelector('.bar-fill');
+    const label = el.shadowRoot.querySelector('.label');
+
+    expect(el.value).to.equal(0);
+    expect(el.max).to.equal(100);
+    expect(bar.style.width).to.equal('0%');
+    expect(label).to.be.null;
+  });
+
+  it('renders with default values (with label)', async () => {
+    const el = await fixture(
+      html`<edu-progress-bar .showLabel=${true}></edu-progress-bar>`,
+    );
+
+    const bar = el.shadowRoot.querySelector('.bar-fill');
+    const label = el.shadowRoot.querySelector('.label');
+
+    expect(el.value).to.equal(0);
+    expect(el.max).to.equal(100);
+    expect(bar.style.width).to.equal('0%');
+    expect(label.textContent).to.equal('0%');
+  });
+
+  it('calculates percentage correctly', async () => {
+    const el = await fixture(
+      html`<edu-progress-bar .value=${25} .max=${50}></edu-progress-bar>`,
+    );
+
+    const bar = el.shadowRoot.querySelector('.bar-fill');
+    const label = el.shadowRoot.querySelector('.label');
+
+    expect(bar.style.width).to.equal('50%');
+    expect(label).to.be.null;
+  });
+
+  it('calculates percentage correctly (with label)', async () => {
+    const el = await fixture(
+      html`<edu-progress-bar
+        .value=${25}
+        .max=${50}
+        .showLabel=${true}
+      ></edu-progress-bar>`,
+    );
+
+    const bar = el.shadowRoot.querySelector('.bar-fill');
+    const label = el.shadowRoot.querySelector('.label');
+
+    expect(bar.style.width).to.equal('50%');
+    expect(label.textContent).to.equal('50%');
+  });
+
+  it('caps percentage at 100%', async () => {
+    const el = await fixture(
+      html`<edu-progress-bar .value=${200} .max=${100}></edu-progress-bar>`,
+    );
+    const bar = el.shadowRoot.querySelector('.bar-fill');
+    const label = el.shadowRoot.querySelector('.label');
+
+    expect(bar.style.width).to.equal('100%');
+    expect(label).to.be.null;
+  });
+
+  it('caps percentage at 100% (with label)', async () => {
+    const el = await fixture(
+      html`<edu-progress-bar
+        .value=${200}
+        .max=${100}
+        .showLabel=${true}
+      ></edu-progress-bar>`,
+    );
+
+    const bar = el.shadowRoot.querySelector('.bar-fill');
+    const label = el.shadowRoot.querySelector('.label');
+
+    expect(bar.style.width).to.equal('100%');
+    expect(label.textContent).to.equal('100%');
+  });
+
+  it('handles invalid max', async () => {
+    const el = await fixture(
+      html`<edu-progress-bar .value=${50} .max=${0}></edu-progress-bar>`,
+    );
+
+    const bar = el.shadowRoot.querySelector('.bar-fill');
+    const label = el.shadowRoot.querySelector('.label');
+
+    expect(bar.style.width).to.equal('50%');
+    expect(label).to.be.null;
+  });
+
+  it('handles invalid max (with label)', async () => {
+    const el = await fixture(
+      html`<edu-progress-bar
+        .value=${50}
+        .max=${0}
+        .showLabel=${true}
+      ></edu-progress-bar>`,
+    );
+
+    const bar = el.shadowRoot.querySelector('.bar-fill');
+    const label = el.shadowRoot.querySelector('.label');
+
+    expect(bar.style.width).to.equal('50%');
+    expect(label.textContent).to.equal('50%');
+  });
+
+  it('hides label when showLabel is false', async () => {
+    const el = await fixture(
+      html`<edu-progress-bar
+        .value=${50}
+        .showLabel=${false}
+      ></edu-progress-bar>`,
+    );
+
+    const label = el.shadowRoot.querySelector('.label');
+
+    expect(label).to.equal(null);
+  });
+
+  it('shows label when showLabel is true', async () => {
+    const el = await fixture(
+      html`<edu-progress-bar
+        .value=${50}
+        .showLabel=${true}
+      ></edu-progress-bar>`,
+    );
+
+    const label = el.shadowRoot.querySelector('.label');
+
+    expect(label).to.exist;
+  });
+
+  it('is accessible by default', async () => {
+    const el = await fixture(html`<edu-progress-bar></edu-progress-bar>`);
+
+    await expect(el).to.be.accessible();
+  });
+
+  it('is accessible by default (with value)', async () => {
+    const el = await fixture(
+      html`<edu-progress-bar .value=${50}></edu-progress-bar>`,
+    );
+
+    await expect(el).to.be.accessible();
+  });
+
+  it('is accessible (with label)', async () => {
+    const el = await fixture(
+      html`<edu-progress-bar .showLabel=${true}></edu-progress-bar>`,
+    );
+
+    await expect(el).to.be.accessible();
+  });
+
+  it('is accessible (with value and label)', async () => {
+    const el = await fixture(
+      html`<edu-progress-bar
+        .value=${50}
+        .showLabel=${true}
+      ></edu-progress-bar>`,
+    );
+
+    await expect(el).to.be.accessible();
+  });
+});

package/test/EduTooltip.test.js

@@ -0,0 +1,119 @@
+import { fixture, html, expect } from '@open-wc/testing';
+import '../src/EduTooltip.js';
+
+describe('EduTooltip', () => {
+  it('is not visible by default', async () => {
+    const el = await fixture(html`<edu-tooltip></edu-tooltip>`);
+
+    const tooltip = el.shadowRoot.querySelector('.tooltip');
+    const styles = getComputedStyle(tooltip);
+    expect(styles.opacity).to.equal('0');
+  });
+
+  it('sets bottom styles for position when there is not value passed in', async () => {
+    const el = await fixture(html`<edu-tooltip></edu-tooltip>`);
+
+    const tooltip = el.shadowRoot.querySelector('.tooltip');
+    expect(tooltip.classList.contains('bottom')).to.be.true;
+  });
+
+  it('sets bottom styles for position when the value passed is not valid', async () => {
+    const el = await fixture(
+      html`<edu-tooltip position="invalidString"></edu-tooltip>`,
+    );
+
+    const tooltip = el.shadowRoot.querySelector('.tooltip');
+    expect(tooltip.classList.contains('bottom')).to.be.true;
+  });
+
+  it('applies class for position', async () => {
+    const el = await fixture(
+      html`<edu-tooltip position="right"></edu-tooltip>`,
+    );
+
+    const tooltip = el.shadowRoot.querySelector('.tooltip');
+    expect(tooltip.classList.contains('right')).to.be.true;
+  });
+
+  it('applies class for position (case insensitive)', async () => {
+    const el = await fixture(
+      html`<edu-tooltip position="RIGHT"></edu-tooltip>`,
+    );
+
+    const tooltip = el.shadowRoot.querySelector('.tooltip');
+    expect(tooltip.classList.contains('right')).to.be.true;
+  });
+
+  it('renders text of the tooltip', async () => {
+    const el = await fixture(html`<edu-tooltip text="Help"></edu-tooltip>`);
+
+    const tooltip = el.shadowRoot.querySelector('.tooltip');
+    expect(tooltip.textContent).to.equal('\n        Help\n      ');
+  });
+
+  it('shows tooltip when mouseenter event', async () => {
+    const el = await fixture(
+      html`<edu-tooltip text="Text"><span>Hover me</span></edu-tooltip>`,
+    );
+
+    const trigger = el.shadowRoot.querySelector('span');
+    const tooltip = el.shadowRoot.querySelector('.tooltip');
+    trigger.dispatchEvent(new Event('mouseenter'));
+    await el.updateComplete;
+
+    const styles = getComputedStyle(tooltip);
+    expect(styles.opacity).to.equal('1');
+  });
+
+  it('hides tooltip when mouseleave event', async () => {
+    const el = await fixture(
+      html`<edu-tooltip text="Text"><span>Hover me</span></edu-tooltip>`,
+    );
+
+    const trigger = el.shadowRoot.querySelector('span');
+    const tooltip = el.shadowRoot.querySelector('.tooltip');
+    el.visible = true;
+    trigger.dispatchEvent(new Event('mouseleave'));
+    await el.updateComplete;
+
+    const styles = getComputedStyle(tooltip);
+    expect(styles.opacity).to.equal('0');
+  });
+
+  it('shows tooltip when focus event', async () => {
+    const el = await fixture(
+      html`<edu-tooltip text="Text"><span>Focus</span></edu-tooltip>`,
+    );
+
+    const trigger = el.shadowRoot.querySelector('span');
+    const tooltip = el.shadowRoot.querySelector('.tooltip');
+    trigger.dispatchEvent(new Event('focus'));
+    await el.updateComplete;
+
+    const styles = getComputedStyle(tooltip);
+    expect(styles.opacity).to.equal('1');
+  });
+
+  it('hides tooltip when blur event', async () => {
+    const el = await fixture(
+      html`<edu-tooltip text="Text"><span>Focus</span></edu-tooltip>`,
+    );
+
+    const trigger = el.shadowRoot.querySelector('span');
+    const tooltip = el.shadowRoot.querySelector('.tooltip');
+    el.visible = true;
+    trigger.dispatchEvent(new Event('blur'));
+    await el.updateComplete;
+
+    const styles = getComputedStyle(tooltip);
+    expect(styles.opacity).to.equal('0');
+  });
+
+  it('is accessible', async () => {
+    const el = await fixture(
+      html`<edu-tooltip text="Text"><span>Trigger</span></edu-tooltip>`,
+    );
+
+    await expect(el).to.be.accessible();
+  });
+});

package/.github/workflows/publish-packages-to-npm-registry.yaml

@@ -1,21 +0,0 @@
-name: Publish Package to npmjs
-on:
-  release:
-    types: [published]
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      id-token: write
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20.x'
-          registry-url: 'https://registry.npmjs.org'
-      - run: npm install -g npm
-      - run: npm ci
-      - run: npm publish --provenance --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}