env: cypress setup (h6s-dev#28)

* env: install cypress and @testing-library/cypress

* feat: setup cypress

* fix: add basic test case

* chore: add label or testid

* env: add e2e workflow

* chore: change workflow trigger event for test

* chore: change jest config to ignore cypress path

* fix: change e2e workflow event trigger

.github/workflows/e2e.yml

@@ -0,0 +1,21 @@
+name: e2e
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-20.04
+    if: "!contains(github.event.head_commit.message, '[skip ci]')"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+      # Install NPM dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v2

cypress.json

@@ -0,0 +1,4 @@
+{
+  "video": false,
+  "screenshotOnRunFailure": false
+}

cypress/fixtures/example.json

@@ -0,0 +1 @@
+{}

cypress/integration/basic.spec.ts

@@ -0,0 +1,16 @@
+import { format } from 'date-fns'
+
+const BASIC_EXAMPLES_URL =
+  'https://veccu-react-calendar-examples-basic.netlify.app'
+
+describe('@veccu/reactl-calendar basic examples e2e test', () => {
+  beforeEach(() => {
+    cy.visit(BASIC_EXAMPLES_URL)
+    cy.log(`[E2E] Run on ${format(new Date(), 'yyyy-MM-dd (E) HH:mm')}`)
+  })
+
+  it('run navigate successfully', () => {
+    cy.findByLabelText('prev-button').click()
+    cy.findByLabelText('next-button').click()
+  })
+})

cypress/plugins/index.js

@@ -0,0 +1 @@
+module.exports = (on, config) => {}

cypress/support/commands.js

@@ -0,0 +1 @@
+import '@testing-library/cypress/add-commands'

cypress/support/index.js

@@ -0,0 +1 @@
+import './commands'

cypress/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "types": ["cypress", "@testing-library/cypress"]
+  }
+}

examples/basic/src/pages/index.tsx

@@ -23,7 +23,7 @@ import React from 'react'
 
 import { Container } from '../components/Container'
 
-export default function Example() {
+export default function BasicExample() {
   const { cursorDate, headers, body, navigation, view } = useCalendar()
 
   return (
@@ -40,6 +40,7 @@ export default function Example() {
           fontSize="1.2em"
           px={2}
           textTransform="lowercase"
+          aria-label="badge for current version"
         >
           v{version}
         </Badge>
@@ -60,40 +61,46 @@ export default function Example() {
                   size="md"
                   onClick={view.showMonthView}
                   isActive={view.isMonthView}
+                  aria-label="button for changing view type to month"
                 >
                   M
                 </Button>
                 <Button
                   size="md"
                   onClick={view.showWeekView}
                   isActive={view.isWeekView}
+                  aria-label="button for changing view type to week"
                 >
                   W
                 </Button>
                 <Button
                   size="md"
                   onClick={view.showDayView}
                   isActive={view.isDayView}
+                  aria-label="button for changing view type to day"
                 >
                   D
                 </Button>
               </Stack>
-              <Text fontSize="2xl">{format(cursorDate, 'yyyy. MM')}</Text>
+              <Text fontSize="2xl" data-testId="cursor-date">
+                {format(cursorDate, 'yyyy. MM')}
+              </Text>
               <Stack direction="row" gutter={8}>
                 <IconButton
-                  aria-label="prev-button"
+                  aria-label="button for navigating to prev calendar"
                   icon={<ChevronLeftIcon />}
                   onClick={navigation.toPrev}
                 />
                 <Button
                   size="md"
                   colorScheme="teal"
                   onClick={navigation.setToday}
+                  aria-label="button for navigating to today calendar"
                 >
                   TODAY
                 </Button>
                 <IconButton
-                  aria-label="next-button"
+                  aria-label="button for navigating to next calendar"
                   icon={<ChevronRightIcon />}
                   onClick={navigation.toNext}
                 />
@@ -104,7 +111,11 @@ export default function Example() {
         <Thead>
           <Tr>
             {headers.weekDays.map(({ key, value }) => {
-              return <Th key={key}>{format(value, 'E', { locale })}</Th>
+              return (
+                <Th key={key} data-testid="calendar-weekends">
+                  {format(value, 'E', { locale })}
+                </Th>
+              )
             })}
           </Tr>
         </Thead>
@@ -113,12 +124,20 @@ export default function Example() {
             const { key, value: days } = week
 
             return (
-              <Tr key={key}>
+              <Tr key={key} data-testid="calendar-weeks">
                 {days.map((day) => {
                   const { key, date, isCurrentDate, isCurrentMonth } = day
 
                   return (
-                    <Td key={key} opacity={isCurrentMonth ? 1 : 0.2}>
+                    <Td
+                      key={key}
+                      opacity={isCurrentMonth ? 1 : 0.2}
+                      data-testid={
+                        isCurrentMonth
+                          ? 'calendar-cell--today'
+                          : 'calendar-cell'
+                      }
+                    >
                       {isCurrentDate ? (
                         <Text fontWeight="bold" color="teal.500">
                           {date}

jest.config.js

@@ -6,4 +6,5 @@ module.exports = {
   },
   coveragePathIgnorePatterns: ['/node_modules/', 'src/index.ts', 'src/models/*', 'src/core/index.ts', 'src/plugins/index.ts', 'src/utils.index.ts'],
   collectCoverageFrom: ['src/**/*.{js,ts}'],
+  testPathIgnorePatterns: ['/node_modules/', '/cypress/']
 }

package.json

@@ -24,6 +24,8 @@
     "test:watch": "yarn test --watch",
     "lint": "eslint -c .eslintrc '{pages,src}/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "yarn lint --fix",
+    "test:e2e": "cypress open",
+    "cypress": "cypress run",
     "precommit": "lint-staged",
     "typecheck": "tsc --noEmit"
   },
@@ -72,15 +74,17 @@
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.1",
+    "@semantic-release/git": "^9.0.0",
+    "@semantic-release/github": "^7.2.0",
+    "@testing-library/cypress": "^7.0.6",
     "@testing-library/react-hooks": "^3.7.0",
     "@types/react": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.11.0",
     "@typescript-eslint/parser": "^4.11.0",
-    "@semantic-release/git": "^9.0.0",
-    "@semantic-release/github": "^7.2.0",
     "all-contributors-cli": "^6.19.0",
     "babel-eslint": "^10.1.0",
     "concurrently": "^5.3.0",
+    "cypress": "^7.2.0",
     "cz-conventional-changelog": "^3.3.0",
     "date-fns": "^2.16.1",
     "eslint": "^7.16.0",
@@ -107,10 +111,10 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
+    "semantic-release": "^17.3.1",
     "ts-jest": "^26.4.4",
     "ts-node": "^9.1.1",
-    "typescript": "^4.1.3",
-    "semantic-release": "^17.3.1"
+    "typescript": "^4.1.3"
   },
   "peerDependencies": {
     "date-fns": ">= 2",