RichText: add faster, separate e2e tests #17303
Conversation
ellatrix
added
[Type] Automated Testing
ellatrix
requested review from
ajitbohra,
daniloercoli,
etoledom,
jorgefilipecosta,
nerrad,
ntwb and
SergioEstevao
as code owners
|
@gziolo I would super appreciate your feedback on all the package stuff, configs, and Travis. :D |
bin/setup-packages-e2e-tests.js
Outdated
| '--config', | ||
| 'bin/jest.config.js', | ||
| '--rootDir', | ||
| 'packages/rich-text', |
There was a problem hiding this comment.
To do: run all tests in all packages.
packages/rich-text/.babelrc
Outdated
| "plugins": [ | ||
| [ "@babel/plugin-transform-react-jsx", { | ||
| "pragma": "createElement", | ||
| "pragmaFrag": "Fragment" |
There was a problem hiding this comment.
Is this correct? I didn't see it in other Babel config files, but I got an error when it didn't include this.
packages/rich-text/package.json
Outdated
| @@ -34,6 +34,9 @@ | |||
| "memize": "^1.0.5", | |||
| "rememo": "^3.0.0" | |||
| }, | |||
| "devDependencies": { | |||
| "@babel/core": "7.5.5" | |||
There was a problem hiding this comment.
I'm not sure why this got added tbh. Also not sure about the lock file.
ellatrix
force-pushed
the
try/rich-text-e2e
branch
from
06c689c to
7483dba
Compare
| @@ -0,0 +1,9 @@ | |||
| { | |||
There was a problem hiding this comment.
I'm not sure but it feels like this Babel config should be in the folder which generates code for the tests to avoid some accidental overrides when building packages or Gutenberg app.
There was a problem hiding this comment.
I couldn't get it to work otherwise. Do you have any ideas why? I'm also struggling with getting it to work on Travis. :)
There was a problem hiding this comment.
We had to do something similar for the playground:
https://github.com/WordPress/gutenberg/blob/master/playground/.babelrc
Parcel does some magic to the Babel config behind the scenes which forces us to add this Babel config 🤷♂ I guess we must have it unless they fix it in Parcel 2.x. We should unless ensure it doesn't get activated for the codebase when executed outside of Parcel.
| } | ||
| ); | ||
|
|
||
| bundler.on( 'buildEnd', () => { |
There was a problem hiding this comment.
You can also start a server using jest-puppeteer which might easier with parcel:
https://github.com/smooth-code/jest-puppeteer#start-a-server
There was a problem hiding this comment.
It's not immediately obvious to me how this would work. We'd still need parcel, right?
There was a problem hiding this comment.
yes, but it's less work to do it through config
There was a problem hiding this comment.
This is a great start. I still need to think about how to approach it but we definitely need to move some tests which don't depend on WordPress to some faster test suites which can run more often. I see at least 3 areas where we could use the same technique:
- WordPress components
- RichText
- Block Editor (the current playground)
|
@gziolo Yes, we could tweak also tweak the playground for block editor testing (e.g. we don't need all the header and Google Fonts). This Pr in particular also adds more rich text e2e tests. I think in the future we should add even more tests. There are a lot of small rich text interactions that are currently not tested (since they didn't break before). So far our strategy has been to create e2e tests when something breaks, instead of writing a full spec. |
|
Now that the playground will hopefully get integrated into Storybook with #18191. We probably could add a section for |
|
Closing this for now as it's outdated and I'm not planning to work on it for now |
Description
Split out from #17065. This is an attempt to move isolate e2e tests to the package they belong to, and to encourage adding more (faster) e2e tests.
RichText in particular is a component that could really benefit from a lot of e2e tests, as it cannot be fully tested otherwise. The fastest way would be to render it separately.
To do: add more tests and add to Travis. This is just a first try. Some current e2e tests can be moved later.
How has this been tested?
run
npm run test-package-e2e packages/rich-text(needs improvement)Screenshots
Types of changes
Checklist: