diff --git a/src/roles/all.ts b/src/roles/all.ts index 4d81b12..da2ac3a 100644 --- a/src/roles/all.ts +++ b/src/roles/all.ts @@ -1,4 +1,8 @@ +export * from './tabs'; export * from './button'; export * from './checkbox'; -export * from './tabs'; +export * from './textbox'; +export * from './listbox'; +export * from './combobox'; +export * from './search'; export * from './menu'; diff --git a/src/roles/calendar.test.tsx b/src/roles/calendar.test.tsx index a96cee8..2e0c841 100644 --- a/src/roles/calendar.test.tsx +++ b/src/roles/calendar.test.tsx @@ -3,7 +3,7 @@ import { Calendar } from './calendar'; import { prettyDOM, render } from '@testing-library/react'; import user from '@testing-library/user-event'; import '@testing-library/jest-dom'; -import { CalendarSpectrum } from './Calendar-spectrum'; +import { CalendarSpectrum } from './calendar-spectrum'; import { screenTest } from '../screen'; function freshFn() { @@ -22,50 +22,50 @@ describe('Calendar', () => { }); it('has previous button', () => { - expect(screenTest(Calendar.previousButton())).toBeVisible(); + expect(screenTest(Calendar.PreviousButton())).toBeVisible(); }); it('can click previous button', async () => { - await screenTest.wait(Calendar.previousButton().click); + await screenTest.wait(Calendar.PreviousButton().click); expect( - await screenTest.wait(Calendar.grid('Audition Date, January 2020')) + await screenTest.wait(Calendar.Grid('Audition Date, January 2020')) ).toBeVisible(); }); it('has next button', () => { // Spectrum has two Next button, one for the next month, one for tabbing. - expect(screenTest(Calendar.nextButton().all)[0]).toBeVisible(); + expect(screenTest(Calendar.NextButton().all)[0]).toBeVisible(); }); it('has grid', () => { - expect(screenTest(Calendar.grid())).toBeVisible(); + expect(screenTest(Calendar.Grid())).toBeVisible(); }); it('has named grid', () => { expect( - screenTest(Calendar.grid('Audition Date, February 2020')) + screenTest(Calendar.Grid('Audition Date, February 2020')) ).toBeVisible(); }); it('has week rows', () => { - expect(screenTest(Calendar.weekRow().all)).toHaveLength(5); + expect(screenTest(Calendar.WeekRow().all)).toHaveLength(5); }); it('has day gridcells', () => { - expect(screenTest(Calendar.dayGridCell().all)).toHaveLength(5 * 7); + expect(screenTest(Calendar.DayGridCell().all)).toHaveLength(5 * 7); }); it('has selected day gridcell', () => { - const selectedDay = screenTest(Calendar.dayGridCell().selected); + const selectedDay = screenTest(Calendar.DayGridCell().selected); expect( - screenTest(Calendar.dayButton(/February 3, 2020/), selectedDay) + screenTest(Calendar.DayButton(/February 3, 2020/), selectedDay) ).toBeVisible(); }); describe.skip('when particular day is clicked', () => { beforeEach(async () => { - console.log(prettyDOM(screenTest(Calendar.grid()))); - await screenTest.wait(Calendar.dayButton('20 February 2020').click); + console.log(prettyDOM(screenTest(Calendar.Grid()))); + await screenTest.wait(Calendar.DayButton('20 February 2020').click); }); it('dispatches', () => { @@ -81,43 +81,43 @@ describe('Calendar', () => { }); it('focuses on selected day', () => { - const selectedDay = screenTest(Calendar.dayGridCell().selected); - expect(screenTest(Calendar.dayButton(), selectedDay)).toHaveFocus(); + const selectedDay = screenTest(Calendar.DayGridCell().selected); + expect(screenTest(Calendar.DayButton(), selectedDay)).toHaveFocus(); }); it('can go left', async () => { await user.keyboard('{ArrowLeft}'); expect( - screenTest(Calendar.dayButton(/February 2, 2020/)) + screenTest(Calendar.DayButton(/February 2, 2020/)) ).toHaveFocus(); }); it('can go right', async () => { await user.keyboard('{ArrowRight}'); expect( - screenTest(Calendar.dayButton(/February 4, 2020/)) + screenTest(Calendar.DayButton(/February 4, 2020/)) ).toHaveFocus(); }); it('can select left with Enter key', async () => { await user.keyboard('{ArrowLeft}{Enter}'); - const selectedDay = screenTest(Calendar.dayGridCell().selected); + const selectedDay = screenTest(Calendar.DayGridCell().selected); expect( - screenTest(Calendar.dayButton(/February 2, 2020/), selectedDay) + screenTest(Calendar.DayButton(/February 2, 2020/), selectedDay) ).toHaveFocus(); }); it('can select right with Enter key', async () => { await user.keyboard('{ArrowRight}{Enter}'); expect( - screenTest(Calendar.dayButton(/February 4, 2020/)) + screenTest(Calendar.DayButton(/February 4, 2020/)) ).toHaveFocus(); }); it('focuses next week after pressing right arrow 7 times', async () => { await user.keyboard(new Array(7).fill('{ArrowRight}').join('')); expect( - screenTest(Calendar.dayButton(/February 10, 2020/)) + screenTest(Calendar.DayButton(/February 10, 2020/)) ).toHaveFocus(); }); }); diff --git a/src/roles/calendar.ts b/src/roles/calendar.ts index bd9e13f..9c3115f 100644 --- a/src/roles/calendar.ts +++ b/src/roles/calendar.ts @@ -3,22 +3,22 @@ import { role, roleSelectable } from './shared'; export const Calendar = Object.assign( {}, { - previousButton(name: string | RegExp = /previous/i) { + PreviousButton(name: string | RegExp = /previous/i) { return role<{ click: true }>('button', name); }, - nextButton(name: string | RegExp = /next/i) { + NextButton(name: string | RegExp = /next/i) { return role<{ click: true }>('button', name); }, - grid(name?: string | RegExp) { + Grid(name?: string | RegExp) { return role('grid', name); }, - weekRow(name?: string | RegExp) { + WeekRow(name?: string | RegExp) { return role('row', name); }, - dayGridCell(name?: string | RegExp) { + DayGridCell(name?: string | RegExp) { return roleSelectable('gridcell', name); }, - dayButton(name?: string | RegExp) { + DayButton(name?: string | RegExp) { return role<{ click: true }>('button', name); }, } diff --git a/src/roles/combobox.test.tsx b/src/roles/combobox.test.tsx index 4ad68df..43625d4 100644 --- a/src/roles/combobox.test.tsx +++ b/src/roles/combobox.test.tsx @@ -8,7 +8,7 @@ import { Combobox } from './combobox'; import { ComboboxSpectrum } from './combobox-spectrum'; describe('Combobox', () => { - describe.each([['', ]])( + describe.each([['@headlessui/react', ]])( '%s', (_displayName, el) => { beforeEach(() => { @@ -36,14 +36,14 @@ describe('Combobox', () => { test('tabThenDownArrow', async () => { await Combobox.Interactions(user).tabThenDownArrow(); waitFor(() => { - expect(screenTest(Combobox.popupListbox())).toBeVisible(); + expect(screenTest(Combobox.PopupListbox())).toBeVisible(); }); }); test('tabThenDownArrow + escape', async () => { await Combobox.Interactions(user).tabThenDownArrow(); await Combobox.Interactions(user).escape(); - expect(screenTest(Combobox.popupListbox.all)).toHaveLength(0); + expect(screenTest(Combobox.PopupListbox.all)).toHaveLength(0); }); }); @@ -51,16 +51,16 @@ describe('Combobox', () => { beforeEach(() => user.keyboard('{Tab}{Down}')); it('renders listbox', () => { - expect(screenTest(Combobox.popupListbox())).toBeVisible(); + expect(screenTest(Combobox.PopupListbox())).toBeVisible(); }); it('renders 1 listbox', () => { - expect(screenTest(Combobox.popupListbox.all)).toHaveLength(1); + expect(screenTest(Combobox.PopupListbox.all)).toHaveLength(1); }); it('has 5 options', async () => { await waitFor(() => { - expect(screenTest(Combobox.popupListbox.option().all)).toHaveLength( + expect(screenTest(Combobox.PopupListbox.Option().all)).toHaveLength( 5 ); }); @@ -85,7 +85,7 @@ describe('Combobox', () => { }); describe('Combobox.Button', () => { - describe.each([['', ]])( + describe.each([['@adobe/react-spectrum', ]])( '%s', (_displayName, el) => { beforeEach(() => { @@ -93,17 +93,17 @@ describe('Combobox.Button', () => { }); it('renders button', () => { - expect(screenTest(Combobox.button())).toBeVisible(); + expect(screenTest(Combobox.Button())).toBeVisible(); }); it('renders named button', () => { expect( - screenTest(Combobox.button('Person Durward Reynolds')) + screenTest(Combobox.Button('Person Durward Reynolds')) ).toBeVisible(); }); it('has selected person as name', () => { - expect(screenTest(Combobox.button())).toHaveAccessibleName( + expect(screenTest(Combobox.Button())).toHaveAccessibleName( expect.stringContaining('Durward Reynolds') ); }); @@ -111,13 +111,13 @@ describe('Combobox.Button', () => { describe('.Interactions', () => { test('tab', async () => { await Combobox.Interactions(user).tab(); - expect(screenTest(Combobox.button())).toHaveFocus(); + expect(screenTest(Combobox.Button())).toHaveFocus(); }); test.skip('tabThenDownArrow', async () => { await Combobox.Interactions(user).tabThenDownArrow(); await waitFor(() => { - expect(screenTest(Combobox.popupListbox())).toBeVisible(); + expect(screenTest(Combobox.PopupListbox())).toBeVisible(); }); }); @@ -125,7 +125,7 @@ describe('Combobox.Button', () => { await Combobox.Interactions(user).tabThenDownArrow(); await Combobox.Interactions(user).escape(); waitFor(() => { - expect(screenTest(Combobox.popupListbox.all)).toHaveLength(0); + expect(screenTest(Combobox.PopupListbox.all)).toHaveLength(0); }); }); }); @@ -134,16 +134,16 @@ describe('Combobox.Button', () => { beforeEach(() => user.keyboard('{Tab}{Down}')); it('renders listbox', () => { - expect(screenTest(Combobox.popupListbox())).toBeVisible(); + expect(screenTest(Combobox.PopupListbox())).toBeVisible(); }); it('renders 1 listbox', () => { - expect(screenTest(Combobox.popupListbox.all)).toHaveLength(1); + expect(screenTest(Combobox.PopupListbox.all)).toHaveLength(1); }); it('has 5 options', async () => { await waitFor(() => { - expect(screenTest(Combobox.popupListbox.option().all)).toHaveLength( + expect(screenTest(Combobox.PopupListbox.Option().all)).toHaveLength( 5 ); }); diff --git a/src/roles/combobox.ts b/src/roles/combobox.ts index 3a69ce2..79ae44e 100644 --- a/src/roles/combobox.ts +++ b/src/roles/combobox.ts @@ -15,10 +15,10 @@ export const Combobox = Object.assign(combobox, { get all() { return role('combobox').all; }, - get popupListbox() { + get PopupListbox() { return Listbox; }, - get button() { + get Button() { return Button; }, // TODO: or Scripts()? diff --git a/src/roles/listbox.test.tsx b/src/roles/listbox.test.tsx index 52caa2d..bd3e3a2 100644 --- a/src/roles/listbox.test.tsx +++ b/src/roles/listbox.test.tsx @@ -18,14 +18,14 @@ describe('Listbox', () => { }); it('renders button', () => { - expect(screenTest(Button(/^Choose/))).toBeVisible(); + expect(screenTest(Button(/\bChoose\b/))).toBeVisible(); }); describe('when opening', () => { // screenTest.click(Button(/^Choose/)) // screenTest.user.clicks(Button(/^Choose/)) // screenTest._clicks_(Button(/^Choose/)) - beforeEach(() => user.click(screenTest(Button(/^Choose/)))); + beforeEach(() => user.click(screenTest(Button(/\bChoose\b/)))); it('renders labelled listbox', () => { expect(screenTest(Listbox('Choose'))).toBeVisible(); @@ -38,7 +38,7 @@ describe('Listbox', () => { it.skip('has 3 options', async () => { // const el = screenTest(Listbox()); await waitFor(() => { - expect(screenTest(Listbox.option().all)).toHaveLength(3); + expect(screenTest(Listbox.Option().all)).toHaveLength(3); }); }); }); diff --git a/src/roles/listbox.ts b/src/roles/listbox.ts index e39a990..471d9ab 100644 --- a/src/roles/listbox.ts +++ b/src/roles/listbox.ts @@ -11,7 +11,7 @@ export const Listbox = Object.assign(listbox, { get all() { return role('listbox').all; }, - option(name?: string | RegExp) { + Option(name?: string | RegExp) { return roleSelectable('option', name); }, }); diff --git a/src/roles/menu.test.tsx b/src/roles/menu.test.tsx index 2f00e25..0f63112 100644 --- a/src/roles/menu.test.tsx +++ b/src/roles/menu.test.tsx @@ -34,11 +34,11 @@ describe('Menu', () => { }); it('renders 3 menu items', () => { - expect(screenTest(Menu.item().all)).toHaveLength(3); + expect(screenTest(Menu.Item().all)).toHaveLength(3); }); it('renders 3 menu items: Cut, Copy, Paste', () => { - const [first, second, third] = screenTest(Menu.item().all); + const [first, second, third] = screenTest(Menu.Item().all); expect(first).toHaveAccessibleName('Cut'); expect(second).toHaveAccessibleName('Copy'); expect(third).toHaveAccessibleName('Paste'); @@ -46,7 +46,7 @@ describe('Menu', () => { describe('when clicking on Cut item', () => { beforeEach(async () => { - await user.click(screenTest(Menu.item('Cut'))); + await user.click(screenTest(Menu.Item('Cut'))); }); it('calls select with cut', () => { @@ -56,7 +56,7 @@ describe('Menu', () => { describe('when clicking on Copy item', () => { beforeEach(async () => { - await user.click(screenTest(Menu.item('Copy'))); + await user.click(screenTest(Menu.Item('Copy'))); }); it('calls select with copy', () => { @@ -66,7 +66,7 @@ describe('Menu', () => { describe('when clicking on Paste item', () => { beforeEach(async () => { - await user.click(screenTest(Menu.item('Paste'))); + await user.click(screenTest(Menu.Item('Paste'))); }); it('calls select with paste', () => { diff --git a/src/roles/menu.ts b/src/roles/menu.ts index c29a864..2014fdc 100644 --- a/src/roles/menu.ts +++ b/src/roles/menu.ts @@ -11,7 +11,7 @@ export const Menu = Object.assign( get all() { return role('menu').all; }, - item(name?: string | RegExp) { + Item(name?: string | RegExp) { return role('menuitem', name); }, } diff --git a/src/roles/search.test.tsx b/src/roles/search.test.tsx index f525ab6..90155f3 100644 --- a/src/roles/search.test.tsx +++ b/src/roles/search.test.tsx @@ -29,7 +29,7 @@ describe('Checkbox', () => { }); it('has search box', () => { - expect(screenTest(Search.box())).toBeVisible(); + expect(screenTest(Search.Box())).toBeVisible(); }); describe('when user submit search', () => { diff --git a/src/roles/search.ts b/src/roles/search.ts index 24ba84b..4112b85 100644 --- a/src/roles/search.ts +++ b/src/roles/search.ts @@ -8,7 +8,7 @@ export const Search = Object.assign( get all() { return role('search').all; }, - box(name?: string | RegExp) { + Box(name?: string | RegExp) { return role('searchbox', name); }, } diff --git a/src/roles/tabs.test.tsx b/src/roles/tabs.test.tsx index b924540..d6bd705 100644 --- a/src/roles/tabs.test.tsx +++ b/src/roles/tabs.test.tsx @@ -29,15 +29,15 @@ describe('Tabs', () => { }); it('renders first tabpanel', () => { - expect(screenTest(Tab.panel())).toHaveTextContent('First panel'); + expect(screenTest(Tab.Panel())).toHaveTextContent('First panel'); }); it('labels first tabpanel', () => { - expect(screenTest(Tab.panel('First'))).toHaveTextContent('First panel'); + expect(screenTest(Tab.Panel('First'))).toHaveTextContent('First panel'); }); it('renders tablist', () => { - expect(screenTest(Tab.list())).toBeVisible(); + expect(screenTest(Tab.List())).toBeVisible(); }); describe('when clicking on second tab', () => { @@ -50,7 +50,7 @@ describe('Tabs', () => { }); it('renders second tabpanel', () => { - expect(screenTest(Tab.panel())).toHaveTextContent('Second panel'); + expect(screenTest(Tab.Panel())).toHaveTextContent('Second panel'); }); }); }); diff --git a/src/roles/tabs.ts b/src/roles/tabs.ts index 7485977..504cd5f 100644 --- a/src/roles/tabs.ts +++ b/src/roles/tabs.ts @@ -10,10 +10,10 @@ export const Tab = Object.assign(tab, { get all() { return tab().all; }, - list(name?: string | RegExp) { + List(name?: string | RegExp) { return role('tablist', name); }, - panel(name?: string | RegExp) { + Panel(name?: string | RegExp) { return role('tabpanel', name); }, });