Skip to content

test(title): add color and rtl coverage - #31537

Open
thetaPC wants to merge 1 commit into
FW-6863-base-themefrom
FW-6863-tests
Open

thetaPC wants to merge 1 commit into
FW-6863-base-themefrom
FW-6863-tests

Conversation

@thetaPC

@thetaPC thetaPC commented Oct 6, 2026 •

Copy link
Copy Markdown
Contributor

Issue number: resolves internal


What is the current behavior?

No test sets color on ion-title, and no test screenshots a title in the ionic theme in RTL.

What is the new behavior?

  • Adds a color test page and screenshots in the ionic, md and ios themes.
  • Runs the basic screenshots in RTL too. The ios and md RTL snapshots already existed without a test generating them; they now have one.
  • Adds spec tests for the classes title renders, the inner .toolbar-title element the iOS large title animations measure, and the ionStyle event.
  • Snapshots are generated on the current code, so the Modular Ionic migration stacked on this PR shows any visual change it makes.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Check Preview What to look for
Color, md theme preview Each title is drawn in the color it names
Color, ios theme preview Each title is drawn in the color it names
Color, ionic theme preview Every title stays dark gray. That's the current ionic behavior, recorded so the migration in #31539 shows its fix
Basic, ionic theme, RTL before and after Looks the same on both. This PR only adds its screenshots

@thetaPC
thetaPC added this pull request to stack #31538 October 6, 2026 22:11
@vercel

vercel Bot commented Oct 6, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
ionic-framework Ready Ready Preview Oct 6, 2026 10:11pm UTC

Request Review

@github-actions github-actions Bot added the package: core @ionic/core package label Oct 6, 2026
@thetaPC
thetaPC marked this pull request as ready for review October 12, 2026 18:13
@thetaPC
thetaPC requested a review from a team as a code owner October 12, 2026 18:13
@thetaPC
thetaPC requested a review from brandyscarney October 12, 2026 18:13

@brandyscarney brandyscarney left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have added some questions / comments but I am approving this as you can tell me if you disagree on any or all.

import { configs, test } from '@utils/test/playwright';

/**
* Color doesn't change with direction, so this only runs ltr.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this the new way we are going to write these comments? Typically we write the following:

Suggested change
* Color doesn't change with direction, so this only runs ltr.
* This behavior does not vary across directions.

*/
configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('title: color'), () => {
test('should apply the color to the title text', async ({ page }) => {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we standardize on how we title tests? This is the usual title:

Suggested change
test('should apply the color to the title text', async ({ page }) => {
test('should not have visual regressions', async ({ page }) => {

configs({ modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('title: basic'), () => {
test('should not have visual regressions', async ({ page }) => {
await page.goto('/src/components/title/test/basic', config);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have been leaning toward migrating tests to page.setContent, is there a reason we aren't doing this here?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need an index.html preview for the color? I am fine if the answer is yes but we will probably need to add it for other components.

configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('title: color'), () => {
test('should apply the color to the title text', async ({ page }) => {
await page.goto('/src/components/title/test/color', config);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have been leaning toward migrating tests to page.setContent, is there a reason we aren't doing this here?

See Breadcrumbs

I don't think we need to capture each color for each component. If we have proper screenshot tests in the theme folder capturing the colors then we should just need to do a few colors in the components themselves. Let me know your thoughts.

});
});

describe('title: style event', () => {

@brandyscarney brandyscarney Oct 16, 2026 •

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we also cover this event being emit on the first connect?

This branch was successfully deployed

1 active deployment
Preview — 5f572a1c Deployed Oct 6, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants