Add test set up

.github/workflows/buildAndRelease.yml

@@ -6,7 +6,23 @@ on:
       - develop
 
 jobs:
+  test:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v2
+
+      - run: npm run build
+
+      - run: npm run test
+
   deleteReleaseAssets:
+    needs: test
     runs-on: ubuntu-latest
 
     steps:
@@ -18,7 +34,7 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
 
-  release:
+  packageAndRelease:
     needs: deleteReleaseAssets
     runs-on: ${{ matrix.os }}
 

README.md

@@ -10,11 +10,13 @@
 The latest release can be downloaded [here](https://andreaswilli.github.io/meta-grabber/).
 
 ## Demo
+
 Rename your files in seconds! 🚀
 
 ![meta-grabber](https://user-images.githubusercontent.com/17298270/47755099-5f33b300-dc9d-11e8-9560-aca6a21527a9.gif)
 
 ## Instructions
+
 Rename your files with these steps:
 
 1. **Search for your TV show.**  
@@ -35,47 +37,57 @@ Rename your files with these steps:
 ## Settings
 
 ##### ▶︎ User interface language
+
 Changes the language of the user interface. So far you can choose between English and German.
+
 > If you speak any other language, feel free to add your translations. E.g. `i18n/es.json` for Spanish.
 
 ##### ▶︎ Metadata language
+
 Specifies the language of the metadata that will be grabbed. Defaults to English.
 
 ##### ▶︎ Metadata provider
+
 If you don't find the tv show you are looking for, you can try to switch the provider.
 You have two different options:
+
 - [TheMovieDB](https://www.themoviedb.org/)
 - [TheTVDB](https://www.thetvdb.com/)
 
 ##### ▶︎ File name template
+
 With this setting you can define the template used to rename your files. You can set it to anything you want, however invalid characters such as `?` will be ignored.
 
 Also you can use the placeholders listed below to dynamically insert metadata into the name. In fact, you have to use at least `{season_no}` and `{episode_no}` to make sure every file name is unique.
 
-Placeholder | Example value | Description
---- | --- | ---
-`{season_no}` | `05` | The number of the season.
-`{episode_no}` | `16` | The number of the episode.
-`{episode_name}` | `Felina` | The name of the episode.
-`{show_name}` | `Breaking Bad` | The name of the tv show.
-`{year}` | `2008` | The year in which the tv show was first aired.
+| Placeholder      | Example value  | Description                                    |
+| ---------------- | -------------- | ---------------------------------------------- |
+| `{season_no}`    | `05`           | The number of the season.                      |
+| `{episode_no}`   | `16`           | The number of the episode.                     |
+| `{episode_name}` | `Felina`       | The name of the episode.                       |
+| `{show_name}`    | `Breaking Bad` | The name of the tv show.                       |
+| `{year}`         | `2008`         | The year in which the tv show was first aired. |
 
 ##### ▶︎ Default output directory
+
 The output directory that will be used if you don't manually select one. Your directory name can also include `{show_name}`, which will be replaced with the name of the tv show. This is useful to automatically organise your tv shows in subfolders.
 
 ##### ▶︎ Included file types
+
 You can open a whole directory or even multiple at once. This option specifies which file types will be included. Defaults to `mkv,avi,mp4,mov`.
 
 ##### ▶︎ Excluded terms
+
 Files that contain one of the terms set here will not get included. This applies to the complete file name (including directory name). This option is mainly existing to not open sample files when importing whole directories. Defaults to `sample`.
 
 ## Local development
+
 Run it locally by following these steps:
 
 1. Install dependencies: `npm i`
 
 1. Start build: `npm run serve`
 
-1. Start the electron app in a **new** terminal window: `npm run dev`
+1. Start the electron app in a **new** terminal window: `npm run start`
 
 Now you can make changes, save the modified files, then return to the app and reload (`ctrl+r` on Windows/Linux, `cmd+r` on macOS). Your changes should now appear in the app.

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  modulePathIgnorePatterns: ['dist'],
+}

package.json

@@ -4,11 +4,13 @@
   "description": "A tool to grab metadata for tv shows and rename files on your hard disk.",
   "main": "main.js",
   "scripts": {
-    "dev": "electron .",
+    "start": "electron .",
     "serve": "webpack --watch --mode development",
+    "build": "webpack --mode production",
+    "test": "jest",
     "format": "prettier --write '**/*.+(js|css)'",
-    "package": "webpack --mode production && electron-builder -mwl",
-    "package-publish": "webpack --mode production && electron-builder -mwl --publish always"
+    "package": "npm run build && electron-builder -mwl",
+    "package-publish": "npm run build && electron-builder -mwl --publish always"
   },
   "homepage": "./",
   "repository": "https://github.com/andreaswilli/meta-grabber",
@@ -40,11 +42,14 @@
     "electron-is-dev": "^2.0.0",
     "electron-updater": "^4.3.9",
     "i18next": "^21.3.2",
+    "jest": "^27.2.5",
+    "puppeteer-core": "^10.4.0",
     "react": "^16.13.1",
     "react-animate-height": "^2.0.23",
     "react-autocomplete": "^1.8.1",
     "react-dom": "^16.13.1",
     "react-i18next": "^11.12.0",
+    "tree-kill": "^1.2.2",
     "webpack": "^5.58.2"
   },
   "build": {

tests/app.test.js

@@ -0,0 +1,25 @@
+const regeneratorRuntime = require('regenerator-runtime')
+import ElectronTest from './setupElectronTests'
+
+const timeout = 20000
+const electronTest = new ElectronTest({ timeout })
+
+let page
+
+jest.setTimeout(timeout)
+
+beforeAll(async () => {
+  page = await electronTest.createPage()
+})
+
+afterAll(async () => electronTest.destroyPage())
+
+describe('Home', () => {
+  test('show initial instructions in snackbar', async () => {
+    await page.waitForSelector('.message__text')
+    const message = await page.$eval('.message__text', (el) => el.innerText)
+    expect(message).toBe(
+      'Please search for a TV show and open the files you want to rename.'
+    )
+  })
+})

tests/setupElectronTests.js

@@ -0,0 +1,50 @@
+const electron = require('electron')
+const puppeteer = require('puppeteer-core')
+const kill = require('tree-kill')
+const { spawn } = require('child_process')
+const regeneratorRuntime = require('regenerator-runtime')
+
+// test set up from here: https://github.com/peterdanis/electron-puppeteer-demo
+export default function ElectronTest({ timeout, port = 9200 }) {
+  let pid
+  let page
+
+  async function createPage() {
+    const startTime = Date.now()
+    let browser
+
+    // Start Electron with custom debugging port
+    pid = spawn(electron, ['.', `--remote-debugging-port=${port}`], {
+      shell: true,
+    }).pid
+
+    // Wait for Puppeteer to connect
+    while (!browser) {
+      try {
+        browser = await puppeteer.connect({
+          browserURL: `http://localhost:${port}`,
+          defaultViewport: { width: 900, height: 700 },
+        })
+        ;[page] = await browser.pages()
+      } catch (error) {
+        if (Date.now() > startTime + timeout) {
+          throw error
+        }
+      }
+    }
+    return page
+  }
+
+  async function destroyPage() {
+    try {
+      await page.close()
+    } catch (error) {
+      kill(pid)
+    }
+  }
+
+  return {
+    createPage,
+    destroyPage,
+  }
+}