diff --git a/resources/assets/.eslintrc b/.eslintrc similarity index 91% rename from resources/assets/.eslintrc rename to .eslintrc index 9ac9e100..644a877d 100644 --- a/resources/assets/.eslintrc +++ b/.eslintrc @@ -12,6 +12,11 @@ "@vue/standard", "@vue/typescript/recommended" ], + "ignorePatterns": [ + "cypress/fixtures", + "cypress/screenshots", + "resources/assets/js/tests/__coverage__" + ], "plugins": [ "@typescript-eslint" ], diff --git a/cypress/integration/favorites.spec.ts b/cypress/integration/favorites.spec.ts index d0b21c1c..642d3d62 100644 --- a/cypress/integration/favorites.spec.ts +++ b/cypress/integration/favorites.spec.ts @@ -55,7 +55,6 @@ context('Favorites', { scrollBehavior: false }, () => { cy.$assertFavoriteSongCount(4) }) - it('deletes a favorite with Unlike button', () => { cy.intercept('POST', '/api/interaction/like', {}) cy.$clickSidebarItem('Favorites') diff --git a/cypress/integration/playlists.spec.ts b/cypress/integration/playlists.spec.ts index ca290e3a..1360fbb2 100644 --- a/cypress/integration/playlists.spec.ts +++ b/cypress/integration/playlists.spec.ts @@ -229,8 +229,8 @@ context('Playlists', () => { cy.findByText('Created playlist "My Smart Playlist."').should('be.visible') cy.get('#playlistWrapper .heading-wrapper') - .should('be.visible') - .and('contain', 'My Smart Playlist') + .should('be.visible') + .and('contain', 'My Smart Playlist') cy.$assertSidebarItemActive('My Smart Playlist') cy.$assertPlaylistSongCount('My Smart Playlist', 3) diff --git a/cypress/integration/song-context-menu.spec.ts b/cypress/integration/song-context-menu.spec.ts index b8dc75ab..2f1edcde 100644 --- a/cypress/integration/song-context-menu.spec.ts +++ b/cypress/integration/song-context-menu.spec.ts @@ -84,9 +84,9 @@ context('Song Context Menu', { scrollBehavior: false }, () => { }) cy.findByTestId('song-context-menu').within(() => { - cy.findByText('Add To').click() - cy.findByText(config.menuItem).click() - }) + cy.findByText('Add To').click() + cy.findByText(config.menuItem).click() + }) cy.$clickSidebarItem('Current Queue') cy.get('#queueWrapper').within(() => { @@ -197,13 +197,13 @@ context('Song Context Menu', { scrollBehavior: false }, () => { cy.findByTestId('song-context-menu').within(() => cy.findByText('Edit').should('not.exist')) }) - it("copies a song's URL", () => { + it('copies a song\'s URL', () => { cy.$login() cy.$clickSidebarItem('All Songs') - cy.window().then(window => cy.spy(window.document, 'execCommand').as('copy')); + cy.window().then(window => cy.spy(window.document, 'execCommand').as('copy')) cy.get('#songsWrapper').within(() => cy.get('tr.song-item:first-child').rightclick()) cy.findByTestId('song-context-menu').within(() => cy.findByText('Copy Shareable URL').click()) - cy.get('@copy').should('be.calledWithExactly', 'copy'); + cy.get('@copy').should('be.calledWithExactly', 'copy') }) }) diff --git a/package.json b/package.json index 106d47be..e0890511 100644 --- a/package.json +++ b/package.json @@ -94,15 +94,11 @@ "webpack-node-externals": "^3.0.0" }, "scripts": { - "lint": "eslint ./cypress/**/*.ts", - "watch.bak": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", - "watch-poll.bak": "yarn watch -- --watch-poll", - "hot.bak": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", + "lint": "eslint ./resources/assets/js/**/*.ts && eslint ./cypress/**/*.ts", "test:e2e": "kill-port 8080 && start-test dev :8080 'cypress open'", "test:e2e:ci": "kill-port 8080 && start-test 'php artisan serve --port=8080 --quiet' :8080 'cypress run'", "build": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "build-demo": "cross-env NODE_ENV=demo node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js -p", - "production.bak": "yarn build", "dev": "start-test 'php artisan serve --port=8000 --quiet' :8000 hot", "development": "mix", "watch": "mix watch", @@ -122,6 +118,9 @@ ], "resources/assets/**/*.ts": [ "eslint" + ], + "cypress/**/*.ts": [ + "eslint" ] } } diff --git a/resources/assets/.eslintignore b/resources/assets/.eslintignore deleted file mode 100644 index d92c4f08..00000000 --- a/resources/assets/.eslintignore +++ /dev/null @@ -1,2 +0,0 @@ -js/libs -js/tests/__coverage__ diff --git a/resources/assets/js/__tests__/setup.ts b/resources/assets/js/__tests__/setup.ts index 08a46f4f..09f8697c 100644 --- a/resources/assets/js/__tests__/setup.ts +++ b/resources/assets/js/__tests__/setup.ts @@ -1,4 +1,3 @@ -/// import '@babel/polyfill' import Vue from 'vue' import lodash from 'lodash' diff --git a/resources/assets/js/__tests__/types.d.ts b/resources/assets/js/__tests__/types.d.ts index 2d5da37b..0a8a04a7 100644 --- a/resources/assets/js/__tests__/types.d.ts +++ b/resources/assets/js/__tests__/types.d.ts @@ -12,7 +12,7 @@ declare namespace NodeJS { Vue: any __UNIT_TESTING__: boolean _: any - noop: Function + noop: TAnyFunction, IntersectionObserver: any document: Document diff --git a/resources/assets/js/composables/useSongList.ts b/resources/assets/js/composables/useSongList.ts index 27bff15a..b0649071 100644 --- a/resources/assets/js/composables/useSongList.ts +++ b/resources/assets/js/composables/useSongList.ts @@ -6,12 +6,12 @@ import isMobile from 'ismobilejs' import { playbackService } from '@/services' import { eventBus } from '@/utils' +import { queueStore, songStore } from '@/stores' +import router from '@/router' import ControlsToggler from '@/components/ui/ScreenControlsToggler.vue' import SongList from '@/components/song/SongList.vue' import SongListControls from '@/components/song/SongListControls.vue' -import { queueStore, songStore } from '@/stores' -import router from '@/router' export const useSongList = (songs: Ref, controlsConfig: Partial = {}) => { const vm = getCurrentInstance() diff --git a/resources/assets/js/directives/droppable.ts b/resources/assets/js/directives/droppable.ts index beee2717..7ae3a163 100644 --- a/resources/assets/js/directives/droppable.ts +++ b/resources/assets/js/directives/droppable.ts @@ -2,12 +2,12 @@ import { $ } from '@/utils' import { Directive } from 'vue' export const droppable: Directive = { - created: (el: HTMLElement, { value }: { value: Function | never }): void => { + created: (el: HTMLElement, { value }: { value: TAnyFunction | never }) => { if (!(value instanceof Function)) { throw new Error(`Expect a function, received ${typeof value}`) } - el.addEventListener('dragenter', (event: DragEvent): boolean => { + el.addEventListener('dragenter', (event: DragEvent) => { event.preventDefault() $.addClass(el, 'droppable') event.dataTransfer!.dropEffect = 'move' @@ -17,9 +17,9 @@ export const droppable: Directive = { el.addEventListener('dragover', (event: DragEvent): void => event.preventDefault()) - el.addEventListener('dragleave', (): void => $.removeClass(el, 'droppable')) + el.addEventListener('dragleave', () => $.removeClass(el, 'droppable')) - el.addEventListener('drop', (event: DragEvent): void => { + el.addEventListener('drop', (event: DragEvent) => { event.preventDefault() event.stopPropagation() $.removeClass(el, 'droppable') diff --git a/resources/assets/js/utils/$.ts b/resources/assets/js/utils/$.ts index dc1c9dcc..7c065d3c 100644 --- a/resources/assets/js/utils/$.ts +++ b/resources/assets/js/utils/$.ts @@ -2,23 +2,11 @@ * A utility that aims to replace jQuery for the most basic DOM methods. */ export const $ = { - is: (el: Element, selector: string): boolean => { - return el.matches(selector) - }, + is: (el: Element, selector: string) => el.matches(selector), + addClass: (el: Element | null, className: string) => el?.classList.add(className), + removeClass: (el: Element | null, className: string) => el?.classList.remove(className), - addClass: (el: Element | null, className: string): void => { - if (el) { - el.classList.add(className) - } - }, - - removeClass: (el: Element | null, className: string): void => { - if (el) { - el.classList.remove(className) - } - }, - - scrollTo (el: Element, to: number, duration: number, cb?: Function): void { + scrollTo (el: Element, to: number, duration: number, cb?: TAnyFunction) { if (duration <= 0 || !el) { return } @@ -26,7 +14,7 @@ export const $ = { const difference = to - el.scrollTop const perTick = difference / duration * 10 - window.setTimeout((): void => { + window.setTimeout(() => { el.scrollTop = el.scrollTop + perTick if (el.scrollTop === to) {