diff --git a/core/src/components.d.ts b/core/src/components.d.ts index a124e6b971..23e5de694e 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1856,7 +1856,7 @@ export namespace Components { */ "animated": boolean; /** - * If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode on mobile. Does not apply in `md` mode or on desktop. + * If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode. */ "arrow": boolean; /** @@ -5493,7 +5493,7 @@ declare namespace LocalJSX { */ "animated"?: boolean; /** - * If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode on mobile. Does not apply in `md` mode or on desktop. + * If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode. */ "arrow"?: boolean; /** diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx index 21fc0718af..4cdd82a82c 100644 --- a/core/src/components/picker-column/picker-column.tsx +++ b/core/src/components/picker-column/picker-column.tsx @@ -168,8 +168,9 @@ export class PickerColumnCmp implements ComponentInterface { // Update transform if (transform !== opt.transform) { opt.transform = transform; - button.style.transform = transform; } + button.style.transform = transform; + // Update selected item if (selected !== opt.selected) { opt.selected = selected; diff --git a/core/src/components/picker/test/basic/e2e.ts b/core/src/components/picker/test/basic/e2e.ts new file mode 100644 index 0000000000..adeda71660 --- /dev/null +++ b/core/src/components/picker/test/basic/e2e.ts @@ -0,0 +1,29 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('picker: basic', () => { + it('should match existing screenshots', async () => { + const page = await newE2EPage({ + url: '/src/components/picker/test/basic?ionic:_testing=true', + }); + + const compares = []; + + await page.click('#basic'); + + await page.waitForEvent('ionPickerDidPresent'); + + compares.push(await page.compareScreenshot('picker initial state')); + + await page.click('ion-picker .save-btn'); + + await page.click('#basic'); + + await page.waitForEvent('ionPickerDidPresent'); + + compares.push(await page.compareScreenshot('picker opened with selected value')); + + for (const compare of compares) { + expect(compare).toMatchScreenshot(); + } + }); +}); diff --git a/core/src/components/picker/test/basic/index.html b/core/src/components/picker/test/basic/index.html index 083f4f6d57..0e5cd2d956 100644 --- a/core/src/components/picker/test/basic/index.html +++ b/core/src/components/picker/test/basic/index.html @@ -1,143 +1,133 @@ - - - Picker - Basic - - - - - - - - + + + + + + + + + + Show Picker + Show Custom Picker + + + + + + - - - - - Picker - Basic - - + - - Show Picker - Show Custom Picker - - - - - - - diff --git a/core/src/utils/test/utils.ts b/core/src/utils/test/utils.ts index 8503e87b16..085232dcac 100644 --- a/core/src/utils/test/utils.ts +++ b/core/src/utils/test/utils.ts @@ -147,20 +147,23 @@ export const waitForFunctionTestContext = async (fn: any, params: any, interval * https://github.com/GoogleChrome/puppeteer/issues/858#issuecomment-359763824 */ export const queryDeep = async (page: E2EPage, ...selectors: string[]): Promise => { - const shadowSelectorFn = (el: Element, selector: string): Element | null => (el?.shadowRoot) && el.shadowRoot.querySelector(selector); + const shadowSelectorFn = (el: Element, selector: string): Element | null => + el?.shadowRoot && el.shadowRoot.querySelector(selector); - // eslint-disable-next-line no-async-promise-executor - return new Promise(async resolve => { - const [firstSelector, ...restSelectors] = selectors; - let parentElement = await page.$(firstSelector); + // eslint-disable-next-line no-async-promise-executor + return new Promise(async (resolve) => { + const [firstSelector, ...restSelectors] = selectors; + let parentElement = await page.$(firstSelector); - for (const selector of restSelectors) { - parentElement = await page.evaluateHandle(shadowSelectorFn, parentElement, selector) as any; - } + for (const selector of restSelectors) { + parentElement = (await page.evaluateHandle(shadowSelectorFn, parentElement, selector)) as any; + } - if (parentElement) { resolve(parentElement); } - }); - }; + if (parentElement) { + resolve(parentElement); + } + }); +}; /** * Given an element and optional selector, use the selector if * it exists or get the node name of that element if not. Combine