try percy ... [temporary]

app/templates/app/index.hbs

@@ -41,11 +41,10 @@
         </div>
       </div>
       <div class="uk-card-footer">
-        <LinkTo @route="app.generator" class="uk-button uk-button-primary uk-align-center">
+        <LinkTo @route="app.generator" class="uk-button uk-button-primary uk-align-center" data-test-generator>
           {{t "index_page.button"}}
         </LinkTo>
       </div>
     </div>
   </div>
-</div> 
-
+</div>

package.json

@@ -34,6 +34,8 @@
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
     "@onehilltech/ember-cli-google-analytics": "^1.2.0",
+    "@percy/cli": "^1.16.0",
+    "@percy/ember": "^4.0.0",
     "@types/ember-qunit": "^3.4.13",
     "@types/ember-resolver": "^5.0.10",
     "@types/ember__application": "^3.16.2",
@@ -84,7 +86,6 @@
     "ember-fetch": "^8.1.1",
     "ember-intl": "^5.6.2",
     "ember-load-initializers": "^2.1.2",
-    "ember-maybe-import-regenerator": "^0.1.6",
     "ember-page-title": "^6.2.2",
     "ember-qunit": "^5.1.4",
     "ember-resolver": "^8.0.2",

tests/acceptance/_tests-settings.js

@@ -0,0 +1,343 @@
+const testsSettings = [
+  // "Basic" text only
+  {
+    text: '123',
+    size: 50,
+    height: 5,
+    spacing: 1
+  },
+
+  {
+    text: 'No default'
+  },
+
+  {
+    text: 'this is a test',
+    size: 72,
+    height: 15,
+    spacing: 10
+  },
+
+  // "Basic" text with support
+  {
+    text: '123',
+    size: 50,
+    height: 5,
+    spacing: 1,
+    type: 2,
+    supportHeight: 20,
+    supportPadding: { top: 10, bottom: 10, left: 10, right: 10 }
+  },
+
+  {
+    text: 'No default',
+    type: 2
+  },
+
+  {
+    text: 'this is a test',
+    size: 72,
+    height: 15,
+    spacing: 10,
+    type: 2,
+    supportHeight: 10,
+    supportPadding: { top: 0, bottom: 0, left: 0, right: 0 }
+  },
+
+  // "Basic" negative text
+  {
+    text: '123',
+    size: 50,
+    height: 5,
+    spacing: 1,
+    type: 3,
+    supportHeight: 20,
+    supportPadding: { top: 10, bottom: 10, left: 10, right: 10 }
+  },
+
+  {
+    text: 'No default',
+    type: 3
+  },
+
+  {
+    text: 'this is a test',
+    size: 72,
+    height: 15,
+    spacing: 10,
+    type: 3,
+    supportHeight: 10,
+    supportPadding: { top: 0, bottom: 0, left: 0, right: 0 }
+  },
+
+  // "Basic" vertical text with support
+  {
+    text: '123',
+    size: 50,
+    height: 5,
+    spacing: 1,
+    type: 4,
+    supportHeight: 20,
+    supportPadding: { top: 10, bottom: 10, left: 10, right: 10 }
+  },
+
+  {
+    text: 'No default',
+    type: 4
+  },
+
+  {
+    text: 'this is a test',
+    size: 72,
+    height: 15,
+    spacing: 10,
+    type: 4,
+    supportHeight: 10,
+    supportPadding: { top: 0, bottom: 0, left: 0, right: 0 }
+  },
+
+  // Multi-line
+  {
+    text: 'multi\nline'
+  },
+
+  {
+    text: 'multi\nline',
+    vSpacing: 25
+  },
+
+  // Alignment test
+  {
+    text: 'multi\nline',
+    align: 'left'
+  },
+
+  {
+    text: 'multi\nline',
+    align: 'right'
+  },
+
+  // Various supportPadding
+  {
+    text: '123',
+    type: 2,
+    supportPadding: { top: 50, bottom: 5, left: 100, right: 10 }
+  },
+
+  {
+    text: '123',
+    type: 3,
+    supportPadding: { top: 50, bottom: 5, left: 100, right: 10 }
+  },
+
+  {
+    text: '123',
+    type: 4,
+    supportPadding: { top: 50, bottom: 5, left: 100, right: 10 }
+  },
+
+  {
+    text: '123',
+    type: 2,
+    supportPadding: { top: 5, bottom: 50, left: 10, right: 100 }
+  },
+
+  {
+    text: '123',
+    type: 3,
+    supportPadding: { top: 5, bottom: 50, left: 10, right: 100 }
+  },
+
+  {
+    text: '123',
+    type: 4,
+    supportPadding: { top: 5, bottom: 50, left: 10, right: 100 }
+  },
+
+  // Without supportBorderRadius
+  {
+    text: 'No default',
+    type: 2,
+    supportBorderRadius: 0
+  },
+
+  {
+    text: 'No default',
+    type: 3,
+    supportBorderRadius: 0
+  },
+
+  {
+    text: 'No default',
+    type: 4,
+    supportBorderRadius: 0
+  },
+
+  // With supportBorderRadius > max possible radius
+  {
+    text: 'No default',
+    type: 2,
+    supportBorderRadius: 100
+  },
+
+  {
+    text: 'No default',
+    type: 3,
+    supportBorderRadius: 100
+  },
+
+  {
+    text: 'No default',
+    type: 4,
+    supportBorderRadius: 100
+  },
+
+  // With hole
+  {
+    text: 'No default',
+    type: 2,
+    handleSettings: {
+      type: 'hole',
+      position: 'top',
+      size: 10,
+      size2: 0,
+      offsetY: -20,
+      offsetX: 0
+    }
+  },
+  {
+    text: 'No default',
+    type: 2,
+    handleSettings: {
+      type: 'hole',
+      position: 'left',
+      size: 10,
+      size2: 0,
+      offsetY: -20,
+      offsetX: 20
+    }
+  },
+  {
+    text: 'No default',
+    type: 3,
+    handleSettings: {
+      type: 'hole',
+      position: 'bottom',
+      size: 10,
+      size2: 0,
+      offsetY: -10,
+      offsetX: 15
+    }
+  },
+  {
+    text: 'No default',
+    type: 3,
+    handleSettings: {
+      type: 'hole',
+      position: 'left',
+      size: 10,
+      size2: 0,
+      offsetY: -20,
+      offsetX: 20
+    }
+  },
+  {
+    text: 'No default',
+    type: 4,
+    handleSettings: {
+      type: 'hole',
+      position: 'top',
+      size: 10,
+      size2: 0,
+      offsetY: -20,
+      offsetX: 0
+    }
+  },
+  {
+    text: 'No default',
+    type: 4,
+    handleSettings: {
+      type: 'hole',
+      position: 'left',
+      size: 10,
+      size2: 0,
+      offsetY: -20,
+      offsetX: 20
+    }
+  },
+  // With handle
+  {
+    text: 'No default',
+    type: 2,
+    handleSettings: {
+      type: 'handle',
+      position: 'top',
+      size: 5,
+      size2: 2,
+      offsetY: -20,
+      offsetX: 0
+    }
+  },
+  {
+    text: 'No default',
+    type: 2,
+    handleSettings: {
+      type: 'handle',
+      position: 'left',
+      size: 10,
+      size2: 5,
+      offsetY: -20,
+      offsetX: 20
+    }
+  },
+  {
+    text: 'No default',
+    type: 3,
+    handleSettings: {
+      type: 'handle',
+      position: 'bottom',
+      size: 5,
+      size2: 2,
+      offsetY: -10,
+      offsetX: 15
+    }
+  },
+  {
+    text: 'No default',
+    type: 3,
+    handleSettings: {
+      type: 'handle',
+      position: 'left',
+      size: 10,
+      size2: 5,
+      offsetY: -20,
+      offsetX: 20
+    }
+  },
+  {
+    text: 'No default',
+    type: 4,
+    handleSettings: {
+      type: 'handle',
+      position: 'top',
+      size: 5,
+      size2: 2,
+      offsetY: -20,
+      offsetX: 0
+    }
+  },
+  {
+    text: 'No default',
+    type: 4,
+    handleSettings: {
+      type: 'handle',
+      position: 'left',
+      size: 10,
+      size2: 5,
+      offsetY: -20,
+      offsetX: 20
+    }
+  }
+]
+
+export default testsSettings

tests/acceptance/navigation-test.js

@@ -0,0 +1,18 @@
+import { module, test } from 'qunit'
+import { visit, currentURL, click } from '@ember/test-helpers'
+import { setupApplicationTest } from 'ember-qunit'
+
+module('Acceptance | navigation', function(hooks) {
+  setupApplicationTest(hooks)
+
+  test('visiting /', async function(assert) {
+    await visit('/')
+    assert.equal(currentURL(), '/en-us', 'it redirect to "landing page"')
+  })
+
+  test('visiting /', async function(assert) {
+    await visit('/')
+    await click('[data-test-generator]')
+    assert.equal(currentURL(), '/en-us/generator', 'it redirect to generator page')
+  })
+})