Improve CI

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
     {
       files: [
         './.eslintrc.js',
+        './.percy.js',
         './.prettierrc.js',
         './.stylelintrc.js',
         './.template-lintrc.js',

.github/workflows/ci.yml

@@ -16,4 +16,6 @@ jobs:
     - name: Install Dependencies
       run: yarn install --frozen-lockfile
     - name: Test
-      run: yarn test
+      run: yarn percy exec -- ember test
+      env:
+        PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

.percy.js

@@ -0,0 +1,22 @@
+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/controllers/app/generator.ts

@@ -4,7 +4,7 @@ import { inject as service } from '@ember/service';
 import FontManagerService from 'text2stl/services/font-manager';
 import TextMakerService from 'text2stl/services/text-maker';
 import STLExporterService from 'text2stl/services/stl-exporter';
-import CounterService from 'text2stl/services/counter';
+// import CounterService from 'text2stl/services/counter';
 import { tracked } from '@glimmer/tracking';
 import { trackedFunction } from 'ember-resources/util/function';
 import { Registry as Services } from '@ember/service';
@@ -34,17 +34,17 @@ export default class GeneratorController extends Controller {
 
   @service declare intl: IntlService;
 
-  @service('counter') declare counterService: CounterService;
+  // @service('counter') declare counterService: CounterService;
 
   @service declare router: Services['router'];
 
   declare model: RouteModel<ApplicationRoute>;
 
   _gtag = gtag;
 
-  get counter() {
-    return this.counterService.counter;
-  }
+  // get counter() {
+  //   return this.counterService.counter;
+  // }
 
   font = trackedFunction(this, async () => {
     return this.model.customFont
@@ -88,7 +88,7 @@ export default class GeneratorController extends Controller {
       value: this.model.type,
     });
 
-    this.counterService.updateCounter();
+    // this.counterService.updateCounter();
     this.stlExporter.downloadMeshAsSTL(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

@@ -42,13 +42,13 @@
   >
 
     <div slot="footer">
-      {{#if this.counter}}
+      {{!-- {{#if this.counter}}
         <calcite-notice open icon="information">
           <div slot="message">
             {{t 'stl_counter' count=this.counter}}
           </div>
         </calcite-notice>
-      {{/if}}
+      {{/if}} --}}
 
       <calcite-button
         width="full"
@@ -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

@@ -27,7 +27,6 @@
     "start": "ember serve",
     "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
     "test:ember": "ember test",
-    "generate:snapshot": "ts-node -r esm tests/fixtures/script/generate.ts",
     "generate:type_img": "misc/text_type/generate_logo.sh"
   },
   "devDependencies": {
@@ -39,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",
@@ -103,9 +104,6 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-qunit": "^7.3.4",
-    "esm": "^3.2.25",
-    "jsdom": "^16.4.0",
-    "jsdom-global": "^3.0.2",
     "loader.js": "^4.7.0",
     "prettier": "^2.8.7",
     "qunit": "^2.19.4",
@@ -116,7 +114,6 @@
     "stylelint-prettier": "^3.0.0",
     "tracked-built-ins": "^3.1.1",
     "tracked-toolbox": "^1.2.2",
-    "ts-node": "^10.4.0",
     "typescript": "^4.2.3",
     "webpack": "^5.78.0"
   },