@ionic/core 8.0.0 → 8.0.1-nightly.20240418

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/collection/components/datetime/test/color/datetime.e2e.js +14 -7
  2. package/dist/collection/components/toggle/test/enable-on-off-labels/toggle.e2e.js +51 -31
  3. package/dist/docs.json +1 -1
  4. package/package.json +1 -1
package/dist/collection/components/datetime/test/color/datetime.e2e.js CHANGED
@@ -6,15 +6,22 @@ import { configs, test } from "../../../../utils/test/playwright/index";
6
6
  /**
7
7
  * This behavior does not vary across directions
8
8
  */
9
- configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
9
+ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
10
10
  test.describe(title('datetime: color'), () => {
11
11
  test('should not have visual regressions', async ({ page }) => {
12
- await page.goto('/src/components/datetime/test/color', config);
13
- const datetime = page.locator('#color-datetime');
14
- await expect(datetime).toHaveScreenshot(screenshot(`datetime-color`));
15
- await page.evaluate(() => document.body.classList.toggle('dark'));
16
- await page.waitForChanges();
17
- await expect(datetime).toHaveScreenshot(screenshot(`datetime-color-dark`));
12
+ await page.setContent(`
13
+ <div id="container" style="width: 250px;">
14
+ <ion-datetime
15
+ color="danger"
16
+ value="2022-05-03"
17
+ show-default-title="true"
18
+ show-default-buttons="true"
19
+ ></ion-datetime>
20
+ </div>
21
+ `, config);
22
+ const container = page.locator('#container');
23
+ await page.locator('.datetime-ready').waitFor();
24
+ await expect(container).toHaveScreenshot(screenshot(`datetime-color`));
18
25
  });
19
26
  });
20
27
  });
package/dist/collection/components/toggle/test/enable-on-off-labels/toggle.e2e.js CHANGED
@@ -3,39 +3,59 @@
3
3
  */
4
4
  import { expect } from "@playwright/test";
5
5
  import { configs, test } from "../../../../utils/test/playwright/index";
6
- configs().forEach(({ title, screenshot, config }) => {
7
- test.describe(title('toggle: enableOnOffLabels'), () => {
8
- test.beforeEach(async ({ page }) => {
9
- await page.goto(`/src/components/toggle/test/enable-on-off-labels`, config);
10
- });
6
+ configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
7
+ test.describe(title('toggle: enable-on-off-labels'), () => {
11
8
  test('should not have visual regressions', async ({ page }) => {
12
- await page.setIonViewport();
13
- await expect(page).toHaveScreenshot(screenshot(`toggle-on-off-labels-diff`));
14
- });
15
- });
16
- });
17
- /**
18
- * This behavior does not vary across directions
19
- */
20
- configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
21
- test.describe(title('toggle: dark mode'), () => {
22
- test.beforeEach(async ({ page }) => {
23
- await page.goto(`/src/components/toggle/test/enable-on-off-labels`, config);
9
+ await page.setContent(`
10
+ <style>
11
+ #container {
12
+ display: grid;
13
+ grid-template-columns: repeat(2, auto);
14
+ justify-content: space-evenly;
15
+ gap: 8px;
16
+ padding: 16px 0;
17
+ }
18
+ </style>
19
+
20
+ <div id="container">
21
+ <ion-toggle enable-on-off-labels="true">Unchecked</ion-toggle>
22
+ <ion-toggle enable-on-off-labels="true" checked>Checked</ion-toggle>
23
+ </div>
24
+ `, config);
25
+ const container = page.locator('#container');
26
+ await expect(container).toHaveScreenshot(screenshot(`toggle-on-off-labels`));
24
27
  });
25
- test('should not have visual regressions', async ({ page }) => {
26
- const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
27
- const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
28
- await page.click('#popover-trigger');
29
- await ionPopoverDidPresent.next();
30
- await page.click('#dark-mode');
31
- await page.evaluate(() => {
32
- const popover = document.querySelector('ion-popover');
33
- return popover === null || popover === void 0 ? void 0 : popover.dismiss();
34
- });
35
- await ionPopoverDidDismiss.next();
36
- await page.waitForChanges();
37
- await page.setIonViewport();
38
- await expect(page).toHaveScreenshot(screenshot(`toggle-on-off-labels-dark-mode-diff`));
28
+ test('should not have visual regressions with color', async ({ page }) => {
29
+ await page.setContent(`
30
+ <style>
31
+ #container {
32
+ display: grid;
33
+ grid-template-columns: repeat(2, auto);
34
+ justify-content: space-evenly;
35
+ gap: 8px;
36
+ padding: 16px 0;
37
+ }
38
+ </style>
39
+
40
+ <div id="container">
41
+ <ion-toggle color="secondary" enable-on-off-labels="true">Unchecked</ion-toggle>
42
+ <ion-toggle color="secondary" enable-on-off-labels="true" checked>Checked</ion-toggle>
43
+ <ion-toggle color="success" enable-on-off-labels="true">Unchecked</ion-toggle>
44
+ <ion-toggle color="success" enable-on-off-labels="true" checked>Checked</ion-toggle>
45
+ <ion-toggle color="danger" enable-on-off-labels="true">Unchecked</ion-toggle>
46
+ <ion-toggle color="danger" enable-on-off-labels="true" checked>Checked</ion-toggle>
47
+ <ion-toggle color="tertiary" enable-on-off-labels="true">Unchecked</ion-toggle>
48
+ <ion-toggle color="tertiary" enable-on-off-labels="true" checked>Checked</ion-toggle>
49
+ <ion-toggle color="light" enable-on-off-labels="true">Unchecked</ion-toggle>
50
+ <ion-toggle color="light" enable-on-off-labels="true" checked>Checked</ion-toggle>
51
+ <ion-toggle color="medium" enable-on-off-labels="true">Unchecked</ion-toggle>
52
+ <ion-toggle color="medium" enable-on-off-labels="true" checked>Checked</ion-toggle>
53
+ <ion-toggle color="dark" enable-on-off-labels="true">Unchecked</ion-toggle>
54
+ <ion-toggle color="dark" enable-on-off-labels="true" checked>Checked</ion-toggle>
55
+ </div>
56
+ `, config);
57
+ const container = page.locator('#container');
58
+ await expect(container).toHaveScreenshot(screenshot(`toggle-on-off-labels-color`));
39
59
  });
40
60
  });
41
61
  });
package/dist/docs.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-04-17T13:46:21",
2
+ "timestamp": "2024-04-18T06:07:49",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.15.0",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ionic/core",
3
- "version": "8.0.0",
3
+ "version": "8.0.1-nightly.20240418",
4
4
  "description": "Base components for Ionic",
5
5
  "keywords": [
6
6
  "ionic",