Feat / update e2e test with queries

.commitlintrc.js

@@ -3,6 +3,7 @@ module.exports = {
   rules  : {
     'scope-enum': [
       2, 'always', [
+        'e2e',
         'example',
         'project',
         'navbar',

.eslintrc

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

.github/workflows/codeceptjs.yml

@@ -0,0 +1,56 @@
+on:
+  pull_request:
+    branches:
+      - master
+jobs:
+  e2e-tests:
+    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
+
+      - name: Run tests
+        run: yarn test:local:${{matrix.browser}}
+
+      - name: Run Allure
+        if: ${{ always() }}
+        run: yarn test:${{matrix.browser}}:report:generate
+
+      - name: Export Allure report
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: allure-report-${{matrix.os}}-${{matrix.browser}}
+          retention-days: 30
+          path: automatic-tests/output/allure/${{matrix.browser}}/report

.gitignore

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

.graphqlconfig

@@ -3,14 +3,14 @@
   "extensions": {
     "endpoints": {
       "Default Introspection Endpoint": {
-        "url": "http://api-test.trompamusic.eu",
+        "url": "https://api-test.trompamusic.eu",
         "introspect": true,
         "headers": {
           "user-agent": "JS GraphQL"
         }
       },
       "Default": {
-        "url": "http://api-test.trompamusic.eu",
+        "url": "https://api-test.trompamusic.eu",
         "headers": {
           "user-agent": "JS GraphQL"
         }

automatic-tests/composition-modal_test.js

@@ -0,0 +1,132 @@
+const { secondsToWait, visualDiffOptions, compositionModalLocators: locators, byRole, getUrlHostName } = require('./config/globals');
+
+Feature('Composition modal');
+
+let currentBrowser;
+
+Scenario('Opens composition modal with expected content', async ({ 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);
+  });
+
+  const response                                     = await I.sendQuery(searchQuery);
+  const { title, name, __typename, creator, source } = response.data.data.results[0];
+
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.waitForElement(locators.headerInitialResults, secondsToWait);
+  I.saveScreenshot(screenshotPath);
+  I.seeVisualDiff(screenshotPath, visualDiffOptions);
+  I.see('50 results');
+
+  within(byRole('listitem'), () => {
+    I.see(title);
+    I.see(name);
+    I.see(__typename);
+    I.see(creator);
+    I.seeElementInDOM(locate('a')
+      .withAttr({ href: source }));
+  });
+});
+
+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.wait(2);
+  I.see('Nederlands');
+
+  I.saveScreenshot(screenshotPath);
+  I.seeVisualDiff(screenshotPath, visualDiffOptions);
+});
+
+Scenario('Selects composition from modal', async ({ I }) => {
+  const screenshotPath = "composition_modal_selected_.png";
+
+  const response        = await I.sendQuery(searchQuery);
+  const { title, name } = response.data.data.results[0];
+
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.waitForElement(locators.headerInitialResults, secondsToWait);
+  I.click(locate({ css: '[role=listitem]' }).withText(title));
+  I.wait(2);
+  I.saveScreenshot(screenshotPath);
+  I.seeVisualDiff(screenshotPath, visualDiffOptions);
+  I.see(name);
+});
+
+Scenario('Opens composition source link from modal', async ({ I }) => {
+  const response   = await I.sendQuery(searchQuery);
+  const { source } = response.data.data.results[0];
+
+  I.closeOtherTabs();
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.waitForElement(locators.headerInitialResults, secondsToWait);
+  I.click(getUrlHostName(source));
+  I.wait(2);
+  I.switchToNextTab();
+  I.grabCurrentUrl();
+  I.seeInCurrentUrl(source);
+});
+
+Scenario('Gives results that match query within modal', async ({ I }) => {
+  const screenshotPath = "composition_modal_with_composition_searched.png";
+
+  const response        = await I.sendQuery(searchQuery);
+  const { title, name } = response.data.data.results[0];
+
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.waitForElement(locators.headerInitialResults, secondsToWait);
+  I.fillField('search', name.replace(/-/g, ""));
+
+  I.waitForElement(locate({ css: '[role=listitem]' }).withText(title), secondsToWait);
+  I.see(title);
+  I.saveScreenshot(screenshotPath);
+  I.seeVisualDiff(screenshotPath, visualDiffOptions);
+});
+
+Scenario('All relevant source links display in modal', async ({ I }) => {
+  const response   = await I.sendQuery(searchQuery);
+  const { source } = response.data.data.results[0];
+
+  I.amOnPage('/');
+  I.click('Select', locators.selectCompositionModal);
+  I.waitForElement(locators.headerInitialResults, secondsToWait);
+  I.see(getUrlHostName(source));
+});
+
+const searchQuery = `
+    query($filter: _MusicCompositionFilter) {
+      results: MusicComposition(filter: $filter, first: 50) {
+        __typename
+        ... on MusicComposition {
+          identifier
+          name
+          title
+          creator
+          source
+        }
+      }
+    }
+  `;

automatic-tests/config/globals.js

@@ -0,0 +1,34 @@
+module.exports = {
+  secondsToWait    : 30,
+  visualDiffOptions: { tolerance: 15, prepareBaseImage: true },
+  byRole           : role => ({ css: `[role=${role}] ` }),
+  getUrlHostName   : url => {
+    const match = url.match(/:\/\/(www[0-9]?\.)?(.[^/:]+)/i);
+
+    if (match != null && match.length > 2 && typeof match[2] === 'string' && match[2].length > 0) {
+      return match[2];
+    }
+
+    return null;
+  },
+  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]',
+  },
+};