From c3a17d01005b8bc6cc8eedf180db81264247688e Mon Sep 17 00:00:00 2001 From: Osamu Takiya Date: Mon, 30 May 2022 17:08:46 +0900 Subject: [PATCH 01/17] =?UTF-8?q?test:=20=F0=9F=92=8D=20Cypress=20?= =?UTF-8?q?=E3=82=92=E5=AE=9F=E8=B3=AA=E7=9A=84=E3=81=AB=E5=B0=8E=E5=85=A5?= =?UTF-8?q?=E3=81=97=E3=81=9F=20(#340)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * test: 💍 Cypress の spec を追加した * feat: 🎸 $ yarn add --dev npm-run-all wait-on * feat: 🎸 Cypress 実行用の npm scripts を整備した * test: 💍 Cypress の Spec を実質的なものに変更した * feat: 🎸 Cypress の設定ファイルに baseUrl を決め打ち記述した * test: 💍 GitHub Actions で Cypress を改めて実質設定 --- .github/workflows/cypress.yml | 19 +- cypress.json | 3 +- .../1-getting-started/todo.spec.ts | 143 --------- .../2-advanced-examples/actions.spec.ts | 299 ------------------ .../2-advanced-examples/cookies.spec.ts | 77 ----- .../2-advanced-examples/cypress_api.spec.ts | 206 ------------ .../2-advanced-examples/files.spec.ts | 88 ------ cypress/integration/home.spec.ts | 16 + package.json | 9 +- yarn.lock | 193 ++++++++++- 10 files changed, 228 insertions(+), 825 deletions(-) delete mode 100644 cypress/integration/1-getting-started/todo.spec.ts delete mode 100644 cypress/integration/2-advanced-examples/actions.spec.ts delete mode 100644 cypress/integration/2-advanced-examples/cookies.spec.ts delete mode 100644 cypress/integration/2-advanced-examples/cypress_api.spec.ts delete mode 100644 cypress/integration/2-advanced-examples/files.spec.ts create mode 100644 cypress/integration/home.spec.ts diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index 065d0cb9..67477ccc 100644 --- a/.github/workflows/cypress.yml +++ b/.github/workflows/cypress.yml @@ -5,13 +5,18 @@ on: branches: - main - development + pull_request: + branches: + - main + - development jobs: cypress_gss2022_frontend: name: Cypress での E2E テスト runs-on: ubuntu-20.04 steps: - - uses: actions/checkout@v3.0.2 + - name: Checkout + uses: actions/checkout@v3.0.2 - name: 環境を確認する run: | echo '[$ pwd]' @@ -29,7 +34,7 @@ jobs: sudo ln -s /usr/lib/x86_64-linux-gnu/libffi.so.7.1.0 /usr/lib/x86_64-linux-gnu/libffi.so.6 - name: Node.js をインストールする run: | - curl -sSL "https://nodejs.org/dist/v16.14.2/node-v16.14.2-linux-x64.tar.xz" | tar --strip-components=2 -xJ -C /usr/local/bin/ node-v16.14.2-linux-x64/bin/node + curl -sSL "https://nodejs.org/dist/v18.2.0/node-v18.2.0-linux-x64.tar.xz" | tar --strip-components=2 -xJ -C /usr/local/bin/ node-v18.2.0-linux-x64/bin/node curl https://www.npmjs.com/install.sh | bash echo 'インストールされた Node.js のバージョンは、' node -v @@ -68,16 +73,24 @@ jobs: - name: Npm のパッケージをインストールする ($ yarn install) run: | yarn install + - name: Cypress Info を実行する + run: | + npx cypress info - name: Cypress を実行する uses: cypress-io/github-action@v3.1.0 with: - start: npx cypress + build: npx next build + start: npx next start --port 3100 + wait-on: 'http://localhost:3100' + wait-on-timeout: 30 # seconds working-directory: ./ config-file: cypress.json record: false browser: chrome # browser: firefox # browser: edge + env: + DEPLOYMENT_ENVIRONMENT: production - name: Cypress のスクリーンショットをアップロードする uses: actions/upload-artifact@v3.1.0 if: always() diff --git a/cypress.json b/cypress.json index b50c6db7..64274003 100644 --- a/cypress.json +++ b/cypress.json @@ -1,5 +1,6 @@ { "projectId": "abc987", + "baseUrl": "http://localhost:3100", "downloadsFolder": "cypress/downloads", "fixturesFolder": "cypress/fixtures", "integrationFolder": "cypress/integration", @@ -13,4 +14,4 @@ "runMode": 1, "openMode": 0 } -} +} \ No newline at end of file diff --git a/cypress/integration/1-getting-started/todo.spec.ts b/cypress/integration/1-getting-started/todo.spec.ts deleted file mode 100644 index 4768ff92..00000000 --- a/cypress/integration/1-getting-started/todo.spec.ts +++ /dev/null @@ -1,143 +0,0 @@ -/// - -// Welcome to Cypress! -// -// This spec file contains a variety of sample tests -// for a todo list app that are designed to demonstrate -// the power of writing tests in Cypress. -// -// To learn more about how Cypress works and -// what makes it such an awesome testing tool, -// please read our getting started guide: -// https://on.cypress.io/introduction-to-cypress - -describe('example to-do app', () => { - beforeEach(() => { - // Cypress starts out with a blank slate for each test - // so we must tell it to visit our website with the `cy.visit()` command. - // Since we want to visit the same URL at the start of all our tests, - // we include it in our beforeEach function so that it runs before each test - cy.visit('https://example.cypress.io/todo') - }) - - it('displays two todo items by default', () => { - // We use the `cy.get()` command to get all elements that match the selector. - // Then, we use `should` to assert that there are two matched items, - // which are the two default items. - cy.get('.todo-list li').should('have.length', 2) - - // We can go even further and check that the default todos each contain - // the correct text. We use the `first` and `last` functions - // to get just the first and last matched elements individually, - // and then perform an assertion with `should`. - cy.get('.todo-list li').first().should('have.text', 'Pay electric bill') - cy.get('.todo-list li').last().should('have.text', 'Walk the dog') - }) - - it('can add new todo items', () => { - // We'll store our item text in a variable so we can reuse it - const newItem = 'Feed the cat' - - // Let's get the input element and use the `type` command to - // input our new list item. After typing the content of our item, - // we need to type the enter key as well in order to submit the input. - // This input has a data-test attribute so we'll use that to select the - // element in accordance with best practices: - // https://on.cypress.io/selecting-elements - cy.get('[data-test=new-todo]').type(`${newItem}{enter}`) - - // Now that we've typed our new item, let's check that it actually was added to the list. - // Since it's the newest item, it should exist as the last element in the list. - // In addition, with the two default items, we should have a total of 3 elements in the list. - // Since assertions yield the element that was asserted on, - // we can chain both of these assertions together into a single statement. - cy.get('.todo-list li') - .should('have.length', 3) - .last() - .should('have.text', newItem) - }) - - it('can check off an item as completed', () => { - // In addition to using the `get` command to get an element by selector, - // we can also use the `contains` command to get an element by its contents. - // However, this will yield the