Skip to content
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

feat(tabs): update tab html structure and classes #1120

Merged
merged 9 commits into from
Jan 31, 2025
+660 −518
Merged

feat(tabs): update tab html structure and classes #1120

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
cdbae54
feat(tabs): update tab html structure (a11y)
mlmoravek Nov 18, 2024
fa49384
feat(tabs): update tab html structure (a11y)
mlmoravek Nov 18, 2024
7e7ec06
Merge remote-tracking branch 'origin/develop' into feat/tabs/tablist-…
mlmoravek Dec 9, 2024
4d30ed3
test: fix tests
mlmoravek Dec 9, 2024
825aada
docs: gen
mlmoravek Dec 9, 2024
8cb6447
test(tabs): migrate oruga vue 2 test casse
mlmoravek Dec 16, 2024
536d7ef
Merge remote-tracking branch 'origin/develop' into feat/tabs/tablist-…
mlmoravek Jan 31, 2025
c922bac
Merge remote-tracking branch 'origin/develop' into feat/tabs/tablist-…
mlmoravek Jan 31, 2025
35d83c4
Merge remote-tracking branch 'origin/develop' into feat/tabs/tablist-…
mlmoravek Jan 31, 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
Prev Previous commit
Next Next commit
Loading
Loading status checks…
test: fix tests
@mlmoravek
mlmoravek committed Dec 9, 2024
commit 4d30ed36fc67cc85a0e37c5764964685027ed559
10 changes: 6 additions & 4 deletions packages/oruga/src/components/tabs/tests/__snapshots__/tabs.integration.test.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`OTab with OTabItem tests > test render correctly 1`] = `
"<div class="o-tabs" data-oruga="tabs">
<nav class="o-tabs__nav o-tabs__nav--default" role="tablist" aria-orientation="horizontal">
"<div class="o-tabs o-tabs--default" data-oruga="tabs">
<div class="o-tabs__tablist" role="tablist" aria-orientation="horizontal">
<!--
@slot Additional slot before tabs
-->
--><button id="tab-1" class="o-tabs__tab o-tabs__tab--default o-tabs__tab--active" role="tab" aria-selected="true">
<!--v-if--><span class="o-tabs__tab-label">Account</span>
</button>
<!--
@slot Additional slot after tabs
-->
</nav>
</div>
<section class="o-tabs__content">
<!--
@slot Place tab items here
6 changes: 3 additions & 3 deletions packages/oruga/src/components/tabs/tests/__snapshots__/tabs.test.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`OTabs tests > render correctly 1`] = `
"<div class="o-tabs" data-oruga="tabs">
<nav class="o-tabs__nav o-tabs__nav--default" role="tablist" aria-orientation="horizontal">
"<div class="o-tabs o-tabs--default" data-oruga="tabs">
<div class="o-tabs__tablist" role="tablist" aria-orientation="horizontal">
<!--
@slot Additional slot before tabs
-->
<!--
@slot Additional slot after tabs
-->
</nav>
</div>
<section class="o-tabs__content">
<!--
@slot Place tab items here
2 changes: 2 additions & 0 deletions packages/oruga/src/components/tabs/tests/tabs.axe.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { afterEach, describe, expect, test } from "vitest";
import { enableAutoUnmount, mount } from "@vue/test-utils";
import { nextTick } from "vue";
import { axe } from "jest-axe";

import TabsExample from "./TabsAxeExample.vue";
@@ -55,6 +56,7 @@ describe("Tabs axe tests", () => {
props: { ...props },
attachTo: document.body,
});
await nextTick();
expect(await axe(wrapper.element)).toHaveNoViolations();
});
});
54 changes: 28 additions & 26 deletions packages/oruga/src/components/tabs/tests/tabs.integration.test.ts
View file
Original file line number Diff line number Diff line change
@@ -42,7 +42,7 @@ describe("OTab with OTabItem tests", () => {
};
}

test("test render correctly", () => {
test("test render correctly", async () => {
const wrapper = mount(
genTestcomponent(
{},
@@ -53,6 +53,8 @@ describe("OTab with OTabItem tests", () => {
},
),
);
await nextTick();

expect(!!wrapper.vm).toBeTruthy();
expect(wrapper.exists()).toBeTruthy();
expect(wrapper.html()).toMatchSnapshot();
@@ -66,9 +68,9 @@ describe("OTab with OTabItem tests", () => {

test("renders the tab buttons", async () => {
const wrapper = mount(componentWrapper);
await wrapper.vm.$nextTick();
await nextTick();

const tabButtons = wrapper.findAll(".o-tabs__nav-item");
const tabButtons = wrapper.findAll(".o-tabs__tab");

expect(tabButtons.length).toBe(3);
expect(tabButtons[0].text()).toBe("Tab 1");
@@ -81,7 +83,7 @@ describe("OTab with OTabItem tests", () => {

test("renders the tab panels", async () => {
const wrapper = mount(componentWrapper, { attachTo: document.body });
await wrapper.vm.$nextTick();
await nextTick();

const tabPanls = wrapper.findAll(`[data-oruga="tabs-item"]`);

@@ -96,7 +98,7 @@ describe("OTab with OTabItem tests", () => {

test("switches the content based on the tab clicked", async () => {
const wrapper = mount(componentWrapper, { attachTo: document.body });
await wrapper.vm.$nextTick();
await nextTick();

const tabs = wrapper.findAll(".o-tabs__tab");
const tabPanls = wrapper.findAll(`[data-oruga="tabs-item"]`);
@@ -114,7 +116,7 @@ describe("OTab with OTabItem tests", () => {
expect(tabPanls[1].isVisible()).toBeFalsy();
});

test("render item with component prop correctly", () => {
test("render item with component prop correctly", async () => {
const wrapper = mount(
genTestcomponent(
{},
@@ -126,6 +128,7 @@ describe("OTab with OTabItem tests", () => {
},
),
);
await nextTick();

const step = wrapper.find('[data-oruga="tabs-item"]');
expect(step.exists()).toBeTruthy();
@@ -154,53 +157,53 @@ describe("OTab with OTabItem tests", () => {
});
await nextTick();

const navElements = wrapper.findAll(".o-tabs__nav-item");
const navElements = wrapper.findAll(".o-tabs__tab");
expect(navElements).toHaveLength(options.length);

navElements.forEach((el, idx) => {
expect(el.classes("o-tabs__nav-item--previous")).toBe(
expect(el.classes("o-tabs__tab--previous")).toBe(
idx < currentIndex,
);
expect(el.classes("o-tabs__nav-item--active")).toBe(
expect(el.classes("o-tabs__tab--active")).toBe(
idx == currentIndex,
);
expect(el.classes("o-tabs__nav-item--next")).toBe(
expect(el.classes("o-tabs__tab--next")).toBe(
idx > currentIndex,
);
});

currentIndex = 4;
let navButton = navElements[currentIndex].find("button");
expect(navButton.exists()).toBeTruthy();
let navButton = navElements[currentIndex];
expect(navButton.element.tagName).toBe("BUTTON");

await navButton.trigger("click");

navElements.forEach((el, idx) => {
expect(el.classes("o-tabs__nav-item--previous")).toBe(
expect(el.classes("o-tabs__tab--previous")).toBe(
idx < currentIndex,
);
expect(el.classes("o-tabs__nav-item--active")).toBe(
expect(el.classes("o-tabs__tab--active")).toBe(
idx == currentIndex,
);
expect(el.classes("o-tabs__nav-item--next")).toBe(
expect(el.classes("o-tabs__tab--next")).toBe(
idx > currentIndex,
);
});

currentIndex = 0;
navButton = navElements[currentIndex].find("button");
expect(navButton.exists()).toBeTruthy();
navButton = navElements[currentIndex];
expect(navButton.element.tagName).toBe("BUTTON");

await navButton.trigger("click");

navElements.forEach((el, idx) => {
expect(el.classes("o-tabs__nav-item--previous")).toBe(
expect(el.classes("o-tabs__tab--previous")).toBe(
idx < currentIndex,
);
expect(el.classes("o-tabs__nav-item--active")).toBe(
expect(el.classes("o-tabs__tab--active")).toBe(
idx == currentIndex,
);
expect(el.classes("o-tabs__nav-item--next")).toBe(
expect(el.classes("o-tabs__tab--next")).toBe(
idx > currentIndex,
);
});
@@ -224,7 +227,7 @@ describe("OTab with OTabItem tests", () => {
const wrapper = mount(OTabs, { props: { options } });
await nextTick();

const navElements = wrapper.findAll(".o-tabs__nav-item");
const navElements = wrapper.findAll(".o-tabs__tab");
expect(navElements).toHaveLength(options.length);

const itemElements = wrapper.findAll('[data-oruga="tabs-item"]');
@@ -248,7 +251,7 @@ describe("OTab with OTabItem tests", () => {
const wrapper = mount(OTabs, { props: { options } });
await nextTick();

const navElements = wrapper.findAll(".o-tabs__nav-item");
const navElements = wrapper.findAll(".o-tabs__tab");
expect(navElements).toHaveLength(Object.keys(options).length);

const optionElements = wrapper.findAll('[data-oruga="tabs-item"]');
@@ -284,17 +287,16 @@ describe("OTab with OTabItem tests", () => {
const wrapper = mount(OTabs, { props: { options } });
await nextTick();

const navElements = wrapper.findAll(".o-tabs__nav-item");
const navElements = wrapper.findAll(".o-tabs__tab");
expect(navElements).toHaveLength(Object.keys(options).length);

const optionElements = wrapper.findAll('[data-oruga="tabs-item"]');
expect(optionElements).toHaveLength(options.length);

navElements.forEach((el, idx) => {
expect(el.text()).toBe(options[idx].label);
const button = el.find("button");
expect(button.exists()).toBeTruthy();
expect(button.classes("o-tabs__tab--disabled")).toBe(
expect(el.element.tagName).toBe("BUTTON");
expect(el.classes("o-tabs__tab--disabled")).toBe(
options[idx].attrs?.disabled || false,
);
});
5 changes: 4 additions & 1 deletion packages/oruga/src/components/tabs/tests/tabs.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import { describe, test, expect, afterEach } from "vitest";
import { enableAutoUnmount, mount } from "@vue/test-utils";
import { nextTick } from "vue";

import OTabs from "@/components/tabs/Tabs.vue";

describe("OTabs tests", () => {
enableAutoUnmount(afterEach);

test("render correctly", () => {
test("render correctly", async () => {
const wrapper = mount(OTabs);
await nextTick();

expect(!!wrapper.vm).toBeTruthy();
expect(wrapper.exists()).toBeTruthy();
expect(wrapper.attributes("data-oruga")).toBe("tabs");