Text | Testing | Improved documentation and tests

[mikemai2awesome]

Jira

http://vjira2:8080/browse/BDS-968

Summary

Added tests and docs for the private bolt-text web component.

Details

1. text.js in the tests folder now contains tests for all props.
2. testing.md now has detailed instructions on manual testing.
3. Docs have been rewritten to reflect latest format on demonstrating web components.

How to test

Run the branch locally and read through the testing javascript and markdown.

NOTE

The doc pages are using a page template, which makes sense in this case, because web component demos are different, the actual markup for each of the examples are laid out on each page.

cc @sghoweri

[danielamorse]

I approved this PR. Examples look great, tests are passing. 👍

I found a couple bugs that should probably be fixed separately.

1. There is a little extra whitespace around the inline text example. This is probably coming from the JS, as it was with the link component.
   

2. The snapshots are different between the shadow vs no-shadow versions of the 'xxxlarge' headline test. They should match, but the one w/ shadow is larger. This tells me there's some CSS that needs to be fixed.
   

Would you make tickets for these? You can kick back to me to make the tickets if you think that makes more sense.

[adamszalapski]

I agree with @danielamorse that is a difference in xxl size snapshot with shadow vs no shadow and in the inline text is a small space in the right. But in overall is great wor @mikemai2awesome. I have on the comment regarding unused imports and variable.

[adamszalapski]

The good practice is removing unused imports and variables like:
line 1: import { render } from '@bolt/twig-renderer';
line 7-21: const { tag, display, color, align, opacity, quoted, 'line-height': lineHeight, 'letter-spacing': letterSpacing, 'text-transform': textTransform, 'font-family': fontFamily, 'font-size': fontSize, 'font-style': fontStyle, 'font-weight': fontWeight, } = schema.properties;

[mikemai2awesome]

@danielamorse Can you read about the comment above? Should 7-21 be removed? I am not sure because you helped me set those up. :P

[danielamorse]

@mikemai2awesome yes, you can remove any imports and variables you are not using. In VS Code unused variables get dimmed-out. Anything similar on your end? If not you can always just search the file for those variables. In the case of variables like 'line-height': lineHeight, you would search for lineHeight to see if it's being used.

I just added them all initially because I didn't know which ones you'd want to test. Line 1 (render import) can be removed, too.

[danielamorse]

@mikemai2awesome I removed the unused vars and fixed the snapshot issue.

@adamszalapski the snapshot issue was an interesting JS bug. See this ticket for an explanation: http://vjira2:8080/browse/BDS-1222. Can you please review these commits and let me know if it all looks good to you?

• commit 1
• commit 2

[mikemai2awesome]

@adamszalapski I requested review again. See latest commits from @danielamorse

[adamszalapski]

Nice catch @danielamorse, i have one question to tests. Right now quoted test snapshot looks different than the quoted example from PL.


On both cases with and without shadow DOM. The open quotation marks are missing.

[adamszalapski]

Please see my last comment

[mikemai2awesome]

@danielamorse @adamszalapski

I have centered the text so the snapshots can show correctly.