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.

Sign up for GitHub

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

Jump to bottom

[Tracking] WebdriverIO Migration #5458

Closed
93 tasks done
christian-bromann opened this issue Mar 12, 2024 · 2 comments
Closed
93 tasks done

[Tracking] WebdriverIO Migration #5458

christian-bromann opened this issue Mar 12, 2024 · 2 comments
Assignees
@christian-bromann @rwaskiewicz @alicewriteswrongs @tanner-reits

Comments

@christian-bromann
Copy link
Member

christian-bromann commented Mar 12, 2024 •
edited by tanner-reits
Loading

In #5456 we introduced WebdriverIO as testing framework of choice for testing Stencil components. This issue tracks our progress migrating our current existing Karma test suite to WebdriverIO. To migrate a test, follow these instructions:

  1. assign a test to you by clicking on the checkbox next to the test you like to migrate
  2. move the whole directory to the wdio folder, e.g. git mv test/karma/test-app/conditional-rerender test/wdio/conditional-rerender
  3. rename karma.spec.ts into e.g. cmp.test.tsx (note the .tsx)
  4. replace the component test up by using WebdriverIOs render function, e.g. 
    import { h, Fragment } from '@stencil/core';
import { render } from '@wdio/browser-runner/stencil';

describe('conditional-rerender', function () {
  beforeEach(() => {
    render({
      template: () => <>...</>
    })
  })
})
    Copy everything from the included .html file , except doctype, meta and script tags that import the test app: 
    - <!DOCTYPE html>
- <meta charset="utf8">
- <script src="./build/testapp.esm.js" type="module"></script>
- <script src="./build/testapp.js" nomodule></script>
  5. run the test in watch mode to modify it, e.g. cd test/wdio && npm ci && npm run build && npm run wdio -- --spec conditional-rerender --watch
  6. Make updates to the test
    • if you see querySelector calls, replace them with WebdriverIO queries, e.g. 
      - const main = app.querySelector('main');
+ const main = $('main');
    • either replace all synchronous assertions with asynchronous ones provided by WebdriverIO or ensure that the component is ready for assertion by adding a await main.waitForExist() after every time you call render or interact with the component via click
    • use the chance to optimize assertions e.g. by consolidating them into a toMatchInlineSnapshot
  7. Lastly, remove the .html file from the directory and other unnecessary files
  8. Run the whole test suite from the root directory via: npm run test.wdio
  9. Build Karma to compile updated types for its testapp cd test/karma && npm run build.all
  10. Run Prettier to ensure formatting is alright: npm run prettier
  11. If all passes, raise a PR, move to the next test and start from the beginning.

Tests:
@ionitron-bot ionitron-bot bot added the triage label Mar 12, 2024
@rwaskiewicz rwaskiewicz pinned this issue Mar 12, 2024
@christian-bromann christian-bromann mentioned this issue Mar 15, 2024
Merged
2 tasks
@yigityuce
Copy link
Contributor

yigityuce commented Mar 15, 2024 •
edited
Loading

these three are missing in the checklist, would be good to add them as done

  • slot-conditional-rendering (migrated with 240d24d)
  • slot-ref (migrated with 240d24d)
  • slot-nested-dynamic (implemented with 240d24d)

This was referenced Mar 18, 2024
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
@alicewriteswrongs alicewriteswrongs mentioned this issue Mar 25, 2024
Merged
2 tasks
@rwaskiewicz
Copy link
Contributor

Closing, migration of the tests themselves is complete (save for a few misc cleanup items). Great job everyone 🎉

@rwaskiewicz rwaskiewicz unpinned this issue Mar 27, 2024
alicewriteswrongs added a commit that referenced this issue Mar 28, 2024
@alicewriteswrongs
chore(test): remove the karma / browserstack test infrastructure
56a2928 
We no longer want to run the workflow nor do we want this code hanging
around! Now that #5458 is closed we don't need to run the karma tests
anymore.

STENCIL-1239
@alicewriteswrongs alicewriteswrongs mentioned this issue Mar 28, 2024
Merged
2 tasks
alicewriteswrongs added a commit that referenced this issue Mar 28, 2024
@alicewriteswrongs
chore(test): remove the karma / browserstack test infrastructure
5243518 
We no longer want to run the workflow nor do we want this code hanging
around! Now that #5458 is closed we don't need to run the karma tests
anymore.

STENCIL-1239
github-merge-queue bot pushed a commit that referenced this issue Mar 28, 2024
@alicewriteswrongs
chore(test): remove the karma / browserstack test infrastructure (#5600)
962372f 
We no longer want to run the workflow nor do we want this code hanging
around! Now that #5458 is closed we don't need to run the karma tests
anymore.

STENCIL-1239
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@christian-bromann christian-bromann

@rwaskiewicz rwaskiewicz

@alicewriteswrongs alicewriteswrongs

@tanner-reits tanner-reits

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@christian-bromann @rwaskiewicz @yigityuce @alicewriteswrongs @tanner-reits