Murat Ozcan
Murat Ozcan
  • Видео 82
  • Просмотров 47 313
PactJs breaking change demo
We make a breaking change, we update our tests, and we get blocked by Pact because of how it will break integration in a future deployment - even though a full stack of tests are looking green in our own repo.
Then we go through the nuances of how to introduce a breaking change in a collaborative way together with our consumers.
It is a tri-way setup with traditional pactjs consumer driven + provider driven (bi-directional) contract testing, alongside with Cypress e2e, cy schema test plugin, Optic schema verification, Zod-to-OpenAPI, jest, cyct
Here are the collaborating PRs:
Provider: github.com/muratkeremozcan/pact-js-example-provider/actions/runs/11083552853/job/30797900185
Consumer: githu...
Просмотров: 57

Видео

Demo comparing API e2e vs Schema testing
Просмотров 9414 часов назад
Find the full example at github.com/muratkeremozcan/pact-js-example-provider/blob/main/cypress/e2e/crud-movie.cy.ts
Schema validation using cypress-ajv-schema-validator vs Optic
Просмотров 10414 дней назад
PR: github.com/muratkeremozcan/pact-js-example-provider/pull/29
a pattern to fine tune cy task when handling multiple arguments
Просмотров 12121 день назад
github.com/muratkeremozcan/pact-js-example-consumer/blob/main/cypress/support/tasks.ts#L18
more Mockoon awesomeness: tuning up the repo with templating and data buckets
Просмотров 2294 месяца назад
repo: github.com/muratkeremozcan/cypress-mockoon-api-test
Mockoon + Cypress demo: mock your API e2e tests
Просмотров 5365 месяцев назад
Here we mocked authentication and the full API. In the real world, we would mock the dependent APIs, not the API itself. PR: github.com/muratkeremozcan/cypress-mockoon-api-test/pull/2/files
retryable before block for Cypress
Просмотров 2416 месяцев назад
github: github.com/muratkeremozcan/react-cypress-ts-vite-template/pull/441/files
using is-ci + cy.skipOn for selective testing in CI
Просмотров 1577 месяцев назад
using is-ci cy.skipOn for selective testing in CI
Only run tests for changed files - Cypress component testing or Jest
Просмотров 4708 месяцев назад
PR: github.com/muratkeremozcan/tour-of-heroes-react-vite-cypress-ts/pull/461
Cypress login with next-auth
Просмотров 1,1 тыс.10 месяцев назад
PR: github.com/muratkeremozcan/next-issue-tracker/pull/23
Transforming Next.js/React components: a deep dive into functional refactoring and code purity
Просмотров 14510 месяцев назад
PR: github.com/muratkeremozcan/next-issue-tracker/pull/18
the meta in GitHub CI branch protection; merge-gatekeeper
Просмотров 20610 месяцев назад
the action: github.com/marketplace/actions/merge-gatekeeper PR: github.com/muratkeremozcan/next-issue-tracker/pull/5
e2e testing across deployments with Cypress (Next.js + Vercel example)
Просмотров 49611 месяцев назад
PR github.com/muratkeremozcan/next-app-mosh/pull/25/files
Let's create email templates like it's not 2010 anymore. Use React-email + Cypress = profit
Просмотров 24411 месяцев назад
github.com/muratkeremozcan/next-app-mosh/pull/22
Working with next-auth getServerSession in a Cypress component test
Просмотров 39911 месяцев назад
PR: github.com/muratkeremozcan/next-app-mosh/pull/20
cy-spok is a great fit for Zod, and Cypress is a great fit for Next.js apps
Просмотров 14611 месяцев назад
cy-spok is a great fit for Zod, and Cypress is a great fit for Next.js apps
test Next.js server components with Cypress component tests
Просмотров 1,2 тыс.Год назад
test Next.js server components with Cypress component tests
Cypress config file optimization to reduce redundancy
Просмотров 641Год назад
Cypress config file optimization to reduce redundancy
export environment variables to a .env file with AWS CDK
Просмотров 1,1 тыс.Год назад
export environment variables to a .env file with AWS CDK
Temporary stack using AWS CDK
Просмотров 181Год назад
Temporary stack using AWS CDK
Cypress Cloud Replay closed beta demo
Просмотров 296Год назад
Cypress Cloud Replay closed beta demo
Removing temporary branches upon merge, using Github Actions & Serverless Framework
Просмотров 70Год назад
Removing temporary branches upon merge, using Github Actions & Serverless Framework
setup css modules in a few steps, and test it with Cypress component testing
Просмотров 366Год назад
setup css modules in a few steps, and test it with Cypress component testing
LaunchDarkly code references
Просмотров 151Год назад
LaunchDarkly code references
vite vs webpack for Cypress component testing at scale
Просмотров 439Год назад
vite vs webpack for Cypress component testing at scale
Jotai with Cypress Component tests
Просмотров 214Год назад
Jotai with Cypress Component tests
Comparison of Jest vs Cypress style for writing tests
Просмотров 1,2 тыс.Год назад
Comparison of Jest vs Cypress style for writing tests
Master working with multiple args using cy task
Просмотров 364Год назад
Master working with multiple args using cy task
Meta patterns for testing GraphQL apis with Cypress
Просмотров 433Год назад
Meta patterns for testing GraphQL apis with Cypress
Use AWS sdk in Cypress e2e tests - cy.task on nitrous oxide
Просмотров 1,3 тыс.Год назад
Use AWS sdk in Cypress e2e tests - cy.task on nitrous oxide

Комментарии

  • @LarryLee-r8x
    @LarryLee-r8x 8 дней назад

    Clark Amy Martin Anna Hall Deborah

  • @amyohare395
    @amyohare395 2 месяца назад

    This is great, thank you! I also struggled getting the xk6 binary working with the extension and then came across your suggestion. Thank you!

  • @kanew1
    @kanew1 3 месяца назад

    Thank you! Awesome solution!

  • @igor_cojocaru
    @igor_cojocaru 3 месяца назад

    Thanks, saved me a lot of time today.

  • @igor_cojocaru
    @igor_cojocaru 4 месяца назад

    Hi Murat, thanks for the video. I love Cypress component testing. After Dan Abramov's talk, I have started to look at Next.js server components, and my first thoughts were that it would be a pain in the neck to component test this kind of stuff with Cypress. It looks like you found a workaround, but I really miss the intercept syntax. What would you do if the component has more than one fetch request? I would like to learn how you plan this. Subscribed!

    • @MuratKeremOzcan
      @MuratKeremOzcan 4 месяца назад

      You're asking how to differentiate between fetch calls, this will be a problem I think. Time for a feature request with reproducible repo example. Go for it.

  • @AdnanErlansyah-nx7xp
    @AdnanErlansyah-nx7xp 4 месяца назад

    Sir but I think it wouldn't be working if we use k6 web dashboard, so I've already tried the command like this: ``dotenv -e .env k6 run --out 'web-dashboard' main.js`` it's to run the test and the output of the test is from web dashboard k6.

    • @MuratKeremOzcan
      @MuratKeremOzcan 4 месяца назад

      never used dashboard, can't say

    • @AdnanErlansyah-nx7xp
      @AdnanErlansyah-nx7xp 4 месяца назад

      @@MuratKeremOzcan is there another way to pass the env but we can still use the other arguments of k6 sir?

    • @MuratKeremOzcan
      @MuratKeremOzcan 4 месяца назад

      @@AdnanErlansyah-nx7xp I haven't needed to do this, maybe there is something in the docs. The dotenv vars are separate from k6 command, so if k6 has a way of passing the args, then yes

    • @amyohare395
      @amyohare395 2 месяца назад

      I had a similar issue but it worked when I set up the arguments in the .env file. My command is `dotenv -e .env.test k6 run ./k6-tests/test_name.js` I then added the dashboard arguments to my .env file like so: K6_WEB_DASHBOARD=true K6_WEB_DASHBOARD_EXPORT=test-report.html K6_WEB_DASHBOARD_OPEN=true And now it works great! Hope this helps :)

  • @b.ahunov1639
    @b.ahunov1639 5 месяцев назад

    So cool, thanks!

  • @mockoon
    @mockoon 5 месяцев назад

    Thank you for your obsession :)

  • @Kamerarkas1
    @Kamerarkas1 5 месяцев назад

    Videoları Türkçe çekmeyi düşünürseniz fazla fazla ilgi çekeceğini düşünüyorum

    • @MuratKeremOzcan
      @MuratKeremOzcan 5 месяцев назад

      Işteki arkadaşlara referans olarak kullanıyorum, o nedenle Türkçe değil

    • @Kamerarkas1
      @Kamerarkas1 5 месяцев назад

      @@MuratKeremOzcan ekibinizdeki arkadaşlarınız çok şanslı. Belki de AI ile Türkçe altyazı oluşturmaya çalışabiliriz beraber

    • @MuratKeremOzcan
      @MuratKeremOzcan 5 месяцев назад

      @@Kamerarkas1 kitabimi Turkce'ye cevirdim, pek ilgilenen olmadi muratkerem.gitbook.io/cctdd muratkerem.gitbook.io/cctdd-tr

    • @Kamerarkas1
      @Kamerarkas1 5 месяцев назад

      @@MuratKeremOzcan bazı şeylerin değeri geç anlaşılıyor. Bence ilgi çekmesi için sektörün olgunlaşması gerekli. Video kaynaklar bu konuda ilk sırada geliyor, videolar ile referanslar vererek kitabınızın Türkçe halinin de fayda sağlamasına katkıda bulunabilirsiniz. Elinize sağlık. Teşekkürler katkılarınız için

  • @mockoon
    @mockoon 5 месяцев назад

    Thank you for using our tool!

  • @tomaszaszkiewicz1534
    @tomaszaszkiewicz1534 5 месяцев назад

    Hi! I have trouble running it as you showed. If i try to run it as you did I get an error saying .env is not a valid boolean. If i try to use -f flag to specify .env file dotenv is giving me an error that "k6" is not a valid command even though it's installed globally and added to path. I tried doing it on windows 10 and on ubuntu subsystem through WSL with same results.

    • @MuratKeremOzcan
      @MuratKeremOzcan 5 месяцев назад

      you have other problems there need to isolate dotenv CLI and make it work just by itself, do the same for k6, and try to combine them later

  • @hsd_o.o
    @hsd_o.o 5 месяцев назад

    Graciiiass!!!!

  • @nirmalfernando6217
    @nirmalfernando6217 6 месяцев назад

    Have you integrated e2e coverage report with Next

    • @MuratKeremOzcan
      @MuratKeremOzcan 6 месяцев назад

      nah, code cov is soon going to be superfluous when UI interaction coverage becomes available

  • @MrVWRoli
    @MrVWRoli 6 месяцев назад

    For fixing the CSS issue you need to add <div id="__next_css__DO_NOT_USE__"></div> this line to the component-index.html file. After that you will be able to import your global CSS file in component.ts.

  • @AdnanErlansyah-nx7xp
    @AdnanErlansyah-nx7xp 6 месяцев назад

    Sir Murat, could you make a tutorial for testing web performance by using the K6 tool? And also make the generated report after completed the test. Thank you so much for all of your tutorial sir ❤

    • @MuratKeremOzcan
      @MuratKeremOzcan 6 месяцев назад

      You have to follow Marie Cruz for that. It's what she does night and day. We don't focus on UI performance at work, only backend services, and that matters less and less with AWS.

    • @AdnanErlansyah-nx7xp
      @AdnanErlansyah-nx7xp 6 месяцев назад

      @MuratKeremOzcan Can I get the link reference, sir? I don't know which one that I should look

    • @MuratKeremOzcan
      @MuratKeremOzcan 6 месяцев назад

      @@AdnanErlansyah-nx7xp best place to look is k6 office hours, on their RUclips channel. You can ask her on LinkedIn in or go through the video descriptions.

  • @whatstrending4638
    @whatstrending4638 6 месяцев назад

    Lots of respect 🫡 . Please keep sharing your experience. It has helped me learn alot of new things. Keep shining brother ✨✨

  • @drewgoodwin9631
    @drewgoodwin9631 7 месяцев назад

    Thank you for sharing. Have you tested this with a session callback that, for example, adds a property to the user object? The intercept seems to prevent the callback from running...

  • @bahaaalhalabi8940
    @bahaaalhalabi8940 9 месяцев назад

    I was actually trying to make this all day,as i was getting into cypress, thank you for the video.

  • @recursion.
    @recursion. 9 месяцев назад

    Love the 2k resolution screen record.

  • @Brunoenribeiro
    @Brunoenribeiro 9 месяцев назад

    Nicely done. I was having trouble with it, you saved my skin.

    • @MuratKeremOzcan
      @MuratKeremOzcan 9 месяцев назад

      there are still 2 shortcomings; css is a problem and routing is a problem. If you search for issues in the repo, there are links to cy GitHub issues. I have another repo called next-issue-tracker, more complete app.

  • @brendanmeade4224
    @brendanmeade4224 10 месяцев назад

    Very very useful trick 👏

  • @OliverDungey
    @OliverDungey 10 месяцев назад

    Love your style and feel the same. I have adopted a pattern of having an 'env' object in each test file to encapsulate the config and keep it nice and simple for the tests that I thought you might like: const env = { endpoint: __ENV.SOMEOLDSYSTEM_ENDPOINT || fail('Missing SOMEOLDSYSTEM_ENDPOINT environment variable'), pathA: 'home' get endPointWithPath() { `${this.endpoint}/${this.pathA}` } }; Gives nice fast feedback to testers when they miss out environment variables and allows me to compose complex config whilst keeping it DRY. Environment config does get very complex!

  • @excelblaze864
    @excelblaze864 10 месяцев назад

    For react-router v5 and react v17, I made the below modifications and they worked for me: const wrapped = ( <MemoryRouter initialEntries={[route]}> <Switch> <Route path={path} render={() => { return WrappedComponent; }} /> </Switch> </MemoryRouter> ) 1. Replaced Routes with Switch 2. Instead of giving the WrappedComponent to element prop, I returned it from the render method. In my case, the react component was accessing URLSearchParams. For example: something like '/abcd?q=param1&v=param2' In this case, I passed my route as : '/abcd?q=param1&v=param2' and path as: '/abcd' The above worked for me and I verified it by making an assertion on pathname and search using the cy.location, and I hope this is the way it should be done for URLSearchParams. I am open to any suggestions.

  • @JosephGoebbelcoque
    @JosephGoebbelcoque 10 месяцев назад

    thanks for this video. have you had any luck using getServerSession from next auth to work with cypress?

  • @jheannyc7172
    @jheannyc7172 10 месяцев назад

    Thanks!! This config helped me a lot!

  • @omerfratcoban182
    @omerfratcoban182 10 месяцев назад

    merhaba, mailosaur'u atılan bir mailin içindeki veriyi kontrol edip içinde yer alan linke tıklamam gerekiyor,nasıl yapabilirim ? bununla ilgili bir videonun çok faydalı olacağını düşünüyorum.

    • @MuratKeremOzcan
      @MuratKeremOzcan 10 месяцев назад

      Addendum: Mailosaur makes parsing links effortless! dev.to/muratkeremozcan/testing-email-based-authentication-systems-with-cypress-mailosaur-and-cypress-data-session-j12 cy.mailosaurGetMessage(Cypress.env('MAILOSAUR_SERVERID'), { sentTo: email, }) .its('html.links.0.href')

  • @leesheppard7524
    @leesheppard7524 10 месяцев назад

    Worked for me on 13.5.0 :) thank you!

  • @Grugue
    @Grugue 10 месяцев назад

    Thanks! 🫂

  • @drezcovers1113
    @drezcovers1113 11 месяцев назад

    Thank you for sharing, I'm on the process of choosing a testing library to learn and cypress seems to be the way to go

  • @Waterbottles711
    @Waterbottles711 11 месяцев назад

    Thank you for showing and explaining all of this! Helped me understand much better

  • @sercantor1
    @sercantor1 Год назад

    sooo, it's just an aws call, I think doing this in a bash script would play nicer with the CI, so that everyone could play around with it. I may not have node running in my actions runner

  • @F.Schulz
    @F.Schulz Год назад

    thanks for share!

  • @BMadPhoto
    @BMadPhoto Год назад

    This is a great tip - much easier to maintain with this approach!😀

  • @Artem-hq5ex
    @Artem-hq5ex Год назад

    Cypress 12.17.4. Not works

    • @MuratKeremOzcan
      @MuratKeremOzcan Год назад

      repro on repo or it didn't happen here it is with v13 beta check the config file at the repo root if this works, for sure 12.17 works github.com/muratkeremozcan/prod-ready-serverless/blob/main/package.json#L45

  • @lucasbastos8019
    @lucasbastos8019 Год назад

    Thank you for sharing, Murat. It helped us 👍

  • @merwinrodrigues3482
    @merwinrodrigues3482 Год назад

    did not work for me i still keep getting "CypressError: `cy.request()` must be provided a fully qualified `url` - one that begins with `http`. By default `cy.request()` will use either the current window's origin or the `baseUrl` in `cypress.config.js`. Neither of those values were present." this error

    • @MuratKeremOzcan
      @MuratKeremOzcan Год назад

      does yours look like something like this? (cy.api is UI for cy.request) github.com/muratkeremozcan/prod-ready-serverless/blob/d9410419668b34f58c055739e2b5222e659dd763/cypress/support/e2e.js#L114 on L108, Cypress.env('rest_api_url') is from the .env file For you, if you put the value in cypress.env.json vs .env, and use Cypress.env(...), does it work? Can help if there is a repo where you can show your issue.

    • @nikitachhillar8440
      @nikitachhillar8440 11 месяцев назад

      Can we get github secrets as well with this method?

    • @MuratKeremOzcan
      @MuratKeremOzcan 11 месяцев назад

      @@nikitachhillar8440 yeah process.env means the secrets are in the .env file or CI provider. For it to work locally you need .env secrets. For it to work in CI, you need CI secrets

  • @stoonya
    @stoonya Год назад

    Thank you for the video. Question regarding your "getBy*" custom command, don't you need something similar for "find"?

    • @MuratKeremOzcan
      @MuratKeremOzcan Год назад

      you can name them however

    • @stoonya
      @stoonya Год назад

      @@MuratKeremOzcan I mean these your commands won't work as child commands, which means you probably need to create similar "find" commands to cover cy.find

  • @charleshughes1417
    @charleshughes1417 Год назад

    Bruh, put a pipe in your map. Then you don't need to mapmapmap. Just map(pipe(prop, constructN, invoke))! Or maybe `really' instead of pipe?

  • @victoriakelz2602
    @victoriakelz2602 Год назад

    Thank you!!

  • @mehmetsirintarhan3351
    @mehmetsirintarhan3351 Год назад

    Hi Murat, is this video still good for Cypress version 10 and higher? What kind of modifications I should do to make it work on Cypress version 12? Thank you very much.

    • @MuratKeremOzcan
      @MuratKeremOzcan Год назад

      video eskidi kardeşim, ama repo hala güncel, oradaki koda bakabilirsin, aynı şeyin 3 sürümü var en zordan en yeni ve kolaya bir de bu blog işin günceli dev.to/muratkeremozcan/test-emails-effortlessly-with-cypress-mailosaur-and-cy-spok-56lm iyi bayramlar

  • @NhanNguyen_dra
    @NhanNguyen_dra Год назад

    Nice, this should be included into the official documents

    • @dantkillmyvibe
      @dantkillmyvibe Год назад

      Yes it should and expected it to be and to my surprise there was no mention. I had a similar idea and that's why I searched it up before I hacked up something. The cypress methods mentioned in the docs pale in comparison to this method tbh.

  • @ArtemKustov-p8v
    @ArtemKustov-p8v Год назад

    Thanks for the approach

  • @elibarikijohn7463
    @elibarikijohn7463 Год назад

    Can you share git repo for more understanding.

    • @MuratKeremOzcan
      @MuratKeremOzcan Год назад

      github.com/muratkeremozcan/tour-of-heroes-react-vite-cypress-ts

  • @writofmandamus
    @writofmandamus Год назад

    Thanks for much for this! Can't believe something this simple was so hard to find resources on, online :)

  • @rohitshinde0550
    @rohitshinde0550 Год назад

    It definitely do helped me, thanks for this awesome demonstration. 👍🏼

  • @quocthinhluu4098
    @quocthinhluu4098 Год назад

    Thank you. You saved my day!

  • @kadirhfzglu
    @kadirhfzglu Год назад

    Amazing as always

  • @nehemiaslione2394
    @nehemiaslione2394 Год назад

    Very interesting. Thanks for sharing

  • @DarkoRiicDeveloper
    @DarkoRiicDeveloper Год назад

    Very helpful!

  • @ganeshkamble9078
    @ganeshkamble9078 Год назад

    Thanks Murat, It works for me !!