Merge pull request #16 from evoactivity/add-tests

Add tests
evoactivity · Jun 1, 2022 · bcc736d · bcc736d
2 parents c1c8a1c + 96e9c60
commit bcc736d
Show file tree

Hide file tree

Showing 11 changed files with 331 additions and 18 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -7,9 +7,12 @@ on:
       - master
   pull_request: {}
 
+env:
+  KEEP_DATA_TEST_SELECTORS: '1'
+
 concurrency:
-   group: ci-${{ github.head_ref || github.ref }}
-   cancel-in-progress: true
+  group: ci-${{ github.head_ref || github.ref }}
+  cancel-in-progress: true
 
 jobs:
   test:
@@ -59,4 +62,3 @@ jobs:
       - name: Test
         run: yarn ember try:one ${{ matrix.scenario }}
         working-directory: packages/test-app
-
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "prepare": "yarn workspace ember-fast-marquee run prepare",
-    "start": "npm-run-all --parallel start:*",
+    "start": "KEEP_DATA_TEST_SELECOTRS=1 npm-run-all --parallel start:*",
     "start:addon": "yarn workspace ember-fast-marquee run start",
     "start:test-app": "yarn workspace test-app run start",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",

diff --git a/packages/ember-fast-marquee/babel.config.js b/packages/ember-fast-marquee/babel.config.js
@@ -0,0 +1,30 @@
+'use strict';
+/* eslint-env node */
+
+const keepSelectors =
+  process.env.KEEP_DATA_TEST_SELECTORS === '1' ? true : false;
+
+const babelConfig = {
+  presets: [['@babel/preset-typescript']],
+  plugins: [
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    '@babel/plugin-proposal-class-properties',
+    '@embroider/addon-dev/template-colocation-plugin',
+  ],
+};
+
+if (!keepSelectors) {
+  babelConfig.plugins.push([
+    'search-and-replace',
+    {
+      rules: [
+        {
+          search: /data-test[a-zA-Z0-9-]*/g,
+          replace: '',
+        },
+      ],
+    },
+  ]);
+}
+
+module.exports = babelConfig;
diff --git a/packages/ember-fast-marquee/babel.config.json b/packages/ember-fast-marquee/babel.config.json
diff --git a/packages/ember-fast-marquee/package.json b/packages/ember-fast-marquee/package.json
@@ -49,6 +49,7 @@
     "@typescript-eslint/parser": "^5.26.0",
     "autoprefixer": "^10.4.7",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-search-and-replace": "^1.1.0",
     "ember-template-lint": "^4.9.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",

diff --git a/packages/ember-fast-marquee/src/components/marquee.hbs b/packages/ember-fast-marquee/src/components/marquee.hbs
@@ -14,19 +14,28 @@
     rgbaGradientColor=this.rgbaGradientColor
     speed=this.speed
   }}
+  data-test-marquee
   ...attributes
 >
   {{#if this.gradient}}
-    <div class={{this.styles.overlay}}></div>
+    <div class={{this.styles.overlay}} data-test-marquee-gradient></div>
   {{/if}}
   <div
     class={{this.styles.scroller}}
+    data-test-marquee-scroller
     {{on 'animationiteration' this.onCycleComplete}}
     {{on 'animationend' this.onFinish}}
   >
-    <div class={{this.styles.marquee}}>{{yield}}</div>
+    <div
+      class='{{this.styles.marquee}}'
+      data-test-marquee-marquee
+    >{{yield}}</div>
     {{#each this.repeater}}
-      <div class={{this.styles.marquee}} aria-hidden='true'>{{yield}}</div>
+      <div
+        class={{this.styles.marquee}}
+        aria-hidden='true'
+        data-test-marquee-repeater
+      >{{yield}}</div>
     {{/each}}
   </div>
 </div>
diff --git a/packages/ember-fast-marquee/src/components/marquee.ts b/packages/ember-fast-marquee/src/components/marquee.ts
@@ -142,7 +142,7 @@ export default class Marquee extends Component<MarqueeSignature> {
   // if we receive a string, use that as is for the value
   get gradientWidth(): string {
     const width = this.args.gradientWidth
-      ? this.args.gradientWidth === 'number'
+      ? typeof this.args.gradientWidth === 'number'
         ? `${this.args.gradientWidth}%`
         : <string>this.args.gradientWidth
       : null;

diff --git a/packages/ember-fast-marquee/src/modifiers/marquee.ts b/packages/ember-fast-marquee/src/modifiers/marquee.ts
@@ -102,7 +102,7 @@ export default class MarqueeModifier extends Modifier<MarqueeModifierSignature>
 
     const duration =
       this.fillRow ||
-      this.component.marqueeWidth > this.component.containerWidth
+      this.component.containerWidth < this.component.marqueeWidth
         ? this.component.marqueeWidth / this.speed
         : this.component.containerWidth / this.speed;
 

diff --git a/packages/test-app/app/templates/application.hbs b/packages/test-app/app/templates/application.hbs
@@ -251,7 +251,7 @@
 
 </Marquee>
 
-<Marquee @play={{this.play}} @speed={{140}} @fillRow={{true}}>
+<Marquee @play={{this.play}} @speed={{50}} @fillRow={{true}}>
   <h2>Welcome to Ember</h2>
   <h2>Welcome to the jungle</h2>
   <h2>gets worse here day by day</h2>