Feat/combine allure reports

.eslintrc

@@ -1,5 +1,5 @@
 {
-  "extends": "react-app",
+  "extends": ["react-app", "plugin:codeceptjs/recommended"],
   "plugins": [
     "varspacing",
     "import"

.github/workflows/codeceptjs.yml

@@ -0,0 +1,103 @@
+name: End-to-end tests
+on:
+  pull_request:
+    branches:
+      - master
+jobs:
+  e2e-tests:
+    continue-on-error: true
+    strategy:
+      fail-fast: false
+      matrix:
+        os:
+          - macos-10.15
+          - windows-2019
+        browser:
+          - chrome
+          - firefox
+          - safari
+        exclude:
+          - os: windows-2019
+            browser: safari
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+      - uses: microsoft/playwright-github-action@v1
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn --prefer-offline --network-timeout 1000000
+
+      - name: Run tests
+        run: yarn test:local:${{matrix.browser}}
+        env:
+          OS: ${{matrix.os}}
+          BROWSER: ${{matrix.browser}}
+
+      - name: Alter allure results with OS and Browser
+        if: always()
+        run: node scripts/editAllureResults.js
+        env:
+          OS: ${{matrix.os}}
+          BROWSER: ${{matrix.browser}}
+
+      - name: Upload Allure Test Results
+        if: always()
+        uses: actions/upload-artifact@v2
+        with:
+          name: allure-results-${{matrix.os}}-${{matrix.browser}}
+          path: automatic-tests/output/${{matrix.os}}-${{matrix.browser}}/allure-results
+
+  publish-allure-results:
+    name: "Publish Allure Tests Results"
+    needs: e2e-tests
+    runs-on: ubuntu-latest
+    if: success() || failure()
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+      - name: Download Artifacts
+        uses: actions/download-artifact@v2
+        with:
+          path: artifacts
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn --prefer-offline
+
+      - name: Generate Allure report
+        run: yarn test:allure:reports
+
+      - name: Upload Allure Test Results
+        uses: actions/upload-artifact@v2
+        with:
+          name: Allure Report
+          path: allure-report

.gitignore

@@ -21,3 +21,12 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*.failed.png
+!.gitkeep
+
+# allure
+automatic-tests/output/allure/*/report
+automatic-tests/output/*/allure-results/
+/allure-report
+automatic-tests/output/*

automatic-tests/composition-modal_test.js

@@ -0,0 +1,163 @@
+const { secondsToWait, visualDiffOptions, compositionModalLocators: locators } = require('./config/globals');
+
+Feature('Composition modal');
+
+let currentBrowser;
+
+Scenario('Opens composition modal with expected content', ({ I }) => {
+  const screenshotPath = "composition_modal_loaded.png";
+
+  I.usePlaywrightTo('Detect current browser', async ({ browser }) => {
+    const browserObject = await browser;
+
+    currentBrowser = browserObject._initializer.name;
+    console.log('Current browser is:', currentBrowser);
+  });
+
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.waitForElement(locators.headerInitialResults, secondsToWait);
+  I.saveScreenshot(screenshotPath);
+  I.seeVisualDiff(screenshotPath, visualDiffOptions);
+
+  I.see('50 results');
+  I.see('Composer');
+  I.see('Henry Purcell');
+  I.see('Composition', locators.firstSearchResult);
+  I.see('Thomas Clark', locators.firstSearchResult);
+  I.see('Tis by thy strength the mountains stand', locators.firstSearchResult);
+  I.see('cpdl.org', locators.firstSearchResult);
+});
+
+Scenario('Language switcher initially loads English', ({ I }) => {
+  const screenshotPath = "composition_modal_language_switcher_loaded.png";
+
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.see('English');
+  I.saveScreenshot(screenshotPath);
+  I.seeVisualDiff(screenshotPath, visualDiffOptions);
+});
+
+Scenario('Language switcher can select Dutch language', ({ I }) => {
+  const screenshotPath = "composition_modal_language_switcher_dutch_selected.png";
+
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.click('English', { xpath: '//header//li[1]' });
+  I.click('Dutch', { xpath: '//ul//li[2]' });
+  I.see('Nederlands');
+
+  I.saveScreenshot(screenshotPath);
+  I.seeVisualDiff(screenshotPath, visualDiffOptions);
+});
+
+Scenario('Selects composition from modal', ({ I }) => {
+  const screenshotPath = "composition_modal_selected_.png";
+
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.waitForElement(locators.headerInitialResults, secondsToWait);
+  I.click('Tis by thy strength the mountains stand', locators.firstSearchResult);
+  I.saveScreenshot(screenshotPath);
+  I.seeVisualDiff(screenshotPath, visualDiffOptions);
+  I.see('Tis by thy strength the mountains stand');
+});
+
+Scenario('Opens composition source link from modal', ({ I }) => {
+  I.closeOtherTabs();
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.waitForElement(locators.headerInitialResults, secondsToWait);
+  I.click('cpdl.org', locators.firstSearchResult);
+  I.switchToNextTab();
+  I.grabCurrentUrl();
+  I.seeInCurrentUrl('http://www.cpdl.org/wiki/index.php/%27Tis_by_thy_strength_the_mountains_stand_(Thomas_Clark)');
+});
+
+Scenario('Gives results that match query within modal', ({ I }) => {
+  const screenshotPath = "composition_modal_with_composition_searched.png";
+
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.waitForElement(locators.headerInitialResults, secondsToWait);
+  I.fillField('search', 'Adieu');
+  I.waitForElement('//h6[contains(text(), "48 results")]', secondsToWait);
+  I.see('Adieu! sweet love, adieu');
+  I.saveScreenshot(screenshotPath);
+  I.seeVisualDiff(screenshotPath, visualDiffOptions);
+});
+
+Scenario('All relevant source links display in modal', ({ I }) => {
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.waitForElement(locators.headerInitialResults, secondsToWait);
+  I.see('cpdl.org');
+  I.see('en.wikipedia.org');
+});
+
+Scenario('Filters results with composer filter within modal', ({ I }) => {
+  const screenshotPath = "composition_modal_with_composer_filter_selected.png";
+
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.waitForElement(locators.headerInitialResults, secondsToWait);
+  I.checkOption('Christian Prein');
+  I.waitForElement('//h6[contains(text(), "0 results")]', secondsToWait);
+  I.see('1 selected');
+  I.see('sorry');
+  I.saveScreenshot(screenshotPath);
+  I.seeVisualDiff(screenshotPath, visualDiffOptions);
+});
+
+Scenario('Gives results that match query and applied filter within modal', ({ I }) => {
+  const screenshotPath = "composition_modal_with_composition_searched_and_filter_selected.png";
+
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.waitForElement(locators.headerInitialResults, secondsToWait);
+  I.checkOption('Christian Prein');
+  I.fillField('search', 'Cradle');
+  I.waitForElement('//h6[contains(text(), "0 results")]', secondsToWait);
+  I.see('1 selected');
+  I.see('sorry');
+  I.saveScreenshot(screenshotPath);
+  I.seeVisualDiff(screenshotPath, visualDiffOptions);
+});
+
+Scenario('Removing filters works as expected', ({ I }) => {
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.waitForElement(locators.headerInitialResults, secondsToWait);
+  I.checkOption('Christian Prein');
+  I.waitForElement('//h6[contains(text(), "0 results")]', secondsToWait);
+  I.click('clear');
+  I.waitForElement('//h6[contains(text(), "50 results")]', secondsToWait);
+});
+
+Scenario('Adding multiple filters works as expected', ({ I }) => {
+  const screenshotPath = "composition_modal_with_multiple_filters_selected.png";
+
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.waitForElement(locators.headerInitialResults, secondsToWait);
+
+  I.checkOption('Christian Prein');
+  I.checkOption('Charles King');
+  I.waitForElement('//h6[contains(text(), "0 results")]', secondsToWait);
+  I.see('2 selected');
+  I.saveScreenshot(screenshotPath);
+  I.seeVisualDiff(screenshotPath, visualDiffOptions);
+});
+
+Scenario('Narrows down composer filters with filter search box within modal', ({ I }) => {
+  const screenshotPath = "composition_modal_with_composer_filter_search_box_used.png";
+
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.waitForElement(locators.headerInitialResults, secondsToWait);
+  I.fillField('search-filter', 'Christian');
+  I.dontSee('Charles King');
+  I.saveScreenshot(screenshotPath);
+  I.seeVisualDiff(screenshotPath, visualDiffOptions);
+});

automatic-tests/config/globals.js

@@ -0,0 +1,24 @@
+module.exports = {
+  secondsToWait           : 15,
+  visualDiffOptions       : { tolerance: 1, prepareBaseImage: true },
+  compositionModalLocators: {
+    selectCompositionModal: 'button[data-test-id=select-composition-modal]',
+    headerInitialResults  : '//h6[contains(text(), "50 results")]',
+    firstSearchResult     : 'div[data-test-id=first-search-result]',
+  },
+  mediaModalLocators: {
+    selectMediaModal    : 'button[data-test-id=select-media-modal]',
+    headerInitialResults: '//h6[contains(text(), "18 results")]',
+    firstSearchResult   : 'div[data-test-id=first-search-result]',
+  },
+  personModalLocators: {
+    selectPersonModal   : 'button[data-test-id=select-person-modal]',
+    firstSearchResult   : 'div[data-test-id=first-search-result]',
+    headerInitialResults: '//h6[contains(text(), "50 results")]',
+  },
+  scoreModalLocators: {
+    selectScoreModal    : 'button[data-test-id=select-score-modal]',
+    headerInitialResults: '//h6[contains(text(), "50 results")]',
+    firstSearchResult   : 'div[data-test-id=first-search-result]',
+  },
+};