diff --git a/.drone.yml b/.drone.yml index 34aa02bf0a..e9c235a6cb 100644 --- a/.drone.yml +++ b/.drone.yml @@ -245,7 +245,7 @@ steps: - corepack enable - pnpm --filter lego-webapp preview - - name: cypress + - name: cypress_e2e image: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1 shm_size: 512m ipc: host @@ -270,7 +270,24 @@ steps: - ./wait-for-it.sh -t 180 legocypresshelper:3030 - npm i -g corepack - corepack enable - - pnpm --filter lego-webapp exec cypress run --record + - pnpm --filter lego-webapp exec cypress run --e2e --record + + - name: cypress_component + image: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1 + when: + event: [push] + branch: + exclude: [build] + depends_on: + - install_cypress + - build + environment: + TZ: Europe/Oslo + CYPRESS_CACHE_FOLDER: /drone/src/.cypress_cache + commands: + - npm i -g corepack + - corepack enable + - pnpm --filter lego-webapp exec cypress run --component --config video=false,screenshotOnRunFailure=false - name: docker image: plugins/docker @@ -285,7 +302,8 @@ steps: - lint - typescript - frontend - - cypress + - cypress_e2e + - cypress_component environment: SENTRY_AUTH_TOKEN: from_secret: sentry_auth_token diff --git a/README.md b/README.md index 213aed0c49..24a0599ec3 100644 --- a/README.md +++ b/README.md @@ -87,7 +87,7 @@ A coverage report can be generated by running `pnpm test -- --coverage`. -
Cypress E2E (End-to-end tests) +
Cypress E2E and Component tests ### End to end tests (cypress) @@ -140,6 +140,20 @@ And you run cypress headlessly (no visible browser) in another terminal pnpm cypress run ``` +### Component tests (cypress) +Component tests does not depend on anything to run + +Simply open cypress +```bash +$ pnpm cypress open +``` + +or run in terminal +```bash +pnpm cypress run --component +``` + + #### STRIPE In order to run the payment end-2-end tests, a few extra steps are required. First one has to install the stripe cli, log in and then run diff --git a/lego-webapp/components/Comments/Comment.tsx b/lego-webapp/components/Comments/Comment.tsx index 2f398c73cf..40b84aa954 100644 --- a/lego-webapp/components/Comments/Comment.tsx +++ b/lego-webapp/components/Comments/Comment.tsx @@ -40,7 +40,7 @@ const Comment = ({ return ( <> -
+
{author ? ( diff --git a/lego-webapp/components/Comments/CommentTree.tsx b/lego-webapp/components/Comments/CommentTree.tsx index 91a7045207..234bdd0c09 100644 --- a/lego-webapp/components/Comments/CommentTree.tsx +++ b/lego-webapp/components/Comments/CommentTree.tsx @@ -66,7 +66,7 @@ function CommentTree({ ); }); - return
{tree}
; + return
{tree}
; } export default CommentTree; diff --git a/lego-webapp/components/Comments/__tests__/CommentTree.spec.tsx b/lego-webapp/components/Comments/__tests__/CommentTree.spec.tsx deleted file mode 100644 index ded8b4c27d..0000000000 --- a/lego-webapp/components/Comments/__tests__/CommentTree.spec.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { configureStore } from '@reduxjs/toolkit'; -import { mount, shallow } from 'enzyme'; -import { Provider } from 'react-redux'; -import { describe, it, expect } from 'vitest'; -import { createRootReducer } from '~/redux/rootReducer'; -import { generateTreeStructure } from '~/utils'; -import CommentTree from '../CommentTree'; -import comments from './fixtures/comments'; - -const store = configureStore({ - reducer: createRootReducer(), - preloadedState: { - theme: { - theme: 'light', - }, - auth: { - id: 1, - username: 'webkom', - token: 'token', - loginFailed: false, - loggingIn: false, - registrationToken: null, - studentConfirmed: true, - }, - users: { - ids: [], - entities: {}, - actionGrant: ['view'], - fetching: false, - fetchingAchievements: false, - paginationNext: {}, - }, - emojis: { - ids: [], - entities: {}, - actionGrant: ['view'], - fetching: false, - paginationNext: {}, - }, - }, - middleware: (getDefaultMiddleware) => getDefaultMiddleware(), -}); - -describe('', () => { - const tree = generateTreeStructure(comments); - it('should render the top level comments at root level', () => { - // eslint-disable-next-line - // @ts-ignore - const wrapper = shallow(); - const commentElements = wrapper.find('[data-ischild=false]'); - expect(commentElements).toHaveLength(2); - }); - it('should nest comments', () => { - const wrapper = mount( - - {/*eslint-disable*/} - {/* @ts-ignore*/} - - , - ); - const rootElements = wrapper.find('[data-ischild=false]'); - const rootElement = rootElements.at(1); - const childTree = rootElement.find('[data-ischild=true]'); - expect(childTree.text()).toMatch(comments[2].text ?? ''); - }); -}); diff --git a/lego-webapp/components/Comments/__tests__/CommentView.spec.tsx b/lego-webapp/components/Comments/__tests__/CommentView.spec.tsx deleted file mode 100644 index 86cf977a0d..0000000000 --- a/lego-webapp/components/Comments/__tests__/CommentView.spec.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { shallow } from 'enzyme'; -import { describe, it, expect } from 'vitest'; -import CommentTree from '../CommentTree'; -import CommentView from '../CommentView'; -import comments from './fixtures/comments'; - -describe('components', () => { - describe('CommentView', () => { - it('should render a comment tree', () => { - // eslint-disable-next-line - // @ts-ignore - const wrapper = shallow(); - expect(wrapper.find(CommentTree)).toHaveLength(1); - }); - it('should pass the comment tree a tree structure', () => { - // eslint-disable-next-line - // @ts-ignore - const wrapper = shallow(); - const tree = wrapper.find(CommentTree).props().comments; - const [first, second] = tree; - expect(first.children).toHaveLength(0); - expect(second.children).toHaveLength(1); - expect(second.children[0].parent).toEqual(second.id); - }); - }); -}); diff --git a/lego-webapp/components/LoginForm/LoginForm.spec.tsx b/lego-webapp/components/LoginForm/LoginForm.spec.tsx deleted file mode 100644 index d48df94baf..0000000000 --- a/lego-webapp/components/LoginForm/LoginForm.spec.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { configureStore } from '@reduxjs/toolkit'; -import { mount } from 'enzyme'; -import { Field } from 'react-final-form'; -import { Provider } from 'react-redux'; -import { describe, it, expect } from 'vitest'; -import { createRootReducer } from '~/redux/rootReducer'; -import LoginForm from './LoginForm'; - -describe('components', () => { - describe('LoginForm', () => { - it('should render correctly', () => { - const store = configureStore({ - reducer: createRootReducer(), - middleware: (getDefaultMiddleware) => getDefaultMiddleware(), - }); - - const wrapper = mount( - - - , - ); - const form = wrapper.find('form'); - const username = form.childAt(0); - const password = form.childAt(1); - expect(username.type()).toEqual(Field); - expect(password.type()).toEqual(Field); - expect(password.prop('type')).toBe('password'); - }); - }); -}); diff --git a/lego-webapp/components/Time/Time.spec.tsx b/lego-webapp/components/Time/Time.spec.tsx deleted file mode 100644 index 1a7d259ee7..0000000000 --- a/lego-webapp/components/Time/Time.spec.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { shallow } from 'enzyme'; -import moment from 'moment-timezone'; -import { describe, it, expect, vi } from 'vitest'; -import Time, { FromToTime, FormatTime } from './index'; - -vi.mock('~/utils/appConfig', async () => { - return { - appConfig: { - timezone: 'GMT', - }, - }; -}); -describe('