Assert, assertEquals e assertNotEquals: Quando e Como Usá-los em Testes de Unidade

Entendendo: System.assert, System.assertEquals e System.assertNotEquals

Entendendo LightningElement, track, api e wire no LWC: Implementações Avançadas e Melhores Práticas

<h2>Introdução</h2>
O scroll infinito é uma técnica de carregamento de dados muito utilizada em aplicações web, principalmente em listas ou feeds infinitos. No Salesforce, podemos implementar esta técnica utilizando o Lightning Web Components (LWC). Neste artigo, vamos explorar como criar um scroll infinito em LWC com um exemplo prático e fornecer dicas de otimização.
<h2>Desenvolvimento</h2>
<h3>Preparação do Ambiente</h3>
Antes de começar, precisamos criar um novo componente LWC. Para isso, execute os seguintes comandos no terminal:
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="bash" data-theme="github-dark"><code data-language="bash" data-theme="github-dark" style="display: grid;">sfdx force:lightning:component:create --type lwc -n ScrollInfinito -d ScrollInfinito</code></pre></figure>
Este comando criará um novo componente LWC chamado <code>ScrollInfinito</code> dentro da pasta <code>ScrollInfinito</code>.
<h3>Criando o Componente</h3>
Agora, vamos criar o componente <code>ScrollInfinito</code>. No arquivo <code>ScrollInfinito.html</code>, adicione o seguinte código:
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="html" data-theme="github-dark"><code data-language="html" data-theme="github-dark" style="display: grid;">&#x3C;template>
 &#x3C;div class="scroll-container">
 &#x3C;ul>
 {#for (item in items)}
 &#x3C;li>{item.Name}&#x3C;/li>
 {/for}
 &#x3C;/ul>
 &#x3C;/div>
&#x3C;/template></code></pre></figure>
Este código cria um container com uma lista de itens. Vamos agora criar a lógica para carregar os itens.
<h3>Carregamento de Dados</h3>
No arquivo <code>ScrollInfinito.js</code>, adicione o seguinte código:
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="javascript" data-theme="github-dark"><code data-language="javascript" data-theme="github-dark" style="display: grid;">import { LightningElement, api, wire } from 'lwc';
import { getRecords } from 'lightning/ui';
import { NavigationMixin } from 'lightning/navigation';
 
export default class ScrollInfinito extends NavigationMixin(LightningElement) {
 @api items = [];
 @api totalCount = 0;
 @api pageSize = 10;
 @api offset = 0;
 
 connectedCallback() {
 this.loadItems();
 }
 
 loadItems() {
 getRecords({
 objectApiName: 'Account',
 listViewApiName: 'AllAccounts',
 listViewParams: {
 pageSize: this.pageSize,
 offset: this.offset
 }
 })
 .then(response => {
 this.items = response.records;
 this.totalCount = response.totalCount;
 })
 .catch(error => {
 console.error(error);
 });
 }
 
 handleScroll(event) {
 const { offsetHeight, scrollHeight, scrollTop } = event.target;
 if (scrollTop + offsetHeight >= scrollHeight) {
 this.loadMoreItems();
 }
 }
 
 loadMoreItems() {
 this.offset += this.pageSize;
 this.loadItems();
 }
}</code></pre></figure>
Este código utiliza o método <code>getRecords</code> para carregar os itens e o método <code>handleScroll</code> para detectar quando o usuário alcançou o fim da lista. Quando isso ocorre, o método <code>loadMoreItems</code> é chamado para carregar mais itens.
<h3>Estilização</h3>
Para melhorar a aparência do componente, vamos adicionar estilização ao arquivo <code>ScrollInfinito.css</code>:
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="css" data-theme="github-dark"><code data-language="css" data-theme="github-dark" style="display: grid;">.scroll-container {
 height: 300px;
 overflow-y: auto;
}
 
li {
 padding: 10px;
 border-bottom: 1px solid #ccc;
}
 
li:last-child {
 border-bottom: none;
}</code></pre></figure>
Este código define a altura do container e estiliza a lista de itens.
<h3>Implementação</h3>
Agora que temos o componente pronto, podemos implementá-lo em uma página LWC. Crie um novo arquivo <code>app.html</code> e adicione o seguinte código:
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="html" data-theme="github-dark"><code data-language="html" data-theme="github-dark" style="display: grid;">&#x3C;template>
 &#x3C;c-scroll-infinito>&#x3C;/c-scroll-infinito>
&#x3C;/template></code></pre></figure>
Este código importa o componente <code>ScrollInfinito</code> e o renderiza na página.
<h2>Implementação</h2>
Agora que temos o componente pronto, vamos implementá-lo em uma página LWC. Crie um novo arquivo <code>app.html</code> e adicione o seguinte código:
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="html" data-theme="github-dark"><code data-language="html" data-theme="github-dark" style="display: grid;">&#x3C;template>
 &#x3C;c-scroll-infinito>&#x3C;/c-scroll-infinito>
&#x3C;/template></code></pre></figure>
Este código importa o componente <code>ScrollInfinito</code> e o renderiza na página.
<h2>Conclusão</h2>
Neste artigo, aprendemos como criar um scroll infinito em LWC com um exemplo prático. O scroll infinito é uma técnica importante para melhorar a experiência do usuário em aplicações web e pode ser facilmente implementada em LWC.
Referências
<ul>
<li><a href="https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.apex_get_records">LWC Documentation: getRecords</a></li>
<li><a href="https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.navigation_mixin">LWC Documentation: NavigationMixin</a></li>
</ul>

Code Referral.

Como Fazer um Scroll Infinito em LWC: Guia Detalhado

Compartilhe:

Categorias

Post Suggestions

Assert, assertEquals e assertNotEquals: Quando e Como Usá-los em Testes de Unidade

Entendendo: System.assert, System.assertEquals e System.assertNotEquals

Entendendo LightningElement, track, api e wire no LWC: Implementações Avançadas e Melhores Práticas