SEインターンシップログ[ 2 ]

こんにちは、インターネットストレンジャー.👋🏽
ソフトウェアエンジニアリング(SE)ログの第3条です.
ちょっと私について、私はアレックスです、そして、私は私が何をしているかについて、全くの考えがありません.しかし、私は一度に1つのステップを学び、物事を把握しようとしている.

技術的な技術

テスト🎙

私は絵文字でマイクチェックをするつもりでした、しかし、Uuuuhh ...素早く動くさま
今週は、煙テストのための我々の終わりから終わりまでテストを改善するために費やされました.それはとてもきれいだったので、私はtest matrix with jest . テストマトリックスは同じデータを使用する反復テストを減らします.
ちょっとバックアップして、いくつかの用語を説明しましょう.

テストは何ですか。

テストは、コードをテストして、それが想定していることを確実にするコードです.
テストはマニュアルであるかもしれません--あなたのアプリケーションを通して行って、バグを見つけている-または自動化された-プログラムは、すべてが正しく動くことを確実とするためにあなたのコードに対するアサーションを実行します.
ユニット、統合、およびエンドツーエンドのテストのようなテストのさまざまな種類がありますが、これは、任意のバグを出荷していない信頼を構築する-これは時々機能です.それは時々テストを書くことが痛みを伴うことができますが、明るい面では、それは素晴らしいスキルを持っており、以下のバグを出荷します.🙂
このログは多くのことがあり、短い記事に要約することはできませんので、テストを行う必要があるすべてをカバーしません.しかし、あなたはGoogle Test User Guide . これは、テストの概念に良い導入を提供します.それは特定のC++ しかし、それはテストに良い基盤を提供すると思います.

I accidentally once shipped a slightly broken feature about 2 weeks ago. It wasn't a bug, but it didn't behave as expected. I still haven't fixed it but by the time this log is out, there'll be a PR fixing it.

エンドツーエンドテスト

エンドツーエンド(E 2 E)テストは、アプリケーションのユーザーの相互作用をシミュレートするテストです.すなわち、エミュレータ(ブラウザウィンドウまたはモバイルエミュレータ)でアプリケーションを開き、リンクをクリックすることでアプリケーションと対話します.
このようなことを達成するために使用できるツールのスイートがありますCypress and Playwright Webベースのアプリケーション.
これがどんなものであるかについての感覚を与えるために、ここでは脚本家から始められる小さなガイドです.それはGraphQL-Next.js Prisma example .

劇作家とのデモデモ

アプリケーションを設定する
例をダウンロードし、依存関係をインストールする

curl https://codeload.github.com/prisma/prisma-examples/tar.gz/latest | tar -xz --strip=2 prisma-examples-latest/typescript/graphql-nextjs
cd graphql-nextjs
npm install

データベースを設定します(設定を容易にするためsqliteを使用します).

npx prisma migrate dev --name init    # Creates a database and applies the schema against it
npx prisma db seed --preview-feature  # Seeds the database based on `prisma/seed.ts
npm run dev                           # Starts the application server

別のターミナルでplaywright としてdevDependency :

npm install --save-dev @playwright/test
npx playwright install

今はアプリケーションのテストを書くときです.プロジェクトのルートで、フォルダを作成しますtests と呼ばれるファイルtest.spec.ts . インtest.spec.ts , ペーストを以下にペーストします.

import { test, expect } from '@playwright/test';

// 1
test.describe('User flow:', () => {
  // 2
  test.beforeEach(async ({ page }) => {
    await page.goto('http://localhost:3000');
  })

  // 3
  test('signup', async ({ page }) => {
    // 4
    expect(await page.getAttribute('text=Signup', 'href')).toBe('/signup');

    // 5
    await page.click('text=Signup');

    await page.fill('[placeholder="Name"]', 'John');
    await page.fill('[placeholder="Email address"]', '[email protected]');

    await page.click('[value="Signup"]');

    expect(await page.waitForSelector('text=My Blog')).toBeTruthy();
    expect(await page.url()).toBe('http://localhost:3000/')
  })

  test('cancel signup', async ({ page }) => {
    expect(await page.getAttribute('text=Signup', 'href')).toBe('/signup');

    await page.click('text=Signup');
    await page.click('text=or Cancel')

    expect(await page.waitForSelector('text=My Blog')).toBeTruthy();
    expect(await page.url()).toBe('http://localhost:3000/#')
  })
})

以下のテストはいくつかのテストです.

このグループは論理的にテストされた

テストが実行される前に実行するフックを作成します.この場合、アプリケーションに移動します

テスト定義

ユーザのデバイスに何が期待されるかを確かめるアサーション

ユーザの対話をシミュレートする

テストを実行します

npx playwright test

以下のテストを行います.
テストケース1 :

ナビゲーションhttp://localhost:3000

クリックするSignup リンク

ユーザ情報を記入する

値を送信する

テストケース2 :

ナビゲーションhttp://localhost:3000

クリックするSignup リンク

流れから出る

端末の出力は次のようになります.

テストを意図的に失敗した値で遊んで失敗することができます.toBe('random_value') メソッド.
テストはCLIで実行されます-ヘッドレスモードでは、ブラウザウィンドウが開かれていないことを意味します.あなたは、構成で遊ぶことができます.
これはE 2 Eテストがどのように見えているかのglimplseであり、e 2 eテストを行うことができます.

ソフトスキル

公共の学問

私が今週初めにしたおもしろい考えは、知識を共有したり、人前で学んだりすることでした.ほとんどの時間-特に初心者として、または場合でも、シニアとして-あなたは十分な理由のいくつかのために持っている知識を共有する資格がないと感じるかもしれません.多分、あなたはまだそれに良いされていない、誰か他の誰かがそれをやってきたか、あなたが学んだことについて話すことを妨げて、他の言い訳をしています.
さて、先に行くとそれを行う!
私は、脚本家、テスト、typescript(リストは終りのない)または他のどんな話題についてあなたに話す資格がありますか?
いいえ.
たぶん.
私は知りません.
しかし、より多くのあなたの愛についてのコンテンツを作るには、簡単に取得し、誰かがあなたの仕事に感謝します.

Start before you think you're ready.

何があなたに喜びをもたらして、プロセスを楽しんでください.🙂
来週まで.✌🏽