Thanks, @Shashwat. Added some review comments.
@sunbiz I have one small doubt on the class topic discussed on the gitlab thread:
Yes, element id should be used and it should be in the fixture, i.e., on the test page, instead of in the component itself.
how can we add Id to inner elements of a component without adding it directly inside the component ?
<test-fixture id="DefaultElement">
<template>
<fhir-schedule></fhir-schedule>
</template>
</test-fixture>
like I’ve added the Id to the fixture and using that I am finding the value to be tested like :
document.getElementById('fhirSchedule').shadowRoot.querySelector('.serviceCategory').value;
how do I add an Id from this fixture so that I can use it as a selector instead of .serviceCategory ?
Also most of the elements inside almost all components have a class or an Id, which is used later in test file, like in fhir-period
for the start field a class and an id is set inside the component like this :
then below (in the test file) on line 63 the value of the start field is accessed like this:
so should all these files be also changed ?
You can add to the component in the same way, as you added to the fixture. You can also added classes and ids in the element inside the template.
1 Like
I understand this point but still have one small doubt 
, @sunbiz we need to test the value of the elements wrapped inside the component (schedule in the above image) right ?
Even after a Id is set to the component won’t we still need some selector to select a specific element inside that component and read it’s value?
We shouldn’t be testing other internal elements in this component’s test. Only fields introduced in this element should be tested and that can be accessed like here.
1 Like
ok @sunbiz, thanks for explaining this!
Also even inside this file on L 123 a css selector .cityField was used to get the value.
This was added as a class inside the component here : L 96, should this be also changed ? because most of the components follow this same pattern !
I’ve added the complete appointment workflow in the react app, MR :
( there was small bug in a component which is fixed in this unmerged MR, after it gets merged a submodule updated is required, hence the MR is draft for now. )
[04/07/21]: week 4 blog post
[11/07/21]: week 5 blog post
2 Likes
Hi, @Shashwat I am working on providing UI/UX feedback on the web components screens and have cloned the latest code. When I run the code using npm start I see these messages after clicking on the element link
Default element without passing URL
Default element without passing URL but with JSON
Default element when URL is passed
I have added lerna to the code by using npm i lerna -g but am not able to work through the issue. Could you kindly help me with the same. I need to run the code and access the screens in order to provide design feedback.
I have attached a feedback example for your reference.
hi @MeeJ !
The packages are probably not installed. There must be some error message in the browser console.
These are the installation steps mentioned in the README file:
git clone <repo.git>- install yarn and lerna using:
npm i -g yarn lerna - install ploymer cli to serve the static demo webpage
npm i -g polymer-cli - install dependencies by running
lerna bootstrap --use-workspaces - to run a development server:
polymer serve --open(will open the demos)
Thanks for this! but these components will not be created as their utility is very minimal (suggested by @sunbiz ) 
. I have attached a screenshot of each component created this summer in the
related issue on gitlab : here.
The components are also available on the demo link : LibreHealth FHIR Web Components Catalog
Does LibreHealth use React.js - #7 by satyaarthchhabra shifting this conversation to related project thread.
@satyaarthchhabra the import here is incorrect, it should be @lh-toolkit/fhir-appointment/fhir-appointment.js there is an extra /, If you remove the extra backslash it should work properly.
However I did not encounter this error on my machine also the build job was successful on gitlab.
I’ll be adding this fix to my current MR.
on the first thaught i also asumed this was the error when i removed the / then also error remain the same
This can only happen if the workspace packages are not installed.
After bootstrapping the packages, the node modules must contain the @lh-toolkit directory with the different packages. The issue could only be caused by uninitialised git submodule which should not happen if cloning is done recursively.
no issue now thanks for your cordination in helping me set up my environment
Thank you, Shashwat I have got it running. As I am working on it, feel free to let me know if you need help with UI/UX work for a specific component.
@sunbiz I have edited this MR according to your comment. This component will be required for a couple of screens that I plan to implement this week , can you please review this before other open MR’s… Thanks!!
Looks good… merged! Please resolve any conflicts in other MRs
1 Like
@sunbiz can you please review this MR before others…
I’ve fixed the test job fail in the medication request MR.