diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index 065d0cb9..70a7c399 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 @@ -59,7 +64,7 @@ jobs: id: yarn-cache run: echo "::set-output name=dir::.yarn/cache" - name: Yarn のキャッシュファイルを取得する - uses: actions/cache@v3.0.2 + uses: actions/cache@v3.0.3 with: path: ${{ steps.yarn-cache.outputs.dir }} key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }} @@ -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 + uses: cypress-io/github-action@v4.0.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 + config-file: cypress.config.ts 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/components/HumbergerMenu/HumbergerNavigation.tsx b/components/HumbergerMenu/HumbergerNavigation.tsx index 34fa22db..8e72d985 100644 --- a/components/HumbergerMenu/HumbergerNavigation.tsx +++ b/components/HumbergerMenu/HumbergerNavigation.tsx @@ -88,13 +88,13 @@ const Navigation = () => {
  • - {/* */} - {/* */} - {locale === 'ja' - ? '推し台詞教えて！（準備中）' - : 'Fave quote (in progress)'} - {/* */} - {/* */} + + + {locale === 'ja' + ? '推し台詞教えて！' + : 'Fave quote'} + +
  • @@ -113,9 +113,11 @@ const Navigation = () => {
  • - {locale === 'ja' - ? 'ボーナス票（準備中）' - : 'Bonus votes (in progress)'} + + + {locale === 'ja' ? 'ボーナス票' : 'Bonus votes'} + +
    • diff --git a/components/Kikaku.tsx b/components/Kikaku.tsx index 59de546d..fb5db1a1 100644 --- a/components/Kikaku.tsx +++ b/components/Kikaku.tsx @@ -62,13 +62,11 @@ const Kikaku: NextPage = () => {
  • - {/* */} - {/* */} - {locale === 'ja' - ? '推し台詞教えて！（準備中）' - : 'Fave quote (in progress)'} - {/* */} - {/* */} + + + {locale === 'ja' ? '推し台詞教えて！' : 'Fave quote'} + +
  • @@ -80,9 +78,11 @@ const Kikaku: NextPage = () => {
  • - {locale === 'ja' - ? 'ボーナス票（準備中）' - : 'Bonus votes (in progress)'} + + + {locale === 'ja' ? 'ボーナス票' : 'Bonus votes'} + +
    • diff --git a/cypress.config.ts b/cypress.config.ts new file mode 100644 index 00000000..3db15b31 --- /dev/null +++ b/cypress.config.ts @@ -0,0 +1,24 @@ +import { defineConfig } from 'cypress' + +export default defineConfig({ + projectId: 'abc987', + downloadsFolder: 'cypress/downloads', + fixturesFolder: 'cypress/fixtures', + screenshotsFolder: 'cypress/screenshots', + videosFolder: 'cypress/videos', + viewportWidth: 1000, + viewportHeight: 660, + retries: { + runMode: 1, + openMode: 0, + }, + e2e: { + // We've imported your old cypress plugins here. + // You may want to clean this up later by importing these. + setupNodeEvents(on, config) { + return require('./cypress/plugins/index.js')(on, config) + }, + baseUrl: 'http://localhost:3100', + specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}', + }, +}) diff --git a/cypress.json b/cypress.json deleted file mode 100644 index b50c6db7..00000000 --- a/cypress.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "projectId": "abc987", - "downloadsFolder": "cypress/downloads", - "fixturesFolder": "cypress/fixtures", - "integrationFolder": "cypress/integration", - "pluginsFile": "cypress/plugins/index.js", - "screenshotsFolder": "cypress/screenshots", - "supportFile": "cypress/support/index.js", - "videosFolder": "cypress/videos", - "viewportWidth": 1000, - "viewportHeight": 660, - "retries": { - "runMode": 1, - "openMode": 0 - } -} diff --git a/cypress/e2e/index.spec.ts b/cypress/e2e/index.spec.ts new file mode 100644 index 00000000..03d5a501 --- /dev/null +++ b/cypress/e2e/index.spec.ts @@ -0,0 +1,69 @@ +describe('ホームページ', () => { + beforeEach(() => { + // const startSosenkyoDateTime = new Date( + // new Date('2022-06-24 21:00:00').toLocaleString('ja-JP') + // ).getTime() + // cy.clock(startSosenkyoDateTime) + + cy.visit('/') + }) + + it('期待どおりの挙動をすること', () => { + cy.url().should('equal', 'http://localhost:3100/') + + cy.get('title').should('have.text', 'ホーム - 幻水総選挙2022') + + // h1 タグ + cy.get('h1').should('have.length', 8) + cy.get('h1').each((item, index, list) => { + if (index === 0) { + cy.wrap(item).should('have.text', '幻水総選挙って何？') + } + + if (index === 6) { + cy.wrap(item).should('have.text', 'お願い') + } + }) + cy.contains('h1', /お願い/).should('have.length', 1) + + // h2 タグ + cy.get('h2').then((div) => { + cy.wrap(div.eq(0)).should('have.attr', 'class', 'text-xl font-bold pb-4') + }) + }) +}) + +describe('ホームページ（投票期間中）', () => { + beforeEach(() => { + const startSosenkyoDateTime = new Date( + new Date('2022-06-24 21:00:00').toLocaleString('ja-JP') + ).getTime() + cy.clock(startSosenkyoDateTime) + + cy.visit('/') + }) + + it('期待どおりの挙動をすること', () => { + cy.url().should('equal', 'http://localhost:3100/') + + cy.get('title').should('have.text', 'ホーム - 幻水総選挙2022') + + // h1 タグ + cy.get('h1').should('have.length', 8) + cy.get('h1').each((item, index, list) => { + if (index === 0) { + cy.wrap(item).should('have.text', '幻水総選挙って何？') + } + + if (index === 6) { + cy.wrap(item).should('have.text', 'お願い') + } + }) + cy.contains('h1', /お願い/).should('have.length', 1) + + // h2 タグ + cy.get('h2').then((div) => { + cy.wrap(div.eq(0)).should('have.attr', 'class', 'text-xl font-bold pb-4') + }) + }) +}) 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