Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test(test-setup): add custom matchers for ui logger #923

Open
wants to merge 10 commits into
base: main
Choose a base branch
from

Conversation

hanna-skryl
Copy link
Collaborator

Closes #552

This PR adds custom matchers for ui() logger.

Copy link

github-actions bot commented Jan 17, 2025

Code PushUp

🤨 Code PushUp report has both improvements and regressions – compared target commit c440d62 with source commit 1686dda.

🕵️ See full comparison in Code PushUp portal 🔍

🏷️ Categories

🏷️ Category ⭐ Previous score ⭐ Current score 🔄 Score change
Performance 🟡 53 🔴 47 ↓ −6.3
Code coverage 🟢 91 🟢 91 ↓ −0.1
Security 🟡 81 🟡 81
Updates 🟡 77 🟡 77
Accessibility 🟢 92 🟢 92
Best Practices 🟢 100 🟢 100
SEO 🟡 61 🟡 61
Bug prevention 🟢 100 🟢 100
Code style 🟢 100 🟢 100
Documentation 🔴 23 🔴 23
👎 2 groups regressed, 👍 4 audits improved, 👎 6 audits regressed, 10 audits changed without impacting score

🗃️ Groups

🔌 Plugin 🗃️ Group ⭐ Previous score ⭐ Current score 🔄 Score change
Lighthouse Performance 🟡 53 🔴 47 ↓ −6.3
Code coverage Code coverage metrics 🟢 91 🟢 91 ↓ −0.1

16 other groups are unchanged.

🛡️ Audits

🔌 Plugin 🛡️ Audit 📏 Previous value 📏 Current value 🔄 Value change
Lighthouse Eliminate render-blocking resources 🟥 Potential savings of 870 ms 🟨 Potential savings of 0 ms ↓ −100 %
Lighthouse Reduce unused CSS 🟥 Potential savings of 67 KiB 🟨 Potential savings of 67 KiB ↓ −96.8 %
Lighthouse Speed Index 🟨 5.6 s 🟥 7.8 s ↑ +40.1 %
Lighthouse First Contentful Paint 🟨 3.0 s 🟥 3.2 s ↑ +7.9 %
Lighthouse Largest Contentful Paint 🟨 3.3 s 🟨 3.5 s ↑ +8.6 %
Lighthouse Total Blocking Time 🟥 3,450 ms 🟥 6,190 ms ↑ +79.4 %
Lighthouse Time to Interactive 🟥 14.3 s 🟥 13.9 s ↓ −2.2 %
Code coverage Line coverage 🟩 90.6 % 🟩 90.1 % ↓ −0.5 %
Code coverage Function coverage 🟩 93.4 % 🟩 93.3 % ↓ −0.1 %
Code coverage Branch coverage 🟨 86 % 🟨 86 % ↑ +0.1 %
Lighthouse Minimizes main-thread work 🟥 12.1 s 🟥 18.0 s ↑ +48.7 %
Lighthouse Avoids enormous network payloads 🟩 Total size was 1,817 KiB 🟩 Total size was 1,820 KiB ↑ +0.2 %
Lighthouse JavaScript execution time 🟥 6.8 s 🟥 8.7 s ↑ +27.6 %
Lighthouse Max Potential First Input Delay 🟥 2,730 ms 🟥 2,240 ms ↓ −17.9 %
Lighthouse Metrics 🟩 100% 🟩 100% ↓ −2.2 %
Lighthouse Uses efficient cache policy on static assets 🟨 27 resources found 🟨 27 resources found ↓ −0.1 %
Lighthouse Initial server response time was short 🟩 Root document took 530 ms 🟩 Root document took 440 ms ↓ −17.5 %
Lighthouse Server Backend Latencies 🟩 150 ms 🟩 180 ms ↑ +17 %
Lighthouse Avoids an excessive DOM size 🟥 2,135 elements 🟥 2,134 elements ↓ −0.1 %
Lighthouse Network Round Trip Times 🟩 60 ms 🟩 60 ms ↑ +1.5 %

576 other audits are unchanged.

@hanna-skryl hanna-skryl marked this pull request as ready for review January 17, 2025 04:23
Comment on lines 77 to 79
expect(ui()).toHaveLoggedLevel('info');
expect(ui()).toHaveLoggedMessage(
`Reports diff written to ${bold(
Copy link
Collaborator

Choose a reason for hiding this comment

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

I would merge the level and message assertions into one. Apart from more convenient usage (IMHO), it will also ensure the same level-message pair is being checked.

Suggested change
expect(ui()).toHaveLoggedLevel('info');
expect(ui()).toHaveLoggedMessage(
`Reports diff written to ${bold(
expect(ui()).toHaveLogged(
'info',
`Reports diff written to ${bold(

Comment on lines 317 to 326
expect(ui()).toHaveLoggedNthLevel(1, 'info');
expect(ui()).toHaveLoggedNthLevel(2, 'info');
expect(ui()).toHaveLoggedNthMessage(
1,
'The --skipPlugins argument removed the following categories: c1, c2.',
);
expect(ui()).toHaveLoggedNthMessage(
2,
'The --onlyPlugins argument removed the following categories: c1, c2.',
);
Copy link
Collaborator

Choose a reason for hiding this comment

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

Following up on my previous comment, I would merge the Nth assertions also:

Suggested change
expect(ui()).toHaveLoggedNthLevel(1, 'info');
expect(ui()).toHaveLoggedNthLevel(2, 'info');
expect(ui()).toHaveLoggedNthMessage(
1,
'The --skipPlugins argument removed the following categories: c1, c2.',
);
expect(ui()).toHaveLoggedNthMessage(
2,
'The --onlyPlugins argument removed the following categories: c1, c2.',
);
expect(ui()).toHaveLoggedNth(
1,
'info',
'The --skipPlugins argument removed the following categories: c1, c2.',
);
expect(ui()).toHaveLoggedNth(
2,
'info',
'The --onlyPlugins argument removed the following categories: c1, c2.',
);

Comment on lines 29 to 33
expect(ui()).not.toHaveLoggedMessageContaining('"$0":');
expect(ui()).not.toHaveLoggedMessageContaining('"_":');

expect(log).toContain('"outputDir": "destinationDir"');
expect(log).not.toContain('"output-dir":');
expect(ui()).toHaveLoggedMessageContaining('"outputDir": "destinationDir"');
expect(ui()).not.toHaveLoggedMessageContaining('"output-dir":');
Copy link
Collaborator

Choose a reason for hiding this comment

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

Can we use expect.stringContaining('...') here instead? 🤔 Would be cool if we didn't need a specialized matcher for that.

Supporting the built-in string matchers would be most flexible, e.g. to use regexes instead of substrings we'd just use expect.stringMatching(/.../).

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

That's a great idea! It turned out to be easier to implement than I expected 😁

Comment on lines 79 to 82
const levels = actual.logger
.getRenderer()
.getLogs()
.map(({ message }) => extractLevel(message));
Copy link
Collaborator

Choose a reason for hiding this comment

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

The actual.logger.getRenderer().getLogs().map(({ message }) => message) logic could be extracted to a helper function.

Comment on lines 21 to 34
export function extractLevel(log: string): LogLevel | null {
const match = removeColorCodes(log).match(/^\[\s*\w+\((?<level>\w+)\)\s*]/);
const level = match?.groups?.['level'] as LogLevel | undefined;
return level && LOG_LEVELS.has(level) ? level : null;
}

export function extractMessage(log: string): ExtractedMessage {
const match = log.match(
/^\[\s*\w+\((?<level>\w+)\)\s*]\s*(?<message>.+?(\.\s*)?)$/,
);
const styledMessage = match?.groups?.['message'] ?? log;
const unstyledMessage = removeColorCodes(styledMessage);
return { styledMessage, unstyledMessage };
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

This looks very robust 👍 Also well tested 🙂

@hanna-skryl hanna-skryl force-pushed the feat/custom-ui-logger-matchers branch from 60d7b79 to 7363d50 Compare January 17, 2025 20:38
Copy link
Collaborator

@BioPhoton BioPhoton left a comment

Choose a reason for hiding this comment

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

Really nice testing helper!

An idea I had was also providing additional matcher for severity:

  • toHaveLoggedWarning
  • toHaveNthLoggedWarning
  • ...

This might exceed the scope of this PR so consider it as am idea.
I approved the PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Custom matcher for ui logger
3 participants