Bingo for meetings- yarn workspaces–part 11

Bingo

Bingo is a small project, written in TypeScript , and developed with Alexandru Badita in launch break (one hour - more or less). You can find sources at https://github.com/alexandru360/PresentationBingoCards/ . Those are my blog posts for Bingo : ( scroll below for the post)

Nr	Link
1	Create meeting
2	Create Tests
3	Finalize Create meeting
4	Sharing meeting
5	Keep Score
6	Add obsolete
7	Finalizing obsolete
8	End meeting
9	Dockerize tests
10	Azure CI tests
11	Yarn workspaces
12	CLI
13	Intermezzo - CLI improvements
14	typescript compile run with node
15	NestJS ,swagger and create a meeting
16	Finalizing API
17	Intermezzo - jest vs jasmine error
18	Refactor WebAPI and test service
19	Heroku Deploy NestJs
20	Angular
21	Deploy Angular to GitHub
22	WebAPI and Web
23	Documentation
24	Documentation of the code
25	Conclusions

The problem that we see is how to have the same objects configured for backend and for frontend( e.g. a Meeting is used on the backend on the WebAPI  to read from database and in the frontend to display)

In C# , there is the concept of dll / assembly that is common. In here we have the concept of yarn Workspaces : https://yarnpkg.com/lang/en/docs/cli/workspace/

What we want to achieve first is that the tests will be in a separate workspace bingo-meeting-objects-test , referencing the bingo-meeting-objects workspace

So, in order to do this, we have to modify :

1. yarn workspaces  to understand the structure and run tests
2. bingo-meeting-objects   to expose the result
3. bingo-meeting-objects–test   to import bingo-meeting-objects  
4. (depending on the projects) Other references  : Modify docker bat file to consider the new structure

Let’s detail:

For yarn workspaces  to understand the structure and run tests

So , first, we move the tests in a separate folder, bingo-meeting-objects–test   , and we run nom init and add dependencies( jest, others)

Second, we add the yarn workspace package.json in the root with the following content:

{
     “private”: true,
     “workspaces”: [“bingo-cards-api”, “bingo-meeting-objects”]
   }
     “workspaces”: [“bingo-cards-api”, “bingo-meeting-objects”, “bingo-meeting-objects-test”],
     “scripts”: {
       “test”: “cd bingo-meeting-objects-test && yarn test”
     }
}

In this manner, we can run yarn test from the root ( do not run yet!)

For bingo-meeting-objects   to expose the result

In the tsconfig.json we put those lines:

“sourceMap”: true,

“declaration”: true,

In the package.json we modify to understand the declaration

“main”: “dist/index.js”,
   “types”: “dist/index.d.ts”,

“scripts”: {
     “build”: “tsc”,
     “compile”: “tsc”,
     “test”: “jest”
   },

For bingo-meeting-objects–test   to import bingo-meeting-objects  

We add jest and others. Also, we added dependency of bingo-meeting-objects:

“dependencies”: {
     “bingo-meeting-objects”: “^1.0.0”,
  

Also, we need to modify the import of the test. Instead of the following line, when test was under subfolder test in the bingo-meeting-objects folder

import  MeetingsFactory from ‘../MeetingsFactory’;

we put

import  MeetingsFactory from “bingo-meeting-objects/MeetingsFactory”;

Now running yarn test in the root folder runs the test sucessfully

For (depending on the projects) Other references  : Modify docker bat file to consider the new structure

We had the batch file that uses docker that was running the tests and then copy the results.

For start, we move the .dockerignore from the project to the root ( to not put node_modules)

Also, we modify how we copy the files to docker

For this, we modify this line

docker cp bingo_ci_test_container:/app/coverage/cobertura-coverage.xml .   

into this line

docker cp bingo_ci_test_container:/app/bingo-meeting-objects-test/coverage/cobertura-coverage.xml .

to take into consideration the new structure

And that will be all! ( code source at https://github.com/alexandru360/PresentationBingoCards/releases/tag/yarnworkspaces )