diff --git a/core/src/components/fab/test/basic/e2e.ts b/core/src/components/fab/test/basic/e2e.ts deleted file mode 100644 index 520cf1fc4c..0000000000 --- a/core/src/components/fab/test/basic/e2e.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { testDisabledFab, testFab } from '../test.utils'; - -test('fab: basic', async () => { - await testFab('basic', '#fab1'); -}); - -test('fab:rtl: basic', async () => { - await testFab('basic', '#fab1', true); -}); - -test('fab: disabled', async () => { - await testDisabledFab('basic', '#fab2'); -}); - -test('fab:rtl: disabled', async () => { - await testDisabledFab('basic', '#fab2', true); -}); diff --git a/core/src/components/fab/test/basic/fab.e2e.ts b/core/src/components/fab/test/basic/fab.e2e.ts new file mode 100644 index 0000000000..2fe3836dbb --- /dev/null +++ b/core/src/components/fab/test/basic/fab.e2e.ts @@ -0,0 +1,72 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('fab: basic (visual checks)', () => { + test.beforeEach(async ({ page }) => { + await page.goto(`/src/components/fab/test/basic`); + }); + + test('should not have visual regressions', async ({ page }) => { + await page.setIonViewport(); + + expect(await page.screenshot()).toMatchSnapshot(`fab-basic-${page.getSnapshotSettings()}.png`); + }); + + test('should not have visual regressions when open', async ({ page }) => { + // this fab has multiple buttons on each side, so it covers all the bases + const fab = page.locator('#fab5'); + + await fab.click(); + await page.waitForChanges(); + + /** + * fab.screenshot doesn't work since ion-fab's bounding box only covers the + * central button. This viewport size crops extra white space while also + * containing all the buttons in the open fab. + */ + await page.setViewportSize({ + width: 320, + height: 415, + }); + + expect(await page.screenshot()).toMatchSnapshot(`fab-open-${page.getSnapshotSettings()}.png`); + }); +}); + +test.describe('fab: basic (functionality checks)', () => { + test.beforeEach(async ({ page, skip }) => { + skip.rtl(); + skip.mode('ios'); + + await page.goto(`/src/components/fab/test/basic`); + }); + + test('should toggle active state when clicked', async ({ page }) => { + const fab = page.locator('#fab1'); + const fabList = fab.locator('ion-fab-list'); + + expect(fabList).not.toHaveClass(/fab-list-active/); + + // open fab + await fab.click(); + await page.waitForChanges(); + expect(fabList).toHaveClass(/fab-list-active/); + + // close fab + await fab.click(); + await page.waitForChanges(); + expect(fabList).not.toHaveClass(/fab-list-active/); + }); + + test('should not open when disabled', async ({ page }) => { + const fab = page.locator('#fab2'); + const fabList = fab.locator('ion-fab-list'); + + expect(fabList).not.toHaveClass(/fab-list-active/); + + // attempt to open fab + await fab.click(); + await page.waitForChanges(); + expect(fabList).not.toHaveClass(/fab-list-active/); + }); +}); diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a17c5f719c Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2eaa929c40 Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-ltr-Mobile-Safari-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..6765a30791 Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..605357fdcb Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a7ec1b6393 Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-rtl-Mobile-Safari-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..156cc0aec8 Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-ltr-Mobile-Chrome-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1cb0d16630 Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-ltr-Mobile-Firefox-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..32f03edcdc Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-ltr-Mobile-Safari-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..cf149b71cf Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-rtl-Mobile-Chrome-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a4b2dc12d1 Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-rtl-Mobile-Firefox-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..1971d4f22c Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-rtl-Mobile-Safari-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..1adf87b85d Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..956bb4077b Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..8d4024a653 Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Safari-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a87d140a85 Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..f700c9027b Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f5f39513f3 Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Safari-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..bb948a8734 Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-ltr-Mobile-Chrome-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d67f22f8f3 Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-ltr-Mobile-Firefox-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5d91e45899 Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-ltr-Mobile-Safari-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..76f96dac2a Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-rtl-Mobile-Chrome-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c4abb5511b Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-rtl-Mobile-Firefox-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..ff8f9822ac Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-rtl-Mobile-Safari-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..bd09b95ed6 Binary files /dev/null and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/fab/test/basic/index.html b/core/src/components/fab/test/basic/index.html index 1d7baa61c3..731164625c 100644 --- a/core/src/components/fab/test/basic/index.html +++ b/core/src/components/fab/test/basic/index.html @@ -26,117 +26,108 @@ - 
log
Test FAB - + - + - + - + - + - - - + + + - + - + - + - + - + - + - + - + - - - - - - - - - - - - - - - - - - - - - + - + - + - - - - - - - - + - - + + + + + + + + + + + + + + + + + + + + + - + @@ -157,28 +148,10 @@ referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling); } - function insertLog(message) { - console.log(message); - var el = document.querySelector('#log'); - const oldHTML = el.innerHTML; - el.innerHTML = oldHTML + '\n' + message; - } - function add() { var newEle = document.createElement('f'); var ref = document.querySelector('f'); insertAfter(newEle, ref); - insertLog('add'); - } - - function clickMainFAB(container) { - let message = 'Clicked open social menu'; - insertLog(message); - } - - function openSocial(network, container) { - let message = 'Share in ' + network; - insertLog(message); } function closeLists() { diff --git a/core/src/components/fab/test/standalone/e2e.ts b/core/src/components/fab/test/standalone/e2e.ts deleted file mode 100644 index 72229cd2bd..0000000000 --- a/core/src/components/fab/test/standalone/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('fab: standalone', async () => { - const page = await newE2EPage({ - url: '/src/components/fab/test/standalone?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/fab/test/standalone/index.html b/core/src/components/fab/test/standalone/index.html deleted file mode 100644 index 0d7e778c6a..0000000000 --- a/core/src/components/fab/test/standalone/index.html +++ /dev/null @@ -1,78 +0,0 @@ - - - - - Floating Action Button - Standalone - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/core/src/components/fab/test/states/e2e.ts b/core/src/components/fab/test/states/e2e.ts deleted file mode 100644 index f824ad315d..0000000000 --- a/core/src/components/fab/test/states/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('fab: states', async () => { - const page = await newE2EPage({ - url: '/src/components/fab/test/states?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/fab/test/states/fab.e2e.ts b/core/src/components/fab/test/states/fab.e2e.ts new file mode 100644 index 0000000000..20d07067b6 --- /dev/null +++ b/core/src/components/fab/test/states/fab.e2e.ts @@ -0,0 +1,11 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test('should not have visual regressions', async ({ page, skip }) => { + skip.rtl(); + await page.goto(`/src/components/fab/test/states`); + + await page.setIonViewport(); + + expect(await page.screenshot()).toMatchSnapshot(`fab-states-${page.getSnapshotSettings()}.png`); +}); diff --git a/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..81b8580667 Binary files /dev/null and b/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f08a04f46a Binary files /dev/null and b/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-ios-ltr-Mobile-Safari-linux.png b/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..86bdac5140 Binary files /dev/null and b/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-md-ltr-Mobile-Chrome-linux.png b/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b1e91e102d Binary files /dev/null and b/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-md-ltr-Mobile-Firefox-linux.png b/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f8e9cffbf2 Binary files /dev/null and b/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-md-ltr-Mobile-Safari-linux.png b/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..602c825495 Binary files /dev/null and b/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/fab/test/states/index.html b/core/src/components/fab/test/states/index.html index 9724f5efc0..9ba0a63690 100644 --- a/core/src/components/fab/test/states/index.html +++ b/core/src/components/fab/test/states/index.html @@ -17,26 +17,6 @@ - - - - - - - - - - - - - - - - - - - -

Default

@@ -169,18 +149,6 @@ - -