implement visual test with percy

.percy.js

@@ -0,0 +1,25 @@
+module.exports = {
+  version: 2,
+  snapshot: {
+    widths: [
+      375,
+      1280
+    ],
+
+    minHeight: 1024,
+    percyCSS: '',
+    disableShadowDOM: false
+  },
+
+  discovery: {
+    allowedHostnames: [],
+    disallowedHostnames: [],
+    networkIdleTimeout: 100
+  },
+
+  upload: {
+    files: '**/*.{png,jpg,jpeg}',
+    ignore: '',
+    stripExtensions: false
+  }
+}

README.md

@@ -56,23 +56,11 @@ Make use of the many generators for code, try `ember help generate` for more det
 * `ember test`
 * `ember test --server`
 
-#### Mesh snapshots
+**Update Percy snaphost**
 
-The [text-maker](https://github.com/romgere/text2stl/blob/master/app/services/text-maker.ts) service's unit tests use mesh snapshot to test the service works as expected.
+Run `yarn percy exec:start`, then run `ember test` or `ember test --server` & visit http://127.0.0.1:4200/tests?filter=Acceptance%20%7C%20visual.
 
-If the service is updated (aka. when the generated mesh changes) the test will break.
-
-~~To fix the tests, new mesh snapshots has to be generated. To generate the new snapshot use the command :~~
-
-~~`yarn generate:snapshot`~~
-
-~~Warning: Don't run this command to fix tests if no modifications was made on `text-maker` service (or `three` deps update) or if you don't know why you run it (generating new snapshots will generate new UUID for mesh & create new useless file diffs)~~
-
-**No longer work with node 14**
-
-Mesh snapshot need to be manualy updated, see console, when some mesh tests are failing...
-
-Easy way to re-generate snaptshot is to naviate to [127.0.0.1:4200/tests?filter=it generate mesh according to snapshots#download_fixture](127.0.0.1:4200/tests?filter=it generate mesh according to snapshots#download_fixture) & download all file in `tests/fixtures/meshs/`snapshots/
+Note: You'll need `PERCY_TOKEN` variable defined in your env.
 
 ### Linting
 

app/components/three-preview.hbs

@@ -2,6 +2,7 @@
   renderer=(component 'three-preview/renderer'
     mesh=@mesh
     parentSize=@parentSize
+    nearCamera=@nearCamera
   )
   size=(component 'three-preview/size'
     mesh=@mesh

app/models/text-maker-settings.ts

@@ -20,6 +20,8 @@ interface TextMakerAdditionnalSettings {
   variantName: Variant;
 }
 
+export type TextMakerSettingsParameters = TextMakerParameters & TextMakerAdditionnalSettings;
+
 interface QPSerializable {
   serialize(): string;
   deserialize(json: string): void;
@@ -123,7 +125,7 @@ export default class TextMakerSettings implements TextMakerParameters, QPSeriali
   @tracked supportPadding: SupportPaddingSettings;
   @tracked handleSettings: HandleSettings;
 
-  constructor(args: TextMakerParameters & TextMakerAdditionnalSettings) {
+  constructor(args: TextMakerSettingsParameters) {
     this.variantName = args.variantName;
     this.fontName = args.fontName;
     this.text = args.text ?? textMakerDefault.text;

app/modifiers/three-renderer.ts

@@ -27,7 +27,7 @@ interface ThreeRendererModifierSignature {
 export default class ThreeRendererModifier extends Modifier<ThreeRendererModifierSignature> {
   scene?: THREE.Scene;
   camera?: THREE.PerspectiveCamera;
-  renderer?: THREE.WebGLRenderer;
+  renderer?: THREE.WebGLRenderer | THREE.WebGL1Renderer;
   mesh?: THREE.Mesh;
 
   controls?: OrbitControls;
@@ -64,8 +64,8 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
     this.camera = new THREE.PerspectiveCamera(75);
     this.camera.position.set(
       0,
-      this.namedArgs.nearCamera ? 50 : 400,
-      this.namedArgs.nearCamera ? 70 : 300,
+      this.namedArgs.nearCamera ? 250 : 400,
+      this.namedArgs.nearCamera ? 150 : 300,
     );
     this.scene.add(this.camera);
 

app/templates/app/generator.hbs

@@ -68,7 +68,7 @@
 
 
 <calcite-panel>
-  <ThreePreview @mesh={{this.mesh.value}} @parentSize={{true}}  as |preview|>
+  <ThreePreview @mesh={{this.mesh.value}} @parentSize={{true}} @nearCamera={{true}}  as |preview|>
 
     <div id="three-preview-container">
       <preview.renderer />

app/templates/app/index.hbs

@@ -35,7 +35,7 @@
 
   <LangSwitcher slot="back" width="full" @appearance="outline-fill" />
 
-  <calcite-button {{on "click" this.gotoGenerator}} slot="primary" width="full">
+  <calcite-button {{on "click" this.gotoGenerator}} slot="primary" width="full" data-test-generator>
     {{t "index_page.button"}}
   </calcite-button>
-</calcite-modal>
+</calcite-modal>

package.json

@@ -38,6 +38,8 @@
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "@onehilltech/ember-cli-google-analytics": "^1.2.0",
+    "@percy/cli": "^1.27.3",
+    "@percy/ember": "^4.2.0",
     "@types/ember__application": "^~4.0",
     "@types/ember__array": "~4.0",
     "@types/ember__component": "~4.0",