Project: Create web components for FHIR Resources

Project thread for: Project: Create web components for FHIR Resources

@Shashwat this is where you will communicate – you may also use our chat. I am considering this Jitsi meet room public if you need video conferencing.

1 Like

@sunbiz @namratanehete I am very glad to have a chance to work on this project under your mentorship ! I was wondering if there are any modifications or changes that are required to be made to the plan portrayed in the proposal ? also which part should I start working on right now?

I think the plan is fine. The plan should be to get the CI and the design work done before the start of coding.

1 Like

Sure, i’ll start working on these.

I had a few clarifications : As the webcomponents uses, will we use a test hapi server, something like : hapi-fhir-starter ?

Also where should the username and password be stored as the view will be different based on the role?

@sunbiz I had a look at some of the automation tools we could use for the CI part of the react application.

As we will need saucelabs integration for cross browser - cross platform testing I looked at some of the possibe integrations with these automation tools here.

But most of these are based on e2e testing ( cypress , Puppeteer and others ) and as you had suggested in the draft we should mainly focus on unit and integration testing which will require the react component to be mounted and tested , for which many tools are available but I could not find their integration with sauce or any cross browser-cross platform tool …

So what approach should be taken for this ?

I was trying to design a workflow today (check-in), was thinking of adding the endpoints separately as a doc (once login strategy is finalised)… , will proceed with other designs and documentation of endpoints if this design pattern is fine ! check-in.mp4 on Vimeo

Have you looked at our current approach for integration testing the web components? It uses Sinon.js, Mocha and Chai. I think its a little dated, but works very well through the webcomponent-tester library. Please let me know if you have other suggestions.

1 Like

Actually I was thinking of using the react-testing-library (jest as the test runner) as there will no additional requirement of any other package installation because it comes along with create-react-app also it is very simple to use !

I am fine with this too @sunbiz but will the web-component-tester library work with a React component (jsx) ??

Not sure. Please check if it can be. Even if its jsx, post compiler/transformer, it should still appear and function as HTML webcomponents that can be tested through Sauce. Good thing to try in this period before the coding phase begins.


@sunbiz I tried to use it with a react-mocha test but ultimately it failed and Timed Out :sweat: , so I asked the saucelabs community if there was some way to do unit/component tests with react in sauce to which someone replied :

1 Like

APPOINTMENT-WORKFLOW.mp4 on Vimeo : Appointment workflow, I’m adding the endpoints in a markdown file here : Category: EHR - Zaimone

1 Like

I have covered all the designs discussed in the proposal with endpoints here : blog.


This is a Blank post.

@sunbiz what platform will be used for the EHR (github / gitlab)? also should I create the repo under my username(as it was done previously) or will it be created as an organization’s repo?

Its this one here - LibreHealth / LibreHealth Toolkit / lh-toolkit-webcomponents · GitLab

Will we add the react app in this itself ?

I think we should, may be as a separate branch for now when its under development. Later we can move it to the mainline when its ready for release, as an example of assembling the components.

Like we have discussed before, this is only an example of what can be done with the web components. By assembling an app, we will find all the different quirks that need to be implemented in the web components.

1 Like

@sunbiz I’ve setup the basic react app with CI/CD , linting and git-hooks Files · react-ehr · shashwat / lh-toolkit-webcomponents · GitLab, Should I send a MR once a new branch is created for the react app ?

Please send your MRs to this branch - Files · react-ehr · LibreHealth / LibreHealth Toolkit / lh-toolkit-webcomponents · GitLab

1 Like