Init jest && config / add test component LcButton #20

Flo2315 · 2021-06-28T08:47:15Z

Init Jest

installation de package suivants (certaines versions sont en alpha ou rc mais c'est les seuls qui fonctionnent), j'ai repris les versions installées sur leonardo (je crois que Joffrey avait géléré aussi à installer jest) car les dernières versions de certain packages genères des erreurs de compilation (vue-template-compiler)

"dependencies": {
   "@babel/preset-env": "^7.14.2",
   "@babel/preset-typescript": "^7.13.0",
},
"devDependencies": {
   "@types/jest": "^26.0.23",
   "@vue/compiler-sfc": "3.1.1",
   "@vue/test-utils": "^2.0.0-rc.6",
   "jest": "^26.6.3",
   "ts-jest": "^26.5.6",
   "vue-jest": "^5.0.0-alpha.9",
   "vue-loader": "^16.2.0",
   "vue-tsc": "^0.0.24"
}

Création d'un premier test de composant (LcButton) mêmes tests que sur donatello, j'ai un peu refacto et corrigé des erreurs car certain test failed, surtout lié à la partie link il manquait des condition dans le code.
Réorganisation du composant en créant un dossier LcButton qui contient le composant ainsi que les tests.
Configuration GithubAction pour les unit test
Mise en cache de yarn (node_modules) sur github actions https://github.com/actions/cache/blob/main/examples.md#node---yarn

sbourdon13

comment ça se fait qu'on ait la couleur red sur storybook ?

sbourdon13 · 2021-06-29T08:22:33Z

src/components/LcButton/__tests__/LcButton.spec.ts

+  it('Should be a loader button', () => {
+    wrapper = mount(LcButton, { props: { loader: true } })
+
+    expect(wrapper.html()).toMatchSnapshot()


ce serait peut-être pas mal de vérifier que la div du loader existe ? Hier en faisant de la review j'ai vu un snapshot sur leonardo "should display list of result" qui avant la pr ne contenait aucun résultat 😬 donc je pense que c'est pas mal d'assurer ses arrières quand on utilise le snapshot, comme pour les classes juste en-dessous

sbourdon13 · 2021-06-29T08:23:50Z

src/components/LcButton/__tests__/LcButton.spec.ts

+      })
+
+      it('Must have a primary color as default', () => {
+        expect(wrapper.html()).toMatchSnapshot()


pourquoi ne pas vérifier la classe primary plutôt ?

sbourdon13 · 2021-06-29T08:24:20Z

src/components/LcButton/__tests__/LcButton.spec.ts

+    expect(wrapper.vm).toBeTruthy()
+  })
+
+  it('Should be a loader button', () => {


est-ce qu'on mettrait pas des minuscules aux tests ?

sbourdon13 · 2021-06-29T08:26:13Z

src/components/LcButton/__tests__/LcButton.spec.ts

+        expect(wrapper.classes('lc-btn--grey')).toBeTruthy()
+      })
+
+      it('Should have a black class color', async() => {


est-ce qu'on pourrait pas faire une boucle pour les 5 derniers test ? ils ont la même structure, y a que le nom de la couleur qui change

sbourdon13 · 2021-06-29T08:26:50Z

src/components/LcButton/__tests__/LcButton.spec.ts

+      })
+
+      it('Must have a primary color as default', () => {
+        expect(wrapper.html()).toMatchSnapshot()


idem autant tester la classe

sbourdon13 · 2021-06-29T08:27:11Z

src/components/LcButton/__tests__/LcButton.spec.ts

+        expect(wrapper.classes('lc-link--black')).toBeTruthy()
+      })
+
+      it('Should have a white class color', async() => {


idem est-ce qu'on peut faire une boucle

sbourdon13 · 2021-06-29T08:28:07Z

src/components/LcButton/__tests__/LcButton.spec.ts

+
+    it('Should be a variant outline', () => {
+      wrapper = mount(LcButton, { props: { variant: 'outline' } })
+      // await wrapper.setProps({ variant: 'outline' })


commentaire

sbourdon13 · 2021-06-29T08:28:45Z

src/components/LcButton/__tests__/LcButton.spec.ts

+        expect(wrapper.classes('lc-btn--lg')).toBeTruthy()
+      })
+
+      it('Should have a xl class size', async() => {


boucle pour ces tests ?

sbourdon13 · 2021-06-29T08:30:23Z

src/components/LcButton/__tests__/LcButton.spec.ts

+    })
+
+    describe('Link', () => {
+      it('Must be a none button', () => {


je comprends pas ce que ça veut dire.

je pas trop compris non plus, j'ai changé le wording du test

sbourdon13 · 2021-06-29T08:32:57Z

src/stories/LcTooltip.stories.ts

@@ -1,5 +1,5 @@
 import LcTooltip from '../components/LcTooltip'
-import LcButton from '../components/LcButton'
+import LcButton from '../components/LcButton/LcButton'


est-ce qu'on pourrait mettre index.vue pour alléger l'écriture, comme on a fait pour donatello Search/index.vue, ou est-ce que pour storybook ça doit être cette architecture de fichiers LcButton/LcButton ?

Je t'avoue la j'ai fais au plus rapide pour centralisé tout dans le même dossier les "tests" et le "composant".
Je regarderait dans un autre ticket je pense car il y aura peut-être de la configuration lié à storybook ;)

Flo2315 · 2021-06-30T06:55:32Z

comment ça se fait qu'on ait la couleur red sur storybook ?

J'ai ajouté la couleur rouge elle n'avait jamais été prévu pour le bouton mais seulement pour l'icone j'ai l'impression

Init jest && config / add test component LcButton

928bddd

Flo2315 force-pushed the feat/init-jest branch from 2eb425f to 928bddd Compare June 28, 2021 08:48

Flo2315 added the review label Jun 28, 2021

Flo2315 force-pushed the feat/init-jest branch 3 times, most recently from 5977cba to 3a97a4d Compare June 29, 2021 02:43

Flo2315 changed the base branch from master to dev June 29, 2021 06:28

sbourdon13 self-requested a review June 29, 2021 08:04

sbourdon13 reviewed Jun 29, 2021

View reviewed changes

sbourdon13 added rejected Changes are requested and removed review labels Jun 29, 2021

Flo2315 force-pushed the feat/init-jest branch from 69e9de7 to 4e02f4b Compare June 30, 2021 06:52

Flo2315 added review and removed rejected Changes are requested labels Jun 30, 2021

sbourdon13 previously approved these changes Jun 30, 2021

View reviewed changes

Add github action job unit tests && refacto test

4a03ecf

Flo2315 dismissed sbourdon13’s stale review via 4a03ecf July 1, 2021 05:39

Flo2315 force-pushed the feat/init-jest branch from 4e02f4b to 4a03ecf Compare July 1, 2021 05:39

Flo2315 merged commit 86b850e into dev Jul 1, 2021

Init jest && config / add test component LcButton #20

Init jest && config / add test component LcButton #20

Uh oh!

Conversation

Flo2315 commented Jun 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sbourdon13 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Flo2315 Jun 30, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Flo2315 commented Jun 30, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Flo2315 commented Jun 28, 2021 •

edited

Loading

Flo2315 Jun 30, 2021 •

edited

Loading

Flo2315 commented Jun 30, 2021 •

edited

Loading