Merge pull request #84 from frondeus/playlistview

Playlist view

.github/PULL_REQUEST_TEMPLATE/pull_request_template.md

@@ -7,7 +7,8 @@
 ## Blocked by
 
 ## Thigs needed to close this PR:
-* [ ] Tested manually
-* [ ] Wrote e2e test
-* [ ] Wrote unit tests
-* [ ] Wrote documentation
+
+- [ ] Tested manually
+- [ ] Wrote e2e test
+- [ ] Wrote unit tests
+- [ ] Wrote documentation

.github/scripts/coverage.mjs

@@ -0,0 +1,52 @@
+export default async function coverMe({ github, context }) {
+	const diffCoverage = process.env.DIFF_COVERAGE;
+	const [_, coverageInfo, summary] = diffCoverage
+		.split('-------------')
+		.map((s) => s.trim())
+		.filter((s) => s.length !== 0);
+
+	// Include a smaller message if there is no coverage information for the diff
+
+	const smallInfo = `\`\`\`\n${coverageInfo}\n\`\`\``;
+
+	const reportBody = !summary
+		? smallInfo
+		: `\`\`\`
+${summary}
+\`\`\`
+
+  <details>
+    <summary>Detailed Coverage Report</summary>
+
+\`\`\`
+${coverageInfo}
+\`\`\`
+  </details>`;
+
+	const templatedMessage = `##  Coverage Report:\n\n${reportBody}`;
+	const { data: existingComments } = await github.rest.issues.listComments({
+		owner: context.repo.owner,
+		repo: context.repo.repo,
+		issue_number: context.issue.number
+	});
+
+	const githubActionComments = existingComments.filter(
+		(comment) =>
+			comment.user.login === 'github-actions[bot]' && comment.body.includes('Coverage Report')
+	);
+	if (githubActionComments.length) {
+		const latestComment = githubActionComments.reverse()[0];
+
+		if (latestComment.body === templatedMessage) {
+			console.info('Diff comment with the same message already exists - not posting.');
+			return;
+		}
+	}
+
+	github.rest.issues.createComment({
+		owner: context.repo.owner,
+		repo: context.repo.repo,
+		issue_number: context.issue.number,
+		body: templatedMessage
+	});
+}

.github/workflows/pr.yml

@@ -21,11 +21,34 @@ jobs:
 
       - name: check
         run: npx svelte-check --tsconfig ./tsconfig.json --ignore ./cypress
-  test:
+
+  format:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
 
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: install deps
+        run: npm install
+
+      - name: check
+        run: npm run format:check
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - name: Add ${{ github.base_ref }} branch
+        run: git branch -f --create-reflog ${{ github.base_ref }} origin/${{ github.base_ref }}
+
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
@@ -35,7 +58,32 @@ jobs:
         run: npm install
 
       - name: test
-        run: npx jest
+        run: npm run test -- --changedSince=${{ github.base_ref }} --coverage --coverageReporters=cobertura
+
+      - uses: actions/setup-python@v2
+        if: always()
+        with:
+          python-version: '3.x'
+
+      - name: Generate Diff Coverage
+        if: always()
+        run: |
+          # stop-gap until Jest adds a way of doing this for us
+          python -m pip install diff-cover
+          # Get diff coverage
+          DIFF_COVERAGE="$(diff-cover coverage/cobertura-coverage.xml --compare-branch=${{ github.base_ref }})"
+
+          echo 'DIFF_COVERAGE<<EOF' >> "$GITHUB_ENV"
+          echo "$DIFF_COVERAGE" >> "$GITHUB_ENV"
+          echo 'EOF' >> "$GITHUB_ENV"
+
+      - name: Report Coverage
+        if: always()
+        uses: actions/github-script@v5
+        with:
+          script: |
+            const { default: script } = await import('${{ github.workspace }}/.github/scripts/coverage.mjs');
+            await script({ github, context });
   build:
     runs-on: ubuntu-latest
     steps:

.gitignore

@@ -18,3 +18,4 @@ dist
 cypress.env.json
 cypress/screenshots
 cypress/videos
+coverage

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run format

.prettierignore

@@ -21,3 +21,4 @@ dist
 cypress.env.json
 cypress/screenshots
 cypress/videos
+coverage/

CONTRIBUTING.md

@@ -11,7 +11,6 @@ To get started with contributing to the project, you'll need to:
 1. Clone the repository.
 2. Follow instructions in this document [[https://github.com/frondeus/fvtt-syrin-control/blob/next/docs/how_to_setup_dev.md]].
 
-
 ## Contributing code
 
 If you're interested in contributing code to the project please follow these guidelines:
@@ -26,42 +25,46 @@ To ensure that the new features do not break existing code, and that everything
 cover your feature with tests.
 
 The rule is simple:
-* All new code should be covered in component (using Jest framework) tests, that check all possible scenarios, like "if soundset exists" 
-or "if user loses access". We aim to have at least 75% of coverage in new code.
-* At least one E2E test (using Cypress framework) that only checks the most popular green path.
+
+- All new code should be covered in component (using Jest framework) tests, that check all possible scenarios, like "if soundset exists"
+  or "if user loses access". We aim to have at least 75% of coverage in new code.
+- At least one E2E test (using Cypress framework) that only checks the most popular green path.
 
 #### Note
+
 > Our E2E tests are not ran on CI, because it would violate the LICENSE of foundry. Therefore, maintainer would usually run those before merging PR
 > as well as before releasing new version to the public
 
 ### Formatting the code
 
 In this project we keep the code clean and formatted. Fortunately there are tools that do the job for us. Therefore remember to run:
+
 ```
 npm run format
 ```
+
 before commiting your work.
 
 ## Areas Needing Attention
 
 If you're not sure where to start, we could use help with the following areas:
 
-* Documentation updates - since 0.4.0 release there was a massive overhaul of how SyrinControl works, therefore we need to update gifs, how-tos and guides.
-* Writing E2E tests that cover happy paths in the module - to ensure we never break one thing by introducing another.
+- Documentation updates - since 0.4.0 release there was a massive overhaul of how SyrinControl works, therefore we need to update gifs, how-tos and guides.
+- Writing E2E tests that cover happy paths in the module - to ensure we never break one thing by introducing another.
 
 ## Reporting Issuess
 
 If you come across any bugs or issues, please report them using the project's issue tracker.
 When filling a report, please include the following information:
 
-* Steps to reproduce the issue - the more detailed the better
-* Expected behavior
-* Screenshots of your problem
-* Which operating system you are running
-* Which browser
-* What is foundry VTT version
-* What is SyrinControl version
-* Are there any error messages or console output
+- Steps to reproduce the issue - the more detailed the better
+- Expected behavior
+- Screenshots of your problem
+- Which operating system you are running
+- Which browser
+- What is foundry VTT version
+- What is SyrinControl version
+- Are there any error messages or console output
 
 Those details are incredibly useful to us so we can properly debug the issue. Vague or incomplete bug reports are hard to reproduce.
 

cypress.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
 		experimentalStudio: true,
 		setupNodeEvents(on, _config) {
 			on('before:browser:launch', (browser, launchOptions) => {
-				if (browser.name === 'chrome') {
+				if (browser.family === 'chromium') {
 					const index = launchOptions.args.indexOf('--disable-gpu');
 					if (index > -1) {
 						launchOptions.args.splice(index, 1);

cypress/e2e/config.cy.ts

@@ -0,0 +1,170 @@
+describe('config', () => {
+	beforeEach(() => {
+		cy.login('Gamemaster');
+		cy.clearWorld();
+		cy.mockAPI();
+		cy.importPlaylist();
+	});
+
+	it('creates non-syrinscape playlist', () => {
+		cy.createPlaylist();
+
+		cy.get('.directory-item.playlist')
+			.eq(0)
+			.children('.playlist-header')
+			.children('.sound-controls')
+			.children('[data-action="sound-create"]')
+			.should('not.exist');
+
+		cy.get('.directory-item.playlist')
+			.eq(1)
+			.children('.playlist-header')
+			.children('.sound-controls')
+			.children('[data-action="sound-create"]')
+			.should('be.visible');
+
+		cy.get('.directory-item.playlist')
+			.eq(0)
+			.children('.playlist-header')
+			.children('.sound-controls')
+			.children('[data-action="playlist-mode"]')
+			.should('not.exist');
+
+		cy.get('.directory-item.playlist')
+			.eq(1)
+			.children('.playlist-header')
+			.children('.sound-controls')
+			.children('[data-action="playlist-mode"]')
+			.should('be.visible');
+
+		cy.get('.directory-item.playlist')
+			.eq(0)
+			.children('.playlist-header')
+			.children('.sound-controls')
+			.children('[data-action="playlist-play"]')
+			.should('not.exist');
+
+		cy.get('.directory-item.playlist')
+			.eq(1)
+			.children('.playlist-header')
+			.children('.sound-controls')
+			.children('[data-action="playlist-play"]')
+			.should('be.visible');
+
+		cy.get('.directory-item.playlist').eq(0).click();
+		cy.get('.directory-item.playlist').eq(1).click();
+
+		cy.get('.directory-item.playlist')
+			.eq(0)
+			.children('.playlist-sounds')
+			.children('.sound')
+			.children('.sound-controls')
+			.children('[data-action="sound-play"]')
+			.should('be.visible');
+
+		cy.get('.directory-item.playlist')
+			.eq(1)
+			.children('.playlist-sounds')
+			.children('.sound')
+			.children('.sound-controls')
+			.children('[data-action="sound-play"]')
+			.should('be.visible');
+
+		cy.get('.directory-item.playlist')
+			.eq(0)
+			.children('.playlist-sounds')
+			.children('.sound')
+			.children('.sound-controls')
+			.children('[data-action="sound-repeat"]')
+			.should('not.exist');
+
+		cy.get('.directory-item.playlist')
+			.eq(1)
+			.children('.playlist-sounds')
+			.children('.sound')
+			.children('.sound-controls')
+			.children('[data-action="sound-repeat"]')
+			.should('be.visible');
+	});
+
+	it('opens syrinscape playlist config', () => {
+		cy.get('.playlist-name').rightclick();
+
+		cy.get('.context-items > :nth-child(1)').click();
+
+		cy.get('[data-test="syrin-playlist-name"]')
+			.should('be.visible')
+			.and('contain.value', 'My Room');
+
+		cy.get('[data-test="syrin-soundset-name"]')
+			.should('be.visible')
+			.and('be.disabled')
+			.and('contain.value', 'My Room');
+
+		cy.get('[data-test="syrin-controlled"]').should('be.visible');
+	});
+
+	it('opens syrinscape playlist sound config', () => {
+		cy.get('.playlist-name > .collapse').click();
+
+		cy.get('.directory-list .sound-name').first().rightclick();
+		cy.get('.context-items > :nth-child(1)').click();
+
+		cy.get('[data-test="syrin-sound-name"]')
+			.should('be.visible')
+			.and('contain.value', 'My mood in kitchen');
+
+		cy.get('[data-test="syrin-soundset-name"]')
+			.should('be.visible')
+			.and('be.disabled')
+			.and('contain.value', 'My Room');
+
+		cy.get('[data-test="syrin-mood-name"]')
+			.should('be.visible')
+			.and('be.disabled')
+			.and('contain.value', 'My mood in kitchen');
+
+		cy.get('[data-test="syrin-controlled"]').should('be.visible');
+	});
+
+	it('opens syrinscape ambient sound config', () => {
+		cy.get('.playlist-name > .collapse').click();
+
+		cy.get('.directory-list .sound-name').first().as('mood');
+		cy.get('#board').as('canvas');
+
+		cy.get('@mood').should('be.visible');
+
+		const dataTransfer = new DataTransfer();
+
+		cy.get('@mood').trigger('dragstart', { dataTransfer });
+
+		cy.get('@canvas').trigger('drop', { dataTransfer });
+
+		cy.get('@mood').trigger('dragend');
+
+		cy.get('[data-test="syrin-soundset-name"]')
+			.should('be.visible')
+			.and('be.disabled')
+			.and('contain.value', 'My Room');
+
+		cy.get('[data-test="syrin-ambient-name"]')
+			.should('be.visible')
+			.and('be.disabled')
+			.and('contain.value', 'My mood in kitchen');
+
+		cy.get('[data-test="syrin-x"]').should('be.visible');
+
+		cy.get('[data-test="syrin-y"]').should('be.visible');
+
+		cy.get('[data-test="syrin-radius"]').should('be.visible');
+
+		cy.get('[data-test="syrin-walls"]').should('be.visible');
+
+		cy.get('[data-test="syrin-darkness-min"]').should('be.visible');
+
+		cy.get('[data-test="syrin-darkness-max"]').should('be.visible');
+
+		cy.get('[data-test="syrin-controlled"]').should('be.visible');
+	});
+});