# Project: Create web components for FHIR Resources **URL:** \ **Category:** Toolkit\ **Tags:** gsoc2021-project, toolkit, gsoc2021\ **Created:** [May 17, 2021, 9:13pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155 "2021-05-17T21:13:26Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![r0bby](https://forums.librehealth.io/user_avatar/forums.librehealth.io/r0bby/32/1781_2.png) [@r0bby](https://forums.librehealth.io/u/r0bby)\ **Post date:** [May 17, 2021, 9:13pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/1 "2021-05-17T21:13:26Z")
Project thread for: [Project: Create web components for FHIR Resources](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/) @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. ---
**Author:** ![r0bby](https://forums.librehealth.io/user_avatar/forums.librehealth.io/r0bby/32/1781_2.png) [@r0bby](https://forums.librehealth.io/u/r0bby)\ **Post date:** [May 17, 2021, 11:38pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/4 "2021-05-17T23:38:04Z")
---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [May 19, 2021, 4:54am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/5 "2021-05-19T04:54:25Z")
@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? ---
**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\ **Post date:** [May 20, 2021, 11:37pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/6 "2021-05-20T23:37:13Z")
I think the plan is fine. The plan should be to get the CI and the design work done before the start of coding. ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [May 21, 2021, 3:25am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/7 "2021-05-21T03:25:00Z")
> [@sunbiz](#): > > The plan should be to get the CI and the design work done before the start of coding. Sure, i’ll start working on these. I had a few clarifications : As the webcomponents uses [http://hapi.fhir.org/](http://hapi.fhir.org/), will we use a test hapi server, something like : [hapi-fhir-starter](https://github.com/hapifhir/hapi-fhir-jpaserver-starter) ? Also where should the username and password be stored as the view will be different based on the role? ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [May 23, 2021, 7:31am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/8 "2021-05-23T07:31:36Z")
@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](https://github.com/saucelabs-training/demo-js). 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 ? ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [May 26, 2021, 5:17pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/9 "2021-05-26T17:17:46Z")
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](https://vimeo.com/555299844) ---
**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\ **Post date:** [May 31, 2021, 12:00am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/10 "2021-05-31T00:00:27Z")
> [@Shashwat](#): > > 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 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. ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [May 31, 2021, 1:02pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/11 "2021-05-31T13:02:16Z")
> [@sunbiz](#): > > Please let me know if you have other suggestions. 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 ! > [@sunbiz](#): > > 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. I am fine with this too @sunbiz but will the `web-component-tester` library work with a React component (jsx) ?? ---
**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\ **Post date:** [May 31, 2021, 2:11pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/12 "2021-05-31T14:11:57Z")
> [@Shashwat](#): > > 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. ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 1, 2021, 9:14am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/13 "2021-06-01T09:14:19Z")
@sunbiz I tried to use it with a react-mocha test but ultimately it failed and Timed Out 😓 , so I asked the saucelabs community if there was some way to do unit/component tests with react in sauce to which someone replied : ![github.com_saucelabs-training_demo-js_issues_125(iPad Mini)](https://forums.librehealth.io/uploads/default/original/2X/4/46c0fe0a436df1fab2511af5b33c8add66bc30a1.png) ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 2, 2021, 5:26pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/14 "2021-06-02T17:26:56Z")
[APPOINTMENT-WORKFLOW.mp4 on Vimeo](https://vimeo.com/558174844) : Appointment workflow, I’m adding the endpoints in a markdown file here : [Category: EHR - Zaimone](https://geforce6t.github.io/blog/categories/EHR/) ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 4, 2021, 7:42pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/15 "2021-06-04T19:42:54Z")
I have covered all the designs discussed in the proposal with endpoints here : [blog](https://geforce6t.github.io/blog/categories/EHR/). ---
**Author:** ![ankithans](https://forums.librehealth.io/user_avatar/forums.librehealth.io/ankithans/32/1797_2.png) [@ankithans](https://forums.librehealth.io/u/ankithans)\ **Post date:** [June 6, 2021, 1:23pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/16 "2021-06-06T13:23:18Z")
This is a Blank post. ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 6, 2021, 1:42pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/17 "2021-06-06T13:42:41Z")
@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? ---
**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\ **Post date:** [June 6, 2021, 2:00pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/18 "2021-06-06T14:00:32Z")
Its this one here - [LibreHealth / LibreHealth Toolkit / lh-toolkit-webcomponents · GitLab](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents) ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 6, 2021, 2:02pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/19 "2021-06-06T14:02:04Z")
Will we add the react app in this itself ? ---
**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\ **Post date:** [June 6, 2021, 2:05pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/20 "2021-06-06T14:05:28Z")
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. ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 6, 2021, 8:45pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/21 "2021-06-06T20:45:56Z")
@sunbiz I’ve setup the basic react app with CI/CD , linting and git-hooks [Files · react-ehr · shashwat / lh-toolkit-webcomponents · GitLab](https://gitlab.com/geforce6t/lh-toolkit-webcomponents/-/tree/react-ehr), Should I send a MR once a new branch is created for the react app ? ---
**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\ **Post date:** [June 7, 2021, 5:42am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/22 "2021-06-07T05:42:26Z")
Please send your MRs to this branch - [Files · react-ehr · LibreHealth / LibreHealth Toolkit / lh-toolkit-webcomponents · GitLab](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents/-/tree/react-ehr) [Next page](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155.md?page=2)