mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 21:57:41 +03:00
chore(tabs): remove deprecated properties
PiperOrigin-RevId: 564472979
This commit is contained in:
parent
c6a914d70e
commit
d0ff335f59
@ -109,26 +109,6 @@ export class Tabs extends LitElement {
|
|||||||
@queryAssignedElements({flatten: true})
|
@queryAssignedElements({flatten: true})
|
||||||
private readonly maybeTabs!: HTMLElement[];
|
private readonly maybeTabs!: HTMLElement[];
|
||||||
|
|
||||||
/**
|
|
||||||
* TODO(b/293476210): remove
|
|
||||||
* @deprecated use `activeTabIndex`
|
|
||||||
*/
|
|
||||||
@property({type: Number})
|
|
||||||
get selected() {
|
|
||||||
return this.activeTabIndex;
|
|
||||||
}
|
|
||||||
set selected(index: number) {
|
|
||||||
this.activeTabIndex = index;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* TODO(b/293476210): remove
|
|
||||||
* @deprecated use `activeTab`
|
|
||||||
*/
|
|
||||||
get selectedItem() {
|
|
||||||
return this.activeTab;
|
|
||||||
}
|
|
||||||
|
|
||||||
private get focusedTab() {
|
private get focusedTab() {
|
||||||
return this.tabs.find(tab => tab.matches(':focus-within'));
|
return this.tabs.find(tab => tab.matches(':focus-within'));
|
||||||
}
|
}
|
||||||
|
@ -15,13 +15,13 @@ import {MdSecondaryTab} from './secondary-tab.js';
|
|||||||
import {MdTabs} from './tabs.js';
|
import {MdTabs} from './tabs.js';
|
||||||
|
|
||||||
interface TabsTestProps {
|
interface TabsTestProps {
|
||||||
selected?: number;
|
activeTabIndex?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getTabsTemplate(props?: TabsTestProps) {
|
function getTabsTemplate(props?: TabsTestProps) {
|
||||||
return html`
|
return html`
|
||||||
<md-tabs
|
<md-tabs
|
||||||
.selected=${props?.selected ?? 0}
|
.activeTabIndex=${props?.activeTabIndex ?? 0}
|
||||||
>
|
>
|
||||||
<md-primary-tab>A</md-primary-tab>
|
<md-primary-tab>A</md-primary-tab>
|
||||||
<md-primary-tab>B</md-primary-tab>
|
<md-primary-tab>B</md-primary-tab>
|
||||||
@ -48,38 +48,38 @@ describe('<md-tabs>', () => {
|
|||||||
|
|
||||||
describe('properties', () => {
|
describe('properties', () => {
|
||||||
it('renders selected with indicator', async () => {
|
it('renders selected with indicator', async () => {
|
||||||
const {harness} = await setupTest({selected: 1});
|
const {harness} = await setupTest({activeTabIndex: 1});
|
||||||
expect(harness.element.selected).toBe(1);
|
expect(harness.element.activeTabIndex).toBe(1);
|
||||||
expect(harness.element.activeTab).toBe(harness.harnessedItems[1].element);
|
expect(harness.element.activeTab).toBe(harness.harnessedItems[1].element);
|
||||||
harness.harnessedItems.forEach(async (tabHarness, i) => {
|
harness.harnessedItems.forEach(async (tabHarness, i) => {
|
||||||
const shouldBeSelected = i === harness.element.selected;
|
const shouldBeSelected = i === harness.element.activeTabIndex;
|
||||||
await tabHarness.element.updateComplete;
|
await tabHarness.element.updateComplete;
|
||||||
expect(tabHarness.element.selected).toBe(shouldBeSelected);
|
expect(tabHarness.element.active).toBe(shouldBeSelected);
|
||||||
expect(await tabHarness.isIndicatorShowing()).toBe(shouldBeSelected);
|
expect(await tabHarness.isIndicatorShowing()).toBe(shouldBeSelected);
|
||||||
});
|
});
|
||||||
await env.waitForStability();
|
await env.waitForStability();
|
||||||
harness.element.selected = 0;
|
harness.element.activeTabIndex = 0;
|
||||||
await harness.element.updateComplete;
|
await harness.element.updateComplete;
|
||||||
expect(harness.element.selected).toBe(0);
|
expect(harness.element.activeTabIndex).toBe(0);
|
||||||
harness.harnessedItems.forEach(async (tabHarness, i) => {
|
harness.harnessedItems.forEach(async (tabHarness, i) => {
|
||||||
const shouldBeSelected = i === harness.element.selected;
|
const shouldBeSelected = i === harness.element.activeTabIndex;
|
||||||
await tabHarness.element.updateComplete;
|
await tabHarness.element.updateComplete;
|
||||||
expect(tabHarness.element.selected).toBe(shouldBeSelected);
|
expect(tabHarness.element.active).toBe(shouldBeSelected);
|
||||||
expect(await tabHarness.isIndicatorShowing()).toBe(shouldBeSelected);
|
expect(await tabHarness.isIndicatorShowing()).toBe(shouldBeSelected);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('updates activeTab', async () => {
|
it('updates activeTab', async () => {
|
||||||
const {harness} = await setupTest({selected: 1});
|
const {harness} = await setupTest({activeTabIndex: 1});
|
||||||
expect(harness.element.activeTab).toBe(harness.harnessedItems[1].element);
|
expect(harness.element.activeTab).toBe(harness.harnessedItems[1].element);
|
||||||
harness.element.selected = 0;
|
harness.element.activeTabIndex = 0;
|
||||||
await harness.element.updateComplete;
|
await harness.element.updateComplete;
|
||||||
expect(harness.element.activeTab).toBe(harness.harnessedItems[0].element);
|
expect(harness.element.activeTab).toBe(harness.harnessedItems[0].element);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('maintains selection when tabs are mutated', async () => {
|
it('maintains selection when tabs are mutated', async () => {
|
||||||
// Note: adding and moving tabs does not change selection
|
// Note: adding and moving tabs does not change selection
|
||||||
const {harness} = await setupTest({selected: 1});
|
const {harness} = await setupTest({activeTabIndex: 1});
|
||||||
const [, second] = harness.element.tabs;
|
const [, second] = harness.element.tabs;
|
||||||
expect(harness.element.activeTab).toBe(second);
|
expect(harness.element.activeTab).toBe(second);
|
||||||
const tab = document.createElement('md-primary-tab');
|
const tab = document.createElement('md-primary-tab');
|
||||||
@ -103,7 +103,7 @@ describe('<md-tabs>', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it('selects first item when selected tab is removed', async () => {
|
it('selects first item when selected tab is removed', async () => {
|
||||||
const {harness} = await setupTest({selected: 1});
|
const {harness} = await setupTest({activeTabIndex: 1});
|
||||||
const [first, second] = harness.element.tabs;
|
const [first, second] = harness.element.tabs;
|
||||||
expect(harness.element.activeTab).toBe(second);
|
expect(harness.element.activeTab).toBe(second);
|
||||||
second.remove();
|
second.remove();
|
||||||
|
Loading…
Reference in New Issue
Block a user